Todolist Application Using React and Fetch

This exercise is meant to be completed after the TODO list React application because the first part is the perfect boilerplate to start using API's.

For this second part, we will sync our to-do list with a real database, using the following RESTful and public API made for this exercise.

🔗 Click here to access to the TODO-list API documentation.

This whole exercise is about asynchronous programming because the interactions from and to the server need to be done async. That way, the user does not have to wait for the information to arrive.

1https://github.com/4GeeksAcademy/react-hello

📝 Instructions:

• Make your to-do list sync with the backend API every time a task is added or deleted.
• Add a clean all tasks button that will DELETE the user from the server and empty the todo list on the front-end.

There are 3 critical moments in the application timeline (a.k.a. The runtime) to focus on while integrating this API:

• After the list loads empty for the first time (useEffect): You should fetch (GET) the data from the API and update the tasks when the information finally arrives.
• When a new task is added: You should PUT the new list on the server.
• When a task is removed: You should PUT the new list on the server.

💡 Hint:

Use the following fetch call to create a new task on the server. Remember to first create a new user.

1fetch('https://playground.4geeks.com/todo/todos/alesanchezr', {
2      method: "POST",
3      body: JSON.stringify(todo),
4      headers: {
5        "Content-Type": "application/json"
6      }
7    })
8    .then(resp => {
9        console.log(resp.ok); // Will be true if the response is successful
10        console.log(resp.status); // The status code=201 or code=400 etc.
11        console.log(resp.text()); // Will try to return the exact result as a string
12        return resp.json(); // (returns promise) Will try to parse the result as JSON and return a promise that you can .then for results
13    })
14    .then(data => {
15        // Here is where your code should start after the fetch finishes
16        console.log(data); // This will print on the console the exact object received from the server
17    })
18    .catch(error => {
19        // Error handling
20        console.error(error);
21    });

For any other request, you have to keep changing the same variables on the fetch: The URL, the method and the payload.

This and many other projects are built by students as part of the 4Geeks Academy Coding Bootcamp by Alejandro Sanchez and many other contributors. Find out more about our Full Stack Developer Course, and Data Science Bootcamp.