Quota Table Progress Bar

[Satchel05]

AT A GLANCE

LoFi is here! 🎉

Your task is to create the quota progress bar found in LoFi along with ensuring the necessary frontend updates propagate to the backend.

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 progressBar.jsx in src/components/
• Using Chakra's Progress component, mirror LoFi. Incrementing and decrementing from the quota should accurately reflect on the frontend and the backend.
• Icons are sourced from here.
• Note that this component will eventually become a child of quotaTable.jsx which another pair is working on this sprint cycle. Because of this, your component will receive { currentProgress, setCurrentProgress } props which follow the useState pattern in React. Ie; you can assume this line will eventually be found in the parent const [currrentProgress, setCurrentProgress] = useState()
• Feel free to use Playground.jsx as a sandbox to test your components. For this component specifically, we recommend that you simulate the behavior of a parent by including this line const [currrentProgress, setCurrentProgress] = useState() in your initial testing. Try messing around with the values you pass into the useState as defaults. ie; const [currrentProgress, setCurrentProgress] = useState(5)

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
• Progress
• Lifting up State