Solution for a challenge from Devchallenges.io.
This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.
- useId cannot be used inside a callback.
- debatable if switch statement used here needs a default case
- using innerText to get the value of the filter is not preferable to using a name property on each button
- Checkbox functionality & filtering causes many headaches. Simple solution is to limit checking only when on 'all' filter.
- Don't want to remove checkboxes or disable them.
- working around blocked local storage is not easy
- focusing the all filter prevents focusing of the input field.
- I am working on improving my testing skills. I had a few issues with testing the submit event. It can't be directly mocked (Stack Overflow) so you have to test the result of the submit event (is it in the document etc).
- Testing when something is conditionally rendered is something I need to look into.
- Testing is made easier by setting initial todos to be two todos (one completed and one active) versus having both active like devchallenges screenshot
- It probably would have made writing tests easier if app was broken up into smaller components.
- Could convert checkboxes into accessible style buttons like I have done before
- Local Storage implementation is commented out although it works.
- Steps to replicate a design with only HTML and CSS
- Css Reset - use this css reset as starting point almost every project
- Stack Overflow - change value of object in array onClick
- Stack Overflow - change value of object in array onClick
- Stack Overflow - update objects inside arrays
- Blog - update properties of objects in arrays
- React Docs - updating arrays in state
- Blog - local storage
- Blog - unit testing react
- Stack Overflow - is map really the best way to update an object in an array?
- Stack Overflow - filtered todolist
- YouTube - filtering todos
- Stack Overflow - switch always need a default case
- Blog - autoFocus
- Stack Overflow - local storage & hooks
- Go Make Things - update local storage vanilla js
- Github - todo I looked at that gave me some ideas to fix my local storage problems
- Blog - testing react components
- React Testing Library - queries
- Stack Overflow - test submit with jest and rtl
- Stack Overflow - checkbox testing rtl
- YouTube - checkbox test scenarios
- Clue Mediator - testing a checkbox
- Stack Overflow - testing props