From da6119b0a66565a092130d93533eb267c6b2daf8 Mon Sep 17 00:00:00 2001
From: Carlos Andres Villegas Gomez <cvillegas@Tests-MacBook-Pro.local>
Date: Sun, 12 Jun 2022 16:20:48 +0100
Subject: [PATCH] Proyecto terminado

---
 package-lock.json |  8 ++++----
 public/index.html |  3 ++-
 src/index.js      | 34 ++++++++++++++++++++++++++++------
 3 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a9762c5a..0091cca1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,18 +1,18 @@
 {
-  "name": "escuelajs-reto-05",
+  "name": "js-challenge",
   "version": "1.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "escuelajs-reto-05",
+      "name": "js-challenge",
       "version": "1.0.0",
-      "license": "ISC",
+      "license": "MIT",
       "dependencies": {
         "cypress": "10.0.1"
       },
       "devDependencies": {
-        "live-server": "^1.2.2"
+        "live-server": "1.2.2"
       }
     },
     "node_modules/@colors/colors": {
diff --git a/public/index.html b/public/index.html
index 5f8fbe0d..ca65d044 100755
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title></title>
+  <title>PlatziStore</title>
+  <meta name="description" content="Esta es la última guía de productos disponibles en Platzi." />
   <link type="text/css" href="styles.css" rel="stylesheet">
 </head>
 
diff --git a/src/index.js b/src/index.js
index eb2631c2..d595e78a 100755
--- a/src/index.js
+++ b/src/index.js
@@ -2,14 +2,30 @@ const $app = document.getElementById('app');
 const $observe = document.getElementById('observe');
 const API = 'https://api.escuelajs.co/api/v1/products';
 
+
+let ofsset = 5;
+const LIMIT = 10;
+window.localStorage.setItem('pagination', 0);
+
 const getData = api => {
   fetch(api)
     .then(response => response.json())
     .then(response => {
       let products = response;
-      let output = products.map(product => {
-        // template
-      });
+
+      if (products.length == 0) {
+        alert("Todos los productos Obtenidos");
+        intersectionObserver.disconnect();
+      }
+
+      let output = products.map((product) => {
+        return (`
+                  <article class="Card">
+                    <img src="${product.category.image}"  />
+                    <h2>Producto <small>${product.price}</small></h2>
+                  </article>
+                `)
+      }).join('');
       let newItem = document.createElement('section');
       newItem.classList.add('Item');
       newItem.innerHTML = output;
@@ -18,12 +34,18 @@ const getData = api => {
     .catch(error => console.log(error));
 }
 
-const loadData = () => {
-  getData(API);
+const loadData = async () => {
+  offset = (LIMIT * parseInt(window.localStorage.getItem('pagination'))) - 5;
+  await getData(`${API}?offset=${offset}&limit=${LIMIT}`);
 }
 
 const intersectionObserver = new IntersectionObserver(entries => {
-  // logic...
+  entries.forEach(entry => {
+    if (entry.intersectionRatio > 0) {
+      window.localStorage.setItem('pagination', parseInt(window.localStorage.getItem('pagination')) + 1);
+      loadData();
+    }
+  });
 }, {
   rootMargin: '0px 0px 100% 0px',
 });