platzi · Sdann26 · Jun 12, 2023
diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md
@@ -2,14 +2,14 @@
 
 Solución al reto:
 
-Nombre:
-Usuario Platzi:
+Nombre: Israel Danilo Blas Salas
+Usuario Platzi: Sdann26
 
 ## Reto:
 
-- [ ] Primer problema
-- [ ] Segundo problema
-- [ ] Tercer problema
-- [ ] Cuarto Problema
-- [ ] Quinto Problema
-- [ ] Sexto Problema
+- [✔️] Primer problema
+- [✔️] Segundo problema
+- [✔️] Tercer problema
+- [✔️] Cuarto Problema
+- [✔️] Quinto Problema
+- [✔️] Sexto Problema
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "description": "FakeStore",
   "main": "index.js",
   "scripts": {
+    "build": "vite build",
     "start": "live-server --open=public --entry-file=index.html",
     "e2e": "cypress open"
   },
@@ -19,7 +20,8 @@
   },
   "homepage": "https://github.com/platzi/laboratorio-fakestore#readme",
   "devDependencies": {
-    "live-server": "^1.1.0"
+    "live-server": "^1.1.0",
+    "vite": "^4.3.9"
   },
   "dependencies": {
     "cypress": "^10.2.0"

diff --git a/public/index.html b/public/index.html
@@ -5,18 +5,22 @@
   <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>
+  <meta http-equiv="Content-Language" content="es">
+  <meta name="description" content="Aplicativo web para mostrar productos del API FakeStore de Platzi.">
+  <meta name="keywords" content="tienda online, productos, ofertas, FakeStore">
+  <meta name="author" content="Danilo Blas">
+  <title>FakeStore</title>
   <link type="text/css" href="styles.css" rel="stylesheet">
 </head>
 
 <body>
   <div class="Main">
     <h1>FakeStore</h1>
-    <div id="app"></div>
+    <div id="app" style="min-height: calc(100vh + 200px);"></div>
     <div id="observe"></div>
   </div>
 </body>
 
-<script type="text/javascript" src="../src/index.js"></script>
+<script type="module" src="../src/index.js"></script>
 
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,31 +1,69 @@
 const $app = document.getElementById('app');
 const $observe = document.getElementById('observe');
 const API = 'https://api.escuelajs.co/api/v1/products';
+const pagination = Number(localStorage.getItem('pagination')) || 4
+let cantMaxProducts = null
 
-const getData = api => {
-  fetch(api)
-    .then(response => response.json())
-    .then(response => {
-      let products = response;
-      let output = products.map(product => {
-        // template
-      });
-      let newItem = document.createElement('section');
-      newItem.classList.add('Item');
-      newItem.innerHTML = output;
-      $app.appendChild(newItem);
-    })
-    .catch(error => console.log(error));
-}
+/* Functions */
+const getData = async (api, pagination, limit) => {
+  try {
+    if(cantMaxProducts && (cantMaxProducts <  pagination * limit)) {
+      intersectionObserver.disconnect();
+    }
+
+    const response = await fetch(`${api}?offset=${pagination * limit}&limit=${limit}`);
+    const products = await response.json();
+
+    let output = products.map(({ title, price, images }) => {
+      return (
+        `<article class="Card">
+          <img src=${images?.[0]} />
+          <h2>
+            ${title}
+            <small>$ ${price}</small>
+          </h2>
+        </article>`
+      );
+    });
+
+    let newItem = document.createElement('section');
+    newItem.classList.add('Items');
+    newItem.innerHTML = output.join('');
+    $app.appendChild(newItem);
+
+    localStorage.setItem('pagination', pagination + 1);
+  } catch (error) {
+    console.log(error);
+  }
+};
 
-const loadData = () => {
-  getData(API);
+const loadData = async () => {
+  await getData(API, pagination, 10);
+
+  const cantMaxProductsRawr = await fetch(API)
+  cantMaxProducts = await cantMaxProductsRawr.json()
+  cantMaxProducts = cantMaxProducts.length
 }
 
+/* Browser API's */
 const intersectionObserver = new IntersectionObserver(entries => {
-  // logic...
+  entries.forEach(entry => {
+    if(entry.isIntersecting) {
+      const pagination = Number(localStorage.getItem('pagination'))
+      console.log(pagination)
+      getData(API, pagination, 10);
+    }
+  })
 }, {
-  rootMargin: '0px 0px 100% 0px',
+  rootMargin: '0px 0px 200px 0px',
 });
 
 intersectionObserver.observe($observe);
+
+/* Events */
+window.addEventListener('beforeunload', () => {
+  localStorage.clear()
+});
+
+/* First Render */
+loadData()
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+  build: {
+    target: 'es2018',
+    outDir: 'dist',
+    minify: true,
+    rollupOptions: {
+      input: {
+        main:'/public/index.html',
+      },
+    },
+  },
+};