elizabeth-bing / full-stack

The Wonderful World of Widgets

This exercise reverses the roles from yesterday: today the API has been (partially) built for us. Our job is to build the React front end that consumes the API (using the node module superagent), and store the resulting data into component state.

Setup

0. Installation and migrations

• Clone this repo and cd into the new directory

• Install packages, run migrations and seeds, and start the dev server with npm run dev

  Tip

  Commands might look like this:

  npm install
  npm run knex migrate:latest
  npm run knex seed:run
  npm run dev

• Navigate to http://localhost:3000

---

Laying the foundations

1. Getting familiar with the code base

• Take a look around the project to make sure you're familiar with the layout

  Tips

  • Take particular note of what is in your client folder and the setup of the server routes in the back end
  • Investigate the shape of the data in the database

2. Setting up the <App> component

The widget data is being stored in a database (on our server side), so we'll have to make an API call to retrieve the data.

• Add a useState hook to the <App> component, so we can store widgets in component state. Make the initial value an empty array

• Also add a useEffect hook to <App>

  More about <useEffect>

  useEffect accepts a function as its first parameter. Eventually we will call the API function from here, but for now just have this function do a console.log('using the effect')

  • Remember to pass an empty array to useEffect as the second parameter (so that the function only runs once - when the component mounts)
  • Refresh the app in your browser the with DevTools console open. Make sure you can see your useEffect message

---

Building up the stack

3. Connecting the server API to the client API

• Using Insomnia, test that the existing GET route for widgets is working, and see what data it returns

  More about the GET route

  Looking in our server folder, we can see that a database function called getWidgets has already been built in db/db.js. A GET route using that DB function is also in place in routes/widgets.js.

  Test that the route is working (and see what data it returns) by making a GET request to http://localhost:3000/api/v1/widgets/ from Insomnia.

• Using the getWidgets function in apiClient.js and the superagent library, make a GET request to '/api/v1/widgets/', just like we did with Insomnia

  More about the getWidgets request

  This time looking in the client folder, you'll find a getWidgets function in apiClient.js. Use superagent to make a GET request to '/api/v1/widgets/'. If all goes well, it should be returning just the response body (which is the JSON data being sent from our server - we don't need the rest of the HTTP response data).

• Import this getWidgets function from apiClient.js into App.jsx

4. Connecting the client API to the user interface (UI)

• In the function you passed to useEffect, call the getWidgets function

  More about getWidgets inside useEffect

  • Superagent uses a promise-based interface, so you will need to chain a .then() block after this
  • Inside your .then() block, console.log the result of getWidgets
  • Refresh the app in your browser again. Make sure you can see the array of widget data in the console

• Remove the console.log and instead use the setWidgets function (from your useState) to update state with the widget data from the API

• Use the React Dev Tools to check that state updates as you expect

5. Updating the UI to consume the data

• Modify the jsx your component returns so that it displays the widgets from the component state

  Tip

  Perhaps you could use a .map here to render a new <Widget> component for each widget.

---

Full Stack

These next steps will be full stack, requiring you to make changes to both the front and back end.

6. Adding, deleting, and updating widgets

• Add the ability to add a widget

  More about adding a widget

  The steps you might take to complete this could be:

  • Create a POST route on the server side in widgets.js. Test you can get a response for it in Insomnia
  • Create the database function to add a new widget. Call this function in your route and test it works in Insomnia
  • Create an addWidget function in apiClient.js that will make a POST request to the API route you just built
  • Create a new <AddWidget> component containing a form. Import the addWidget function from apiClient.js and hook it up to your form's submit handler
  • Once your widget has been added, have your widget list refresh so the new widget is visible. Perhaps this could involve reusing the getWidgets API function, or thinking about the data you return from your POST route...
  • Create an "Add Widget" button in <App> to conditionally render your <AddWidget> form

• Add the ability to delete a widget (HTTP DELETE)

• Add the ability to update a widget (HTTP PATCH)

7. Enhancing widget info

• Extend the database schema to include a ratingfor each widget

  More about widget ratings

  Add a rating field so we know how good those widgets really are. This will also need to be added into what is displayed, and also onto the fields of the add form.

8. Increasing maintainability

• Refactor your code into separate components (if it isn't already)

• Write tests for your components