A diary app to track your daily activities, and how you feel about them. Feel Tracker will provide you with a day, week, and month view of the activities you want to track, as well as tranding and statistics.
Consider using react-modal to implement this feature.
Generic Modal
Since all the modals in the system have a common design, it's best to have a generic component to avoid code duplication.
[ ] Add a ModalPopup component to src/components/generic
[ ] The component should have the following props:
title: string
primaryButtonText: string
secondaryButtonText: string
onButtonClick: (button: 'primary' | 'secondary' | 'close') => void
You may also propagate the props of a modal component from a library if you choose to use one.
Filter Modal
[ ] Add a FilterModal component to src/components/shared. Use the generic ModalPopup component to implement it.
[ ] The component should use the CategoriesContext to show a list of categories.
[ ] Each category shown has a checkbox, with a special checkbox of "All Categories" at the top, checked by default.
[ ] Checking any category would make the "All Categories" unchecked.
[ ] Checking "All Categories" would uncheck any other category and set selectedCategories in the context to null/undefined (or any value you choose to indicate everything is selected).
[ ] Clicking "Reset" should revert the state to "All Categories".
Requirements
Consider using react-modal to implement this feature.
Generic Modal
Since all the modals in the system have a common design, it's best to have a generic component to avoid code duplication.
ModalPopupcomponent tosrc/components/generictitle: stringprimaryButtonText: stringsecondaryButtonText: stringonButtonClick: (button: 'primary' | 'secondary' | 'close') => voidYou may also propagate the props of a modal component from a library if you choose to use one.Filter Modal
FilterModalcomponent tosrc/components/shared. Use the genericModalPopupcomponent to implement it.CategoriesContextto show a list of categories.selectedCategoriesin the context to null/undefined (or any value you choose to indicate everything is selected).Design: