Implement write comment and reloading comments

Author: velopert

src/containers/post/PostComments.tsx

@@ -1,13 +1,17 @@
 import * as React from 'react';
 import PostCommentsTemplate from '../../components/post/PostCommentsTemplate';
 import PostCommentsWriteContainer from './PostCommentsWriteContainer';
+import { Comment } from '../../lib/graphql/post';
 
-export interface PostCommentsProps {}
+export interface PostCommentsProps {
+  comments: Comment[];
+  postId: string;
+}
 
-const PostComments: React.FC<PostCommentsProps> = props => {
+const PostComments: React.FC<PostCommentsProps> = ({ comments, postId }) => {
   return (
-    <PostCommentsTemplate count={9}>
-      <PostCommentsWriteContainer />
+    <PostCommentsTemplate count={comments.length}>
+      <PostCommentsWriteContainer postId={postId} />
     </PostCommentsTemplate>
   );
 };

src/containers/post/PostCommentsWriteContainer.tsx

@@ -1,11 +1,55 @@
-import * as React from 'react';
+import React, { useState, useCallback } from 'react';
 import PostCommentsWrite from '../../components/post/PostCommentsWrite';
-export interface PostCommentWriteContainerProps {}
+import { Mutation, MutationResult } from 'react-apollo';
+import { WRITE_COMMENT, RELOAD_COMMENTS } from '../../lib/graphql/post';
+import gql from 'graphql-tag';
 
-const PostCommentsWriteContainer: React.FC<
-  PostCommentWriteContainerProps
-> = props => {
-  return <PostCommentsWrite />;
+export interface PostCommentsWriteContainerProps {
+  postId: string;
+  commentId?: string;
+}
+
+const PostCommentsWriteContainer: React.FC<PostCommentsWriteContainerProps> = ({
+  postId,
+}) => {
+  const [comment, setComment] = useState('');
+  const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setComment(e.target.value);
+  };
+  return (
+    <Mutation mutation={WRITE_COMMENT}>
+      {(
+        writeComment,
+        { data, loading, error, client }: MutationResult<Comment>,
+      ) => {
+        const onWrite = async () => {
+          try {
+            await writeComment({
+              variables: {
+                post_id: postId,
+                text: comment,
+              },
+            });
+            setComment('');
+            client.query({
+              query: RELOAD_COMMENTS,
+              variables: {
+                id: postId,
+              },
+              fetchPolicy: 'network-only',
+            });
+          } catch (e) {}
+        };
+        return (
+          <PostCommentsWrite
+            onChange={onChange}
+            comment={comment}
+            onWrite={onWrite}
+          />
+        );
+      }}
+    </Mutation>
+  );
 };
 
 export default PostCommentsWriteContainer;

src/containers/post/PostViewer.tsx

@@ -40,7 +40,7 @@ const PostViewer: React.FC<PostViewerProps> = ({ username, urlSlug }) => {
               }
             />
             <PostContent isMarkdown={post.is_markdown} body={post.body} />
-            <PostComments />
+            <PostComments comments={post.comments} postId={post.id} />
           </>
         );
       }}

src/containers/post/__tests__/PostCommentsWriteContainer.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { render, fireEvent } from 'react-testing-library';
+import PostCommentsWriteContainer, {
+  PostCommentsWriteContainerProps,
+} from '../PostCommentsWriteContainer';
+
+describe('PostCommentsWriteContainer', () => {
+  const setup = (props: Partial<PostCommentsWriteContainerProps> = {}) => {
+    const initialProps: PostCommentsWriteContainerProps = {};
+    const utils = render(
+      <PostCommentsWriteContainer {...initialProps} {...props} />,
+    );
+
+    const textarea = utils.getByPlaceholderText(
+      '댓글을 작성하세요',
+    ) as HTMLTextAreaElement;
+    const writeButton = utils.getByText('댓글 작성');
+
+    return {
+      textarea,
+      writeButton,
+      ...utils,
+    };
+  };
+  it('changes textarea', () => {
+    const { textarea } = setup();
+    fireEvent.change(textarea, {
+      target: {
+        value: 'hello',
+      },
+    });
+    expect(textarea.value).toBe('hello');
+  });
+});

src/containers/post/__tests__/PostViewer.test.tsx

@@ -49,6 +49,69 @@ describe('PostViewer', () => {
                   title: 'VELOPERT.LOG',
                 },
               },
+              comments_count: 8,
+              comments: [
+                {
+                  id: '70d24d3b-a6ce-46a3-86c5-1cba95843841',
+                  user: {
+                    id: '0bcdf3e5-a228-42c3-8b52-3f0dc118dfd8',
+                    username: 'blablabla',
+                    profile: {
+                      thumbnail: null,
+                    },
+                  },
+                  text: 'Hey there',
+                  replies_count: 0,
+                },
+                {
+                  id: '0f700ebd-0dec-469a-adb8-c47bae2b8f18',
+                  user: {
+                    id: '0bcdf3e5-a228-42c3-8b52-3f0dc118dfd8',
+                    username: 'blablabla',
+                    profile: {
+                      thumbnail: null,
+                    },
+                  },
+                  text: 'Hey there',
+                  replies_count: 0,
+                },
+                {
+                  id: '90f3b558-4af3-41bb-95dd-ed9571609f25',
+                  user: {
+                    id: '0bcdf3e5-a228-42c3-8b52-3f0dc118dfd8',
+                    username: 'blablabla',
+                    profile: {
+                      thumbnail: null,
+                    },
+                  },
+                  text: 'Hey there',
+                  replies_count: 0,
+                },
+                {
+                  id: 'd4365762-08e8-4928-a387-4255e4392291',
+                  user: {
+                    id: '0bcdf3e5-a228-42c3-8b52-3f0dc118dfd8',
+                    username: 'blablabla',
+                    profile: {
+                      thumbnail: null,
+                    },
+                  },
+                  text: 'Hey there',
+                  replies_count: 3,
+                },
+                {
+                  id: '383d590d-d3ed-4f07-994e-cbea3127195d',
+                  user: {
+                    id: '0bcdf3e5-a228-42c3-8b52-3f0dc118dfd8',
+                    username: 'blablabla',
+                    profile: {
+                      thumbnail: null,
+                    },
+                  },
+                  text: 'Hey there',
+                  replies_count: 0,
+                },
+              ],
             },
           },
         },

src/lib/graphql/post.ts

@@ -18,11 +18,25 @@ export type Post = {
   created_at: string;
   updated_at: string;
   short_description: string;
-  comments: [any];
-  tags: [string];
+  comments: Comment[];
+  tags: string[];
   comments_count: number;
 };
 
+export interface Comment {
+  id: string;
+  user: {
+    id: string;
+    username: string;
+    profile: {
+      thumbnail: string;
+    };
+  };
+  text: string;
+  replies_count: number;
+  replies?: Comment[];
+}
+
 // Post Type for PostList
 export type PartialPost = {
   id: string;
@@ -33,7 +47,7 @@ export type PartialPost = {
   url_slug: string;
   is_private: boolean;
   released_at: string;
-  tags: [string];
+  tags: string[];
   comments_count: number;
 };
 
@@ -62,6 +76,7 @@ export interface SinglePost {
       title: string;
     };
   };
+  comments: Comment[];
 }
 
 export const GET_POST_LIST = gql`
@@ -112,6 +127,38 @@ export const READ_POST = gql`
           title
         }
       }
+      comments {
+        id
+        user {
+          id
+          username
+          profile {
+            thumbnail
+          }
+        }
+        text
+        replies_count
+      }
+    }
+  }
+`;
+
+export const RELOAD_COMMENTS = gql`
+  query ReloadComments($id: ID!) {
+    post(id: $id) {
+      id
+      comments {
+        id
+        user {
+          id
+          username
+          profile {
+            thumbnail
+          }
+        }
+        text
+        replies_count
+      }
     }
   }
 `;
@@ -155,3 +202,20 @@ export const WRITE_POST = gql`
     }
   }
 `;
+
+export const WRITE_COMMENT = gql`
+  mutation WriteComment($post_id: ID!, $text: String!, $comment_id: ID) {
+    writeComment(post_id: $post_id, text: $text, comment_id: $comment_id) {
+      id
+      user {
+        id
+        username
+        profile {
+          thumbnail
+        }
+      }
+      text
+      replies_count
+    }
+  }
+`;