From d9e533f8702728e1d4c94ce79284ca0f0f47ebe6 Mon Sep 17 00:00:00 2001
From: takecchi <takecchi.kobayashi@gmail.com>
Date: Thu, 23 Nov 2023 23:09:49 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=E6=8A=95=E7=A8=BF=E8=A9=B3=E7=B4=B0?=
 =?UTF-8?q?=E3=83=AA=E3=83=80=E3=82=A4=E3=83=AC=E3=82=AF=E3=83=88=E3=81=A8?=
 =?UTF-8?q?=E3=83=A1=E3=82=BF=E3=83=87=E3=83=BC=E3=82=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[username]/posts/[postId]/page.tsx        | 62 ++++++++++++++++++-
 1 file changed, 59 insertions(+), 3 deletions(-)

diff --git a/src/app/(menu)/(public)/[username]/posts/[postId]/page.tsx b/src/app/(menu)/(public)/[username]/posts/[postId]/page.tsx
index f54d654f..a02886e5 100644
--- a/src/app/(menu)/(public)/[username]/posts/[postId]/page.tsx
+++ b/src/app/(menu)/(public)/[username]/posts/[postId]/page.tsx
@@ -1,8 +1,64 @@
 import ComingSoon from '@/app/(menu)/_components/main/ComingSoon';
+import { Metadata } from 'next';
+import { postsApi } from '@/libs/cuculus-client';
+import { notFound, redirect } from 'next/navigation';
+
+const TITLE_MAX_LENGTH = 70;
+
+type Params = { params: { username: string; postId: string } };
+
+async function fetchPost(postId: string) {
+  try {
+    return await postsApi.getPost({ id: postId });
+  } catch {
+    return undefined;
+  }
+}
+
+export async function generateMetadata({ params }: Params): Promise<Metadata> {
+  const post = await fetchPost(params.postId);
+  if (!post) {
+    return {};
+  }
+
+  let title = `${post.author.name} さん:「${post.text ?? ''}」`;
+  if (post.originalPost) {
+    title = `${post.originalPost.author.name} さん:「${
+      post.originalPost.text ?? ''
+    }」`;
+  }
+
+  // 最大長を超える場合は省略
+  if (title.length > TITLE_MAX_LENGTH) {
+    title = title.substring(0, TITLE_MAX_LENGTH - 3) + '...';
+  }
+  title = title + ' | Cuculus';
+
+  return {
+    title,
+    openGraph: {
+      title,
+      siteName: title,
+      locale: 'ja_JP',
+      type: 'profile',
+    },
+    twitter: {
+      title,
+      card: 'summary',
+    },
+  };
+}
+
+export default async function page({ params }: Params) {
+  const post = await fetchPost(params.postId);
+  if (!post) {
+    notFound();
+  }
+
+  if (post.author.username !== params.username) {
+    redirect(`/${post.author.username}/posts/${post.id}`);
+  }
 
-export default function page({}: {
-  params: { userName: string; postId: string };
-}) {
   return (
     <main style={{ height: '100vh' }}>
       <ComingSoon />

From b00843c999869a4387597d0d1fff87b8e2879388 Mon Sep 17 00:00:00 2001
From: takecchi <takecchi.kobayashi@gmail.com>
Date: Thu, 23 Nov 2023 23:20:38 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BB=AE=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[username]/posts/[postId]/page.tsx        | 10 ++---
 .../[username]/posts/_components/PostPage.tsx | 39 +++++++++++++++++++
 2 files changed, 44 insertions(+), 5 deletions(-)
 create mode 100644 src/app/(menu)/(public)/[username]/posts/_components/PostPage.tsx

diff --git a/src/app/(menu)/(public)/[username]/posts/[postId]/page.tsx b/src/app/(menu)/(public)/[username]/posts/[postId]/page.tsx
index a02886e5..9330ff5f 100644
--- a/src/app/(menu)/(public)/[username]/posts/[postId]/page.tsx
+++ b/src/app/(menu)/(public)/[username]/posts/[postId]/page.tsx
@@ -1,7 +1,7 @@
-import ComingSoon from '@/app/(menu)/_components/main/ComingSoon';
 import { Metadata } from 'next';
 import { postsApi } from '@/libs/cuculus-client';
 import { notFound, redirect } from 'next/navigation';
+import { PostPage } from '@/app/(menu)/(public)/[username]/posts/_components/PostPage';
 
 const TITLE_MAX_LENGTH = 70;
 
@@ -21,9 +21,9 @@ export async function generateMetadata({ params }: Params): Promise<Metadata> {
     return {};
   }
 
-  let title = `${post.author.name} さん:「${post.text ?? ''}」`;
+  let title = `${post.author.name}さん:「${post.text ?? ''}」`;
   if (post.originalPost) {
-    title = `${post.originalPost.author.name} さん:「${
+    title = `${post.originalPost.author.name}さん:「${
       post.originalPost.text ?? ''
     }」`;
   }
@@ -60,8 +60,8 @@ export default async function page({ params }: Params) {
   }
 
   return (
-    <main style={{ height: '100vh' }}>
-      <ComingSoon />
+    <main>
+      <PostPage postId={params.postId} fallbackData={post} />
     </main>
   );
 }
diff --git a/src/app/(menu)/(public)/[username]/posts/_components/PostPage.tsx b/src/app/(menu)/(public)/[username]/posts/_components/PostPage.tsx
new file mode 100644
index 00000000..1b53628d
--- /dev/null
+++ b/src/app/(menu)/(public)/[username]/posts/_components/PostPage.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import PrimaryColumn from '@/app/(menu)/_components/main/PrimaryColumn';
+import { UserPost } from '@cuculus/cuculus-api';
+import { usePostImmutable } from '@/swr/client/post';
+import Post from '@/app/(menu)/_components/timeline/layouts/Post';
+
+type Props = {
+  postId: string;
+  fallbackData?: UserPost;
+};
+
+// FIXME 仮作成。一旦タイムラインのコンポーネントと同じものを使用する
+export function PostPage({ postId, fallbackData }: Props) {
+  const { data } = usePostImmutable(postId, fallbackData);
+
+  if (!data) {
+    // FIXME 読み込み中
+    return <></>;
+  }
+
+  return (
+    <PrimaryColumn columnName="ポスト" showBack>
+      <Post
+        displayName={data.author.name}
+        userName={data.author.username}
+        profileImageUrl={data.author.profileImageUrl}
+        text={data.text ?? ''}
+        postId={data.id}
+        postedAt={data.postedAt}
+        replyCount={0} //FIXME
+        favorited={data.favorited}
+        favoriteCount={data.favoriteCount}
+        reposted={data.reposted}
+        repostCount={data.repostCount}
+      />
+    </PrimaryColumn>
+  );
+}