joaogsousa / onboard

0 stars 0 forks source link

[Track 5] [FE / INT] Users List #6

Open taki-tiler[bot] opened 5 years ago

taki-tiler[bot] commented 5 years ago

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

Step 1 - Users List Frontend (FE)

Estimated time: 3 hours

This screen will list all registered users. Each list cell (or list row) should contain:

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, is 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.

joaogsousa commented 5 years ago

finish

taki-tiler[bot] commented 5 years ago

Step 2 - 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 node field.

joaogsousa commented 5 years ago

Finish

taki-tiler[bot] commented 5 years ago

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:

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.

joaogsousa commented 5 years ago

Finish

taki-tiler[bot] commented 5 years ago

Click here for your next track