JS Mastery

Were you able to complete the previous Active Lesson? We’ll be doing almost the same here

Task 🎯

Your task is to create a completely functional “People” page

Example 🧩

Visit the Figma Design and see how the feature should look like

Resources 📖

Must Play ❤️‍🔥

I would recommend all of you to play this Flexbox game. This is really your gateway to building high-class responsive websites. If you master flex, you can flex anything!

Of course, that doesn't mean we won’t grid. Luckily, there is another game on that too. Definitely worth a shot. Do try the Grid Garden

Hint 💡

Not sure how to get started with this? We’re here for you.

Let’s take it step by step!

Follow the ritual; ask yourself —

What is expected (The Output)?

We want a new page where we’ll show the list of all users coming from the Appwrite database

What do we need in order to build that?

A new page
User card
Loader to show the status while doing the fetch
Appwrite function to get the users
….?

So let’s start by setting up the page and the UI,

Setup the Route
- Create a new component inside the pages directory
- Go to the App.jsx and configure the created component with a new route, say, all-users. Read the React Router Documentation for more
```
1<Route path='/all-users' element={<AllUsers />} />
```
Implement the UI Anything in your mind? Something after seeing the Figma design? Yes, the user card is the same!! And, of course, we can and should reuse it. So inside the component,
- Create the head text by following the same styles we used for headings of other pages
- Reuse the user card we have created before and map it with some data for now. You can choose anything between flex to grid. If you’re going to choose grid, you have to be careful with the way you want it, as for grid won’t adjust itself depending on the screens. You’ll have to define what should happen for necessary breakpoints using a media query.

Now time to integrate the database data

Modify the React Query Remember the function we had created for showing the creators on the Home page? Were you able to reuse it? Do you think we can reuse it? Well yes. How? Let’s see
- We want to limit the data on the home page but not on all users' pages. This means the limit has to be optional, right?
- Create a new argument limit and pass it to the react query we had created on the Home page
```
1const {
2    data: creators,
3    isLoading: isUserLoading,
4    isError: isErrorCreators,
5  } = **useGetUsers(10)**;
```
  Over here, 10 is an argument
- Define the parameter in useGetUsers. Remember it has to be optional
```
1**export const useGetUsers = (limit?: number) => {**
2  return useQuery({
3    queryKey: [QUERY_KEYS.GET_USERS],
4    queryFn: getUsers,
5  });
6};
```
- Pass that parameter to getUsers function
```
1export const useGetUsers = (limit?: number) => {
2  return useQuery({
3    queryKey: [QUERY_KEYS.GET_USERS],
4		**queryFn: () => getUsers(limit),**
5  });
6};
```

We can now define this limit parameter and render the queries according to that.

Modify the Appwrite API
- Define the parameter for the getUsers
```
1**export async function getUsers(limit?: number) {**
2  try {
3    const users = await databases.listDocuments(
4      appwriteConfig.databaseId,
5      appwriteConfig.userCollectionId,
6      [Query.orderDesc("$createdAt"), Query.limit(10)]
7    );
8
9    if (!users) throw Error;
10
11    return users;
12  } catch (error) {
13    console.log(error);
14  }
15}
```
  See the third argument to the listDocuments is basically an array containing the list of queries. Can we form an array depending on a condition such that, If there is a limit, we’ll send the array with both queries If no limit, we’ll send the array with only one query, i.e., orderDesc Can you try that? Give it a shot

After setting the condition correctly to obtain the desired array and using it as an argument for the listDocuments function, you're good to go. Just invoke the same hook as previously done, and provide the value as an input to check if it's functioning as expected.

Feel free to experiment with it 👌

These challenges or features are more logic-oriented, and there may be other solutions. So take your time, think carefully, develop your logical abilities, and give it a try.

We believe in your capabilities ❤️

Snapgram All User

Task 🎯

Example 🧩

Resources 📖

Must Play ❤️‍🔥

Hint 💡