diff --git a/src/content/lesson/react-hooks-explained.es.md b/src/content/lesson/react-hooks-explained.es.md index f5a1731c5..397f0216a 100644 --- a/src/content/lesson/react-hooks-explained.es.md +++ b/src/content/lesson/react-hooks-explained.es.md @@ -260,19 +260,36 @@ const Todos = (props) => { // Inicializa la variable "tasks" como un array vacío y conéctalo a la función setTasks const [ tasks, setTasks ] = useState([]); - // Esta función useEffect se ejecutará solo una vez, cuando el componente finalmente se cargue por primera vez - useEffect(() => - // Aquí busco mis todos de la API - fetch('https://assets.breatheco.de/apis/fake/todos/user/alesanchezr') - .then(r => r.json()) - .then(data => setTasks(data)) // Aquí se actualiza la variable "tasks" con los datos entrantes - , []); - - return ; + // Ésta función encapsula la lógica de traer la lista de todos de la api + // asi como crear una nueva lista si ésta no existe. + const fetchList = async () => { + const endpoint = "https://playground.4geeks.com/todo/users/demo"; + let response = await fetch(endpoint); + if (response.ok) { + // Sila lista se recibe, las task son cargadas con los todos + let data = await response.json(); + setTasks(data.todos);// Aquí se actualiza la variable "tasks" con los datos entrantes + return response.status; + } + if (response.status == 404) { + // Si la lista no se encuentra, debe ser creada con una petición POST + let newList = await fetch(endpoint, { method: "POST" }); + if (newList.ok) setTaks([]); + } + }; + + // Esta función useEffect se ejecutará solo una vez, cuando el componente finalmente se cargue por primera vez + useEffect(() => { + // here I fetch my todos from the API + fetchList(); + },[] // <---- thanks to this empty array the use effect will be called only once + ); + return ; } + ``` -> ☝ Revisa el código en profundidad y la demostración en vivo [haciendo clic aquí](https://codesandbox.io/s/xenodochial-varahamihira-egh86?fontsize=14). +> ☝ Revisa el código en profundidad y la demostración en vivo [haciendo clic aquí](https://codesandbox.io/p/sandbox/using-the-useeffect-to-load-data-on-component-mount-forked-8gprc3). ## Otras lecturas diff --git a/src/content/lesson/react-hooks-explained.md b/src/content/lesson/react-hooks-explained.md index 528cf389d..a507218b9 100644 --- a/src/content/lesson/react-hooks-explained.md +++ b/src/content/lesson/react-hooks-explained.md @@ -261,19 +261,37 @@ const Todos = (props) => { // Initialize the "tasks" variable to an empty array and hook it to setTasks function const [ tasks, setTasks ] = useState([]); - // This useEffect will run only one time, when the component is finally loaded the first time - useEffect(() => - // Here I fetch my todos from the API - fetch('https://assets.breatheco.de/apis/fake/todos/user/alesanchezr') - .then(r => r.json()) - .then(data => setTasks(data)) // Here it re-setted the variable "tasks" with the incoming data - , []); - - return ; + // This function encapsulates the logic of fetching the todo list + // and creating a new one if the list doesn't exists + const fetchList = async () => { + const endpoint = "https://playground.4geeks.com/todo/users/demo"; + let response = await fetch(endpoint); + if (response.ok) { + // If the list is fetched, the task gets loaded with the todos + let data = await response.json(); + setTasks(data.todos); + return response.status; + } + if (response.status == 404) { + // If the list is not found, it must be created with a POST request + let newList = await fetch(endpoint, { method: "POST" }); + if (newList.ok) setTaks([]); + } + }; + + //this function useEffect will run only one time, when the component is finally lodaded the first time. + useEffect(() => { + // here I fetch my todos from the API + fetchList(); + },[] // <---- thanks to this empty array the use effect will be called only once + ); + return ; } + ``` -> ☝ Review the code in depth and check the live demo by [clicking here](https://codesandbox.io/s/xenodochial-varahamihira-egh86?fontsize=14). +> ☝ Review the code in depth and check the live demo by [clicking here](https://codesandbox.io/p/sandbox/using-the-useeffect-to-load-data-on-component-mount-forked-8gprc3). + ## Further Reading