Skip to content

Latest commit

 

History

History
32 lines (27 loc) · 2.17 KB

README.md

File metadata and controls

32 lines (27 loc) · 2.17 KB
Raw

React dynamic list of TODOs

The goal of this task is to teach you:

  • how to work with a not detailed task description;
  • to learn the existing code before you start;
  • to understand tests and why they fail;
  • to try the working page and implement the same behaviour;

Here is the working page

You are given the markup for the App, TodosList, TodoFilter, TodoModal and Loader components. Load data from the API and show it using the given components.

  1. Load the todos when the App is loaded and show them using TodoList (check the code in the api.ts);
  2. Show the Loader when waiting any data from the server (check the components folder);
  3. Check how the wait function is used in the api.ts to ensure that Loader works as expected;
  4. When the Show button is clicked open the TodoModal with a selected todo;
  5. Don't forget to load user details (replace 1 with the actual userId);
  6. Show the Loader while waiting for the user;
  7. x button should close the modal;
  8. The select should filter todos by the completed status: all, completed and active(not completed) todos;
  9. Use the input in the TodoFilter to filter the todos by title;
    • show the x button when the query is entered;
    • the x button should clear the query and reset the todos;

Instructions

  • Install Prettier Extention and use this VSCode settings to enable format on save.
  • 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.