diff --git a/public/index.html b/public/index.html index cea9722..e99e3c5 100644 --- a/public/index.html +++ b/public/index.html @@ -7,40 +7,60 @@ @@ -53,6 +73,8 @@

Ask

Jobs

+
diff --git a/public/js/app.js b/public/js/app.js index daa0584..75920d1 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -1,41 +1,9 @@ -const content = document.getElementById('content') - -// change url -function changeUrl(param) { - deleteDom() - window.history.pushState({}, null, param); - const pages = window.location.pathname.slice(1); +function firstLoad() { + const page = window.location.pathname; const search = new URL(window.location.href).searchParams.get('page'); - page = pages === 'news' ? 'newest' : pages; - loadingDom(true); - fetchAsync(page, search) - .then(data => window.renderList(data)) - .catch(err => isError()) -} - -function isError() { - deleteDom() - window.renderLoading('ERROR!!!') -} - -function loadingDom(param) { - if (param) { - window.renderLoading('Loading...') - } else { - deleteDom() - } -} - -function deleteDom() { - while (content.firstChild) { - content.removeChild(content.firstChild) + if (page === '/' && search === null) { + window.history.pushState({}, null, '/?page=1'); } } -// get data function -async function fetchAsync(page, search) { - let response = await fetch(`https://hnpwa.com/api/v0/${page === '' ? 'news' : page}.json?page=${search}`); - let data = await response.json(); - loadingDom(false) - return data; -} \ No newline at end of file +firstLoad() \ No newline at end of file diff --git a/public/js/buatElement.js b/public/js/buatElement.js index 739b2a5..d4d6767 100644 --- a/public/js/buatElement.js +++ b/public/js/buatElement.js @@ -64,9 +64,6 @@ function makeElement(type, textOrPropsOrChild, ...otherChildren) { } export const a = (...args) => makeElement(`a`, ...args); -export const button = (...args) => makeElement(`button`, ...args); export const div = (...args) => makeElement(`div`, ...args); -export const h1 = (...args) => makeElement(`h1`, ...args); -export const header = (...args) => makeElement(`header`, ...args); export const p = (...args) => makeElement(`p`, ...args); export const span = (...args) => makeElement(`span`, ...args); diff --git a/public/js/renderDom.js b/public/js/renderDom.js index ba37321..f63033b 100644 --- a/public/js/renderDom.js +++ b/public/js/renderDom.js @@ -5,9 +5,15 @@ import { a, } from './buatElement.js' +const getEl = (param) => document.getElementById(param) +const elContent = getEl('content') +const elPagination = getEl('pagination') +const elLeftArrow = getEl('leftArrow') +const halaman = () => window.location.pathname.slice(1) +const page = () => Number(new URL(window.location.href).searchParams.get('page')) + function renderList(data) { - const content = document.getElementById('content') - content.appendChild(div( + data.length > 0 ? elContent.appendChild(div( data.map(n => ( div({ className: 'divWrap' }, a({ @@ -27,14 +33,87 @@ function renderList(data) { ) )) )) + : renderNotif('Data Not Found') +} + +function rePage() { + document.getElementsByClassName('typoPagination')[0].innerHTML = `${page()}` + const editArrow = (param) => getEl('leftArrow').className = param + if (page() >= 2) { + editArrow('paginationArrow') + } else { + editArrow('typoInActive') + } } -function renderLoading(param) { - const content = document.getElementById('content') - content.appendChild(div({ className: 'divLoading' }, - p(param) +function renderPagination() { + elPagination.appendChild(div({ className: 'paginationChild' }, + span({ + id: 'leftArrow', + className: page() >= 2 ? 'paginationArrow' : 'typoInActive', + onclick: () => { + if (page() >= 2) { + window.history.pushState({}, null, `/${halaman()}?page=${page() - 1}`) + rePage() + fetchData() + } + }, + }, `< Prev`), + span({ className: 'typoPagination'}, `${page()}`), + span({ + className: 'paginationArrow', + onclick: () => { + window.history.pushState({}, null, `/${halaman()}?page=${page() + 1}`) + rePage() + fetchData() + }, + }, `Next >`) )) } -window.renderList = renderList -window.renderLoading = renderLoading \ No newline at end of file +function renderNotif(param) { + deleteDom(content) + if (param !== 'undefined') { + elContent.appendChild(div({ id: 'divNotif' }, + p(param) + )) + } else { + deleteDom(getEl('divNotif')) + } +} + +function deleteDom(param) { + while (param.firstChild) { + param.removeChild(param.firstChild) + } +} + +function fetchData() { + deleteDom(content) + const pages = window.location.pathname.slice(1); + const search = new URL(window.location.href).searchParams.get('page'); + const page = pages === 'news' ? 'newest' : pages; + renderNotif(true); + fetchAsync(page, search) + .then(data => renderList(data)) + .catch(err => renderNotif(`ERROR!!! ${err.message}`)) +} + +function changeUrl(param) { + window.history.pushState({}, null, param); + rePage(); + fetchData(); +} + +async function fetchAsync(page, search) { + let response = await fetch(`https://hnpwa.com/api/v0/${page === '' ? 'news' : page}.json?page=${search}`); + let data = await response.json(); + renderNotif() + return data; +} + +fetchData() +renderPagination() + +window.changeUrl = changeUrl +window.deleteDom = deleteDom \ No newline at end of file