MigeruDev solution for the The Ethereum Developer Program Challenge

.gitignore

@@ -59,3 +59,6 @@ typings/
 
 # next.js build output
 .next
+
+# Deploy
+dist

package.json

@@ -4,6 +4,8 @@
   "description": "PlatziStore Fix Bugs",
   "main": "index.js",
   "scripts": {
+    "build": "webpack",
+    "dev": "webpack serve",
     "start": "live-server --open=public --entry-file=index.html",
     "e2e": "cypress open"
   },
@@ -19,7 +21,10 @@
   },
   "homepage": "https://github.com/platzi/js-challenge#readme",
   "devDependencies": {
-    "live-server": "1.2.2"
+    "live-server": "1.2.2",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.9.2"
   },
   "dependencies": {
     "cypress": "10.0.1"

public/index.html

@@ -5,7 +5,12 @@
   <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="PlatziStore. Somos comercio en línea con una gran cantidad de productos a comercializar"
+  />
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link type="text/css" href="styles.css" rel="stylesheet">
 </head>
 
@@ -17,6 +22,6 @@ <h1>PlatziStore</h1>
   </div>
 </body>
 
-<script type="text/javascript" src="../src/index.js"></script>
+<script type="text/javascript" src="main.js"></script>
 
 </html>

src/index.js

@@ -2,30 +2,56 @@ const $app = document.getElementById('app');
 const $observe = document.getElementById('observe');
 const API = 'https://api.escuelajs.co/api/v1/products';
 
-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));
+const INIT_PAGE = 5;
+const MAX_PAGE_SIZE = 10;
+
+localStorage.clear();
+
+localStorage.setItem('pagination', INIT_PAGE);
+
+const getData = async (url_api) => {
+  try {
+    const response = await fetch(`${url_api}?offset=${localStorage.getItem('pagination')}&limit=${MAX_PAGE_SIZE}`);
+    const products = await response.json();
+    let productRender = products.map((product) => `
+      <article class="Card">
+        <img src="${product.images[0]}"/>
+        <h2>
+          ${product.title}
+          <small>$ ${product.price}</small>
+        </h2>
+      </article>
+    `);
+    let newItem = document.createElement('section');
+    newItem.classList.add('Items');
+    newItem.innerHTML = productRender.join('');
+    $app.appendChild(newItem);
+  } catch (err) { console.log(err); }
 }
 
-const loadData = () => {
-  getData(API);
+const loadData = async () => {
+  await getData(API);
 }
 
-const intersectionObserver = new IntersectionObserver(entries => {
-  // logic...
+const intersectionObserver = new IntersectionObserver((entries, self) => {
+  const currentPage = +localStorage.getItem('pagination');
+
+  if (entries[0].isIntersecting && window.scrollY!==0) {
+    const nextPage = currentPage + MAX_PAGE_SIZE;
+    localStorage.setItem('pagination', nextPage);
+    loadData();
+  } 
+  if (currentPage>200) {
+    self.unobserve($observe);
+    let newItem = document.createElement('section');
+    newItem.classList.add('Empty');
+    newItem.innerHTML = `<h1>Todos los productos Obtenidos</h1>`;
+    $app.appendChild(newItem);
+  }
 }, {
   rootMargin: '0px 0px 100% 0px',
 });
 
+loadData();
+
 intersectionObserver.observe($observe);

webpack.config.js

@@ -0,0 +1,16 @@
+const path = require('path');
+
+module.exports = {
+  mode: 'production',
+  entry: './src/index.js',
+  output: {
+    filename: 'main.js',
+    path: path.resolve(__dirname, 'public'),
+  },
+  devServer: {
+    static: {
+      directory: path.join(__dirname, '/public')
+    },
+    port: 9000,
+  }
+}