#34 made submitting comment form

src/components/comment/LocalCommentForm/index.tsx

@@ -15,20 +15,13 @@ import { EMPTY_COMMENT } from '~/redux/node/constants';
 interface IProps {
   comment?: IComment;
   nodeId: INode['id'];
-  isBefore?: boolean;
   onCancelEdit?: () => void;
 }
 
-const LocalCommentForm: FC<IProps> = ({ comment, nodeId, isBefore, onCancelEdit }) => {
+const LocalCommentForm: FC<IProps> = ({ comment, nodeId, onCancelEdit }) => {
   const [textarea, setTextarea] = useState<HTMLTextAreaElement>();
   const uploader = useFileUploader(UPLOAD_SUBJECTS.COMMENT, UPLOAD_TARGETS.COMMENTS);
-  const formik = useCommentFormFormik(
-    comment || EMPTY_COMMENT,
-    nodeId,
-    uploader,
-    onCancelEdit,
-    isBefore
-  );
+  const formik = useCommentFormFormik(comment || EMPTY_COMMENT, nodeId, uploader, onCancelEdit);
   const isLoading = formik.isSubmitting || uploader.isUploading;
   const isEditing = !!comment?.id;
 
@@ -51,6 +44,7 @@ const LocalCommentForm: FC<IProps> = ({ comment, nodeId, isBefore, onCancelEdit
           )}
 
           <Button
+            type="submit"
             size="small"
             color="gray"
             iconRight={!isEditing ? 'enter' : 'check'}

src/components/node/NodeCommentForm/index.tsx

@@ -19,7 +19,7 @@ const NodeCommentFormUnconnected: FC<IProps> = ({ user, isBefore, nodeId }) => {
   return (
     <CommentWrapper user={user}>
       <CommentForm id={0} is_before={isBefore} />
-      <LocalCommentForm isBefore={isBefore} nodeId={nodeId} />
+      <LocalCommentForm nodeId={nodeId} />
     </CommentWrapper>
   );
 };

src/redux/node/actions.ts

@@ -1,5 +1,5 @@
-import { INode, IValidationErrors, IComment, ITag, IFile } from '../types';
-import { NODE_ACTIONS, NODE_TYPES } from './constants';
+import { IComment, IFile, INode, ITag, IValidationErrors } from '../types';
+import { NODE_ACTIONS } from './constants';
 import { INodeState } from './reducer';
 
 export const nodeSet = (node: Partial<INodeState>) => ({
@@ -50,6 +50,17 @@ export const nodePostComment = (id: number, is_before: boolean) => ({
   type: NODE_ACTIONS.POST_COMMENT,
 });
 
+export const nodePostLocalComment = (
+  nodeId: INode['id'],
+  comment: IComment,
+  callback: (e?: string) => void
+) => ({
+  nodeId,
+  comment,
+  callback,
+  type: NODE_ACTIONS.POST_LOCAL_COMMENT,
+});
+
 export const nodeCancelCommentEdit = (id: number) => ({
   id,
   type: NODE_ACTIONS.CANCEL_COMMENT_EDIT,

src/redux/node/constants.ts

@@ -42,6 +42,7 @@ export const NODE_ACTIONS = {
   SET_EDITOR: `${prefix}SET_EDITOR`,
 
   POST_COMMENT: `${prefix}POST_COMMENT`,
+  POST_LOCAL_COMMENT: `${prefix}POST_LOCAL_COMMENT`,
   SET_COMMENTS: `${prefix}SET_COMMENTS`,
   SET_RELATED: `${prefix}SET_RELATED`,
 

src/redux/node/sagas.ts

@@ -1,59 +1,54 @@
-import { takeLatest, call, put, select, delay, all, takeLeading } from 'redux-saga/effects';
+import { all, call, delay, put, select, takeLatest, takeLeading } from 'redux-saga/effects';
 import { push } from 'connected-react-router';
 import { omit } from 'ramda';
 
+import { COMMENTS_DISPLAY, EMPTY_COMMENT, EMPTY_NODE, NODE_ACTIONS, NODE_EDITOR_DATA } from './constants';
 import {
-  NODE_ACTIONS,
-  EMPTY_NODE,
-  EMPTY_COMMENT,
-  NODE_EDITOR_DATA,
-  COMMENTS_DISPLAY,
-} from './constants';
-import {
-  nodeSave,
-  nodeSetSaveErrors,
-  nodeLoadNode,
-  nodeSetLoading,
-  nodeSetCurrent,
-  nodeSetLoadingComments,
-  nodePostComment,
-  nodeSetSendingComment,
-  nodeSetComments,
-  nodeSetCommentData,
-  nodeUpdateTags,
-  nodeSetTags,
+  nodeCancelCommentEdit,
   nodeCreate,
-  nodeSetEditor,
   nodeEdit,
-  nodeLike,
-  nodeSetRelated,
+  nodeEditComment,
   nodeGotoNode,
+  nodeLike,
+  nodeLoadNode,
   nodeLock,
   nodeLockComment,
-  nodeEditComment,
+  nodePostComment,
+  nodePostLocalComment,
+  nodeSave,
   nodeSet,
-  nodeCancelCommentEdit,
+  nodeSetCommentData,
+  nodeSetComments,
+  nodeSetCurrent,
+  nodeSetEditor,
+  nodeSetLoading,
+  nodeSetLoadingComments,
+  nodeSetRelated,
+  nodeSetSaveErrors,
+  nodeSetSendingComment,
+  nodeSetTags,
+  nodeUpdateTags
 } from './actions';
 import {
-  postNode,
   getNode,
-  postNodeComment,
   getNodeComments,
-  updateNodeTags,
-  postNodeLike,
-  postNodeStar,
   getNodeRelated,
+  postNode,
+  postNodeComment,
+  postNodeLike,
   postNodeLock,
   postNodeLockComment,
+  postNodeStar,
+  updateNodeTags
 } from './api';
 import { reqWrapper } from '../auth/sagas';
 import { flowSetNodes, flowSetUpdated } from '../flow/actions';
 import { ERRORS } from '~/constants/errors';
 import { modalSetShown, modalShowDialog } from '../modal/actions';
-import { selectFlowNodes, selectFlow } from '../flow/selectors';
+import { selectFlow, selectFlowNodes } from '../flow/selectors';
 import { URLS } from '~/constants/urls';
 import { selectNode } from './selectors';
-import { IResultWithStatus, INode, Unwrap } from '../types';
+import { INode, IResultWithStatus, Unwrap } from '../types';
 import { NODE_EDITOR_DIALOGS } from '~/constants/dialogs';
 import { DIALOGS } from '~/redux/modal/constants';
 import { INodeState } from './reducer';
@@ -229,6 +224,43 @@ function* onPostComment({ id }: ReturnType<typeof nodePostComment>) {
   }
 }
 
+function* onPostLocalComment({
+  nodeId,
+  comment,
+  callback,
+}: ReturnType<typeof nodePostLocalComment>) {
+  const { data, error }: Unwrap<ReturnType<typeof postNodeComment>> = yield call(
+    reqWrapper,
+    postNodeComment,
+    {
+      data: comment,
+      id: nodeId,
+    }
+  );
+
+  if (error || !data.comment) {
+    return callback(error);
+  }
+
+  const { current }: ReturnType<typeof selectNode> = yield select(selectNode);
+
+  if (current?.id === nodeId) {
+    const { comments } = yield select(selectNode);
+
+    if (!comment.id) {
+      yield put(nodeSetComments([data.comment, ...comments]));
+    } else {
+      yield put(
+        nodeSet({
+          comments: comments.map(item => (item.id === comment.id ? data.comment : item)),
+        })
+      );
+    }
+
+    callback();
+  }
+}
+
 function* onCancelCommentEdit({ id }: ReturnType<typeof nodeCancelCommentEdit>) {
   const { comment_data } = yield select(selectNode);
 
@@ -358,6 +390,7 @@ export default function* nodeSaga() {
   yield takeLatest(NODE_ACTIONS.GOTO_NODE, onNodeGoto);
   yield takeLatest(NODE_ACTIONS.LOAD_NODE, onNodeLoad);
   yield takeLatest(NODE_ACTIONS.POST_COMMENT, onPostComment);
+  yield takeLatest(NODE_ACTIONS.POST_LOCAL_COMMENT, onPostLocalComment);
   yield takeLatest(NODE_ACTIONS.CANCEL_COMMENT_EDIT, onCancelCommentEdit);
   yield takeLatest(NODE_ACTIONS.UPDATE_TAGS, onUpdateTags);
   yield takeLatest(NODE_ACTIONS.CREATE, onCreateSaga);

src/utils/hooks/useCommentFormFormik.ts

@@ -3,22 +3,14 @@ import { useCallback, useRef } from 'react';
 import { FormikHelpers, useFormik, useFormikContext } from 'formik';
 import { array, object, string } from 'yup';
 import { FileUploader } from '~/utils/hooks/fileUploader';
+import { useDispatch } from 'react-redux';
+import { nodePostLocalComment } from '~/redux/node/actions';
 
 const validationSchema = object().shape({
   text: string(),
   files: array(),
 });
 
-const submitComment = (
-  id: INode['id'],
-  values: IComment,
-  isBefore: boolean,
-  callback: (e?: string) => void
-) => {
-  console.log('Submitting', id, values);
-  new Promise(resolve => setTimeout(resolve, 500)).then(() => callback());
-};
-
 const onSuccess = ({ resetForm, setStatus, setSubmitting }: FormikHelpers<IComment>) => (
   e: string
 ) => {
@@ -38,25 +30,26 @@ export const useCommentFormFormik = (
   values: IComment,
   nodeId: INode['id'],
   uploader: FileUploader,
-  stopEditing?: () => void,
-  isBefore: boolean = false
+  stopEditing?: () => void
 ) => {
+  const dispatch = useDispatch();
   const { current: initialValues } = useRef(values);
 
   const onSubmit = useCallback(
     (values: IComment, helpers: FormikHelpers<IComment>) => {
       helpers.setSubmitting(true);
-      submitComment(
-        nodeId,
-        {
-          ...values,
-          files: uploader.files,
-        },
-        isBefore,
-        onSuccess(helpers)
+      dispatch(
+        nodePostLocalComment(
+          nodeId,
+          {
+            ...values,
+            files: uploader.files,
+          },
+          onSuccess(helpers)
+        )
       );
     },
-    [isBefore, nodeId, uploader.files]
+    [dispatch, nodeId, uploader.files]
   );
 
   const onReset = useCallback(() => {