feat: Add pagination and more button at the bottom

app/head.js

@@ -10,7 +10,7 @@ export default async function Head() {
       />
       <meta charSet="utf-8" />
       <link href="/favicon.ico" rel="shortcut icon" />
-      <meta content="#ffa52a" name="theme-color" />
+      <meta content="#ff6600" name="theme-color" />
     </>
   )
 }

app/news/page.js

@@ -0,0 +1,24 @@
+// Server Components
+import SystemInfo from '../../components/server-info'
+
+// Client Components
+import Stories from '../../components/stories'
+import Footer from '../../components/footer'
+
+// Utils
+import fetchData from '../../lib/fetch-data'
+
+export default async function RSCPage({ searchParams }) {
+  const { p: page = 1 } = searchParams
+  const storyIds = await fetchData('topstories')
+
+  return (
+    <>
+      <Stories page={page} storyIds={storyIds} />
+      <Footer />
+      <SystemInfo />
+    </>
+  )
+}
+
+export const revalidate = 0

components/header.module.css

@@ -1,5 +1,5 @@
 .header {
-  background: #ffa52a;
+  background: #ff6600;
   display: flex;
   font-size: 14px;
 }
@@ -10,7 +10,8 @@
 }
 
 .left {
-  flex: 9;
+  display: flex;
+  align-items: center;
 }
 
 .right {
@@ -31,8 +32,7 @@
 a.login {
   padding: 10px;
   display: inline-block;
-  font-size: 11px;
-  text-transform: uppercase;
+  font-size: 10pt;
   text-decoration: none;
   color: #000;
 }

components/nav.js

@@ -3,11 +3,19 @@ import styles from './nav.module.css'
 export default function Nav() {
   return (
     <ul className={styles['nav-ul']}>
-      <Item href="/">new</Item>
-      <Item href="/">show</Item>
-      <Item href="/">ask</Item>
-      <Item href="/">jobs</Item>
-      <Item href="/">submit</Item>
+      <Item href="/newest">new</Item>
+      {" | "}
+      <Item href="/front">past</Item>
+      {" | "}
+      <Item href="/newcomments">show</Item>
+      {" | "}
+      <Item href="/ask">ask</Item>
+      {" | "}
+      <Item href="/show">show</Item>
+      {" | "}
+      <Item href="/jobs">jobs</Item>
+      {" | "}
+      <Item href="/submit">submit</Item>
     </ul>
   )
 }

components/nav.module.css

@@ -8,9 +8,7 @@
 
 .nav-ul li a {
   display: inline-block;
-  padding: 10px;
-  font-size: 11px;
-  text-transform: uppercase;
+  font-size: 10pt;
   text-decoration: none;
   color: #000;
 }

components/stories.js

@@ -1,22 +1,34 @@
-import Story from './story'
 import Link from 'next/link'
+import Story from './story'
+
+import fetchData from '../lib/fetch-data'
+import { transform } from '../lib/get-item'
 
 import styles from './stories.module.css'
 
-export default ({ stories, page = 1, offset = null }) => (
-  <div>
-    {stories.map((story, i) => (
-      <div key={story.id} className={styles.item}>
-        {null != offset ? (
-          <span className={styles.count}>{i + offset + 1}</span>
-        ) : null}
-        <div className={styles.story}>
-          <Story {...story} />
+async function StoryWithData({ id }) {
+  const data = await fetchData(`item/${id}`)
+  const story = transform(data)
+  return <Story {...story} />
+}
+
+export default async function Stories({ storyIds, page = 1 }) {
+  const limit = 30
+  const offset = (page - 1) * limit
+
+  return (
+    <div>
+      {storyIds.slice(offset, offset + limit).map((id, i) => (
+        <div key={id} className={styles.item}>
+          {null != offset ? (
+            <span className={styles.count}>{i + offset + 1}</span>
+          ) : null}
+          <StoryWithData id={id} key={id} />
         </div>
+      ))}
+      <div className={styles.footer}>
+        <Link href={`/news?p=${+page + 1}`}>More</Link>
       </div>
-    ))}
-    <footer className={styles.footer}>
-      <Link href={`/news?p=${page + 1}`}>More</Link>
-    </footer>
-  </div>
-)
+    </div>
+  )
+}

components/stories.module.css

@@ -6,7 +6,6 @@
 .count {
   flex-basis: auto;
   flex-grow: 1;
-  vertical-align: top;
   font-size: 14px;
   padding-right: 5px;
   display: block;
@@ -24,7 +23,7 @@
 }
 
 .footer {
-  padding: 10px 0 40px 30px;
+  padding: 10px 0 0 32px;
 }
 
 .footer a {

components/story.js

@@ -1,10 +1,10 @@
-'use client';
+'use client'
 
-import { useState } from 'react';
+import { useState } from 'react'
 
-import timeAgo from '../lib/time-ago';
+import timeAgo from '../lib/time-ago'
 
-import styles from './story.module.css';
+import styles from './story.module.css'
 
 export default function Story({
   id,
@@ -13,20 +13,17 @@ export default function Story({
   url,
   user,
   score,
-  commentsCount,
+  commentsCount
 }) {
-  const { host } = url ? new URL(url) : { host: '#' };
-  const [voted, setVoted] = useState(false);
+  const { host } = url ? new URL(url) : { host: '#' }
+  const [voted, setVoted] = useState(false)
 
   return (
-    <div style={{ margin: '5px 0' }}>
+    <div className={styles.story}>
       <div className={styles.title}>
         <span
           style={{
-            cursor: 'pointer',
-            fontFamily: 'sans-serif',
-            marginRight: 5,
-            color: voted ? '#ffa52a' : '#ccc',
+            color: voted ? '#ffa52a' : '#ccc'
           }}
           onClick={() => setVoted(!voted)}
         >
@@ -35,7 +32,9 @@ export default function Story({
         <a href={url}>{title}</a>
         {url && (
           <span className={styles.source}>
+            {" ("}
             <a href={`http://${host}`}>{host.replace(/^www\./, '')}</a>
+            {")"}
           </span>
         )}
       </div>
@@ -51,7 +50,7 @@ export default function Story({
         </a>
       </div>
     </div>
-  );
+  )
 }
 
-const plural = (n, s) => s + (n === 0 || n > 1 ? 's' : '');
+const plural = (n, s) => s + (n === 0 || n > 1 ? 's' : '')

components/story.module.css

@@ -1,8 +1,18 @@
+.story {
+  flex: 100 1;
+  display: inline-block;
+}
+
 .title {
   font-size: 15px;
   margin-bottom: 3px;
 }
 
+.title > span:first-child {
+  cursor: pointer;
+  font-family: sans-serif;
+}
+
 .title > a {
   color: #000;
   text-decoration: none;

next.config.js

@@ -1,5 +1,13 @@
 module.exports = {
   experimental: {
-    appDir: true,
+    appDir: true
   },
-};
+  async rewrites() {
+    return [
+      {
+        source: '/',
+        destination: '/news'
+      }
+    ]
+  }
+}