From b9ac33d8816cbd2f8c5a71d9892ede7825806552 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 3 Dec 2019 16:24:52 +0700
Subject: [PATCH] cancel comment edit

---
 src/components/input/Button/styles.scss   |  1 +
 src/components/node/CommentForm/index.tsx | 13 ++++++++++++-
 src/redux/node/actions.ts                 |  5 +++++
 src/redux/node/constants.ts               |  1 +
 src/redux/node/sagas.ts                   | 12 ++++++++++++
 5 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/components/input/Button/styles.scss b/src/components/input/Button/styles.scss
index 5dd24338..a11ca2b4 100644
--- a/src/components/input/Button/styles.scss
+++ b/src/components/input/Button/styles.scss
@@ -169,6 +169,7 @@
     background: transparent;
     color: white;
     box-shadow: none;
+    padding: 0 $gap;
 
     svg {
       fill: white;
diff --git a/src/components/node/CommentForm/index.tsx b/src/components/node/CommentForm/index.tsx
index 9cfb433b..7d47f583 100644
--- a/src/components/node/CommentForm/index.tsx
+++ b/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"
diff --git a/src/redux/node/actions.ts b/src/redux/node/actions.ts
index 9443da83..2e5b13bd 100644
--- a/src/redux/node/actions.ts
+++ b/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,
diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts
index d8d455db..0f5b4bcd 100644
--- a/src/redux/node/constants.ts
+++ b/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`,
diff --git a/src/redux/node/sagas.ts b/src/redux/node/sagas.ts
index 2061efe9..860eddf2 100644
--- a/src/redux/node/sagas.ts
+++ b/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);