Postコンポーネントのプロパティ調整

cuculus-dev · Feb 14, 2024 · fd08968 · fd08968
1 parent 2989098
commit fd08968
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 49 deletions.
diff --git a/src/app/(menu)/(public)/[username]/posts/_components/PostPage.tsx b/src/app/(menu)/(public)/[username]/posts/_components/PostPage.tsx
@@ -21,19 +21,7 @@ export function PostPage({ postId, fallbackData }: Props) {
 
   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}
-      />
+      <Post {...data} />
     </PrimaryColumn>
   );
 }
diff --git a/src/app/(menu)/_components/timeline/TimelinePost.tsx b/src/app/(menu)/_components/timeline/TimelinePost.tsx
@@ -30,19 +30,7 @@ function TimelinePost({
       }}
       interval={5}
     >
-      <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}
-      />
+      <Post {...data} />
     </ViewTrigger>
   ) : (
     <></>

diff --git a/src/app/(menu)/_components/timeline/layouts/Post.stories.ts b/src/app/(menu)/_components/timeline/layouts/Post.stories.ts
@@ -19,13 +19,14 @@ export const NormalPost: Story = {
     },
   },
   args: {
-    displayName: 'ククルス',
-    userName: 'cuculus',
-    profileImageUrl: '/',
+    author: {
+      name: 'ククルス',
+      username: 'cuculus',
+      profileImageUrl: '/',
+    },
     text: 'ココに文章が表示されます。\n改行も適用されます。',
-    postId: '27392710123986944',
+    id: '27392710123986944',
     postedAt: new Date(),
-    replyCount: 0,
     repostCount: 0,
     favoriteCount: 0,
     favorited: false,

diff --git a/src/app/(menu)/_components/timeline/layouts/Post.tsx b/src/app/(menu)/_components/timeline/layouts/Post.tsx
@@ -74,34 +74,41 @@ const MomentLinks = styled(Link)`
   }
 `;
 
-type Props = {
-  displayName: string;
-  userName: string;
+type UserProps = {
+  name: string;
+  username: string;
   profileImageUrl: string;
-  text: string;
-  postId: string;
+};
+
+type PostProps = {
+  id: string;
+  originalPostId?: string;
+  replyToPostId?: string;
+  author: UserProps;
+  text?: string;
   postedAt: Date;
-  replyCount: number;
+};
+
+type Props = {
   favorited: boolean;
   favoriteCount: number;
   reposted: boolean;
   repostCount: number;
-};
+  originalPost?: PostProps;
+} & PostProps;
 
 export default function Post({
-  displayName,
-  userName,
-  profileImageUrl,
   text,
-  postId,
+  id,
   postedAt,
   favorited,
   favoriteCount,
   reposted,
   repostCount,
+  author,
 }: Props) {
   const router = useRouter();
-  const postUrl = `/${userName}/posts/${postId}`;
+  const postUrl = `/${author.username}/posts/${id}`;
 
   return (
     <Article>
@@ -121,16 +128,19 @@ export default function Post({
         <div style={{ padding: '0 16px' }}>
           {/*<div>〇〇さんがリポストしました。</div>*/}
           <Original>
-            <AvatarIcon src={profileImageUrl} href={`/${userName}`} />
+            <AvatarIcon
+              src={author.profileImageUrl}
+              href={`/${author.username}`}
+            />
             <Content>
               <Header>
                 <ProfileLink
-                  href={`/${userName}`}
+                  href={`/${author.username}`}
                   onClick={(event) => event.stopPropagation()}
                 >
-                  <DisplayName>{displayName}</DisplayName>
+                  <DisplayName>{author.name}</DisplayName>
                   <span style={{ color: '#8899a6', marginLeft: '4px' }}>
-                    @{userName}
+                    @{author.username}
                   </span>
                 </ProfileLink>
                 <Tooltip title={format(postedAt, 'yyyy/MM/dd HH:mm:ss')}>
@@ -153,12 +163,12 @@ export default function Post({
               <Footer>
                 <div>{/*リプライボタン*/}</div>
                 <RepostButton
-                  postId={postId}
+                  postId={id}
                   reposted={reposted}
                   repostCount={repostCount}
                 />
                 <FavoriteButton
-                  postId={postId}
+                  postId={id}
                   favorited={favorited}
                   favoriteCount={favoriteCount}
                 />