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.
-
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
-
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
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 storewidgets
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 aconsole.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
- Remember to pass an empty array to
-
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 calledgetWidgets
has already been built indb/db.js
. A GET route using that DB function is also in place inroutes/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 inapiClient.js
and thesuperagent
library, make a GET request to'/api/v1/widgets/'
, just like we did with InsomniaMore about the
getWidgets
requestThis time looking in the client folder, you'll find a
getWidgets
function inapiClient.js
. Usesuperagent
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 fromapiClient.js
intoApp.jsx
-
In the function you passed to
useEffect
, call thegetWidgets
functionMore about
getWidgets
insideuseEffect
- 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 ofgetWidgets
- Refresh the app in your browser again. Make sure you can see the array of widget data in the console
- Superagent uses a promise-based interface, so you will need to chain a
-
Remove the
console.log
and instead use thesetWidgets
function (from youruseState
) to update state with the widget data from the API -
Use the React Dev Tools to check that state updates as you expect
-
Modify the
jsx
your component returns so that it displays the widgets from the component stateTip
Perhaps you could use a
.map
here to render a new<Widget>
component for each widget.
These next steps will be full stack, requiring you to make changes to both the front and back end.
-
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 inapiClient.js
that will make a POST request to the API route you just built - Create a new
<AddWidget>
component containing a form. Import theaddWidget
function fromapiClient.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
- Create a POST route on the server side in
-
Add the ability to delete a widget (HTTP DELETE)
-
Add the ability to update a widget (HTTP PATCH)
-
Extend the database schema to include a
rating
for each widgetMore 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.
-
Refactor your code into separate components (if it isn't already)
-
Write tests for your components