refactor: CRUD 시 총 댓글 개수 refetch하도록 변경

darass-team · Aug 6, 2021 · edec5ab · edec5ab
1 parent ea35c94
commit edec5ab
Show file tree

Hide file tree

Showing 12 changed files with 82 additions and 56 deletions.
diff --git a/frontend/reply-module/src/__test__/intergration/adminUserComment.test.tsx b/frontend/reply-module/src/__test__/intergration/adminUserComment.test.tsx
@@ -70,6 +70,7 @@ describe("관리자 유저일 때의 동작 테스트", () => {
 
     const commentList = render(
       <CommentList
+        totalCommentsCount={_comments.length}
         user={user}
         project={project}
         comments={guestComments}
@@ -100,6 +101,7 @@ describe("관리자 유저일 때의 동작 테스트", () => {
 
     const commentList = render(
       <CommentList
+        totalCommentsCount={_comments.length}
         user={user}
         project={project}
         comments={socialLoginedComments}
@@ -131,6 +133,7 @@ describe("관리자 유저일 때의 동작 테스트", () => {
 
     const commentList = render(
       <CommentList
+        totalCommentsCount={_comments.length}
         user={user}
         project={project}
         comments={guestComments}
@@ -160,6 +163,7 @@ describe("관리자 유저일 때의 동작 테스트", () => {
 
     const commentList = render(
       <CommentList
+        totalCommentsCount={_comments.length}
         user={user}
         project={project}
         comments={socialLoginedCommentsWrittenByOther}
@@ -188,6 +192,7 @@ describe("관리자 유저일 때의 동작 테스트", () => {
 
     const commentList = render(
       <CommentList
+        totalCommentsCount={_comments.length}
         user={user}
         project={project}
         comments={socialLoginedCommentsWrittenByMe}
@@ -212,6 +217,7 @@ describe("관리자 유저일 때의 동작 테스트", () => {
 
     const commentList = render(
       <CommentList
+        totalCommentsCount={_comments.length}
         user={user}
         project={project}
         comments={comments}

diff --git a/frontend/reply-module/src/__test__/intergration/guestUserComment.test.tsx b/frontend/reply-module/src/__test__/intergration/guestUserComment.test.tsx
@@ -74,6 +74,7 @@ describe("비로그인 유저 댓글 CRUD 테스트 코드를 작성한다.", ()
       const comments: Comment[] = JSON.parse(JSON.stringify(_comments));
       const commentList = render(
         <CommentList
+          totalCommentsCount={_comments.length}
           comments={comments}
           project={undefined}
           notice={""}
@@ -95,6 +96,7 @@ describe("비로그인 유저 댓글 CRUD 테스트 코드를 작성한다.", ()
       const comments: Comment[] = JSON.parse(JSON.stringify(_comments));
       const commentList = render(
         <CommentList
+          totalCommentsCount={_comments.length}
           comments={comments}
           project={undefined}
           notice={""}
@@ -155,6 +157,7 @@ describe("비로그인 유저 댓글 CRUD 테스트 코드를 작성한다.", ()
       const guestUserComments = comments.filter(comment => comment.user.type === "GuestUser");
       const commentList = render(
         <CommentList
+          totalCommentsCount={_comments.length}
           user={undefined}
           comments={guestUserComments}
           project={undefined}
@@ -187,6 +190,8 @@ describe("비로그인 유저 댓글 CRUD 테스트 코드를 작성한다.", ()
       const guestUserComments = comments.filter(comment => comment.user.type === "GuestUser");
       const commentList = render(
         <CommentList
+          totalCommentsCount={_comments.length}
+          user={undefined}
           comments={guestUserComments}
           project={undefined}
           notice={""}
@@ -226,6 +231,7 @@ describe("비로그인 유저 댓글 CRUD 테스트 코드를 작성한다.", ()
 
       const { rerender } = render(
         <CommentList
+          totalCommentsCount={_comments.length}
           user={undefined}
           project={undefined}
           comments={comments}
@@ -242,6 +248,7 @@ describe("비로그인 유저 댓글 CRUD 테스트 코드를 작성한다.", ()
 
       rerender(
         <CommentList
+          totalCommentsCount={_comments.length}
           user={undefined}
           project={undefined}
           comments={comments}

diff --git a/frontend/reply-module/src/__test__/intergration/socialLoginUserComment.test.tsx b/frontend/reply-module/src/__test__/intergration/socialLoginUserComment.test.tsx
@@ -74,6 +74,7 @@ describe("로그인 유저의 댓글 CRUD 테스트 코드를 작성한다.", ()
       const comments = JSON.parse(JSON.stringify(_comments));
       const commentList = render(
         <CommentList
+          totalCommentsCount={_comments.length}
           user={user}
           comments={comments}
           project={undefined}
@@ -115,6 +116,7 @@ describe("로그인 유저의 댓글 CRUD 테스트 코드를 작성한다.", ()
       const myComments = JSON.parse(JSON.stringify(_comments.filter(comment => comment.user.id === user.id)));
       const commentList = render(
         <CommentList
+          totalCommentsCount={_comments.length}
           user={user}
           project={undefined}
           notice={""}
@@ -152,6 +154,7 @@ describe("로그인 유저의 댓글 CRUD 테스트 코드를 작성한다.", ()
       );
       const commentList = render(
         <CommentList
+          totalCommentsCount={_comments.length}
           user={user}
           project={undefined}
           notice={""}
@@ -173,6 +176,7 @@ describe("로그인 유저의 댓글 CRUD 테스트 코드를 작성한다.", ()
       );
       const commentList = render(
         <CommentList
+          totalCommentsCount={_comments.length}
           user={user}
           project={undefined}
           notice={""}
@@ -202,6 +206,7 @@ describe("로그인 유저의 댓글 CRUD 테스트 코드를 작성한다.", ()
 
       const commentList = render(
         <CommentList
+          totalCommentsCount={_comments.length}
           user={user}
           project={undefined}
           notice={""}
@@ -232,6 +237,7 @@ describe("로그인 유저의 댓글 CRUD 테스트 코드를 작성한다.", ()
 
       const { rerender } = render(
         <CommentList
+          totalCommentsCount={_comments.length}
           user={user}
           project={undefined}
           comments={comments}
@@ -248,6 +254,7 @@ describe("로그인 유저의 댓글 CRUD 테스트 코드를 작성한다.", ()
 
       rerender(
         <CommentList
+          totalCommentsCount={_comments.length}
           user={user}
           project={undefined}
           comments={comments}
@@ -282,6 +289,7 @@ describe("로그인 유저의 댓글 CRUD 테스트 코드를 작성한다.", ()
 
     const { rerender } = render(
       <CommentList
+        totalCommentsCount={_comments.length}
         user={user}
         project={undefined}
         comments={comments}
@@ -298,6 +306,7 @@ describe("로그인 유저의 댓글 CRUD 테스트 코드를 작성한다.", ()
 
     rerender(
       <CommentList
+        totalCommentsCount={_comments.length}
         user={user}
         project={undefined}
         comments={comments}

diff --git a/frontend/reply-module/src/components/organisms/CommentList/index.tsx b/frontend/reply-module/src/components/organisms/CommentList/index.tsx
@@ -18,6 +18,7 @@ export interface Props {
   className?: string;
   user?: User;
   project?: Project;
+  totalCommentsCount: number;
   comments: CommentType[];
   sortOption: keyof typeof ORDER_BUTTON;
   notice: string;
@@ -29,12 +30,15 @@ const CommentList = ({
   className,
   user,
   project,
+  totalCommentsCount,
   comments,
   sortOption,
   notice,
   onSelectSortOption,
   onShowMoreComment
 }: Props) => {
+  const hasMoreComments = comments.length < totalCommentsCount;
+
   return (
     <Container className={className}>
       <OrderButtonContainer>
@@ -55,40 +59,38 @@ const CommentList = ({
       </OrderButtonContainer>
       <CommentContainer>
         {notice && <Notice>{notice}</Notice>}
-        {!notice && comments.length === 0 ? (
-          <Notice>아직 작성된 댓글이 없습니다.</Notice>
-        ) : (
-          comments.map(comment => {
-            const authorId = comment.user.id;
+        {comments.map(comment => {
+          const authorId = comment.user.id;
 
-            const iAmGuestUser = !user;
-            const iAmAdmin = user !== undefined && project?.userId === user.id;
+          const iAmGuestUser = !user;
+          const iAmAdmin = user !== undefined && project?.userId === user.id;
 
-            const thisCommentIsMine = authorId !== undefined && authorId === user?.id;
-            const thisCommentIsWrittenByAdmin = comment.user.id === project?.userId;
-            const thisCommentIsWrittenByGuest = comment.user.type === "GuestUser";
+          const thisCommentIsMine = authorId !== undefined && authorId === user?.id;
+          const thisCommentIsWrittenByAdmin = comment.user.id === project?.userId;
+          const thisCommentIsWrittenByGuest = comment.user.type === "GuestUser";
 
-            const align = thisCommentIsWrittenByAdmin ? "right" : "left";
-            const shouldShowOption = iAmAdmin || thisCommentIsMine || (iAmGuestUser && thisCommentIsWrittenByGuest);
+          const align = thisCommentIsWrittenByAdmin ? "right" : "left";
+          const shouldShowOption = iAmAdmin || thisCommentIsMine || (iAmGuestUser && thisCommentIsWrittenByGuest);
 
-            return (
-              <Comment
-                user={user}
-                comment={comment}
-                key={comment.id}
-                shouldShowOption={shouldShowOption}
-                iAmAdmin={iAmAdmin}
-                thisCommentIsMine={thisCommentIsMine}
-                align={align}
-              />
-            );
-          })
-        )}
+          return (
+            <Comment
+              user={user}
+              comment={comment}
+              key={comment.id}
+              shouldShowOption={shouldShowOption}
+              iAmAdmin={iAmAdmin}
+              thisCommentIsMine={thisCommentIsMine}
+              align={align}
+            />
+          );
+        })}
       </CommentContainer>
-      <ShowMoreButton onClick={onShowMoreComment}>
-        <span>더 보기</span>
-        <DownArrow />
-      </ShowMoreButton>
+      {hasMoreComments && (
+        <ShowMoreButton onClick={onShowMoreComment}>
+          <span>더 보기</span>
+          <DownArrow />
+        </ShowMoreButton>
+      )}
     </Container>
   );
 };

diff --git a/frontend/reply-module/src/components/organisms/CommentList/styles.ts b/frontend/reply-module/src/components/organisms/CommentList/styles.ts
@@ -12,7 +12,7 @@ export const OrderButtonContainer = styled.div`
   display: flex;
   justify-content: flex-end;
   align-items: flex-start;
-  border-bottom: 2px solid ${PALETTE.GRAY_400};
+  border-bottom: 1px solid ${PALETTE.GRAY_400};
   padding-bottom: 1.6rem;
 `;
 
@@ -54,12 +54,14 @@ export const CommentContainer = styled.div`
 `;
 
 export const Notice = styled.span`
+  display: flex;
+  justify-content: center;
+  align-items: center;
   padding: 1.5rem 0;
   min-height: 7rem;
-  font-size: 1.6rem;
-  line-height: 2.4rem;
-  line-height: 2.4rem;
-  text-align: center;
+  font-size: 1.4rem;
+  line-height: 2.1rem;
+  color: ${PALETTE.GRAY_600};
   white-space: pre-wrap;
 `;
 

diff --git a/frontend/reply-module/src/components/organisms/Footer/styles.ts b/frontend/reply-module/src/components/organisms/Footer/styles.ts
@@ -6,7 +6,7 @@ export const Container = styled.footer`
   align-items: center;
   margin-top: 2rem;
   padding: 1rem 0;
-  border-top: 2px solid ${PALETTE.GRAY_400};
+  border-top: 1px solid ${PALETTE.GRAY_400};
 `;
 
 export const CopyRight = styled.span`

diff --git a/frontend/reply-module/src/components/pages/CommentArea/index.tsx b/frontend/reply-module/src/components/pages/CommentArea/index.tsx
@@ -56,7 +56,7 @@ const CommentArea = () => {
   }, [sortOption]);
 
   useEffect(() => {
-    if (pageParam === 1) return;
+    if (pageParam === INITIAL_PAGE_PARAM) return;
     showMoreComment({ url, projectSecretKey, sortOption, pageParam });
   }, [pageParam]);
 
@@ -67,28 +67,23 @@ const CommentArea = () => {
       return;
     }
 
+    setNotice("");
+  }, [projectLoading, commentsByPageLoading, totalCommentsCountLoading]);
+
+  useEffect(() => {
     if (projectError) setNotice(projectError.message);
     if (totalCommentsCountError) setNotice(totalCommentsCountError.message);
     if (commentsByPageError) setNotice(commentsByPageError.message);
-    if (
-      !(
-        projectError ||
-        totalCommentsCountError ||
-        commentsByPageError ||
-        projectLoading ||
-        totalCommentsCountLoading ||
-        commentsByPageLoading
-      )
-    )
+
+    if (!(projectError || totalCommentsCountError || commentsByPageError)) {
+      if (totalCommentsCount === 0) {
+        setNotice("작성된 댓글이 없습니다.");
+        return;
+      }
+
       setNotice("");
-  }, [
-    projectLoading,
-    commentsByPageLoading,
-    totalCommentsCountLoading,
-    projectError,
-    totalCommentsCountError,
-    commentsByPageError
-  ]);
+    }
+  }, [projectError, totalCommentsCountError, commentsByPageError, totalCommentsCount]);
 
   const onShowMoreComment = () => {
     setPageParam(currentPageParam => currentPageParam + 1);
@@ -133,6 +128,7 @@ const CommentArea = () => {
       <CommentInput url={url} projectSecretKey={projectSecretKey} user={user} />
       <CommentList
         user={user}
+        totalCommentsCount={totalCommentsCount || 0}
         comments={comments || []}
         project={project}
         sortOption={sortOption}

diff --git a/frontend/reply-module/src/hooks/useCommentsByPage.ts b/frontend/reply-module/src/hooks/useCommentsByPage.ts
@@ -1,5 +1,6 @@
 import { useQuery } from "react-query";
 import { QUERY } from "../constants/api";
+import { INITIAL_PAGE_PARAM } from "../constants/comment";
 import { REACT_QUERY_KEY } from "../constants/reactQueryKey";
 import { Comment } from "../types";
 import { GetCommentsRequestParams } from "../types/comment";
@@ -20,7 +21,7 @@ export const useCommentsByPage = ({
   url,
   projectSecretKey,
   sortOption = "oldest",
-  pageParam = 1
+  pageParam = INITIAL_PAGE_PARAM
 }: GetCommentsRequestParams) => {
   const {
     data: comments,

diff --git a/frontend/reply-module/src/hooks/useCreateComment.ts b/frontend/reply-module/src/hooks/useCreateComment.ts
@@ -25,6 +25,7 @@ export const useCreateComment = () => {
   const createMutation = useMutation<Comment, Error, CreateCommentRequestData>(_data => _createComment(_data), {
     onSuccess: () => {
       queryClient.invalidateQueries(REACT_QUERY_KEY.COMMENT);
+      queryClient.invalidateQueries(REACT_QUERY_KEY.COMMENT_COUNT);
     }
   });
 

diff --git a/frontend/reply-module/src/hooks/useDeleteComment.ts b/frontend/reply-module/src/hooks/useDeleteComment.ts
@@ -27,6 +27,7 @@ export const useDeleteComment = () => {
   const deleteMutation = useMutation<void, Error, DeleteCommentRequestParameter>(data => _deleteComment(data), {
     onSuccess: () => {
       queryClient.invalidateQueries(REACT_QUERY_KEY.COMMENT);
+      queryClient.invalidateQueries(REACT_QUERY_KEY.COMMENT_COUNT);
     }
   });
 

diff --git a/frontend/reply-module/src/hooks/useEditComment.ts b/frontend/reply-module/src/hooks/useEditComment.ts
@@ -28,6 +28,7 @@ export const useEditComment = () => {
   const editMutation = useMutation<void, Error, EditCommentParameter>(comment => _editComment(comment), {
     onSuccess: () => {
       queryClient.invalidateQueries(REACT_QUERY_KEY.COMMENT);
+      queryClient.invalidateQueries(REACT_QUERY_KEY.COMMENT_COUNT);
     }
   });