From 20d46519f7176fff1ae6d4344fc6a3d64da3ea8a Mon Sep 17 00:00:00 2001 From: Ricardo Hernandez Date: Sat, 11 Jun 2022 19:43:02 -0600 Subject: [PATCH 1/7] feat: challenge solution --- PULL_REQUEST_TEMPLATE.md | 14 +++++------ package-lock.json | 8 +++---- public/index.html | 3 ++- src/index.js | 51 +++++++++++++++++++++++++++++++++------- 4 files changed, 56 insertions(+), 20 deletions(-) diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md index ddfff263..9b94eb51 100644 --- a/PULL_REQUEST_TEMPLATE.md +++ b/PULL_REQUEST_TEMPLATE.md @@ -2,14 +2,14 @@ Solución al reto: -Nombre: -Usuario Platzi: -Correo Electronico: +Nombre: Ricardo Hernandez +Usuario Platzi: ricardo.hernandezr2 +Correo Electronico: ricardo.hernandezr2@gmai.com ## Reto: -- [ ] Primer problema -- [ ] Segundo problema -- [ ] Tercer problema -- [ ] Cuarto Problema +- [x] Primer problema +- [x] Segundo problema +- [x] Tercer problema +- [x] Cuarto Problema - [ ] Quinto Problema 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..8482a1ef 100755 --- a/public/index.html +++ b/public/index.html @@ -5,7 +5,8 @@ - + + Platzi Store diff --git a/src/index.js b/src/index.js index eb2631c2..3bd82788 100755 --- a/src/index.js +++ b/src/index.js @@ -1,29 +1,64 @@ const $app = document.getElementById('app'); const $observe = document.getElementById('observe'); const API = 'https://api.escuelajs.co/api/v1/products'; +const LIMIT = 10; +const PAGINATION = "pagination"; +const INITIAL_PAGINATION = 5; +const LAST_ID = 200; +let isFinished = false; +localStorage.removeItem("pagination"); -const getData = api => { - fetch(api) +const getPagination = () => { + return localStorage.getItem("pagination") || INITIAL_PAGINATION; +} + +const getData = async (api, pagination) => { + const url = `${api}?offset=${pagination}&limit=${LIMIT}`; + console.log(url) + fetch(url) .then(response => response.json()) .then(response => { let products = response; - let output = products.map(product => { - // template - }); + let output = products.reduce((acc, product) => { + if(product.id === LAST_ID) { + isFinished = true; + } + return (acc + + `
+ ${product.description} +

+ ${product.title} + $ ${product.price} +

+
`); + }, ""); let newItem = document.createElement('section'); newItem.classList.add('Item'); newItem.innerHTML = output; $app.appendChild(newItem); + localStorage.setItem("pagination", parseInt(pagination) + LIMIT); }) .catch(error => console.log(error)); } -const loadData = () => { - getData(API); +const loadData = async () => { + const pagination = getPagination(); + await getData(API, pagination); } const intersectionObserver = new IntersectionObserver(entries => { - // logic... + if(entries[0].isIntersecting) { + if(isFinished) { + let newItem = document.createElement('section'); + newItem.classList.add('message'); + newItem.innerHTML = 'Todos Los Productos Obtenidos'; + intersectionObserver.unobserve($observe); + $app.appendChild(newItem); + intersectionObserver.unobserve($observe); + } else { + loadData(); + } + } }, { rootMargin: '0px 0px 100% 0px', }); From 23ebc7ad3b65aaa1f0466a570f4eee4403a636fc Mon Sep 17 00:00:00 2001 From: Ricardo Hernandez Date: Sat, 11 Jun 2022 19:45:46 -0600 Subject: [PATCH 2/7] fix: removing logs --- src/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/index.js b/src/index.js index 3bd82788..1aae1b27 100755 --- a/src/index.js +++ b/src/index.js @@ -14,7 +14,6 @@ const getPagination = () => { const getData = async (api, pagination) => { const url = `${api}?offset=${pagination}&limit=${LIMIT}`; - console.log(url) fetch(url) .then(response => response.json()) .then(response => { From fa580c8796d99a99cc3911e11e12f2b67e22cf36 Mon Sep 17 00:00:00 2001 From: Ricardo Hernandez Date: Sat, 11 Jun 2022 19:49:52 -0600 Subject: [PATCH 3/7] fix: using constant --- src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 1aae1b27..abcc2194 100755 --- a/src/index.js +++ b/src/index.js @@ -9,7 +9,7 @@ let isFinished = false; localStorage.removeItem("pagination"); const getPagination = () => { - return localStorage.getItem("pagination") || INITIAL_PAGINATION; + return localStorage.getItem(PAGINATION) || INITIAL_PAGINATION; } const getData = async (api, pagination) => { @@ -35,7 +35,7 @@ const getData = async (api, pagination) => { newItem.classList.add('Item'); newItem.innerHTML = output; $app.appendChild(newItem); - localStorage.setItem("pagination", parseInt(pagination) + LIMIT); + localStorage.setItem(PAGINATION, parseInt(pagination) + LIMIT); }) .catch(error => console.log(error)); } From fe6ee691bc76696a089b407e4ac096f9b7e7d5c8 Mon Sep 17 00:00:00 2001 From: Ricardo Hernandez Date: Sat, 11 Jun 2022 20:09:33 -0600 Subject: [PATCH 4/7] fix: adding meta data to the site --- public/index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/public/index.html b/public/index.html index 8482a1ef..fd3475d7 100755 --- a/public/index.html +++ b/public/index.html @@ -8,6 +8,8 @@ Platzi Store + + From 65262af581572930aab4fc56e207e31eafe4d058 Mon Sep 17 00:00:00 2001 From: Ricardo Hernandez Date: Sat, 11 Jun 2022 20:55:12 -0600 Subject: [PATCH 5/7] feat: finish 5ft task --- PULL_REQUEST_TEMPLATE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md index 9b94eb51..e27ad100 100644 --- a/PULL_REQUEST_TEMPLATE.md +++ b/PULL_REQUEST_TEMPLATE.md @@ -12,4 +12,4 @@ Correo Electronico: ricardo.hernandezr2@gmai.com - [x] Segundo problema - [x] Tercer problema - [x] Cuarto Problema -- [ ] Quinto Problema +- [x] Quinto Problema link to app: https://ricardoappjs.netlify.app/public/ From c8eca1e15919b4f2f004240f4d1108c5205d23e6 Mon Sep 17 00:00:00 2001 From: Ricardo Hernandez Date: Wed, 15 Jun 2022 14:51:48 -0600 Subject: [PATCH 6/7] fix: adding threshold --- src/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/index.js b/src/index.js index abcc2194..386b64b4 100755 --- a/src/index.js +++ b/src/index.js @@ -46,6 +46,7 @@ const loadData = async () => { } const intersectionObserver = new IntersectionObserver(entries => { + if(entries[0].isIntersecting) { if(isFinished) { let newItem = document.createElement('section'); @@ -60,6 +61,7 @@ const intersectionObserver = new IntersectionObserver(entries => { } }, { rootMargin: '0px 0px 100% 0px', + threshold: 1, }); intersectionObserver.observe($observe); From 3813a9c13aff30692df93d2fe2330ca64ee76b31 Mon Sep 17 00:00:00 2001 From: Ricardo Hernandez Date: Wed, 15 Jun 2022 14:56:34 -0600 Subject: [PATCH 7/7] fix: cleaning local storage --- src/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 386b64b4..8de80f87 100755 --- a/src/index.js +++ b/src/index.js @@ -6,7 +6,8 @@ const PAGINATION = "pagination"; const INITIAL_PAGINATION = 5; const LAST_ID = 200; let isFinished = false; -localStorage.removeItem("pagination"); + +localStorage.clear(); const getPagination = () => { return localStorage.getItem(PAGINATION) || INITIAL_PAGINATION;