Create Drawer Form

[Nameless7631]

AT A GLANCE

LoFi is here! 🎉

Your task is to create a sliding drawer that contains a form used to create a Quota based on the following LoFi along with ensuring the necessary frontend updates propagate to the backend. The goal here is focus on functionality and not how it looks.

CONTEXT

You will use the routes we have built as a data pipeline, allowing your component to post data to the backend.

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 quotaDrawer.jsx in src/components/
• Using Chakra's Drawer component, mirror LoFi. Form submission should successfully hit the backend POST route and create a new quota (double check that the new quota is in the DB).
• Note that this component will eventually also be used for editing a quota, not just creating, so try your best to make the code clean and versatile. Hint: depending on the props that are passed in, maybe dictate whether the component uses a POST vs PUT route. For now though, you're only required to ensure that POST(creating a quota) works.
• Feel free to use Playground.jsx as a sandbox to test your components. For this component specifically, we recommend that you create a random 'create quota' button that opens the drawer.

LEARNING GOALS

What's Important To Understand:

• How to use backend provider to access our backend.
• How to use our routes in the frontend
• How state is lifted up in React

RESOURCES

• LoFi
• Drawer