React dynamic list of TODOs

See 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;
2. Show the Loader when waiting any data from the server;
3. Use the wait function given in the api.ts to check if the 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

• 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.