投稿詳細画面の仮実装

src/app/(menu)/(public)/[username]/posts/[postId]/page.tsx

@@ -1,11 +1,67 @@
-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;
+
+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 />
+ <main>
+ <PostPage postId={params.postId} fallbackData={post} />
  </main>
  );
 }

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>
+ );
+}