React Todo App Load Todos

It is the first part of the React Todo App with API. You will implement the final app step by step and use the result of this task in the next tasks.

You are given the markup of the Todo App. Split it into components and implement the functionality saving all the changes to the API.

Here is the working example

❗️❗️❗️ Please implement ONLY todos loading, errors, and filtering. All the rest will be implemented in the next tasks ❗️❗️❗️

General info

register a user by your email here
save the received userId in the App and use it to load todos
log in to the Demo Page with your email
create some todos to see them later in your App
load your todos when the App is loaded (put your userId instead of ???);
```
https://mate.academy/students-api/todos?userId=???
```
hide the list and the footer if there are no todos yet;

The API client is already implemented in the src/utils/fetchClient.ts. Learn it to understand how to interact with the API. If you want to implement it yourself you can delete the fetchClient.

Error messages

In case of any error show the notification with an appropriate message at the bottom

the notification can be closed with the close button (add the hidden class);
automatically hide the notification after 3 seconds;
also hide the notification before any next request;
use a wrong todos URL to test the error;

Filtering todos

Filter todos by status All / Active / Completed:

all is the default value;
use the selected class to highlight a selected link;

If you want to enable tests

open cypress/integration/page.spec.js
replace describe.skip with describe for the root describe

Instructions

Implement a solution following the React task guideline.
Use the React TypeScript cheat sheet.
Replace <your_account> with your Github username in the DEMO LINK and add it to the PR description.