Implements PostReplies and PostCommentWrite forReplies props

Author: velopert

src/components/post/PostCommentsWrite.tsx

@@ -33,12 +33,16 @@ export interface PostCommentsWriteProps {
   comment: string;
   onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
   onWrite: () => void;
+  forReplies?: boolean;
+  onCancel?: () => void;
 }
 
 const PostCommentsWrite: React.FC<PostCommentsWriteProps> = ({
   comment,
   onChange,
   onWrite,
+  onCancel,
+  forReplies,
 }) => {
   return (
     <PostCommentsWriteBlock>
@@ -48,7 +52,14 @@ const PostCommentsWrite: React.FC<PostCommentsWriteProps> = ({
         onChange={onChange}
       />
       <div className="buttons-wrapper">
-        <Button onClick={onWrite}>댓글 작성</Button>
+        <Button inline onClick={onWrite}>
+          댓글 작성
+        </Button>
+        {forReplies && (
+          <Button onClick={onCancel} inline color="darkGray">
+            취소
+          </Button>
+        )}
       </div>
     </PostCommentsWriteBlock>
   );

src/components/post/PostReplies.tsx

@@ -2,24 +2,74 @@ import React from 'react';
 import styled from 'styled-components';
 import { Comment } from '../../lib/graphql/post';
 import PostCommentsList from './PostCommentsList';
+import useBoolean from '../../lib/hooks/useBoolean';
+import palette from '../../lib/styles/palette';
+import PostCommentsWrite from './PostCommentsWrite';
 
 const PostRepliesBlock = styled.div`
   border: solid 1px rgba(0, 0, 0, 0.02);
   background-color: rgba(0, 0, 0, 0.015);
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
+  padding: 1.5rem;
   border-radius: 4px;
   margin-top: 1.3125rem;
 `;
 
+const PullUp = styled.div`
+  margin-top: -1.5rem;
+`;
+
+const Separator = styled.div`
+  width: 100%;
+  height: 1px;
+  background: ${palette.gray2};
+  margin-bottom: 1.5rem;
+`;
+
+const StartWritingButton = styled.button`
+  cursor: pointer;
+  height: 2.5rem;
+  font-size: 1rem;
+  border-radius: 4px;
+  border: 1px solid ${palette.teal6};
+  display: flex;
+  outline: none;
+  color: ${palette.teal6};
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  &:hover,
+  &:focus {
+    background: ${palette.teal6};
+    color: white;
+  }
+`;
+
 export interface PostRepliesProps {
   comments: Comment[];
 }
 
 const PostReplies: React.FC<PostRepliesProps> = ({ comments }) => {
+  const [writing, onToggle] = useBoolean(false);
+  const hasComments = comments.length > 0;
   return (
     <PostRepliesBlock>
+      <PullUp />
       <PostCommentsList comments={comments} />
+      {hasComments && <Separator />}
+      {writing || !hasComments ? (
+        <PostCommentsWrite
+          comment=""
+          onWrite={() => {}}
+          onChange={() => {}}
+          onCancel={onToggle}
+          forReplies
+        />
+      ) : (
+        <StartWritingButton onClick={onToggle}>
+          답글 작성하기
+        </StartWritingButton>
+      )}
     </PostRepliesBlock>
   );
 };

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

@@ -23,10 +23,12 @@ describe('PostCommentsWrite', () => {
       ...utils,
     };
   };
-  it('renders textarea and a button', () => {
-    const { textarea, writeButton } = setup();
+  it('renders textarea and a button, but not cancel button', () => {
+    const { textarea, writeButton, queryByText } = setup();
     expect(textarea).toBeVisible();
     expect(writeButton).toBeVisible();
+    const cancelButton = queryByText('취소');
+    expect(cancelButton).toBeFalsy();
   });
   it('shows value on textarea', () => {
     const { textarea } = setup();
@@ -51,4 +53,14 @@ describe('PostCommentsWrite', () => {
 
     expect(onWrite).toBeCalled();
   });
+  it('shows cancel button when forReplies is true', () => {
+    const { getByText } = setup({ forReplies: true });
+    getByText('취소');
+  });
+  it('calls onCancel', () => {
+    const onCancel = jest.fn();
+    const { getByText } = setup({ forReplies: true, onCancel });
+    fireEvent.click(getByText('취소'));
+    expect(onCancel).toBeCalled();
+  });
 });

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

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { render } from 'react-testing-library';
+import PostReplies, { PostRepliesProps } from '../PostReplies';
+
+const sampleComments = [
+  {
+    id: '67139c27-cf3c-4da6-a25c-4b0ec54be379',
+    user: {
+      id: '0bcdf3e5-a228-42c3-8b52-3f0dc118dfd8',
+      username: 'blablabla',
+      profile: {
+        thumbnail: null,
+      },
+    },
+    text: 'ㅋㅋㅋ',
+    replies_count: 2,
+    created_at: '2019-06-19T14:56:26.022Z',
+  },
+  {
+    id: '2f86fc23-2128-4e7c-99f5-f0fc4553afc8',
+    user: {
+      id: '0bcdf3e5-a228-42c3-8b52-3f0dc118dfd8',
+      username: 'blablabla',
+      profile: {
+        thumbnail: null,
+      },
+    },
+    text: 'sed',
+    replies_count: 0,
+    created_at: '2019-06-19T15:08:08.085Z',
+  },
+];
+describe('PostReplies', () => {
+  const setup = (props: Partial<PostRepliesProps> = {}) => {
+    const initialProps: PostRepliesProps = {
+      comments: sampleComments,
+    };
+    const utils = render(<PostReplies {...initialProps} {...props} />);
+    return {
+      ...utils,
+    };
+  };
+  it('renders properly', () => {
+    setup();
+  });
+});