Implements subcomments loading

Author: velopert

src/components/post/PostCommentItem.tsx

@@ -7,6 +7,7 @@ import Typography from '../common/Typography';
 import { PlusBoxIcon, MinusBoxIcon } from '../../static/svg';
 import { userThumbnail } from '../../static/images';
 import useBoolean from '../../lib/hooks/useBoolean';
+import PostRepliesContainer from '../../containers/post/PostRepliesContainer';
 
 const PostCommentItemBlock = styled.div`
   padding-top: 1.5rem;
@@ -125,6 +126,7 @@ const PostCommentItem: React.FC<PostCommentItemProps> = ({ comment }) => {
       </Typography>
       <CommentFoot>
         <Toggler open={open} onToggle={onToggle} count={replies_count} />
+        {open && <PostRepliesContainer commentId={id} />}
       </CommentFoot>
     </PostCommentItemBlock>
   );

src/components/post/PostCommentsList.tsx

@@ -3,9 +3,7 @@ import styled from 'styled-components';
 import { Comment } from '../../lib/graphql/post';
 import PostCommentItem from './PostCommentItem';
 
-const PostCommentsListBlock = styled.div`
-  margin-top: 2.5rem;
-`;
+const PostCommentsListBlock = styled.div``;
 
 export interface PostCommentsListProps {
   comments: Comment[];

src/components/post/PostReplies.tsx

@@ -3,7 +3,14 @@ import styled from 'styled-components';
 import { Comment } from '../../lib/graphql/post';
 import PostCommentsList from './PostCommentsList';
 
-const PostRepliesBlock = styled.div``;
+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;
+  border-radius: 4px;
+  margin-top: 1.3125rem;
+`;
 
 export interface PostRepliesProps {
   comments: Comment[];

src/containers/post/PostComments.tsx

@@ -4,17 +4,24 @@ import PostCommentsWriteContainer from './PostCommentsWriteContainer';
 import { Comment, WRITE_COMMENT } from '../../lib/graphql/post';
 import PostCommentsList from '../../components/post/PostCommentsList';
 import { MutationResult, Mutation } from 'react-apollo';
+import styled from 'styled-components';
 
 export interface PostCommentsProps {
   comments: Comment[];
   postId: string;
 }
 
+const MarginTop = styled.div`
+  margin-top: 2.5rem;
+`;
+
 const PostComments: React.FC<PostCommentsProps> = ({ comments, postId }) => {
   return (
     <PostCommentsTemplate count={comments.length}>
       <PostCommentsWriteContainer postId={postId} />
-      <PostCommentsList comments={comments} />;
+      <MarginTop>
+        <PostCommentsList comments={comments} />
+      </MarginTop>
     </PostCommentsTemplate>
   );
 };

src/containers/post/PostRepliesContainer.tsx

@@ -18,6 +18,7 @@ const PostRepliesContainer: React.FC<PostRepliesProps> = ({ commentId }) => {
         error,
         data,
       }: QueryResult<{ comment: CommentWithReplies }>) => {
+        console.log(loading, error, data);
         if (loading || !data) return null;
         return <PostReplies comments={data.comment.replies} />;
       }}