User Directory Table Part 1

[Nameless7631]

AT A GLANCE

LoFi is here! 🎉

Your task is to create the User Directory Table found in LoFi along with the necessary data fetching functionality.

CONTEXT

You will use the routes we have built as a data pipeline, allowing the frontend to receive and display dynamically generated information.

TECHNICAL DETAILS

• Switch to main branch and pull the most up to date code.
• Our branch names were a little haphazardly named last time (our fault). In order to have more consistent and professional branch names, please click "Create a branch for this issue..." under "development" in the right sidebar on this page. It should automatically populate your branch name with a name of this format: 23-create-crud-routes-tags-route. Importantly, also git checkout this new branch locally in VSCode. You will need to git pull again to get local in sync with the new branch you just created remotely on GitHub.
• Create userTable.jsx in src/components/
• Using Chakra's Table component, pull User data from the DB and mirror LoFi, ignoring the styling of the column attributes. Keep everything as plain text for now. For now leave out the activity status and 'Last Active' column.
• Because there is no design for how editing should look, leave the edit button functionless, however the delete button should work. After clicking the delete button, the table should properly update in the frontend.
• Feel free to use Playground.jsx as a sandbox to test your components.

LEARNING GOALS

What's Important To Understand:

• Data fetching patterns in React using useEffect
• How to use backend provider to access our backend.
• How to use our routes in the frontend

RESOURCES

• UseEffect
• LoFi
• Table