Sireus / react_todo-app

React ToDo App

Implement a simple TODO app working as described below.

If you are not sure about how a feature should work just open the real TodoApp and look how it works there

1. Use TodosContext to store and update the todos.
2. Implement TodoApp component with an input field to create new todos on submit (Enter). Each item should have:
   • id - unique identifier (+new Date() is good enough)
   • title - the text of a todo
   • completed - current status (false by default)
3. Show the number of not completed todos in TodoApp;
4. Implement TodoList component to display a list of todos;

   <TodoList items={todos} />

5. Implement TodoItem component with ability to toggle the completed status using a checkbox.
   • move a li tag inside the TodoItem;
   • add class completed if todo is completed;
6. Add the ability to toggle the completed status of all the todos with the toggleAll checkbox.
   • toggleAll checkbox is active only if all the todos are completed;
   • if you click the checkbox all the items should be marked as completed/not completed depending on toggleAll checked;
7. Create TodosFilter with data-cy="todosFilter" component to switch between All/Active/Completed todos (add it to the App)
   • add the Status enum with the required values;
   • href should be #/, #/active or #/completed)
8. Add ability to remove a todo using the destroy button (X).
9. Add ability to clear completed todos - remove all completed items from the list. The button should contain text Clear completed in it.
   • It should be visible if there is at least 1 completed item in the list.
10. Hide everything except the input to add new todo if there are no todos. But not if todos are just filtered out.
11. Make inline editing for the TODO item
    • double click on the TODO title makes it editable (just add a class editing to a li)
    • DON'T add htmlFor to the label!!!
    • Enter saves changes
    • Ecs cancels editing (use onKeyup and event.key === 'Escape')
    • Todo title can't be empty! If a user presses Enter when the title is empty, this todo should be removed.
    • (*) save changes onBlur
12. Save state of the APP to the localStorage using the name todos for the key (Watch Custom Hooks lesson)
    • use JSON.stringify before saving and JSON.parse on reading

If you want to implement styles yourself

• Font: 'helvetica neue'
• Font sizes to use: 100px, 24px, 14px
• implement arrow by rotating '❯' symbol
• Use '✕' symbol to remove TODO item on hover
• checked
• unchecked

Instructions

• Implement a solution following the React task guideline.
• Use the React TypeScript cheat sheet.
• Open one more terminal and run tests with npm test to ensure your solution is correct.
• Replace <your_account> with your Github username in the DEMO LINK and add it to the PR description.