cancel comment edit

src/components/input/Button/styles.scss

@@ -169,6 +169,7 @@
     background: transparent;
     color: white;
     box-shadow: none;
+    padding: 0 $gap;
 
     svg {
       fill: white;

src/components/node/CommentForm/index.tsx

@@ -1,6 +1,5 @@
 import React, { FC, useCallback, KeyboardEventHandler, useEffect, useMemo } from 'react';
 import { Textarea } from '~/components/input/Textarea';
-import { CommentWrapper } from '~/components/containers/CommentWrapper';
 import * as styles from './styles.scss';
 import { Filler } from '~/components/containers/Filler';
 import { Button } from '~/components/input/Button';
@@ -30,6 +29,7 @@ const mapStateToProps = (state: IState) => ({
 
 const mapDispatchToProps = {
   nodePostComment: NODE_ACTIONS.nodePostComment,
+  nodeCancelCommentEdit: NODE_ACTIONS.nodeCancelCommentEdit,
   nodeSetCommentData: NODE_ACTIONS.nodeSetCommentData,
   uploadUploadFiles: UPLOAD_ACTIONS.uploadUploadFiles,
 };
@@ -48,6 +48,7 @@ const CommentFormUnconnected: FC<IProps> = ({
   nodePostComment,
   nodeSetCommentData,
   uploadUploadFiles,
+  nodeCancelCommentEdit,
 }) => {
   const onInputChange = useCallback(
     event => {
@@ -196,6 +197,10 @@ const CommentFormUnconnected: FC<IProps> = ({
     [images, audios]
   );
 
+  const onCancelEdit = useCallback(() => {
+    nodeCancelCommentEdit(id);
+  }, [nodeCancelCommentEdit, comment.id]);
+
   return (
     <form onSubmit={onSubmit} className={styles.wrap}>
       <div className={styles.input}>
@@ -252,6 +257,12 @@ const CommentFormUnconnected: FC<IProps> = ({
 
         {(is_sending_comment || is_uploading_files) && <LoaderCircle size={20} />}
 
+        {id !== 0 && (
+          <Button size="small" color="link" type="button" onClick={onCancelEdit}>
+            Отмена
+          </Button>
+        )}
+
         <Button
           size="small"
           color="gray"

src/redux/node/actions.ts

@@ -50,6 +50,11 @@ export const nodePostComment = (id: number, is_before: boolean) => ({
   type: NODE_ACTIONS.POST_COMMENT,
 });
 
+export const nodeCancelCommentEdit = (id: number) => ({
+  id,
+  type: NODE_ACTIONS.CANCEL_COMMENT_EDIT,
+});
+
 export const nodeSetSendingComment = (is_sending_comment: boolean) => ({
   is_sending_comment,
   type: NODE_ACTIONS.SET_SENDING_COMMENT,

src/redux/node/constants.ts

@@ -27,6 +27,7 @@ export const NODE_ACTIONS = {
   LOCK: `${prefix}LOCK`,
   LOCK_COMMENT: `${prefix}LOCK_COMMENT`,
   EDIT_COMMENT: `${prefix}EDIT_COMMENT`,
+  CANCEL_COMMENT_EDIT: `${prefix}CANCEL_COMMENT_EDIT`,
   CREATE: `${prefix}CREATE`,
 
   SET_SAVE_ERRORS: `${prefix}SET_SAVE_ERRORS`,

src/redux/node/sagas.ts

@@ -26,6 +26,7 @@ import {
   nodeLockComment,
   nodeEditComment,
   nodeSet,
+  nodeCancelCommentEdit,
 } from './actions';
 import {
   postNode,
@@ -197,6 +198,16 @@ function* onPostComment({ id, is_before }: ReturnType<typeof nodePostComment>) {
   }
 }
 
+function* onCancelCommentEdit({ id }: ReturnType<typeof nodeCancelCommentEdit>) {
+  const { comment_data } = yield select(selectNode);
+
+  yield put(
+    nodeSet({
+      comment_data: omit([id.toString()], comment_data),
+    })
+  );
+}
+
 function* onUpdateTags({ id, tags }: ReturnType<typeof nodeUpdateTags>) {
   yield delay(1000);
   const {
@@ -311,6 +322,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.CANCEL_COMMENT_EDIT, onCancelCommentEdit);
   yield takeLatest(NODE_ACTIONS.UPDATE_TAGS, onUpdateTags);
   yield takeLatest(NODE_ACTIONS.CREATE, onCreateSaga);
   yield takeLatest(NODE_ACTIONS.EDIT, onEditSaga);