- Fork the repository
- Clone it.
cd
into the project directory.- Install the required packages for the task.
$ yarn install
5. Install axios
$ yarn add axios
6. Run the project
$ yarn start
We've created a fancy API server that can be accessed at https://the-index-api.herokuapp.com/api/
. Right now the data in our application is in an array called authors
that lives outside the component:
- Add an empty
authors
array to your state. - Send it to
AuthorList
as a prop. Everything should disappear from the page! - Import
axios
intoApp.js
. - Use
axios
to make aget
request fromhttps://the-index-api.herokuapp.com/api/authors/
. This request should happen insidecomponentDidMount
.
(Make sure you're catching any errors!) - After a-waiting for the request to finish, assign the array of data returned by the request to the
state.authors
.
When you refresh your application, you should see a momentary pause while the data is being fetched then you should find some new authors in your application! - You can now delete the data import at the top of the file!
In fact, go ahead and delete the filedata.js
entirely. It's useless to us now. Our data is coming from the internet! Wooooow!
Right now our application is just completely blank while the data is being loaded. This is terrible UX! If a user has a slow connection they could be staring at a blank screen for an extended period of time.
What we need is a temporary loading screen while the data is being fetched.
- Give
App
a newstate
property calledloading
and set it initially totrue
. - Set the
loading
property tofalse
after the authors have been retrieved successfully. - Use
this.state.loading
to choose between rendering theAuthorList
component OR JSX that indicates the page is loading. You can make this "loading" view as simple or as complex as you like.
You've probably noticed that the /api/authors/
endpoint returns an array of author objects like this:
{
"id": 4,
"first_name": "Margaret",
"last_name": "Atwood",
"imageUrl": "someurl.com",
"books": [
19,
21,
18,
20
]
}
The books
array only contains the id
s of the books, not the books themselves.
You can use this new endpoint to fetch a single author:
-
Change
selectAuthor
so that instead of updatingcurrentAuthor
directly, it makes anaxios
request to get the author from the detail URL. Use the returned author object to update the state. -
Make sure you set the
loading
state to true before you make the request and set it back tofalse
after the request is complete. -
Now you can finish filling in the JSX in
BookRow
to show the book's authors.
(hint: you're going to need to.map
over the book's authors to show all authors of a book)
The author details for a single author should look something like this:
- Push your code.