From 567ceb73065f0123ea4030be3ed5030212e1659b Mon Sep 17 00:00:00 2001
From: junkisai <jonki.beam@gmail.com>
Date: Tue, 15 Oct 2024 20:37:49 +0900
Subject: [PATCH] w

---
 .../PostDetailPage/PostDetailPage.module.css  | 12 ++++++++++
 .../PostDetailPage/PostDetailPage.tsx         | 12 +++++++++-
 .../src/features/posts/utils/getNextPost.ts   | 24 +++++++++++++++++++
 .../src/features/posts/utils/getPrevPost.ts   | 24 +++++++++++++++++++
 .../src/features/posts/utils/index.ts         |  2 ++
 5 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 frontend/apps/service-site/src/features/posts/components/PostDetailPage/PostDetailPage.module.css
 create mode 100644 frontend/apps/service-site/src/features/posts/utils/getNextPost.ts
 create mode 100644 frontend/apps/service-site/src/features/posts/utils/getPrevPost.ts

diff --git a/frontend/apps/service-site/src/features/posts/components/PostDetailPage/PostDetailPage.module.css b/frontend/apps/service-site/src/features/posts/components/PostDetailPage/PostDetailPage.module.css
new file mode 100644
index 000000000..352fc45f6
--- /dev/null
+++ b/frontend/apps/service-site/src/features/posts/components/PostDetailPage/PostDetailPage.module.css
@@ -0,0 +1,12 @@
+.navPostWrapper {
+  display: grid;
+  grid-auto-flow: row;
+  gap: var(--spacing-8);
+}
+
+@media screen and (min-width: 768px) {
+  .navPostWrapper {
+    grid-auto-flow: column;
+    gap: var(--spacing-10);
+  }
+}
diff --git a/frontend/apps/service-site/src/features/posts/components/PostDetailPage/PostDetailPage.tsx b/frontend/apps/service-site/src/features/posts/components/PostDetailPage/PostDetailPage.tsx
index 92282070e..1ce47c636 100644
--- a/frontend/apps/service-site/src/features/posts/components/PostDetailPage/PostDetailPage.tsx
+++ b/frontend/apps/service-site/src/features/posts/components/PostDetailPage/PostDetailPage.tsx
@@ -4,8 +4,11 @@ import { PostHero } from '@/features/posts/components/PostHero'
 import { MDXContent } from '@/libs/contentlayer'
 import { notFound } from 'next/navigation'
 import type { FC } from 'react'
-import { findPostByLangAndSlug } from '../../utils'
+import { findPostByLangAndSlug, getNextPost, getPrevPost } from '../../utils'
+import { NavNextPost } from '../NavNextPost'
+import { NavPreviousPost } from '../NavPreviousPost'
 import { TableOfContents } from '../TableOfContents'
+import styles from './PostDetailPage.module.css'
 
 const TOC_TARGET_CLASS_NAME = 'target-toc'
 
@@ -18,6 +21,9 @@ export const PostDetailPage: FC<Props> = ({ lang, slug }) => {
   const post = findPostByLangAndSlug({ lang, slug })
   if (!post) notFound()
 
+  const prevPost = getPrevPost({ lang, targetPost: post })
+  const nextPost = getNextPost({ lang, targetPost: post })
+
   return (
     <article className={TOC_TARGET_CLASS_NAME} style={{ padding: '0 120px' }}>
       <PostHero post={post} />
@@ -25,6 +31,10 @@ export const PostDetailPage: FC<Props> = ({ lang, slug }) => {
       {/* FIXME: Add href props after implementing categories single page */}
       <LinkHeading href="/">Categories</LinkHeading>
       <MDXContent code={post.body.code} />
+      <div className={styles.navPostWrapper}>
+        <NavPreviousPost post={prevPost} />
+        <NavNextPost post={nextPost} />
+      </div>
     </article>
   )
 }
diff --git a/frontend/apps/service-site/src/features/posts/utils/getNextPost.ts b/frontend/apps/service-site/src/features/posts/utils/getNextPost.ts
new file mode 100644
index 000000000..72be55904
--- /dev/null
+++ b/frontend/apps/service-site/src/features/posts/utils/getNextPost.ts
@@ -0,0 +1,24 @@
+import type { Lang } from '@/features/i18n'
+import type { Post } from 'contentlayer/generated'
+import { filterPostsByLang } from './filterPostsByLang'
+import { sortPostsByDate } from './sortPostsByDate'
+
+type Params = {
+  lang: Lang
+  targetPost: Post
+}
+
+export function getNextPost({ lang, targetPost }: Params) {
+  const posts = filterPostsByLang(lang)
+  const sortedPosts = sortPostsByDate(posts)
+
+  const targetIndex = sortedPosts.findIndex(
+    (post) => post._id === targetPost._id,
+  )
+
+  if (targetIndex === -1 || targetIndex === sortedPosts.length - 1) {
+    return undefined
+  }
+
+  return sortedPosts[targetIndex + 1]
+}
diff --git a/frontend/apps/service-site/src/features/posts/utils/getPrevPost.ts b/frontend/apps/service-site/src/features/posts/utils/getPrevPost.ts
new file mode 100644
index 000000000..8f69b0319
--- /dev/null
+++ b/frontend/apps/service-site/src/features/posts/utils/getPrevPost.ts
@@ -0,0 +1,24 @@
+import type { Lang } from '@/features/i18n'
+import type { Post } from 'contentlayer/generated'
+import { filterPostsByLang } from './filterPostsByLang'
+import { sortPostsByDate } from './sortPostsByDate'
+
+type Params = {
+  lang: Lang
+  targetPost: Post
+}
+
+export function getPrevPost({ lang, targetPost }: Params) {
+  const posts = filterPostsByLang(lang)
+  const sortedPosts = sortPostsByDate(posts)
+
+  const targetIndex = sortedPosts.findIndex(
+    (post) => post._id === targetPost._id,
+  )
+
+  if (targetIndex === -1 || targetIndex === 0) {
+    return undefined
+  }
+
+  return sortedPosts[targetIndex - 1]
+}
diff --git a/frontend/apps/service-site/src/features/posts/utils/index.ts b/frontend/apps/service-site/src/features/posts/utils/index.ts
index 205b31b29..7f3d51874 100644
--- a/frontend/apps/service-site/src/features/posts/utils/index.ts
+++ b/frontend/apps/service-site/src/features/posts/utils/index.ts
@@ -1,3 +1,5 @@
 export * from './filterPostsByLang'
 export * from './findPostByLangAndSlug'
+export * from './getNextPost'
+export * from './getPrevPost'
 export * from './sortPostsByDate'