Initialize post redux module

Author: velopert

package.json

@@ -124,7 +124,7 @@
     "tslint-config-airbnb": "^5.11.1",
     "tslint-config-prettier": "^1.18.0",
     "turndown": "^5.0.3",
-    "typesafe-actions": "^3.2.1",
+    "typesafe-actions": "^4.4.1",
     "typescript": "^3.5.1",
     "unist-util-visit": "^1.4.0",
     "url-loader": "1.1.2",

src/components/post/PostReplies.tsx

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

src/containers/post/PostComments.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PostCommentsTemplate from '../../components/post/PostCommentsTemplate';
 import PostCommentsWriteContainer from './PostCommentsWriteContainer';
-import { Comment, WRITE_COMMENT, RELOAD_REPLIES } from '../../lib/graphql/post';
+import { Comment, WRITE_COMMENT } from '../../lib/graphql/post';
 import PostCommentsList from '../../components/post/PostCommentsList';
 import { MutationResult, Mutation } from 'react-apollo';
 
@@ -21,13 +21,13 @@ const PostComments: React.FC<PostCommentsProps> = ({ comments, postId }) => {
             text: string;
           };
           const onLoadReplies = (id: string) => {
-            return client.query({
-              query: RELOAD_REPLIES,
-              variables: {
-                id: id,
-              },
-              fetchPolicy: 'network-only',
-            });
+            // return client.query({
+            //   query: RELOAD_REPLIES,
+            //   variables: {
+            //     id: id,
+            //   },
+            //   fetchPolicy: 'network-only',
+            // });
           };
           const onReply = async ({ commentId, text }: ReplyOptions) => {
             try {

src/containers/post/PostRepliesContainer.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Query, QueryResult } from 'react-apollo';
+import { GET_REPLIES, CommentWithReplies } from '../../lib/graphql/post';
+import PostReplies from '../../components/post/PostReplies';
+
+export interface PostRepliesProps {
+  postId: string;
+  commentId: string;
+}
+
+const PostRepliesContainer: React.FC<PostRepliesProps> = ({
+  postId,
+  commentId,
+}) => {
+  return (
+    <Query query={GET_REPLIES} variables={{ id: commentId }}>
+      {({
+        loading,
+        error,
+        data,
+      }: QueryResult<{ comment: CommentWithReplies }>) => {
+        if (loading || !data) return null;
+        return <PostReplies comments={data.comment.replies} />;
+      }}
+    </Query>
+  );
+};
+
+export default PostRepliesContainer;

src/lib/graphql/post.ts

@@ -80,6 +80,11 @@ export interface SinglePost {
   comments: Comment[];
 }
 
+export interface CommentWithReplies {
+  id: string;
+  replies: Comment[];
+}
+
 export const GET_POST_LIST = gql`
   query Posts($cursor: ID) {
     posts(cursor: $cursor) {
@@ -184,20 +189,10 @@ export const GET_COMMENT = gql`
   }
 `;
 
-export const RELOAD_REPLIES = gql`
+export const GET_REPLIES = gql`
   query ReloadReplies($id: ID!) {
     comment(comment_id: $id) {
       id
-      user {
-        id
-        username
-        profile {
-          thumbnail
-        }
-      }
-      text
-      replies_count
-      created_at
       replies {
         id
         user {

src/modules/__tests__/post.test.ts

@@ -0,0 +1,17 @@
+import post, { postActions, PostState } from '../post';
+
+describe('post redux module', () => {
+  const initialState: PostState = {
+    id: null,
+  };
+  it('has initialState', () => {
+    const state = post(undefined, { type: 'INIT' } as any);
+    expect(state).toEqual(initialState);
+  });
+  describe('reducer', () => {
+    it('handles SET_ID', () => {
+      const state = post(initialState, postActions.setPostId('aaaa'));
+      expect(state.id).toBe('aaaa');
+    });
+  });
+});

src/modules/index.ts

@@ -2,17 +2,20 @@ import { combineReducers } from 'redux';
 import core, { CoreState } from './core';
 import write, { WriteState } from './write';
 import header, { HeaderState } from './header';
+import post, { PostState } from './post';
 
 export type RootState = {
   core: CoreState;
   write: WriteState;
   header: HeaderState;
+  post: PostState;
 };
 
 const rootReducer = combineReducers({
   core,
   write,
   header,
+  post,
 });
 
 export default rootReducer;

src/modules/post.ts

@@ -0,0 +1,31 @@
+import {
+  createReducer,
+  createStandardAction,
+  ActionType,
+} from 'typesafe-actions';
+import { updateKey } from '../lib/utils';
+
+const SET_POST_ID = 'post/SET_POST_ID';
+
+export interface PostState {
+  id: string | null;
+}
+
+const initialState: PostState = {
+  id: null,
+};
+
+const actions = {
+  setPostId: createStandardAction(SET_POST_ID)<string>(),
+};
+
+export const postActions = actions;
+
+type RootAction = ActionType<typeof actions>;
+
+const post = createReducer<PostState, RootAction>(initialState).handleAction(
+  actions.setPostId,
+  (state, action) => updateKey(state, 'id', action.payload),
+);
+
+export default post;

yarn.lock

@@ -11461,10 +11461,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typesafe-actions@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/typesafe-actions/-/typesafe-actions-3.2.1.tgz#833623a4079eda5dbcb775113f6dcf02b71c03f8"
-  integrity sha512-hvhuNqsai6LzXQ+Hl6vajC9bGd/kHHL1hJvI4GQ0Rs6Fax1cjbNEsuFGy/RbfLPhBAL10n6DECEHUa+Q9E+MxQ==
+typesafe-actions@^4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/typesafe-actions/-/typesafe-actions-4.4.1.tgz#92e4348289d932592f1f18c162f5c094aba8fe9a"
+  integrity sha512-uV74N8uDU2lVaNnYUGmg/Th/mPi9JQJJ5A8+YcHBE5GI+bdgFyl79zCZw4LLU331GCdHWDo6F2J7LVgBHRvaGQ==
 
 typescript@^3.5.1:
   version "3.5.1"