Aplicación de Todolist usando React y Fetch

Debes hacer este ejercicio después de la aplicación de la TODO list con React porque la primera parte es el boilerplate perfecto para comenzar a usar APIs.

Para esta segunda parte, sincronizaremos nuestra lista de tareas con una base de datos real, usando la siguiente RESTful y API pública realizada para este ejercicio.

🔗 Clic aquí para acceder a la documentación de la API del TODO-list.

👉 Aqui hay un video explicando como usar el TODO-List API con Fetch.

Todo este ejercicio se trata de la programación asíncrona porque las interacciones desde y hacia el servidor deben realizarse de forma asíncrona. De esa manera, el usuario no tiene que esperar a que llegue la información.

🌱 Cómo comenzar este proyecto

No clones este repositorio porque vamos a usar una plantilla diferente.

Recomendamos abrir el react boilerplate usando un entorno de desarrollo como Codespaces (recomendado) o Gitpod. Alternativamente, puedes clonarlo en tu computadora local usando el comando git clone.

Este es el repositorio que necesitas abrir o clonar:

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

👉 Por favor sigue estos pasos sobre cómo comenzar un proyecto de programación.

💡 Importante: Recuerda guardar y subir tu código a GitHub creando un nuevo repositorio, actualizando el remoto (git remote set-url origin <your new url>) y subiendo el código a tu nuevo repositorio usando los comandos add, commit y push desde la terminal de git.

📝 Instrucciones:

• Haz que tu TODO List se sincronice con la API de backend cada vez que se agregue o elimine una tarea.
• Agregue un botón de limpieza de todas las tareas que eliminará toda la lista del servidor y actualizará la lista vacía en el front-end.

Hay 3 momentos críticos en la línea de tiempo de la aplicación (denominado tiempo de ejecución) para centrarse en su integración:

• Después de que la lista se carga vacía por primera vez (useEffect): Debes obtener (GET) los datos de la API y actualizar las tareas cuando la información finalmente llegue.
• Cuando se agrega una nueva tarea: Debes PONER (PUT) la nueva lista en el servidor.
• Cuando se elimina una tarea: Debes PONER (PUT) la nueva lista en el servidor.

💡 Pista:

Utiliza el siguiente fetch call para sincronizar tus tareas con el servidor cada vez que haya un cambio en la lista.

1fetch('https://playground.4geeks.com/todo/user/alesanchezr', {
2      method: "PUT",
3      body: JSON.stringify(todos),
4      headers: {
5        "Content-Type": "application/json"
6      }
7    })
8    .then(resp => {
9        console.log(resp.ok); // Será true si la respuesta es exitosa
10        console.log(resp.status); // El código de estado 200, 300, 400, etc.
11        console.log(resp.text()); // Intentará devolver el resultado exacto como string
12        return resp.json(); // Intentará parsear el resultado a JSON y retornará una promesa donde puedes usar .then para seguir con la lógica
13    })
14    .then(data => {
15        // Aquí es donde debe comenzar tu código después de que finalice la búsqueda
16        console.log(data); // Esto imprimirá en la consola el objeto exacto recibido del servidor
17    })
18    .catch(error => {
19        // Manejo de errores
20        console.log(error);
21    });

Para cualquier otra solicitud, debes cambiar las variables en el fetch: La URL, el método y el payload.

Este y otros proyectos son usados para aprender a programar por parte de los alumnos de 4Geeks Academy Coding Bootcamp realizado por Alejandro Sánchez y muchos otros contribuyentes. Conoce más sobre nuestros Cursos de Programación para convertirte en Full Stack Developer, o nuestro Data Science Bootcamp.