pagination & some clear code

adnanfajlur · Apr 7, 2018 · 1619289 · 1619289
1 parent e99cf88
commit 1619289
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 82 deletions.
diff --git a/public/index.html b/public/index.html
@@ -7,40 +7,60 @@
     <link rel="stylesheet" href="/css/app.css">
     <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
     <style>
-    body {
-      margin: 0;
-      font-family: sans-serif;
-    }
-    a {
-      cursor: pointer;
-      text-decoration: none;
-      color: #000;
-    }
-    .wrapAppbar {
-      background: #F9690E;
-      min-height: 45px;
-      position: fixed;
-      width: 100vw;
-      display: flex;
-    }
-    .appbar {
-      display: flex;
-      align-items: center;
-      width: 800px;
-      margin: 0 auto;
-      padding: 0px 21px;
-    }
-    #content {
-      max-width: 800px;
-      margin: 0 auto;
-      background-color: #ECECEC;
-      padding: 50px 20px 20px;
-      min-height: 100vh;
-    }
-    .divLoading {
-      text-align: center;
-      margin-top: 100px;
-    }
+      body {
+        margin: 0;
+        font-family: sans-serif;
+      }
+      a {
+        cursor: pointer;
+        text-decoration: none;
+        color: #000;
+      }
+      .wrapAppbar {
+        background: #F9690E;
+        min-height: 45px;
+        position: fixed;
+        width: 100vw;
+        display: flex;
+        flex-direction: column;
+        top: 0;
+      }
+      .appbar {
+        display: flex;
+        align-items: center;
+        width: 800px;
+        margin: 0 auto;
+        padding: 0px 21px;
+        height: 48px;
+      }
+      .pagination {
+        height: 30px;
+        background: #ffffff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      #content {
+        max-width: 800px;
+        margin: 0 auto;
+        background-color: #ECECEC;
+        padding: 90px 20px 20px;
+        min-height: 100vh;
+      }
+      #divNotif {
+        text-align: center;
+        margin-top: 100px;
+      }
+      .typoPagination {
+        margin: auto 20px;
+      }
+      .paginationArrow {
+        cursor: pointer;
+      }
+      .typoInActive {
+        cursor: no-drop;
+        color: #666;
+      }
     </style>
   </head>
   <body>
@@ -53,6 +73,8 @@
         <p class="linkMenu" onclick="changeUrl('/ask?page=1')">Ask</p>
         <p class="linkMenu" onclick="changeUrl('/jobs?page=1')">Jobs</p>
       </div>
+      <div id="pagination" class="pagination">
+      </div>
     </div>
     <div id="content">
     </div>

diff --git 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;
-}
+firstLoad()
diff --git 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
@@ -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
+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