Remove onReply and onLoadReply from Comments

Author: velopert

package.json

@@ -29,7 +29,7 @@
     "@types/react-dom": "16.8.0",
     "@types/react-icons": "^2.2.6",
     "@types/react-outside-click-handler": "^1.2.0",
-    "@types/react-redux": "^7.0.9",
+    "@types/react-redux": "^7.1.0",
     "@types/react-router-dom": "^4.3.1",
     "@types/react-textarea-autosize": "^4.3.3",
     "@types/redux-devtools-extension": "^2.13.2",

src/components/post/PostCommentItem.tsx

@@ -79,8 +79,6 @@ const TogglerBlock = styled.div`
 
 export interface PostCommentItemProps {
   comment: Comment;
-  onLoadReplies: (id: string) => Promise<any>;
-  onReply: (options: { commentId: string; text: string }) => any;
 }
 
 interface TogglerProps {
@@ -100,28 +98,10 @@ const Toggler: React.FC<TogglerProps> = ({ open, onToggle, count }) => {
   );
 };
 
-const PostCommentItem: React.FC<PostCommentItemProps> = ({
-  comment,
-  onLoadReplies,
-  onReply,
-}) => {
-  const { id, user, created_at, text, replies, replies_count } = comment;
+const PostCommentItem: React.FC<PostCommentItemProps> = ({ comment }) => {
+  const { id, user, created_at, text, 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>

src/components/post/PostCommentsList.tsx

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

src/components/post/PostReplies.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Comment } from '../../lib/graphql/post';
+import PostCommentsList from './PostCommentsList';
 
 const PostRepliesBlock = styled.div``;
 
 export interface PostRepliesProps {
   comments: Comment[];
 }
 
-const PostReplies: React.FC<PostRepliesProps> = props => {
-  return <PostRepliesBlock />;
+const PostReplies: React.FC<PostRepliesProps> = ({ comments }) => {
+  return (
+    <PostRepliesBlock>
+      <PostCommentsList comments={comments} />
+    </PostRepliesBlock>
+  );
 };
 
 export default PostReplies;

src/containers/post/PostComments.tsx

@@ -14,44 +14,7 @@ const PostComments: React.FC<PostCommentsProps> = ({ comments, postId }) => {
   return (
     <PostCommentsTemplate count={comments.length}>
       <PostCommentsWriteContainer postId={postId} />
-      <Mutation mutation={WRITE_COMMENT}>
-        {(writeComment, { client }: MutationResult) => {
-          type ReplyOptions = {
-            commentId: string;
-            text: string;
-          };
-          const onLoadReplies = (id: string) => {
-            // return client.query({
-            //   query: RELOAD_REPLIES,
-            //   variables: {
-            //     id: id,
-            //   },
-            //   fetchPolicy: 'network-only',
-            // });
-          };
-          const onReply = async ({ commentId, text }: ReplyOptions) => {
-            try {
-              await writeComment({
-                variables: {
-                  post_id: postId,
-                  comment_id: commentId,
-                  text,
-                },
-              });
-              await onLoadReplies(commentId);
-            } catch (e) {
-              console.log(e);
-            }
-          };
-          return (
-            <PostCommentsList
-              comments={comments}
-              onLoadReplies={onLoadReplies}
-              onReply={onReply}
-            />
-          );
-        }}
-      </Mutation>
+      <PostCommentsList comments={comments} />;
     </PostCommentsTemplate>
   );
 };

src/containers/post/PostRepliesContainer.tsx

@@ -2,16 +2,15 @@ import React from 'react';
 import { Query, QueryResult } from 'react-apollo';
 import { GET_REPLIES, CommentWithReplies } from '../../lib/graphql/post';
 import PostReplies from '../../components/post/PostReplies';
+import { useSelector } from 'react-redux';
+import { RootState } from '../../modules';
 
 export interface PostRepliesProps {
-  postId: string;
   commentId: string;
 }
 
-const PostRepliesContainer: React.FC<PostRepliesProps> = ({
-  postId,
-  commentId,
-}) => {
+const PostRepliesContainer: React.FC<PostRepliesProps> = ({ commentId }) => {
+  const postId = useSelector((state: RootState) => state.post.id);
   return (
     <Query query={GET_REPLIES} variables={{ id: commentId }}>
       {({

src/containers/post/PostViewer.tsx

@@ -1,16 +1,21 @@
 import * as React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { Query, QueryResult } from 'react-apollo';
 import { READ_POST, SinglePost } from '../../lib/graphql/post';
 import PostHead from '../../components/post/PostHead';
 import PostContent from '../../components/post/PostContent';
 import PostComments from './PostComments';
+import { RootState } from '../../modules';
+import { postActions } from '../../modules/post';
 
 export interface PostViewerProps {
   username: string;
   urlSlug: string;
 }
 
 const PostViewer: React.FC<PostViewerProps> = ({ username, urlSlug }) => {
+  const postId = useSelector((state: RootState) => state.post.id);
+  const dispatch = useDispatch();
   return (
     <Query
       query={READ_POST}
@@ -27,6 +32,10 @@ const PostViewer: React.FC<PostViewerProps> = ({ username, urlSlug }) => {
         if (loading) return null; // TODO: show placeholder
         if (!data || !data.post) return null;
         const { post } = data;
+
+        if (postId !== post.id) {
+          dispatch(postActions.setPostId(post.id));
+        }
         return (
           <>
             <PostHead

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

@@ -4,6 +4,7 @@ import PostViewer, { PostViewerProps } from '../PostViewer';
 import { MemoryRouter } from 'react-router-dom';
 import { MockedProvider } from 'react-apollo/test-utils';
 import { READ_POST } from '../../../lib/graphql/post';
+import renderWithRedux from '../../../lib/renderWithRedux';
 
 describe('PostViewer', () => {
   const setup = (props: Partial<PostViewerProps> = {}, overrideMocks?: any) => {
@@ -160,7 +161,7 @@ describe('PostViewer', () => {
         },
       },
     ];
-    const utils = render(
+    const utils = renderWithRedux(
       <MockedProvider mocks={overrideMocks || mocks} addTypename={false}>
         <MemoryRouter>
           <PostViewer {...initialProps} {...props} />

yarn.lock

@@ -1264,10 +1264,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-redux@^7.0.9":
-  version "7.0.9"
-  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.0.9.tgz#4825ee2872c44768916304b6bb8df5b46d443b88"
-  integrity sha512-fMVX9SneWWw68d/JoeNUh6hj42kx2G30YhPdCYJTOv3xqbJ1xzIz6tEM/xzi7nBvpNbwZkSa9TMsV06kWOFIIg==
+"@types/react-redux@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.0.tgz#ed2c90ff192433251bd8a264195529f3613d53e2"
+  integrity sha512-SBJd6oNACDU/taMcDzFfj0mbVa+OI42L8WNvgPsCWiWUNIavPLeX5oA22V64tYIDUc7cGmJjDyLlWeCrqpZu1w==
   dependencies:
     "@types/hoist-non-react-statics" "^3.3.0"
     "@types/react" "*"