As a User
I want to filter my transactions by categories
so that I can have a better overview over my transactions
Description
Acceptance criteria
[ ] on the transactions page, the user can filter their transactions
[ ] when the user clicks e.g. 'salary', all transactions with the category 'salary' are shown
[ ] the same logic will apply to any other category listed in the dopdown menu
Tasks
[ ] Create a dropdown component that displays the list of categories available for the transactions. The dropdown should be placed on the transactions page above the transaction list.
[ ] When the user selects a category from the dropdown, filter the transaction list to show only the transactions that belong to that category. Use the category property of each transaction object to determine the match.
[ ] When the user selects the “All” option from the dropdown, show all the transactions in the transaction list without any filtering.
[ ] Use the useState and useEffect hooks to manage the component state and the data updates. The component state should store the selected category and the filtered transactions. The data updates should occur whenever the selected category changes or the transaction list changes.
[ ] Use the localStorage to store and retrieve the transaction list data. The transaction list data should be an array of objects, each with properties such as amount, date, category, and description.
Title
Organize List Items
Value proposition
As a User I want to filter my transactions by categories so that I can have a better overview over my transactions
Description
Acceptance criteria
Tasks
[ ] Create a dropdown component that displays the list of categories available for the transactions. The dropdown should be placed on the transactions page above the transaction list.
[ ] When the user selects a category from the dropdown, filter the transaction list to show only the transactions that belong to that category. Use the category property of each transaction object to determine the match.
[ ] When the user selects the “All” option from the dropdown, show all the transactions in the transaction list without any filtering.
[ ] Use the useState and useEffect hooks to manage the component state and the data updates. The component state should store the selected category and the filtered transactions. The data updates should occur whenever the selected category changes or the transaction list changes.
[ ] Use the localStorage to store and retrieve the transaction list data. The transaction list data should be an array of objects, each with properties such as amount, date, category, and description.