diff --git a/package.json b/package.json index 42b81b0..9b61a70 100644 --- a/package.json +++ b/package.json @@ -20,4 +20,4 @@ "devDependencies": { "live-server": "^1.2.1" } -} \ No newline at end of file +} diff --git a/src/index.js b/src/index.js index 7a07752..e77b07c 100644 --- a/src/index.js +++ b/src/index.js @@ -3,36 +3,61 @@ const $observe = document.getElementById('observe'); const API = 'https://rickandmortyapi.com/api/character/'; const getData = api => { - fetch(api) - .then(response => response.json()) - .then(response => { - const characters = response.results; - let output = characters.map(character => { - return ` -
- -

${character.name}${character.species}

-
- ` - }).join(''); - let newItem = document.createElement('section'); - newItem.classList.add('Items'); - newItem.innerHTML = output; - $app.appendChild(newItem); - }) - .catch(error => console.log(error)); -} -const loadData = () => { - getData(API); + return new Promise((resolve, reject) => { + fetch(api) + .then(response => resolve(response.json())) + .catch(error => reject(error)); + }); +} +const loadData = async () => { + let fetchUrl = localStorage.getItem('next_fetch') + if (!fetchUrl) { + fetchUrl = API + } + try { + const responseInfo = await getData(fetchUrl); + showNewData(responseInfo.results); + validateNetx(responseInfo.info.next); + } catch (error) { + console.error(error); + } +} +const showNewData = (characters) => { + let output = characters.map(character => { + return ` +
+ +

${character.name}${character.species}

+
+ ` + }).join(''); + let newItem = document.createElement('section'); + newItem.classList.add('Items'); + newItem.innerHTML = output; + $app.appendChild(newItem); } - const intersectionObserver = new IntersectionObserver(entries => { if (entries[0].isIntersecting) { - loadData(); + loadData(); } }, { rootMargin: '0px 0px 100% 0px', }); -intersectionObserver.observe($observe); \ No newline at end of file + +const validateNetx = (next) => { + if (next) { + localStorage.setItem('netx_fetch', next); + } else { + const errorItem = document.createElement('section'); + errorItem.innerHTML = '
ya no hay mas personajes...
'; + errorItem.classlist = 'End'; + $app.appendChild(errorItem); + intersectionObserver.observe($observe); + } +} +intersectionObserver.observe($observe); +window.loadData = () => { + localStorage.clear(); +} \ No newline at end of file