From 339d7cdcf69cb4b9e4f2dc0ee0c7610b648c5a8f Mon Sep 17 00:00:00 2001
From: Ryan Freeman <hello@ryanfreeman.dev>
Date: Tue, 1 Oct 2024 22:00:02 +0100
Subject: [PATCH] Added Article navigation

---
 app/api/articles/route.ts            |  7 +++
 components/layouts/ArticleLayout.tsx |  5 +-
 components/ui/ArticleNav.tsx         | 86 ++++++++++++++++++++++++++++
 3 files changed, 95 insertions(+), 3 deletions(-)
 create mode 100644 app/api/articles/route.ts
 create mode 100644 components/ui/ArticleNav.tsx

diff --git a/app/api/articles/route.ts b/app/api/articles/route.ts
new file mode 100644
index 0000000..8937e6f
--- /dev/null
+++ b/app/api/articles/route.ts
@@ -0,0 +1,7 @@
+import {getAllArticles} from '@/lib/getAllArticles'
+
+export async function GET(request: Request) {
+    const articles = await getAllArticles()
+
+    return new Response(JSON.stringify(articles), {status: 200})
+}
diff --git a/components/layouts/ArticleLayout.tsx b/components/layouts/ArticleLayout.tsx
index e21e7e2..530268d 100644
--- a/components/layouts/ArticleLayout.tsx
+++ b/components/layouts/ArticleLayout.tsx
@@ -5,6 +5,7 @@ import {Prose} from '@/components/ui/Prose'
 import {Views} from '@/components/ui/Views'
 import {ArrowDownIcon} from '@/components/icons/ArrowDownIcon'
 import {formatDate} from '@/lib/formatDate'
+import ArticleNav from '@/components/ui/ArticleNav'
 
 type ArticleLayout = {
     title: string
@@ -12,7 +13,6 @@ type ArticleLayout = {
     description: string
     slug: string
     children?: ReactNode
-    ogImage?: string
 }
 
 const gradients = [
@@ -26,10 +26,8 @@ const gradients = [
 export function ArticleLayout({
                                   title,
                                   date,
-                                  description,
                                   slug,
                                   children,
-                                  ogImage
                               }: ArticleLayout) {
 
     return (
@@ -60,6 +58,7 @@ export function ArticleLayout({
                         </header>
                         <Prose className="mt-8" data-mdx-content>{children}</Prose>
                     </article>
+                    <ArticleNav slug={slug}/>
                 </div>
             </div>
         </Container>
diff --git a/components/ui/ArticleNav.tsx b/components/ui/ArticleNav.tsx
new file mode 100644
index 0000000..774b97f
--- /dev/null
+++ b/components/ui/ArticleNav.tsx
@@ -0,0 +1,86 @@
+'use client'
+
+import React, {ReactElement, useEffect, useState} from 'react'
+import fetcher from '@/lib/fetcher'
+import useSWR from 'swr'
+import {Card} from '@/components/ui/Card'
+
+
+type Article = {
+    slug: string
+    authors: string
+    title: string
+    date: string
+    description: string
+}
+
+type FetchArticlesResponse = {
+    data: Article[]
+    error: string
+    isLoading: boolean
+}
+
+type ArticleNavProps = {
+    slug: string
+}
+
+type PaginationProps = {
+    next: Article | null
+    prev: Article | null
+}
+
+function useFetchArticles() {
+    const {data, error, isLoading} = useSWR(`/api/articles/`, fetcher) as FetchArticlesResponse
+
+    return {
+        articles: data,
+        isLoading,
+        isError: error
+    }
+}
+
+export default function ArticleNav({slug}: ArticleNavProps): ReactElement | null {
+    const {articles, isLoading, isError} = useFetchArticles()
+    const [{next, prev}, setPagination]
+        = useState<PaginationProps>({next: null, prev: null})
+
+    useEffect(() => {
+        const findAdjacentArticles = (articles: Article[], slug: string) => {
+            if (articles) {
+                const index = articles.findIndex(article => article.slug === slug)
+                const next = index > 0 ? articles[index - 1] : null
+                const prev = index < articles.length - 1 ? articles[index + 1] : null
+
+                setPagination({next, prev})
+            }
+        }
+
+        findAdjacentArticles(articles, slug)
+    }, [articles, slug])
+
+    if (isError) return null
+
+    return (
+        <section className="mt-24">
+            <ul
+                role="list"
+                className="grid grid-cols-1 gap-x-12 gap-y-16 sm:grid-cols-2"
+            >
+                {prev !== null &&
+                    <Card as="li" key={prev.slug}>
+                        <h2 className="text-base font-semibold transition group-hover:text-indigo-500 text-zinc-800 dark:text-zinc-100">
+                            <Card.Link href={`/writing/${prev.slug}`}>{prev.title}</Card.Link>
+                        </h2>
+                    </Card>
+                }
+                {next !== null &&
+                    <Card as="li" key={next.slug}>
+                        <h2 className="text-base font-semibold transition group-hover:text-indigo-500 text-zinc-800 dark:text-zinc-100">
+                            <Card.Link href={`/writing/${next.slug}`}>{next.title}</Card.Link>
+                        </h2>
+                    </Card>
+                }
+            </ul>
+        </section>
+    )
+}
\ No newline at end of file