Add feed common layout and api

components/feed.js

@@ -1,20 +1,7 @@
-import Link from 'next/link'
-
 export default ({ items }) => (
   <div>
-    <p className="text-6xl font-bold">Hello, Next.js</p>
-    <div>
-      <Link href={'/'}>
-        <a>News</a>
-      </Link>
-      <Link href={'/feeds/newest'}>
-        <a>Newest</a>
-      </Link>
-    </div>
-    <div>
-      {items.map((n, i) => (
-        <div key={i}>{n.title}</div>
-      ))}
-    </div>
+    {items.map((n, i) => (
+      <div key={i}>{n.title}</div>
+    ))}
   </div>
 )

components/nav.js

@@ -0,0 +1,19 @@
+import Link from 'next/link'
+
+const LabelLink = ({ href, label }) => (
+  <span>
+    <Link href={href}>
+      <a>{label}</a>
+    </Link>
+  </span>
+)
+
+export default () => (
+  <nav>
+    <LabelLink href={'/'} label={'▲'} />
+    <LabelLink href={'/'} label={'news'} />
+    {['newest', 'ask', 'show', 'jobs'].map(p => {
+      return <LabelLink key={p} href={`/feeds/${p}`} label={p.toUpperCase()} />
+    })}
+  </nav>
+)

lib/hn.js

@@ -0,0 +1,17 @@
+import fetch from 'node-fetch'
+import md5Hex from 'md5-hex'
+
+export async function getFeeds(feed) {
+  const response = await fetch(`http://api.hnpwa.com/v0/${feed}/1.json`, {
+    method: 'GET'
+  })
+  const items = await response.json()
+  const etag = md5Hex(JSON.stringify(items))
+
+  return {
+    props: {
+      items,
+      etag
+    }
+  }
+}

pages/_app.js

@@ -1,5 +1,5 @@
 import '../styles/index.css'
 
-export default function App({ Component, pageProps }) {
+export default function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />
 }

pages/_feed.js

@@ -0,0 +1,11 @@
+import Nav from '../components/nav'
+import Feed from '../components/feed'
+
+export default function Feeds({ items }) {
+  return (
+    <>
+      <Nav />
+      <Feed items={items} />
+    </>
+  )
+}

pages/feeds/[slug].js

@@ -1,37 +1,20 @@
-import fetch from 'node-fetch'
-import md5Hex from 'md5-hex'
-import Link from 'next/link'
-import Feed from '../../components/feed'
+import { getFeeds } from '../../lib/hn'
 
-export default function Feeds({ items }) {
-  return <Feed items={items} />
-}
+export { default } from '../_feed'
 
 export async function getStaticProps({ params }) {
-  const response = await fetch(
-    `http://api.hnpwa.com/v0/${params.slug}/1.json`,
-    {
-      method: 'GET'
-    }
-  )
-  const items = await response.json()
-  const etag = md5Hex(JSON.stringify(items))
-
-  return {
-    props: {
-      items,
-      etag
-    }
-  }
+  return getFeeds(params.slug)
 }
 
 export async function getStaticPaths() {
   return {
-    paths: [
-      {
-        params: { slug: 'newest' }
+    paths: ['newest', 'ask', 'show', 'jobs'].map(p => {
+      return {
+        params: {
+          slug: p
+        }
       }
-    ],
+    }),
     fallback: false
   }
 }

pages/index.js

@@ -1,24 +1,20 @@
-import fetch from 'node-fetch'
-import md5Hex from 'md5-hex'
-import Feed from '../components/feed'
+import { getFeeds } from '../lib/hn'
 
-function Index({ items }) {
-  return <Feed items={items} />
-}
+export {default} from './_feed'
 
-export async function getStaticProps() {
-  const response = await fetch('http://api.hnpwa.com/v0/news/1.json', {
-    method: 'GET'
-  })
-  const items = await response.json()
-  const etag = md5Hex(JSON.stringify(items))
+export async function getStaticProps({ params }) {
+  return getFeeds('news')
+}
 
+export async function getStaticPaths() {
   return {
-    props: {
-      items,
-      etag
-    }
+    paths: ['newest', 'ask', 'show', 'jobs'].map(p => {
+      return {
+        params: {
+          slug: p
+        }
+      }
+    }),
+    fallback: false
   }
-}
-
-export default Index
+}