Create Users Table Page

[ShyelSingh]

AT A GLANCE

You'll be making a new page with a table to display user information

CONTEXT

At the moment the NPO has no way of seeing each user who's signed up along with their contact information and related project. Through this sprint, you will be making a new page that contains a table to display this information using the previously created API endpoints

TECHNICAL DETAILS

• In client/src/components create a new file named users.jsx
• Create a chakra table component that will hold the name, email, and npo name of each user
• Implement our GET user endpoint within a useEffect that will fetch all of these
• Use a separate GET to obtain the npo name from the id that the user table will receive
• Map each piece of data into their column allowing users to see it in the table
• Go back to client/src/App.tsx and add this new component to our /users route
• Add this link to our navbar component created earlier

LEARNING GOALS

What's Important To Understand:

• Using API endpoints within frontend development
• using useEffect to fetch information
• Chakra Tables and their use cases

RESOURCES

• Chakra tables
• useEffect