From 645393eea9f096ac9ab1d1317f25c24453516536 Mon Sep 17 00:00:00 2001
From: Oscar Mauricio Garcia Mesa <garc800501@siigo.com>
Date: Mon, 10 Aug 2020 21:28:59 -0500
Subject: [PATCH 1/2] Reto solucionado

---
 src/index.js | 96 +++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 73 insertions(+), 23 deletions(-)

diff --git a/src/index.js b/src/index.js
index 7a07752..d7d4ca3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,38 +1,88 @@
 const $app = document.getElementById('app');
 const $observe = document.getElementById('observe');
-const API = 'https://rickandmortyapi.com/api/character/';
+const API = 'https://rickandmortyapi.com/api/character/?page= ';
+const PAGE = 1;
+
+const getData = async api => {
 
-const getData = api => {
   fetch(api)
-    .then(response => response.json())
-    .then(response => {
-      const characters = response.results;
-      let output = characters.map(character => {
-        return `
-      <article class="Card">
-        <img src="${character.image}" />
-        <h2>${character.name}<span>${character.species}</span></h2>
-      </article>
-    `
-      }).join('');
-      let newItem = document.createElement('section');
-      newItem.classList.add('Items');
-      newItem.innerHTML = output;
-      $app.appendChild(newItem);
+  .then(response => response.json())
+  .then(response => {
+    //CUARTO PROBLEMA: La api ya cuenta con 31 paginas , al querer pasar a la 32 y verificar que respuesta no
+    // trae ninguno resultado , se muestra un article con el enunciado "Ya no hay personajes".
+    if (!response.info) {
+
+      let output = `<article class="Card">
+                      <img src="" />
+                      <h2>YA NO HAY PERSONAJES</h2>
+                    </article>`;  
+
+      let newItem = document.createElement('section')
+      newItem.classList.add('Items')
+      newItem.innerHTML = output
+      $app.appendChild(newItem)
+
+    }
+      const characters = response.results
+     
+        let output = characters.map(character => {
+  
+          return `<article class="Card">
+                    <img src="${character.image}" />
+                    <h2>${character.name}<span>${character.species}</span></h2>
+                  </article>`
+  
+      }).join('')
+
+    let newItem = document.createElement('section')
+    newItem.classList.add('Items')
+    newItem.innerHTML = output
+    $app.appendChild(newItem)
+    console.log(intersectionObserver)
+          
     })
-    .catch(error => console.log(error));
+    .catch(error => console.log("ERROR:fail " + error))
 }
 
-const loadData = () => {
-  getData(API);
+ const loadData = async (api) => {
+  try{
+    
+     const data = await getData(api)
+
+  }catch (error){
+
+    console.error(error)
+  
+  }
 }
 
 const intersectionObserver = new IntersectionObserver(entries => {
   if (entries[0].isIntersecting) {
-    loadData();
+    if (!localStorage.getItem('next_fetch')) {
+      
+        loadData(API);
+        //PRIMER PROBLEMA : Guardamos la URL de la siguiente petición (la segunda petición, en el else se llaman las demás) con el nombre de la llave 'next_fetch'
+        localStorage.setItem('next_fetch',`${API}${PAGE + 1}`)
+         
+    }else{
+
+      //SEGUNDO PROBLEMA: Obtenemos la información desde la llave 'next_fetch' de nuestro localStorage
+      loadData(localStorage.getItem('next_fetch'))
+
+      antPage = localStorage.getItem('next_fetch').substr(-2)
+      newPage = parseInt(antPage) + 1
+
+      localStorage.clear();
+      localStorage.setItem('next_fetch',`${API}${newPage}`)
+    }
   }
 }, {
   rootMargin: '0px 0px 100% 0px',
-});
+})
+
+//TERCER PROBLEMA: Al recargar la pagina limpiamos el localStorage, de esta forma se imprimen siempre los primeros 20 personajes al recargar.
+window.onload = () => {
+  localStorage.clear()
+}
 
-intersectionObserver.observe($observe);
\ No newline at end of file
+intersectionObserver.observe($observe)
\ No newline at end of file

From 85fbb8a6ee69764f14a0cc11b8d7c0c656d32645 Mon Sep 17 00:00:00 2001
From: Oscar Mauricio Garcia Mesa <garc800501@siigo.com>
Date: Mon, 10 Aug 2020 21:30:25 -0500
Subject: [PATCH 2/2] Reto solucionado

---
 src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index d7d4ca3..bf51d49 100644
--- a/src/index.js
+++ b/src/index.js
@@ -66,7 +66,7 @@ const intersectionObserver = new IntersectionObserver(entries => {
          
     }else{
 
-      //SEGUNDO PROBLEMA: Obtenemos la información desde la llave 'next_fetch' de nuestro localStorage
+      //SEGUNDO PROBLEMA: Obtenemos la información desde la llave 'next_fetch' de nuestro localStorage la funcion loadData() se actualiza a Async/Await
       loadData(localStorage.getItem('next_fetch'))
 
       antPage = localStorage.getItem('next_fetch').substr(-2)