Commit before facing unfixable bug

Author: velopert

src/components/post/PostCommentItem.tsx

@@ -1,11 +1,12 @@
-import * as React from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Comment } from '../../lib/graphql/post';
 import palette from '../../lib/styles/palette';
 import { formatDate } from '../../lib/utils';
 import Typography from '../common/Typography';
-import { PlusBoxIcon } from '../../static/svg';
+import { PlusBoxIcon, MinusBoxIcon } from '../../static/svg';
 import { userThumbnail } from '../../static/images';
+import useBoolean from '../../lib/hooks/useBoolean';
 
 const PostCommentItemBlock = styled.div`
   padding-top: 1.5rem;
@@ -61,23 +62,66 @@ const CommentHead = styled.div`
 const CommentText = styled.p``;
 const CommentFoot = styled.div`
   margin-top: 2rem;
-  .toggler {
-    display: flex;
-    align-items: center;
-    color: ${palette.teal6};
-    font-weight: bold;
-    svg {
-      margin-right: 0.5rem;
-    }
+`;
+const TogglerBlock = styled.div`
+  display: flex;
+  align-items: center;
+  color: ${palette.teal6};
+  font-weight: bold;
+  svg {
+    margin-right: 0.5rem;
+  }
+  cursor: pointer;
+  &:hover {
+    color: ${palette.teal5};
   }
 `;
 
 export interface PostCommentItemProps {
   comment: Comment;
+  onLoadReplies: (id: string) => Promise<any>;
+  onReply: (options: { commentId: string; text: string }) => any;
+}
+
+interface TogglerProps {
+  open: boolean;
+  count: number;
+  onToggle: () => any;
 }
 
-const PostCommentItem: React.FC<PostCommentItemProps> = ({ comment }) => {
-  const { user, created_at, text } = comment;
+const Toggler: React.FC<TogglerProps> = ({ open, onToggle, count }) => {
+  const openText = count ? `${count}개의 답글` : `답글 달기`;
+
+  return (
+    <TogglerBlock onClick={onToggle}>
+      {open ? <MinusBoxIcon /> : <PlusBoxIcon />}
+      <span>{open ? '숨기기' : openText}</span>
+    </TogglerBlock>
+  );
+};
+
+const PostCommentItem: React.FC<PostCommentItemProps> = ({
+  comment,
+  onLoadReplies,
+  onReply,
+}) => {
+  const { id, user, created_at, text, replies, replies_count } = comment;
+  const [open, onToggle] = useBoolean(false);
+
+  console.log(comment);
+  useEffect(() => {
+    const fetch = async () => {
+      try {
+        await onLoadReplies(id);
+      } catch (e) {
+        console.log(e);
+      }
+    };
+    if (open && !replies) {
+      fetch();
+    }
+  }, [id, onLoadReplies, open, replies]);
+
   return (
     <PostCommentItemBlock>
       <CommentHead>
@@ -100,10 +144,7 @@ const PostCommentItem: React.FC<PostCommentItemProps> = ({ comment }) => {
         <CommentText>{text}</CommentText>
       </Typography>
       <CommentFoot>
-        <div className="toggler">
-          <PlusBoxIcon />
-          <span>답글 달기</span>
-        </div>
+        <Toggler open={open} onToggle={onToggle} count={replies_count} />
       </CommentFoot>
     </PostCommentItemBlock>
   );

src/components/post/PostCommentsList.tsx

@@ -10,18 +10,23 @@ const PostCommentsListBlock = styled.div`
 export interface PostCommentsListProps {
   comments: Comment[];
   onLoadReplies: (id: string) => any;
-  onReply: (options: {
-    commentId: string;
-    postId: string;
-    text: string;
-  }) => any;
+  onReply: (options: { commentId: string; text: string }) => any;
 }
 
-const PostCommentsList: React.FC<PostCommentsListProps> = ({ comments }) => {
+const PostCommentsList: React.FC<PostCommentsListProps> = ({
+  comments,
+  onLoadReplies,
+  onReply,
+}) => {
   return (
     <PostCommentsListBlock>
       {comments.map(comment => (
-        <PostCommentItem comment={comment} key={comment.id} />
+        <PostCommentItem
+          comment={comment}
+          key={comment.id}
+          onLoadReplies={onLoadReplies}
+          onReply={onReply}
+        />
       ))}
     </PostCommentsListBlock>
   );

src/components/post/__tests__/PostCommentItem.test.tsx

@@ -20,7 +20,11 @@ describe('PostCommentItem', () => {
   };
 
   const setup = (props: Partial<PostCommentItemProps> = {}) => {
-    const initialProps: PostCommentItemProps = { comment: sampleComment };
+    const initialProps: PostCommentItemProps = {
+      comment: sampleComment,
+      onLoadReplies: () => Promise.resolve(),
+      onReply: () => {},
+    };
     const utils = render(<PostCommentItem {...initialProps} {...props} />);
     return {
       ...utils,

src/containers/post/PostComments.tsx

@@ -18,7 +18,6 @@ const PostComments: React.FC<PostCommentsProps> = ({ comments, postId }) => {
         {(writeComment, { client }: MutationResult) => {
           type ReplyOptions = {
             commentId: string;
-            postId: string;
             text: string;
           };
           const onLoadReplies = (id: string) => {
@@ -30,7 +29,7 @@ const PostComments: React.FC<PostCommentsProps> = ({ comments, postId }) => {
               fetchPolicy: 'network-only',
             });
           };
-          const onReply = async ({ commentId, postId, text }: ReplyOptions) => {
+          const onReply = async ({ commentId, text }: ReplyOptions) => {
             try {
               await writeComment({
                 variables: {

src/lib/graphql/post.ts

@@ -166,6 +166,24 @@ export const RELOAD_COMMENTS = gql`
   }
 `;
 
+export const GET_COMMENT = gql`
+  query GetComment($id: ID!) {
+    comment(comment_id: $id) {
+      id
+      user {
+        id
+        username
+        profile {
+          thumbnail
+        }
+      }
+      text
+      replies_count
+      created_at
+    }
+  }
+`;
+
 export const RELOAD_REPLIES = gql`
   query ReloadReplies($id: ID!) {
     comment(comment_id: $id) {
@@ -180,6 +198,19 @@ export const RELOAD_REPLIES = gql`
       text
       replies_count
       created_at
+      replies {
+        id
+        user {
+          id
+          username
+          profile {
+            thumbnail
+          }
+        }
+        text
+        replies_count
+        created_at
+      }
     }
   }
 `;

src/lib/hooks/useBoolean.tsx

@@ -0,0 +1,14 @@
+import { useState, useCallback } from 'react';
+
+const useBoolean = (initialValue: boolean) => {
+  const [value, setValue] = useState(initialValue);
+  const toggle = useCallback(() => setValue(value => !value), []);
+
+  return [value, toggle, setValue] as [
+    typeof value,
+    typeof toggle,
+    typeof setValue
+  ];
+};
+
+export default useBoolean;