[Track 5/8] [FE / INT] Users List

[taki-tiler]

Login is done. Now, let's make the user list UI.

Step 1/3 - Users List Frontend (FE)

Estimated time: 3 hours

The blank page you created will list all registered users on our server. Each list cell (or list row) should contain:

• user name
• user email

Like the login page, you can layout your users list page the way you want. Just remember to keep things simple.

Note: In order to test the frontend, it's a common practice to fill your view components with some fake data. Since you don't have the real data yet, you can create a fake, static user list to test your screen.

[JuliaCMuniz]

Finish

[taki-tiler]

Step 2/3 - Users List Integration

Estimated time: 4 hours

Let's get some real data.

Your task here is to get the real users list from the server.

Authentication

Every other request except Login demands an authorization token to be made. This is one way of guaranteeing user authentication. Some reference if you want to know more.

So, on the next integration tasks, you should add a header on your HTTP Request:

Authorization: token_that_you_have_stored

User list request

The GraphQL query used for users list is called users. The query documentation can be found on GraphiQL Document Explorer.

You'll notice that this request returns a particular kind of structure (count, nodes, pageInfo). This is one way of doing pagination. You'll explore more about this on next step. For now, send the query with no parameters and show the data returned on nodes field.

[JuliaCMuniz]

Finish

[taki-tiler]

Step 3/3: Challenge: Add pagination to the list

Estimated time: 4 hours

Generally, lists with a minimum amount items are paginated. We currently use 3 types of pagination:

• Classical - displaying page numbers, eventually a next and previous button
• Infinite list with next button - at the end of the list, a button with "load more"
• Infinite scroll - the app automatically loads the next page of the user is near the end of the list

That said, your challenge is to add the pagination into the list you've just implement: the users list. Choose one of the implementation types above.

[JuliaCMuniz]

Next

[taki-tiler]

Click here for your next track