Merge pull request #70 from Pyotato/36-use_useinfinitequery_to_fetch_…

…on_scroll 36-fetch-comments-via-infiniteQuery-get-commenter-data
Pyotato · Apr 11, 2024 · 5688549 · 5688549
2 parents 2af9196 + e107614
commit 5688549
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 15 deletions.
diff --git a/src/app/roadmap/post/[...id]/@comment/CommentBox.tsx b/src/app/roadmap/post/[...id]/@comment/CommentBox.tsx
@@ -30,6 +30,7 @@ import TipTapTextEditor from '@/components/shared/tiptap/TipTapTextEditor';
 import {
   apiRoutes,
   EMPTY_YOUTUBE_HTML,
+  fail,
   REGEX_HTTP,
   success,
   warning,
@@ -97,7 +98,7 @@ const CommentBox = () => {
 
   const postResponseFromApi = async () => {
     const accessToken = token as unknown as JWT;
-    await Promise.resolve(
+    const res = await Promise.resolve(
       getApiResponse<undefined>({
         requestData: JSON.stringify({
           content: content,
@@ -111,7 +112,25 @@ const CommentBox = () => {
         },
       }),
     );
-    // !! api update needed for failed comment requests!
+
+    if (res?.errorCode === 401) {
+      notifications.show({
+        id: fail['401'].id,
+        withCloseButton: true,
+        autoClose: 300,
+        title: fail['401'].title,
+        message: `${res.message}\n로그인 후 이용해주세요.`,
+        color: fail['401'].color,
+        icon: (
+          <IconExclamationMark style={{ width: '20rem', height: '20rem' }} />
+        ),
+      });
+      setTimeout(() => {
+        signIn();
+      }, 400);
+      return;
+    }
+
     setContent('');
     notifications.show({
       id: success.comment.id,

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>

diff --git a/src/utils/shared/index.ts b/src/utils/shared/index.ts
@@ -53,3 +53,16 @@ export const getPageNum = (next: string | null) => {
  */
 export const newUrl = (url: string) =>
   `<p><a target="_blank" rel="noopener noreferrer nofollow" href="${url}">${url}</a></p>`;
+
+/**
+ * 2024-04-08T02:15:06.503546 형식의 날짜, 시간을
+ * 2024년 4월 8일 월요일 오전 2:15 형태로 변환
+ */
+
+export const toKorDateTime = (time: string | Date) => {
+  const temp = new Date(`${time}`);
+  return new Intl.DateTimeFormat('ko-KR', {
+    dateStyle: 'full',
+    timeStyle: 'short',
+  }).format(temp);
+};