merge(#27): add comment replies

package.json

@@ -20,7 +20,9 @@
     "effector": "^22.8.6",
     "effector-forms": "^1.3.4",
     "effector-react": "^22.5.4",
+    "effector-storage": "^7.0.0",
     "history": "^5.3.0",
+    "immer": "^10.0.3",
     "patronum": "^1.19.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/features/reply-form/index.tsx

@@ -12,10 +12,11 @@ export interface ReplyFormProps extends FormHTMLAttributes<HTMLFormElement> {
   postId: string;
   maxLength: number;
   onSubmit?: (payload: {postId: string; value: string}) => void;
+  onCancel?: () => void;
 }
 
 export const ReplyForm = (props: ReplyFormProps) => {
-  const {postId, maxLength, onSubmit, className, ...otherProps} = props;
+  const {postId, maxLength, onSubmit, onCancel, className, ...otherProps} = props;
 
   const [value, setValue] = useState('');
 
@@ -29,6 +30,13 @@ export const ReplyForm = (props: ReplyFormProps) => {
     [postId, onSubmit],
   );
 
+  const onCancelClick = useCallback(() => {
+    setValue('');
+    if (onCancel) {
+      onCancel();
+    }
+  }, [onCancel]);
+
   return (
     <Form
       onSubmit={() => onFormSubmit(value)}
@@ -45,11 +53,11 @@ export const ReplyForm = (props: ReplyFormProps) => {
       <div className={cls.actions}>
         <Button type="submit">Send</Button>
 
-        <Button variant={ButtonVariant.CLEAR}>
+        <Button variant={ButtonVariant.CLEAR} type="button">
           <FileIcon />
           Insert media
         </Button>
-        <Button variant={ButtonVariant.CLEAR}>
+        <Button onClick={onCancelClick} variant={ButtonVariant.CLEAR} type="reset">
           <DeleteIcon />
           Cancel
         </Button>

src/pages/discussion/model.ts

@@ -1,18 +1,29 @@
 import * as typed from 'typed-contracts';
 import {chainRoute} from 'atomic-router';
-import {createStore, sample} from 'effector';
+import {createEvent, createStore, sample} from 'effector';
 import {attach} from 'effector/compat';
+import {produce} from 'immer';
 
 import {
   apiV1CommentsGet,
   apiV1CommentsGetOk,
+  ApiV1CommentsParentCommentIdRepliesGet,
+  apiV1CommentsParentCommentIdRepliesGet,
+  apiV1CommentsParentCommentIdRepliesGetOk,
+  ApiV1CommentsParentCommentIdRepliesPost,
+  apiV1CommentsParentCommentIdRepliesPost,
+  ApiV1CommentsPost,
+  apiV1CommentsPost,
   apiV1DiscussionsDiscussionIdGet,
   apiV1DiscussionsDiscussionIdGetOk,
 } from '~/shared/api';
 import {routes} from '~/shared/routes';
 
 const getDiscussionFx = attach({effect: apiV1DiscussionsDiscussionIdGet});
 const getCommentsFx = attach({effect: apiV1CommentsGet});
+const commentDiscussionFx = attach({effect: apiV1CommentsPost});
+const getRepliesFx = attach({effect: apiV1CommentsParentCommentIdRepliesGet});
+const commentReplyFx = attach({effect: apiV1CommentsParentCommentIdRepliesPost});
 
 export const currentRoute = routes.discussion;
 
@@ -35,6 +46,12 @@ export const $discussion = createStore<typed.Get<typeof apiV1DiscussionsDiscussi
 );
 
 export const $comments = createStore<typed.Get<typeof apiV1CommentsGetOk>>([]);
+export const commentFormSubmit = createEvent<ApiV1CommentsPost>();
+
+export type Replies = Record<string, typed.Get<typeof apiV1CommentsParentCommentIdRepliesGetOk>>;
+export const $replies = createStore<Replies>({});
+export const replyClicked = createEvent<ApiV1CommentsParentCommentIdRepliesGet>();
+export const replyFormSubmit = createEvent<ApiV1CommentsParentCommentIdRepliesPost>();
 
 sample({
   clock: getDiscussionFx.doneData,
@@ -47,7 +64,7 @@ sample({
   fn: ({answer}) => ({
     query: {
       discussionId: answer.id!,
-      size: 10,
+      size: 100,
       page: 0,
     },
   }),
@@ -59,3 +76,57 @@ sample({
   fn: (x) => x.answer,
   target: $comments,
 });
+
+sample({
+  clock: commentFormSubmit,
+  target: commentDiscussionFx,
+});
+
+sample({
+  clock: commentDiscussionFx.doneData,
+  source: $discussion,
+  filter: Boolean,
+  fn: (discussion) => ({
+    query: {
+      discussionId: discussion.id!,
+      size: 100,
+      page: 0,
+    },
+  }),
+  target: getCommentsFx,
+});
+
+sample({
+  clock: replyClicked,
+  target: getRepliesFx,
+});
+
+sample({
+  clock: getRepliesFx.done,
+  source: $replies,
+  fn: (replies, {params, result}) =>
+    produce(replies, (draft) => {
+      // @ts-ignore
+      draft[params.path.parentCommentId] = result.answer;
+    }),
+  target: $replies,
+});
+
+sample({
+  clock: replyFormSubmit,
+  target: commentReplyFx,
+});
+
+sample({
+  clock: commentReplyFx.done,
+  fn: ({params}) => ({
+    path: {
+      parentCommentId: params.path.parentCommentId,
+    },
+    query: {
+      page: 0,
+      size: 100,
+    },
+  }),
+  target: getRepliesFx,
+});