From 7dbe75db60904fadb14dafbfdd91234897ae3fa0 Mon Sep 17 00:00:00 2001
From: junkisai <jonki.beam@gmail.com>
Date: Tue, 8 Oct 2024 19:00:07 +0900
Subject: [PATCH] refactor: Create PostDetailPage common component to eliminate
 code duplication

---
 .../src/app/[lang]/posts/[slug]/page.tsx      | 19 ++-----------
 .../src/app/posts/[slug]/page.tsx             | 19 ++-----------
 .../PostDetailPage/PostDetailPage.tsx         | 28 +++++++++++++++++++
 .../posts/components/PostDetailPage/index.ts  |  1 +
 .../src/features/posts/components/index.ts    |  1 +
 5 files changed, 34 insertions(+), 34 deletions(-)
 create mode 100644 frontend/apps/service-site/src/features/posts/components/PostDetailPage/PostDetailPage.tsx
 create mode 100644 frontend/apps/service-site/src/features/posts/components/PostDetailPage/index.ts

diff --git a/frontend/apps/service-site/src/app/[lang]/posts/[slug]/page.tsx b/frontend/apps/service-site/src/app/[lang]/posts/[slug]/page.tsx
index a0026a633..489a66bde 100644
--- a/frontend/apps/service-site/src/app/[lang]/posts/[slug]/page.tsx
+++ b/frontend/apps/service-site/src/app/[lang]/posts/[slug]/page.tsx
@@ -1,9 +1,7 @@
 import type { PageProps } from '@/app/types'
 import { langSchema, langs } from '@/features/i18n'
-import { findPostByLangAndSlug } from '@/features/posts'
-import { MDXContent } from '@/libs/contentlayer'
+import { PostDetailPage, findPostByLangAndSlug } from '@/features/posts'
 import { allPosts } from 'contentlayer/generated'
-import { format, parseISO } from 'date-fns'
 import { notFound } from 'next/navigation'
 import { object, parse, string } from 'valibot'
 
@@ -30,18 +28,5 @@ const paramsSchema = object({
 export default function Page({ params }: PageProps) {
   const { lang, slug } = parse(paramsSchema, params)
 
-  const post = findPostByLangAndSlug({ lang, slug })
-  if (!post) notFound()
-
-  return (
-    <article>
-      <div>
-        <time dateTime={post.date}>
-          {format(parseISO(post.date), 'LLLL d, yyyy')}
-        </time>
-        <h1>{post.title}</h1>
-      </div>
-      <MDXContent code={post.body.code} />
-    </article>
-  )
+  return <PostDetailPage lang={lang} slug={slug} />
 }
diff --git a/frontend/apps/service-site/src/app/posts/[slug]/page.tsx b/frontend/apps/service-site/src/app/posts/[slug]/page.tsx
index 440213567..1f3053108 100644
--- a/frontend/apps/service-site/src/app/posts/[slug]/page.tsx
+++ b/frontend/apps/service-site/src/app/posts/[slug]/page.tsx
@@ -1,9 +1,7 @@
 import type { PageProps } from '@/app/types'
 import { fallbackLang } from '@/features/i18n'
-import { findPostByLangAndSlug } from '@/features/posts'
-import { MDXContent } from '@/libs/contentlayer'
+import { PostDetailPage, findPostByLangAndSlug } from '@/features/posts'
 import { allPosts } from 'contentlayer/generated'
-import { format, parseISO } from 'date-fns'
 import { notFound } from 'next/navigation'
 import { object, parse, string } from 'valibot'
 
@@ -26,18 +24,5 @@ const paramsSchema = object({
 export default function Page({ params }: PageProps) {
   const { slug } = parse(paramsSchema, params)
 
-  const post = findPostByLangAndSlug({ lang: fallbackLang, slug })
-  if (!post) notFound()
-
-  return (
-    <article>
-      <div>
-        <time dateTime={post.date}>
-          {format(parseISO(post.date), 'LLLL d, yyyy')}
-        </time>
-        <h1>{post.title}</h1>
-      </div>
-      <MDXContent code={post.body.code} />
-    </article>
-  )
+  return <PostDetailPage lang={fallbackLang} slug={slug} />
 }
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
new file mode 100644
index 000000000..a6081ea63
--- /dev/null
+++ b/frontend/apps/service-site/src/features/posts/components/PostDetailPage/PostDetailPage.tsx
@@ -0,0 +1,28 @@
+import type { Lang } from '@/features/i18n'
+import { MDXContent } from '@packages/mdx-components'
+import { format, parseISO } from 'date-fns'
+import { notFound } from 'next/navigation'
+import type { FC } from 'react'
+import { findPostByLangAndSlug } from '../../utils'
+
+type Props = {
+  lang: Lang
+  slug: string
+}
+
+export const PostDetailPage: FC<Props> = ({ lang, slug }) => {
+  const post = findPostByLangAndSlug({ lang, slug })
+  if (!post) notFound()
+
+  return (
+    <article>
+      <div>
+        <time dateTime={post.date}>
+          {format(parseISO(post.date), 'LLLL d, yyyy')}
+        </time>
+        <h1>{post.title}</h1>
+      </div>
+      <MDXContent code={post.body.code} />
+    </article>
+  )
+}
diff --git a/frontend/apps/service-site/src/features/posts/components/PostDetailPage/index.ts b/frontend/apps/service-site/src/features/posts/components/PostDetailPage/index.ts
new file mode 100644
index 000000000..92ceaef7a
--- /dev/null
+++ b/frontend/apps/service-site/src/features/posts/components/PostDetailPage/index.ts
@@ -0,0 +1 @@
+export * from './PostDetailPage'
diff --git a/frontend/apps/service-site/src/features/posts/components/index.ts b/frontend/apps/service-site/src/features/posts/components/index.ts
index a43e48058..9c59e2b65 100644
--- a/frontend/apps/service-site/src/features/posts/components/index.ts
+++ b/frontend/apps/service-site/src/features/posts/components/index.ts
@@ -1 +1,2 @@
+export * from './PostDetailPage'
 export * from './PostListPage'