chore: add commenter info & create date

Pyotato · Apr 11, 2024 · e107614 · e107614
1 parent 83f5d8f
commit e107614
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 13 deletions.
diff --git a/src/app/roadmap/post/[...id]/@comment/Comments.tsx b/src/app/roadmap/post/[...id]/@comment/Comments.tsx
@@ -16,10 +16,13 @@ import { DataWithPages } from '@/types';
 export interface Comment {
   roadmapId: number;
   content: string;
-  nickname: string;
   createdAt: string | Date;
   updatedAt: string | Date;
-  avatarUrl?: string;
+
+  member: {
+    avatarUrl?: string;
+    nickname: string;
+  };
 }
 export interface CommentData extends DataWithPages {
   result: Array<Comment | null>;
@@ -37,7 +40,7 @@ const Comments = () => {
   const loadDataFromApi = async ({ pageParam }: { pageParam: number }) => {
     const [comments] = await Promise.all([
       getApiResponse<CommentData>({
-        apiEndpoint: `${process.env.NEXT_PUBLIC_API}/roadmaps/load-roadmap/${currPostId[0]}/comments?page=${pageParam}&size=5`,
+        apiEndpoint: `${process.env.NEXT_PUBLIC_API}/roadmaps/${currPostId[0]}/comments?lastCommentId=${pageParam}&size=20`,
         revalidate: 0, // 1 mins cache
       }),
     ]);
@@ -83,6 +86,12 @@ const Comments = () => {
       return <Box my='xl'>아직 댓글이 없습니다.</Box>;
     return (
       <Box py='xl'>
+        {/* 
+        // !! need to update api response : 
+        // !! needs to include following fields: totalPage, previous, next
+            // !! totalPage: 28, 
+            // !! previous: null,
+            // !! next: '/api/roadmaps/1/comments?lastCommentId=1&size=20
         {comments.pages.map(({ comments }, i) =>
           comments?.next ? (
             <CommentHtml
@@ -93,7 +102,45 @@ const Comments = () => {
           ) : (
             <CommentHtml key={i} commentData={comments?.result ?? []} />
           ),
-        )}
+        )} */}
+
+        {/* {comments.pages[0].comments.map(() =>
+          comments?.next ? (
+            <CommentHtml
+              key={i}
+              commentData={comments?.result || []}
+              innerRef={ref}
+            />
+          ) : (
+            <CommentHtml key={i} commentData={comments?.result ?? []} />
+          ),
+        )} */}
+        {/* {comments.pages[0].comments.map((v, i) => (
+          // <div key={v.id}>
+          //   <div>{v.id} </div>
+          //   <div>{v.content} </div>
+          // </div>
+          <CommentHtml key={i} commentData={ ?? []} />
+        ))} */}
+
+        {/* {comments.pages.map(({ comments }, i) =>
+          comments?.next ? (
+            <CommentHtml
+              key={i}
+              innerRef={ref}
+              commentData={comments.pages[0].comments ?? []}
+            />
+          ) : (
+            <CommentHtml
+              key={i}
+              commentData={comments.pages[0].comments ?? []}
+            />
+          ),
+        )} */}
+        <CommentHtml
+          commentData={comments.pages[0].comments ?? []}
+          innerRef={ref}
+        />
       </Box>
     );
   }

diff --git a/src/components/shared/list/CommentHtml.tsx b/src/components/shared/list/CommentHtml.tsx
@@ -13,7 +13,7 @@ import classes from './CommentHtml.module.css';
 
 import { CommentData } from '@/app/roadmap/post/[...id]/@comment/Comments';
 import { randomAvartars, randomNum } from '@/constants/default/avatars';
-import { toTSXString } from '@/utils/shared';
+import { toKorDateTime, toTSXString } from '@/utils/shared';
 
 export interface CommentProps extends PropsWithChildren {
   commentData: CommentData['result'];
@@ -22,7 +22,6 @@ export interface CommentProps extends PropsWithChildren {
 
 export function CommentHtml({ commentData, innerRef }: CommentProps) {
   if (commentData.length === 0) return <></>;
-
   const comments = commentData.map((v, i) =>
     i === commentData.length - 1 ? (
       <Paper
@@ -35,12 +34,12 @@ export function CommentHtml({ commentData, innerRef }: CommentProps) {
       >
         <Group>
           <Avatar
-            src={v?.avatarUrl || randomAvartars(randomNum)}
-            alt={v?.nickname}
+            src={v?.member?.avatarUrl || randomAvartars(randomNum)}
+            alt={v?.member?.nickname}
             radius='xl'
           />
           <div>
-            <Text fz='sm'>{v?.nickname}</Text>
+            <Text fz='sm'>{v?.member?.nickname}</Text>
             <Text fz='xs' c='dimmed'>
               {toTSXString(v?.createdAt)}
             </Text>
@@ -65,14 +64,14 @@ export function CommentHtml({ commentData, innerRef }: CommentProps) {
       >
         <Group>
           <Avatar
-            src={v?.avatarUrl ?? randomAvartars(randomNum)}
-            alt={v?.nickname}
+            src={v?.member?.avatarUrl ?? randomAvartars(randomNum)}
+            alt={v?.member?.nickname}
             radius='xl'
           />
           <div>
-            <Text fz='sm'>{v?.nickname}</Text>
+            <Text fz='sm'>{v?.member?.nickname}</Text>
             <Text fz='xs' c='dimmed'>
-              {toTSXString(v?.createdAt)}
+              {toKorDateTime(`${v?.createdAt}`)}
             </Text>
           </div>
         </Group>