fetch with link

firebase.json

@@ -5,6 +5,12 @@
       "firebase.json",
       "**/.*",
       "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
     ]
   }
 }

public/css/app.css

@@ -12,4 +12,9 @@
 }
 .commentCount {
   text-decoration: underline;
+}
+.linkMenu {
+  margin: 0 20px;
+  color: #FFF;
+  cursor: pointer;
 }

public/index.html

@@ -43,10 +43,16 @@
     <div class="wrapAppbar">
       <div class="appbar">
         <img src="./img/favicon-32x32.png">
+        <p class="linkMenu" onclick="changeUrl('/?page=1')">Top</p>
+        <p class="linkMenu" onclick="changeUrl('/news?page=1')">News</p>
+        <p class="linkMenu" onclick="changeUrl('/show?page=1')">Show</p>
+        <p class="linkMenu" onclick="changeUrl('/ask?page=1')">Ask</p>
+        <p class="linkMenu" onclick="changeUrl('/jobs?page=1')">Jobs</p>
       </div>
     </div>
     <div id="content">
     </div>
-    <script src="/js/app.js" type="module"></script>
+    <script src="/js/renderList.js" type="module"></script>
+    <script src="/js/app.js" type="text/javascript"></script>
   </body>
 </html>

public/js/app.js

@@ -1,42 +1,30 @@
-import {
-  p,
-  div,
-  span,
-  a,
-} from './buatElement.js'
+// change url
 
-
-async function fetchAsync() {
-  let response = await fetch('https://hnpwa.com/api/v0/news.json?page=1');
-  let data = await response.json();
-  return data;
+let data = {
+  loading: false,
 }
 
-fetchAsync()
-  .then(data => renderList(data))
-  .catch(err => console.log(err.message))
+function changeUrl(param) {
+  deleteDom()
+  console.log(data.loading)
+  window.history.pushState({}, null, param)
+  const page = window.location.pathname.slice(1);
+  const search = new URL(window.location.href).searchParams.get('page');
+  fetchAsync(page, search)
+    .then(data => window.renderList(data))
+    .catch(err => console.log(err))
+}
 
-function renderList(data) {
+function deleteDom() {
   const content = document.getElementById('content')
-  console.log(data)
-  content.appendChild(div(
-    data.map(n => (
-      div({ className: 'divWrap' },
-        a({
-          className: 'typoTitle',
-          target: '_blank',
-          rel: `noopener external`,
-          title: `${n.title}`,
-          href: `${n.url}`,
-        }, n.title),
-        p(n.domain),
-        div({ className: 'details'},
-          span(`${n.points || 0} ★`),
-          span(` by ${n.user}`),
-          span(` ${n.time_ago}  `),
-          a({ className: 'commentCount' }, `${n.comments_count} comments`),
-        )
-      )
-    ))
-  ))
+  while (content.firstChild) {
+    content.removeChild(content.firstChild)
+  }
+}
+
+// get data function
+async function fetchAsync(page, search) {
+  let response = await fetch(`https://hnpwa.com/api/v0/${page === '' ? 'top' : page}.json?page=${search}`);
+  let data = await response.json();
+  return data;
 }

public/js/renderList.js

@@ -0,0 +1,32 @@
+import {
+  p,
+  div,
+  span,
+  a,
+} from './buatElement.js'
+
+function renderList(data) {
+  const content = document.getElementById('content')
+  content.appendChild(div(
+    data.map(n => (
+      div({ className: 'divWrap' },
+        a({
+          className: 'typoTitle',
+          target: '_blank',
+          rel: `noopener external`,
+          title: `${n.title}`,
+          href: `${n.url}`,
+        }, n.title),
+        p(n.domain),
+        div({ className: 'details'},
+          span(`${n.points || 0} ★`),
+          span(` by ${n.user}`),
+          span(` ${n.time_ago}  `),
+          a({ className: 'commentCount' }, `${n.comments_count} comments`),
+        )
+      )
+    ))
+  ))
+}
+
+window.renderList = renderList