From 8ae2dc02f0d84e9f75b3b50e51808aab6abd45d0 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 26 Feb 2021 16:47:38 +0700
Subject: [PATCH 1/9] #34 added LocalCommentForm

---
 package.json                                  |  5 +-
 src/components/comment/CommentForm/index.tsx  | 99 ++++++++++---------
 .../comment/LocalCommentForm/index.tsx        | 25 +++++
 .../LocalCommentFormTextarea/index.tsx        | 36 +++++++
 src/utils/hooks/useCommentFormFormik.ts       | 35 +++++++
 yarn.lock                                     | 75 +++++++++++++-
 6 files changed, 226 insertions(+), 49 deletions(-)
 create mode 100644 src/components/comment/LocalCommentForm/index.tsx
 create mode 100644 src/components/comment/LocalCommentFormTextarea/index.tsx
 create mode 100644 src/utils/hooks/useCommentFormFormik.ts

diff --git a/package.json b/package.json
index 7d948d3e..9faa2025 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "connected-react-router": "^6.5.2",
     "date-fns": "^2.4.1",
     "flexbin": "^0.2.0",
+    "formik": "^2.2.6",
     "insane": "^2.6.2",
     "marked": "^2.0.0",
     "node-sass": "4.14.1",
@@ -36,7 +37,8 @@
     "throttle-debounce": "^2.1.0",
     "typescript": "^4.0.5",
     "uuid4": "^1.1.4",
-    "web-vitals": "^0.2.4"
+    "web-vitals": "^0.2.4",
+    "yup": "^0.32.9"
   },
   "scripts": {
     "start": "craco start",
@@ -68,6 +70,7 @@
     "@types/node": "^11.13.22",
     "@types/ramda": "^0.26.33",
     "@types/react-redux": "^7.1.11",
+    "@types/yup": "^0.29.11",
     "craco-alias": "^2.1.1",
     "craco-fast-refresh": "^1.0.2",
     "prettier": "^1.18.2"
diff --git a/src/components/comment/CommentForm/index.tsx b/src/components/comment/CommentForm/index.tsx
index 22613f08..559b7cea 100644
--- a/src/components/comment/CommentForm/index.tsx
+++ b/src/components/comment/CommentForm/index.tsx
@@ -30,6 +30,7 @@ import { CommentFormAttaches } from '~/components/comment/CommentFormAttaches';
 import { CommentFormAttachButtons } from '~/components/comment/CommentFormAttachButtons';
 import { CommentFormDropzone } from '~/components/comment/CommentFormDropzone';
 import { CommentFormFormatButtons } from '~/components/comment/CommentFormFormatButtons';
+import { LocalCommentForm } from '~/components/comment/LocalCommentForm';
 
 const mapStateToProps = (state: IState) => ({
   node: selectNode(state),
@@ -180,61 +181,65 @@ const CommentFormUnconnected: FC<IProps> = memo(
     );
 
     return (
-      <CommentFormDropzone onUpload={onUpload}>
-        <form onSubmit={onSubmit} className={styles.wrap}>
-          <div className={styles.input}>
-            <Textarea
-              value={comment.text}
-              handler={onInput}
-              onKeyDown={onKeyDown}
-              disabled={is_sending_comment}
-              placeholder={placeholder}
-              minRows={2}
-              setRef={setTextarea}
+      <>
+        <CommentFormDropzone onUpload={onUpload}>
+          <form onSubmit={onSubmit} className={styles.wrap}>
+            <div className={styles.input}>
+              <Textarea
+                value={comment.text}
+                handler={onInput}
+                onKeyDown={onKeyDown}
+                disabled={is_sending_comment}
+                placeholder={placeholder}
+                minRows={2}
+                setRef={setTextarea}
+              />
+
+              {comment.error && (
+                <div className={styles.error} onClick={clearError}>
+                  {ERROR_LITERAL[comment.error] || comment.error}
+                </div>
+              )}
+            </div>
+
+            <CommentFormAttaches
+              images={images}
+              audios={audios}
+              locked_audios={locked_audios}
+              locked_images={locked_images}
+              comment={comment}
+              setComment={setData}
+              onUpload={onUpload}
             />
 
-            {comment.error && (
-              <div className={styles.error} onClick={clearError}>
-                {ERROR_LITERAL[comment.error] || comment.error}
-              </div>
-            )}
-          </div>
+            <Group horizontal className={styles.buttons}>
+              <CommentFormAttachButtons onUpload={onUpload} />
+              <CommentFormFormatButtons element={textarea} handler={onInput} />
 
-          <CommentFormAttaches
-            images={images}
-            audios={audios}
-            locked_audios={locked_audios}
-            locked_images={locked_images}
-            comment={comment}
-            setComment={setData}
-            onUpload={onUpload}
-          />
+              <Filler />
 
-          <Group horizontal className={styles.buttons}>
-            <CommentFormAttachButtons onUpload={onUpload} />
-            <CommentFormFormatButtons element={textarea} handler={onInput} />
+              {(is_sending_comment || isUploadingNow) && <LoaderCircle size={20} />}
 
-            <Filler />
+              {id !== 0 && (
+                <Button size="small" color="link" type="button" onClick={onCancelEdit}>
+                  Отмена
+                </Button>
+              )}
 
-            {(is_sending_comment || isUploadingNow) && <LoaderCircle size={20} />}
-
-            {id !== 0 && (
-              <Button size="small" color="link" type="button" onClick={onCancelEdit}>
-                Отмена
+              <Button
+                size="small"
+                color="gray"
+                iconRight={id === 0 ? 'enter' : 'check'}
+                disabled={is_sending_comment || isUploadingNow}
+              >
+                {id === 0 ? 'Сказать' : 'Сохранить'}
               </Button>
-            )}
+            </Group>
+          </form>
+        </CommentFormDropzone>
 
-            <Button
-              size="small"
-              color="gray"
-              iconRight={id === 0 ? 'enter' : 'check'}
-              disabled={is_sending_comment || isUploadingNow}
-            >
-              {id === 0 ? 'Сказать' : 'Сохранить'}
-            </Button>
-          </Group>
-        </form>
-      </CommentFormDropzone>
+        <LocalCommentForm />
+      </>
     );
   }
 );
diff --git a/src/components/comment/LocalCommentForm/index.tsx b/src/components/comment/LocalCommentForm/index.tsx
new file mode 100644
index 00000000..f4fb7b2c
--- /dev/null
+++ b/src/components/comment/LocalCommentForm/index.tsx
@@ -0,0 +1,25 @@
+import React, { FC, useState } from 'react';
+import { CommentFormValues, useCommentFormFormik } from '~/utils/hooks/useCommentFormFormik';
+import { FormikProvider } from 'formik';
+import { LocalCommentFormTextarea } from '~/components/comment/LocalCommentFormTextarea';
+
+interface IProps {}
+
+const initialValues: CommentFormValues = {
+  text: '',
+  images: [],
+  songs: [],
+};
+
+const LocalCommentForm: FC<IProps> = () => {
+  const [textarea, setTextarea] = useState<HTMLTextAreaElement>();
+  const { formik, isLoading } = useCommentFormFormik(initialValues, console.log);
+
+  return (
+    <FormikProvider value={formik}>
+      <LocalCommentFormTextarea isLoading={isLoading} setRef={setTextarea} />
+    </FormikProvider>
+  );
+};
+
+export { LocalCommentForm };
diff --git a/src/components/comment/LocalCommentFormTextarea/index.tsx b/src/components/comment/LocalCommentFormTextarea/index.tsx
new file mode 100644
index 00000000..407c0311
--- /dev/null
+++ b/src/components/comment/LocalCommentFormTextarea/index.tsx
@@ -0,0 +1,36 @@
+import React, { FC, KeyboardEventHandler, useCallback } from 'react';
+import { Textarea } from '~/components/input/Textarea';
+import { useCommentFormContext } from '~/utils/hooks/useCommentFormFormik';
+import { useRandomPhrase } from '~/constants/phrases';
+
+interface IProps {
+  isLoading?: boolean;
+  setRef?: (r: HTMLTextAreaElement) => void;
+}
+
+const LocalCommentFormTextarea: FC<IProps> = ({ isLoading, setRef }) => {
+  const { values, handleChange, handleSubmit } = useCommentFormContext();
+
+  const onKeyDown = useCallback<KeyboardEventHandler<HTMLTextAreaElement>>(
+    ({ ctrlKey, key }) => {
+      if (!!ctrlKey && key === 'Enter') handleSubmit(null);
+    },
+    [handleSubmit]
+  );
+
+  const placeholder = useRandomPhrase('SIMPLE');
+
+  return (
+    <Textarea
+      value={values.text}
+      handler={handleChange('text')}
+      onKeyDown={onKeyDown}
+      disabled={isLoading}
+      placeholder={placeholder}
+      minRows={2}
+      setRef={setRef}
+    />
+  );
+};
+
+export { LocalCommentFormTextarea };
diff --git a/src/utils/hooks/useCommentFormFormik.ts b/src/utils/hooks/useCommentFormFormik.ts
new file mode 100644
index 00000000..98c1b3b6
--- /dev/null
+++ b/src/utils/hooks/useCommentFormFormik.ts
@@ -0,0 +1,35 @@
+import { IFile } from '~/redux/types';
+import { useRef, useState } from 'react';
+import { useFormik, useFormikContext } from 'formik';
+import { object, string, array } from 'yup';
+
+export interface CommentFormValues {
+  text: string;
+  images: IFile[];
+  songs: IFile[];
+}
+
+const validationSchema = object().shape({
+  text: string(),
+  images: array(),
+  songs: array(),
+});
+
+export const useCommentFormFormik = (
+  values: CommentFormValues,
+  onSubmit: (values: CommentFormValues) => void
+) => {
+  const { current: initialValues } = useRef(values);
+
+  const formik = useFormik({
+    initialValues,
+    validationSchema,
+    onSubmit,
+  });
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  return { formik, isLoading };
+};
+
+export const useCommentFormContext = () => useFormikContext<CommentFormValues>();
diff --git a/yarn.lock b/yarn.lock
index 35533ee3..9b885e2d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1109,6 +1109,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.10.5":
+  version "7.13.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.7.tgz#d494e39d198ee9ca04f4dcb76d25d9d7a1dc961a"
+  integrity sha512-h+ilqoX998mRVM5FtB5ijRuHUDVt5l3yfoOi2uh18Z/O3hvyaHQ39NpxVkCIG5yFs+mLq/ewFp8Bss6zmWv6ZA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4", "@babel/template@^7.4.0", "@babel/template@^7.8.6":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
@@ -1684,6 +1691,11 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
   integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==
 
+"@types/lodash@^4.14.165":
+  version "4.14.168"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.168.tgz#fe24632e79b7ade3f132891afff86caa5e5ce008"
+  integrity sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q==
+
 "@types/marked@^1.2.2":
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/@types/marked/-/marked-1.2.2.tgz#1f858a0e690247ecf3b2eef576f98f86e8d960d4"
@@ -1775,6 +1787,11 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@types/yup@^0.29.11":
+  version "0.29.11"
+  resolved "https://registry.yarnpkg.com/@types/yup/-/yup-0.29.11.tgz#d654a112973f5e004bf8438122bd7e56a8e5cd7e"
+  integrity sha512-9cwk3c87qQKZrT251EDoibiYRILjCmxBvvcb4meofCmx1vdnNcR9gyildy5vOHASpOKMsn42CugxUvcwK5eu1g==
+
 "@typescript-eslint/eslint-plugin@^2.10.0":
   version "2.34.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.34.0.tgz#6f8ce8a46c7dea4a6f1d171d2bb8fbae6dac2be9"
@@ -3885,6 +3902,11 @@ deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+deepmerge@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
 default-gateway@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
@@ -5013,6 +5035,19 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+formik@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/formik/-/formik-2.2.6.tgz#378a4bafe4b95caf6acf6db01f81f3fe5147559d"
+  integrity sha512-Kxk2zQRafy56zhLmrzcbryUpMBvT0tal5IvcifK5+4YNGelKsnrODFJ0sZQRMQboblWNym4lAW3bt+tf2vApSA==
+  dependencies:
+    deepmerge "^2.1.1"
+    hoist-non-react-statics "^3.3.0"
+    lodash "^4.17.14"
+    lodash-es "^4.17.14"
+    react-fast-compare "^2.0.1"
+    tiny-warning "^1.0.2"
+    tslib "^1.10.0"
+
 forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
@@ -7021,6 +7056,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash-es@^4.17.14, lodash-es@^4.17.15:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -7468,6 +7508,11 @@ nan@^2.12.1, nan@^2.13.2:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
   integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
 
+nanoclone@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/nanoclone/-/nanoclone-0.2.1.tgz#dd4090f8f1a110d26bb32c49ed2f5b9235209ed4"
+  integrity sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -9054,6 +9099,11 @@ prop-types@^15.5.7, prop-types@^15.6.2, prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+property-expr@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.4.tgz#37b925478e58965031bb612ec5b3260f8241e910"
+  integrity sha512-sFPkHQjVKheDNnPvotjQmm3KD3uk1fWKUN7CrpdbwmUx3CrG3QiM8QpTSimvig5vTXmTvjz7+TDvXOI9+4rkcg==
+
 proxy-addr@~2.0.5:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.6.tgz#fdc2336505447d3f2f2c638ed272caf614bbb2bf"
@@ -9270,6 +9320,11 @@ react-error-overlay@^6.0.7:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.8.tgz#474ed11d04fc6bda3af643447d85e9127ed6b5de"
   integrity sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw==
 
+react-fast-compare@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
 react-fast-compare@^3.0.1:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
@@ -10888,7 +10943,7 @@ tiny-invariant@^1.0.2:
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
   integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
 
-tiny-warning@^1.0.0, tiny-warning@^1.0.3:
+tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
@@ -10952,6 +11007,11 @@ toidentifier@1.0.0:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
+toposort@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
+  integrity sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=
+
 tough-cookie@^2.3.3, tough-cookie@^2.3.4, tough-cookie@^2.5.0, tough-cookie@~2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
@@ -11840,3 +11900,16 @@ yargs@^13.3.0, yargs@^13.3.2:
     which-module "^2.0.0"
     y18n "^4.0.0"
     yargs-parser "^13.1.2"
+
+yup@^0.32.9:
+  version "0.32.9"
+  resolved "https://registry.yarnpkg.com/yup/-/yup-0.32.9.tgz#9367bec6b1b0e39211ecbca598702e106019d872"
+  integrity sha512-Ci1qN+i2H0XpY7syDQ0k5zKQ/DoxO0LzPg8PAR/X4Mpj6DqaeCoIYEEjDJwhArh3Fa7GWbQQVDZKeXYlSH4JMg==
+  dependencies:
+    "@babel/runtime" "^7.10.5"
+    "@types/lodash" "^4.14.165"
+    lodash "^4.17.20"
+    lodash-es "^4.17.15"
+    nanoclone "^0.2.1"
+    property-expr "^2.0.4"
+    toposort "^2.0.2"

From d7b4fbf535b2e5a71d84a10d8320dd2220afe9a5 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 26 Feb 2021 17:22:26 +0700
Subject: [PATCH 2/9] #34 added isLoading and error handling to
 useCommentFormFormik

---
 .../comment/LocalCommentForm/index.tsx        | 16 +++++--
 src/utils/hooks/useCommentFormFormik.ts       | 47 +++++++++++++++----
 2 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/src/components/comment/LocalCommentForm/index.tsx b/src/components/comment/LocalCommentForm/index.tsx
index f4fb7b2c..a2bb90db 100644
--- a/src/components/comment/LocalCommentForm/index.tsx
+++ b/src/components/comment/LocalCommentForm/index.tsx
@@ -2,6 +2,7 @@ import React, { FC, useState } from 'react';
 import { CommentFormValues, useCommentFormFormik } from '~/utils/hooks/useCommentFormFormik';
 import { FormikProvider } from 'formik';
 import { LocalCommentFormTextarea } from '~/components/comment/LocalCommentFormTextarea';
+import { Button } from '~/components/input/Button';
 
 interface IProps {}
 
@@ -13,12 +14,19 @@ const initialValues: CommentFormValues = {
 
 const LocalCommentForm: FC<IProps> = () => {
   const [textarea, setTextarea] = useState<HTMLTextAreaElement>();
-  const { formik, isLoading } = useCommentFormFormik(initialValues, console.log);
+  const { formik } = useCommentFormFormik(initialValues);
 
   return (
-    <FormikProvider value={formik}>
-      <LocalCommentFormTextarea isLoading={isLoading} setRef={setTextarea} />
-    </FormikProvider>
+    <form onSubmit={formik.handleSubmit}>
+      <FormikProvider value={formik}>
+        <LocalCommentFormTextarea isLoading={formik.isSubmitting} setRef={setTextarea} />
+        {formik.isSubmitting && <div>LOADING</div>}
+        {!!formik.status && <div>error: {formik.status}</div>}
+        <Button size="small" disabled={formik.isSubmitting}>
+          SEND
+        </Button>
+      </FormikProvider>
+    </form>
   );
 };
 
diff --git a/src/utils/hooks/useCommentFormFormik.ts b/src/utils/hooks/useCommentFormFormik.ts
index 98c1b3b6..9cc1302a 100644
--- a/src/utils/hooks/useCommentFormFormik.ts
+++ b/src/utils/hooks/useCommentFormFormik.ts
@@ -1,7 +1,7 @@
-import { IFile } from '~/redux/types';
-import { useRef, useState } from 'react';
-import { useFormik, useFormikContext } from 'formik';
-import { object, string, array } from 'yup';
+import { IComment, IFile } from '~/redux/types';
+import { useCallback, useRef } from 'react';
+import { FormikHelpers, useFormik, useFormikContext } from 'formik';
+import { array, object, string } from 'yup';
 
 export interface CommentFormValues {
   text: string;
@@ -15,21 +15,50 @@ const validationSchema = object().shape({
   songs: array(),
 });
 
-export const useCommentFormFormik = (
+const submitComment = async (
+  id: IComment['id'],
   values: CommentFormValues,
-  onSubmit: (values: CommentFormValues) => void
+  callback: (e: string) => void
 ) => {
+  await new Promise(resolve => setTimeout(resolve, 500));
+  callback('wrong');
+};
+
+export const useCommentFormFormik = (values: CommentFormValues) => {
   const { current: initialValues } = useRef(values);
 
+  const onSuccess = useCallback(
+    ({ resetForm, setStatus, setSubmitting }: FormikHelpers<CommentFormValues>) => (e: string) => {
+      setSubmitting(false);
+
+      if (e) {
+        setStatus(e);
+        return;
+      }
+
+      if (resetForm) {
+        resetForm();
+      }
+    },
+    []
+  );
+
+  const onSubmit = useCallback(
+    (values: CommentFormValues, helpers: FormikHelpers<CommentFormValues>) => {
+      helpers.setSubmitting(true);
+      submitComment(0, values, onSuccess(helpers));
+    },
+    [values, onSuccess]
+  );
+
   const formik = useFormik({
     initialValues,
     validationSchema,
     onSubmit,
+    initialStatus: '',
   });
 
-  const [isLoading, setIsLoading] = useState(false);
-
-  return { formik, isLoading };
+  return { formik };
 };
 
 export const useCommentFormContext = () => useFormikContext<CommentFormValues>();

From f45e34f330f0c135855b4619560b5a31c0d2c019 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 26 Feb 2021 17:24:52 +0700
Subject: [PATCH 3/9] #34 removed isLoading from textarea

---
 src/components/comment/LocalCommentForm/index.tsx         | 2 +-
 src/components/comment/LocalCommentFormTextarea/index.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/comment/LocalCommentForm/index.tsx b/src/components/comment/LocalCommentForm/index.tsx
index a2bb90db..d3dcac18 100644
--- a/src/components/comment/LocalCommentForm/index.tsx
+++ b/src/components/comment/LocalCommentForm/index.tsx
@@ -19,7 +19,7 @@ const LocalCommentForm: FC<IProps> = () => {
   return (
     <form onSubmit={formik.handleSubmit}>
       <FormikProvider value={formik}>
-        <LocalCommentFormTextarea isLoading={formik.isSubmitting} setRef={setTextarea} />
+        <LocalCommentFormTextarea setRef={setTextarea} />
         {formik.isSubmitting && <div>LOADING</div>}
         {!!formik.status && <div>error: {formik.status}</div>}
         <Button size="small" disabled={formik.isSubmitting}>
diff --git a/src/components/comment/LocalCommentFormTextarea/index.tsx b/src/components/comment/LocalCommentFormTextarea/index.tsx
index 407c0311..79e4a524 100644
--- a/src/components/comment/LocalCommentFormTextarea/index.tsx
+++ b/src/components/comment/LocalCommentFormTextarea/index.tsx
@@ -8,8 +8,8 @@ interface IProps {
   setRef?: (r: HTMLTextAreaElement) => void;
 }
 
-const LocalCommentFormTextarea: FC<IProps> = ({ isLoading, setRef }) => {
-  const { values, handleChange, handleSubmit } = useCommentFormContext();
+const LocalCommentFormTextarea: FC<IProps> = ({ setRef }) => {
+  const { values, handleChange, handleSubmit, isSubmitting } = useCommentFormContext();
 
   const onKeyDown = useCallback<KeyboardEventHandler<HTMLTextAreaElement>>(
     ({ ctrlKey, key }) => {
@@ -25,7 +25,7 @@ const LocalCommentFormTextarea: FC<IProps> = ({ isLoading, setRef }) => {
       value={values.text}
       handler={handleChange('text')}
       onKeyDown={onKeyDown}
-      disabled={isLoading}
+      disabled={isSubmitting}
       placeholder={placeholder}
       minRows={2}
       setRef={setRef}

From 051b199d5d0e0d9ea5dacbb561b075b0721f10ec Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 27 Feb 2021 17:51:12 +0700
Subject: [PATCH 4/9] #34 made local comment form uploads

---
 package.json                                  |   2 +-
 src/components/comment/Comment/index.tsx      |   6 -
 .../comment/CommentContent/index.tsx          | 160 +++++++++---------
 src/components/comment/CommentForm/index.tsx  |  13 +-
 .../comment/LocalCommentForm/index.tsx        |  66 ++++++--
 .../LocalCommentFormAttaches/index.tsx        | 116 +++++++++++++
 src/components/input/Textarea/index.tsx       |  21 ++-
 src/components/node/NodeCommentForm/index.tsx |  25 +--
 src/containers/node/BorisLayout/index.tsx     |   4 +-
 src/containers/node/NodeLayout/index.tsx      |  24 +--
 src/styles/common/inputs.module.scss          |   1 +
 src/utils/hooks/fileUploader.tsx              |  77 +++++++++
 src/utils/hooks/useCommentFormFormik.ts       |  91 +++++-----
 src/utils/hooks/useShallowSelect.ts           |   5 +
 14 files changed, 422 insertions(+), 189 deletions(-)
 create mode 100644 src/components/comment/LocalCommentFormAttaches/index.tsx
 create mode 100644 src/utils/hooks/fileUploader.tsx
 create mode 100644 src/utils/hooks/useShallowSelect.ts

diff --git a/package.json b/package.json
index 9faa2025..7745f9b0 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-popper": "^2.2.3",
-    "react-redux": "^6.0.1",
+    "react-redux": "^7.2.2",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.4",
diff --git a/src/components/comment/Comment/index.tsx b/src/components/comment/Comment/index.tsx
index 7608e702..b7a8b22f 100644
--- a/src/components/comment/Comment/index.tsx
+++ b/src/components/comment/Comment/index.tsx
@@ -5,7 +5,6 @@ import { CommentContent } from '~/components/comment/CommentContent';
 import styles from './styles.module.scss';
 import { nodeEditComment, nodeLockComment } from '~/redux/node/actions';
 import { INodeState } from '~/redux/node/reducer';
-import { CommentForm } from '../CommentForm';
 import { CommendDeleted } from '../../node/CommendDeleted';
 import * as MODAL_ACTIONS from '~/redux/modal/actions';
 
@@ -50,17 +49,12 @@ const Comment: FC<IProps> = memo(
               return <CommendDeleted id={comment.id} onDelete={onDelete} key={comment.id} />;
             }
 
-            if (Object.prototype.hasOwnProperty.call(comment_data, comment.id)) {
-              return <CommentForm id={comment.id} key={comment.id} />;
-            }
-
             return (
               <CommentContent
                 comment={comment}
                 key={comment.id}
                 can_edit={!!can_edit}
                 onDelete={onDelete}
-                onEdit={onEdit}
                 modalShowPhotoswipe={modalShowPhotoswipe}
               />
             );
diff --git a/src/components/comment/CommentContent/index.tsx b/src/components/comment/CommentContent/index.tsx
index a1a48d40..b79f67d7 100644
--- a/src/components/comment/CommentContent/index.tsx
+++ b/src/components/comment/CommentContent/index.tsx
@@ -1,112 +1,116 @@
-import React, { FC, useMemo, memo, createElement, useCallback, Fragment } from 'react';
+import React, { createElement, FC, Fragment, memo, useCallback, useMemo, useState } from 'react';
 import { IComment, IFile } from '~/redux/types';
-import { path } from 'ramda';
-import { formatCommentText, getURL, getPrettyDate } from '~/utils/dom';
+import { append, assocPath, path } from 'ramda';
+import { formatCommentText, getPrettyDate, getURL } from '~/utils/dom';
 import { Group } from '~/components/containers/Group';
 import styles from './styles.module.scss';
 import { UPLOAD_TYPES } from '~/redux/uploads/constants';
-import { assocPath } from 'ramda';
-import { append } from 'ramda';
 import reduce from 'ramda/es/reduce';
 import { AudioPlayer } from '~/components/media/AudioPlayer';
 import classnames from 'classnames';
 import { PRESETS } from '~/constants/urls';
 import { COMMENT_BLOCK_RENDERERS } from '~/constants/comment';
-import { nodeLockComment, nodeEditComment } from '~/redux/node/actions';
+import { nodeLockComment } from '~/redux/node/actions';
 import { CommentMenu } from '../CommentMenu';
 import * as MODAL_ACTIONS from '~/redux/modal/actions';
+import { LocalCommentForm } from '~/components/comment/LocalCommentForm';
+import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { selectNode } from '~/redux/node/selectors';
 
 interface IProps {
   comment: IComment;
   can_edit: boolean;
   onDelete: typeof nodeLockComment;
-  onEdit: typeof nodeEditComment;
   modalShowPhotoswipe: typeof MODAL_ACTIONS.modalShowPhotoswipe;
 }
 
-const CommentContent: FC<IProps> = memo(
-  ({ comment, can_edit, onDelete, onEdit, modalShowPhotoswipe }) => {
-    const groupped = useMemo<Record<keyof typeof UPLOAD_TYPES, IFile[]>>(
-      () =>
-        reduce(
-          (group, file) => assocPath([file.type], append(file, group[file.type]), group),
-          {},
-          comment.files
-        ),
-      [comment]
-    );
+const CommentContent: FC<IProps> = memo(({ comment, can_edit, onDelete, modalShowPhotoswipe }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const { current } = useShallowSelect(selectNode);
 
-    const onLockClick = useCallback(() => {
-      onDelete(comment.id, !comment.deleted_at);
-    }, [comment, onDelete]);
+  const startEditing = useCallback(() => setIsEditing(true), [setIsEditing]);
+  const stopEditing = useCallback(() => setIsEditing(false), [setIsEditing]);
 
-    const onEditClick = useCallback(() => {
-      onEdit(comment.id);
-    }, [comment, onEdit]);
+  const groupped = useMemo<Record<keyof typeof UPLOAD_TYPES, IFile[]>>(
+    () =>
+      reduce(
+        (group, file) => assocPath([file.type], append(file, group[file.type]), group),
+        {},
+        comment.files
+      ),
+    [comment]
+  );
 
-    const menu = useMemo(
-      () => can_edit && <CommentMenu onDelete={onLockClick} onEdit={onEditClick} />,
-      [can_edit, comment, onEditClick, onLockClick]
-    );
+  const onLockClick = useCallback(() => {
+    onDelete(comment.id, !comment.deleted_at);
+  }, [comment, onDelete]);
 
-    const blocks = useMemo(
-      () =>
-        !!comment.text.trim()
-          ? formatCommentText(path(['user', 'username'], comment), comment.text)
-          : [],
-      [comment.text]
-    );
+  const menu = useMemo(
+    () => can_edit && <CommentMenu onDelete={onLockClick} onEdit={startEditing} />,
+    [can_edit, startEditing, onLockClick]
+  );
 
-    return (
-      <div className={styles.wrap}>
-        {comment.text && (
-          <Group className={classnames(styles.block, styles.block_text)}>
-            {menu}
+  const blocks = useMemo(
+    () =>
+      !!comment.text.trim()
+        ? formatCommentText(path(['user', 'username'], comment), comment.text)
+        : [],
+    [comment]
+  );
 
-            <Group className={styles.renderers}>
-              {blocks.map(
-                (block, key) =>
-                  COMMENT_BLOCK_RENDERERS[block.type] &&
-                  createElement(COMMENT_BLOCK_RENDERERS[block.type], { block, key })
-              )}
-            </Group>
+  if (isEditing) {
+    return <LocalCommentForm nodeId={current.id} comment={comment} onCancelEdit={stopEditing} />;
+  }
 
-            <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
+  return (
+    <div className={styles.wrap}>
+      {comment.text && (
+        <Group className={classnames(styles.block, styles.block_text)}>
+          {menu}
+
+          <Group className={styles.renderers}>
+            {blocks.map(
+              (block, key) =>
+                COMMENT_BLOCK_RENDERERS[block.type] &&
+                createElement(COMMENT_BLOCK_RENDERERS[block.type], { block, key })
+            )}
           </Group>
-        )}
 
-        {groupped.image && groupped.image.length > 0 && (
-          <div className={classnames(styles.block, styles.block_image)}>
-            {menu}
+          <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
+        </Group>
+      )}
 
-            <div className={styles.images}>
-              {groupped.image.map((file, index) => (
-                <div key={file.id} onClick={() => modalShowPhotoswipe(groupped.image, index)}>
-                  <img src={getURL(file, PRESETS['600'])} alt={file.name} />
-                </div>
-              ))}
-            </div>
+      {groupped.image && groupped.image.length > 0 && (
+        <div className={classnames(styles.block, styles.block_image)}>
+          {menu}
 
-            <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
-          </div>
-        )}
-
-        {groupped.audio && groupped.audio.length > 0 && (
-          <Fragment>
-            {groupped.audio.map(file => (
-              <div className={classnames(styles.block, styles.block_audio)} key={file.id}>
-                {menu}
-
-                <AudioPlayer file={file} />
-
-                <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
+          <div className={styles.images}>
+            {groupped.image.map((file, index) => (
+              <div key={file.id} onClick={() => modalShowPhotoswipe(groupped.image, index)}>
+                <img src={getURL(file, PRESETS['600'])} alt={file.name} />
               </div>
             ))}
-          </Fragment>
-        )}
-      </div>
-    );
-  }
-);
+          </div>
+
+          <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
+        </div>
+      )}
+
+      {groupped.audio && groupped.audio.length > 0 && (
+        <Fragment>
+          {groupped.audio.map(file => (
+            <div className={classnames(styles.block, styles.block_audio)} key={file.id}>
+              {menu}
+
+              <AudioPlayer file={file} />
+
+              <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
+            </div>
+          ))}
+        </Fragment>
+      )}
+    </div>
+  );
+});
 
 export { CommentContent };
diff --git a/src/components/comment/CommentForm/index.tsx b/src/components/comment/CommentForm/index.tsx
index 559b7cea..ee246687 100644
--- a/src/components/comment/CommentForm/index.tsx
+++ b/src/components/comment/CommentForm/index.tsx
@@ -1,12 +1,4 @@
-import React, {
-  FC,
-  KeyboardEventHandler,
-  memo,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
+import React, { FC, KeyboardEventHandler, memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { Textarea } from '~/components/input/Textarea';
 import styles from './styles.module.scss';
 import { Filler } from '~/components/containers/Filler';
@@ -30,7 +22,6 @@ import { CommentFormAttaches } from '~/components/comment/CommentFormAttaches';
 import { CommentFormAttachButtons } from '~/components/comment/CommentFormAttachButtons';
 import { CommentFormDropzone } from '~/components/comment/CommentFormDropzone';
 import { CommentFormFormatButtons } from '~/components/comment/CommentFormFormatButtons';
-import { LocalCommentForm } from '~/components/comment/LocalCommentForm';
 
 const mapStateToProps = (state: IState) => ({
   node: selectNode(state),
@@ -237,8 +228,6 @@ const CommentFormUnconnected: FC<IProps> = memo(
             </Group>
           </form>
         </CommentFormDropzone>
-
-        <LocalCommentForm />
       </>
     );
   }
diff --git a/src/components/comment/LocalCommentForm/index.tsx b/src/components/comment/LocalCommentForm/index.tsx
index d3dcac18..1511cb91 100644
--- a/src/components/comment/LocalCommentForm/index.tsx
+++ b/src/components/comment/LocalCommentForm/index.tsx
@@ -1,30 +1,64 @@
 import React, { FC, useState } from 'react';
-import { CommentFormValues, useCommentFormFormik } from '~/utils/hooks/useCommentFormFormik';
+import { useCommentFormFormik } from '~/utils/hooks/useCommentFormFormik';
 import { FormikProvider } from 'formik';
 import { LocalCommentFormTextarea } from '~/components/comment/LocalCommentFormTextarea';
 import { Button } from '~/components/input/Button';
+import { FileUploaderProvider, useFileUploader } from '~/utils/hooks/fileUploader';
+import { UPLOAD_SUBJECTS, UPLOAD_TARGETS } from '~/redux/uploads/constants';
+import { CommentFormAttachButtons } from '~/components/comment/CommentFormAttachButtons';
+import { CommentFormFormatButtons } from '~/components/comment/CommentFormFormatButtons';
+import { LocalCommentFormAttaches } from '~/components/comment/LocalCommentFormAttaches';
+import { LoaderCircle } from '~/components/input/LoaderCircle';
+import { IComment, INode } from '~/redux/types';
+import { EMPTY_COMMENT } from '~/redux/node/constants';
 
-interface IProps {}
+interface IProps {
+  comment?: IComment;
+  nodeId: INode['id'];
+  isBefore?: boolean;
+  onCancelEdit?: () => void;
+}
 
-const initialValues: CommentFormValues = {
-  text: '',
-  images: [],
-  songs: [],
-};
-
-const LocalCommentForm: FC<IProps> = () => {
+const LocalCommentForm: FC<IProps> = ({ comment, nodeId, isBefore, onCancelEdit }) => {
   const [textarea, setTextarea] = useState<HTMLTextAreaElement>();
-  const { formik } = useCommentFormFormik(initialValues);
+  const uploader = useFileUploader(UPLOAD_SUBJECTS.COMMENT, UPLOAD_TARGETS.COMMENTS);
+  const formik = useCommentFormFormik(
+    comment || EMPTY_COMMENT,
+    nodeId,
+    uploader,
+    onCancelEdit,
+    isBefore
+  );
+  const isLoading = formik.isSubmitting || uploader.isUploading;
+  const isEditing = !!comment?.id;
 
   return (
     <form onSubmit={formik.handleSubmit}>
       <FormikProvider value={formik}>
-        <LocalCommentFormTextarea setRef={setTextarea} />
-        {formik.isSubmitting && <div>LOADING</div>}
-        {!!formik.status && <div>error: {formik.status}</div>}
-        <Button size="small" disabled={formik.isSubmitting}>
-          SEND
-        </Button>
+        <FileUploaderProvider value={uploader}>
+          <LocalCommentFormTextarea setRef={setTextarea} />
+
+          <CommentFormAttachButtons onUpload={uploader.uploadFiles} />
+          <CommentFormFormatButtons element={textarea} handler={formik.handleChange('text')} />
+          <LocalCommentFormAttaches />
+
+          {isLoading && <LoaderCircle size={20} />}
+
+          {isEditing && (
+            <Button size="small" color="link" type="button" onClick={onCancelEdit}>
+              Отмена
+            </Button>
+          )}
+
+          <Button
+            size="small"
+            color="gray"
+            iconRight={!isEditing ? 'enter' : 'check'}
+            disabled={isLoading}
+          >
+            {!isEditing ? 'Сказать' : 'Сохранить'}
+          </Button>
+        </FileUploaderProvider>
       </FormikProvider>
     </form>
   );
diff --git a/src/components/comment/LocalCommentFormAttaches/index.tsx b/src/components/comment/LocalCommentFormAttaches/index.tsx
new file mode 100644
index 00000000..2b5094f3
--- /dev/null
+++ b/src/components/comment/LocalCommentFormAttaches/index.tsx
@@ -0,0 +1,116 @@
+import React, { FC, useCallback, useMemo } from 'react';
+import styles from '~/components/comment/CommentForm/styles.module.scss';
+import { SortableImageGrid } from '~/components/editors/SortableImageGrid';
+import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid';
+import { IFile } from '~/redux/types';
+import { SortEnd } from 'react-sortable-hoc';
+import { moveArrItem } from '~/utils/fn';
+import { useDropZone } from '~/utils/hooks';
+import { COMMENT_FILE_TYPES, UPLOAD_TYPES } from '~/redux/uploads/constants';
+import { useFileUploaderContext } from '~/utils/hooks/fileUploader';
+
+const LocalCommentFormAttaches: FC = () => {
+  const { files, pending, setFiles, uploadFiles } = useFileUploaderContext();
+
+  const images = useMemo(() => files.filter(file => file && file.type === UPLOAD_TYPES.IMAGE), [
+    files,
+  ]);
+
+  const pendingImages = useMemo(() => pending.filter(item => item.type === UPLOAD_TYPES.IMAGE), [
+    pending,
+  ]);
+
+  const audios = useMemo(() => files.filter(file => file && file.type === UPLOAD_TYPES.AUDIO), [
+    files,
+  ]);
+
+  const pendingAudios = useMemo(() => pending.filter(item => item.type === UPLOAD_TYPES.AUDIO), [
+    pending,
+  ]);
+
+  const onDrop = useDropZone(uploadFiles, COMMENT_FILE_TYPES);
+
+  const hasImageAttaches = images.length > 0 || pendingImages.length > 0;
+  const hasAudioAttaches = audios.length > 0 || pendingAudios.length > 0;
+  const hasAttaches = hasImageAttaches || hasAudioAttaches;
+
+  const onImageMove = useCallback(
+    ({ oldIndex, newIndex }: SortEnd) => {
+      setFiles([
+        ...audios,
+        ...(moveArrItem(
+          oldIndex,
+          newIndex,
+          images.filter(file => !!file)
+        ) as IFile[]),
+      ]);
+    },
+    [images, audios, setFiles]
+  );
+
+  const onAudioMove = useCallback(
+    ({ oldIndex, newIndex }: SortEnd) => {
+      setFiles([
+        ...images,
+        ...(moveArrItem(
+          oldIndex,
+          newIndex,
+          audios.filter(file => !!file)
+        ) as IFile[]),
+      ]);
+    },
+    [images, audios, setFiles]
+  );
+
+  const onFileDelete = useCallback(
+    (fileId: IFile['id']) => {
+      setFiles(files.filter(file => file.id !== fileId));
+    },
+    [setFiles, files]
+  );
+
+  const onAudioTitleChange = useCallback(
+    (fileId: IFile['id'], title: IFile['metadata']['title']) => {
+      setFiles(
+        files.map(file =>
+          file.id === fileId ? { ...file, metadata: { ...file.metadata, title } } : file
+        )
+      );
+    },
+    [files, setFiles]
+  );
+
+  return (
+    hasAttaches && (
+      <div className={styles.attaches} onDropCapture={onDrop}>
+        {hasImageAttaches && (
+          <SortableImageGrid
+            onDelete={onFileDelete}
+            onSortEnd={onImageMove}
+            axis="xy"
+            items={images}
+            locked={pendingImages}
+            pressDelay={50}
+            helperClass={styles.helper}
+            size={120}
+          />
+        )}
+
+        {hasAudioAttaches && (
+          <SortableAudioGrid
+            items={audios}
+            onDelete={onFileDelete}
+            onTitleChange={onAudioTitleChange}
+            onSortEnd={onAudioMove}
+            axis="y"
+            locked={pendingAudios}
+            pressDelay={50}
+            helperClass={styles.helper}
+          />
+        )}
+      </div>
+    )
+  );
+};
+
+export { LocalCommentFormAttaches };
diff --git a/src/components/input/Textarea/index.tsx b/src/components/input/Textarea/index.tsx
index fc2019ae..d51fa31e 100644
--- a/src/components/input/Textarea/index.tsx
+++ b/src/components/input/Textarea/index.tsx
@@ -6,7 +6,7 @@ import React, {
   useCallback,
   useEffect,
   useRef,
-  useState,
+  useState
 } from 'react';
 import classNames from 'classnames';
 import autosize from 'autosize';
@@ -59,14 +59,21 @@ const Textarea = memo<IProps>(
     const onFocus = useCallback(() => setFocused(true), [setFocused]);
     const onBlur = useCallback(() => setFocused(false), [setFocused]);
 
+    useEffect(() => {
+      const target = ref?.current;
+      if (!target) return;
+
+      autosize(target);
+      setRef(target);
+
+      return () => autosize.destroy(target);
+    }, [ref, setRef]);
+
     useEffect(() => {
       if (!ref.current) return;
 
-      autosize(ref.current);
-      setRef(ref.current);
-
-      return () => autosize.destroy(ref.current);
-    }, [ref.current]);
+      autosize.update(ref.current);
+    }, [value]);
 
     return (
       <div
@@ -89,7 +96,7 @@ const Textarea = memo<IProps>(
             onFocus={onFocus}
             onBlur={onBlur}
             style={{
-              maxHeight: maxRows * 20,
+              // maxHeight: maxRows * 20,
               minHeight: minRows * 20,
             }}
             {...props}
diff --git a/src/components/node/NodeCommentForm/index.tsx b/src/components/node/NodeCommentForm/index.tsx
index ee6647b2..87638160 100644
--- a/src/components/node/NodeCommentForm/index.tsx
+++ b/src/components/node/NodeCommentForm/index.tsx
@@ -1,32 +1,25 @@
-import React, { FC, useCallback, KeyboardEventHandler, useEffect, useMemo } from 'react';
-import { Textarea } from '~/components/input/Textarea';
+import React, { FC } from 'react';
 import { CommentWrapper } from '~/components/containers/CommentWrapper';
-import styles from './styles.module.scss';
-import { Filler } from '~/components/containers/Filler';
-import { Button } from '~/components/input/Button';
-import { assocPath } from 'ramda';
-import { InputHandler, IFileWithUUID, IFile } from '~/redux/types';
 import { connect } from 'react-redux';
-import * as NODE_ACTIONS from '~/redux/node/actions';
-import { selectNode } from '~/redux/node/selectors';
-import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
-import { selectUploads } from '~/redux/uploads/selectors';
-import { IState } from '~/redux/store';
-import { selectUser, selectAuthUser } from '~/redux/auth/selectors';
+import { selectAuthUser } from '~/redux/auth/selectors';
 import { CommentForm } from '../../comment/CommentForm';
+import { LocalCommentForm } from '~/components/comment/LocalCommentForm';
+import { INode } from '~/redux/types';
 
 const mapStateToProps = state => ({
   user: selectAuthUser(state),
 });
 
 type IProps = ReturnType<typeof mapStateToProps> & {
-  is_before?: boolean;
+  isBefore?: boolean;
+  nodeId: INode['id'];
 };
 
-const NodeCommentFormUnconnected: FC<IProps> = ({ user, is_before }) => {
+const NodeCommentFormUnconnected: FC<IProps> = ({ user, isBefore, nodeId }) => {
   return (
     <CommentWrapper user={user}>
-      <CommentForm id={0} is_before={is_before} />
+      <CommentForm id={0} is_before={isBefore} />
+      <LocalCommentForm isBefore={isBefore} nodeId={nodeId} />
     </CommentWrapper>
   );
 };
diff --git a/src/containers/node/BorisLayout/index.tsx b/src/containers/node/BorisLayout/index.tsx
index 46a8f4c1..7b252bf6 100644
--- a/src/containers/node/BorisLayout/index.tsx
+++ b/src/containers/node/BorisLayout/index.tsx
@@ -45,7 +45,7 @@ type IProps = ReturnType<typeof mapStateToProps> &
 const id = 696;
 
 const BorisLayoutUnconnected: FC<IProps> = ({
-  node: { is_loading, is_loading_comments, comments = [], comment_data, comment_count },
+  node: { is_loading, is_loading_comments, comments = [], comment_data, comment_count, id },
   user,
   user: { is_user, last_seen_boris },
   nodeLoadNode,
@@ -92,7 +92,7 @@ const BorisLayoutUnconnected: FC<IProps> = ({
       <div className={styles.container}>
         <Card className={styles.content}>
           <Group className={styles.grid}>
-            {is_user && <NodeCommentForm is_before />}
+            {is_user && <NodeCommentForm isBefore nodeId={id} />}
 
             {is_loading_comments ? (
               <NodeNoComments is_loading count={7} />
diff --git a/src/containers/node/NodeLayout/index.tsx b/src/containers/node/NodeLayout/index.tsx
index 12d69f3c..0484b242 100644
--- a/src/containers/node/NodeLayout/index.tsx
+++ b/src/containers/node/NodeLayout/index.tsx
@@ -12,7 +12,7 @@ import { NodeNoComments } from '~/components/node/NodeNoComments';
 import { NodeRelated } from '~/components/node/NodeRelated';
 import { NodeComments } from '~/components/node/NodeComments';
 import { NodeTags } from '~/components/node/NodeTags';
-import { INodeComponentProps, NODE_COMPONENTS, NODE_HEADS, NODE_INLINES, } from '~/redux/node/constants';
+import { INodeComponentProps, NODE_COMPONENTS, NODE_HEADS, NODE_INLINES } from '~/redux/node/constants';
 import { selectUser } from '~/redux/auth/selectors';
 import { pick } from 'ramda';
 import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholder';
@@ -30,6 +30,7 @@ import { selectModal } from '~/redux/modal/selectors';
 import { SidebarRouter } from '~/containers/main/SidebarRouter';
 import { ITag } from '~/redux/types';
 import { URLS } from '~/constants/urls';
+import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
 
 const mapStateToProps = (state: IState) => ({
   node: selectNode(state),
@@ -60,15 +61,6 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
     match: {
       params: { id },
     },
-    node: {
-      is_loading,
-      is_loading_comments,
-      comments = [],
-      current: node,
-      related,
-      comment_data,
-      comment_count,
-    },
     modal: { is_shown: is_modal_shown },
     user,
     user: { is_user },
@@ -86,7 +78,15 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
   }) => {
     const [layout, setLayout] = useState({});
     const history = useHistory();
-
+    const {
+      is_loading,
+      is_loading_comments,
+      comments = [],
+      current: node,
+      related,
+      comment_data,
+      comment_count,
+    } = useShallowSelect(selectNode);
     const updateLayout = useCallback(() => setLayout({}), []);
 
     useEffect(() => {
@@ -193,7 +193,7 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
                       />
                     )}
 
-                    {is_user && !is_loading && <NodeCommentForm />}
+                    {is_user && !is_loading && <NodeCommentForm nodeId={node.id} />}
                   </Group>
 
                   <div className={styles.panel}>
diff --git a/src/styles/common/inputs.module.scss b/src/styles/common/inputs.module.scss
index 99016f58..22c566be 100644
--- a/src/styles/common/inputs.module.scss
+++ b/src/styles/common/inputs.module.scss
@@ -230,6 +230,7 @@
     padding: 12px 0;
     box-sizing: border-box;
     width: 100%;
+    max-height: 60vh;
   }
 
   .status,
diff --git a/src/utils/hooks/fileUploader.tsx b/src/utils/hooks/fileUploader.tsx
new file mode 100644
index 00000000..9a3bc743
--- /dev/null
+++ b/src/utils/hooks/fileUploader.tsx
@@ -0,0 +1,77 @@
+import React, { createContext, FC, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { IFile, IFileWithUUID } from '~/redux/types';
+import { UPLOAD_SUBJECTS, UPLOAD_TARGETS } from '~/redux/uploads/constants';
+import { getFileType } from '~/utils/uploader';
+import uuid from 'uuid4';
+import { useDispatch } from 'react-redux';
+import { uploadUploadFiles } from '~/redux/uploads/actions';
+import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { selectUploads } from '~/redux/uploads/selectors';
+
+export const useFileUploader = (
+  subject: typeof UPLOAD_SUBJECTS[keyof typeof UPLOAD_SUBJECTS],
+  target: typeof UPLOAD_TARGETS[keyof typeof UPLOAD_TARGETS]
+) => {
+  const dispatch = useDispatch();
+  const { files: uploadedFiles, statuses } = useShallowSelect(selectUploads);
+
+  const [files, setFiles] = useState<IFile[]>([]);
+  const [pendingIDs, setPendingIDs] = useState<string[]>([]);
+
+  const uploadFiles = useCallback(
+    (files: File[]) => {
+      const items: IFileWithUUID[] = files.map(
+        (file: File): IFileWithUUID => ({
+          file,
+          temp_id: uuid(),
+          subject,
+          target,
+          type: getFileType(file),
+        })
+      );
+
+      const temps = items.map(file => file.temp_id);
+
+      setPendingIDs([...pendingIDs, ...temps]);
+      dispatch(uploadUploadFiles(items));
+    },
+    [pendingIDs, setPendingIDs, dispatch, subject, target]
+  );
+
+  useEffect(() => {
+    const added = pendingIDs
+      .map(temp_uuid => statuses[temp_uuid] && statuses[temp_uuid].uuid)
+      .map(el => !!el && uploadedFiles[el])
+      .filter(el => !!el && !files.some(file => file && file.id === el.id));
+
+    const newPending = pendingIDs.filter(
+      temp_id =>
+        statuses[temp_id] &&
+        (!statuses[temp_id].uuid || !added.some(file => file.id === statuses[temp_id].uuid))
+    );
+
+    if (added.length) {
+      setPendingIDs(newPending);
+      setFiles([...files, ...added]);
+    }
+  }, [statuses, files, pendingIDs, uploadedFiles]);
+
+  const pending = useMemo(() => pendingIDs.map(id => statuses[id]).filter(el => !!el), [
+    statuses,
+    pendingIDs,
+  ]);
+
+  const isLoading = pending.length > 0;
+
+  return { uploadFiles, pending, files, setFiles, isUploading: isLoading };
+};
+
+export type FileUploader = ReturnType<typeof useFileUploader>;
+const FileUploaderContext = createContext<FileUploader>(null);
+
+export const FileUploaderProvider: FC<{ value: FileUploader; children }> = ({
+  value,
+  children,
+}) => <FileUploaderContext.Provider value={value}>{children}</FileUploaderContext.Provider>;
+
+export const useFileUploaderContext = () => useContext(FileUploaderContext);
diff --git a/src/utils/hooks/useCommentFormFormik.ts b/src/utils/hooks/useCommentFormFormik.ts
index 9cc1302a..073f4d9a 100644
--- a/src/utils/hooks/useCommentFormFormik.ts
+++ b/src/utils/hooks/useCommentFormFormik.ts
@@ -1,64 +1,77 @@
-import { IComment, IFile } from '~/redux/types';
+import { IComment, INode } from '~/redux/types';
 import { useCallback, useRef } from 'react';
 import { FormikHelpers, useFormik, useFormikContext } from 'formik';
 import { array, object, string } from 'yup';
-
-export interface CommentFormValues {
-  text: string;
-  images: IFile[];
-  songs: IFile[];
-}
+import { FileUploader } from '~/utils/hooks/fileUploader';
 
 const validationSchema = object().shape({
   text: string(),
-  images: array(),
-  songs: array(),
+  files: array(),
 });
 
-const submitComment = async (
-  id: IComment['id'],
-  values: CommentFormValues,
-  callback: (e: string) => void
+const submitComment = (
+  id: INode['id'],
+  values: IComment,
+  isBefore: boolean,
+  callback: (e?: string) => void
 ) => {
-  await new Promise(resolve => setTimeout(resolve, 500));
-  callback('wrong');
+  console.log('Submitting', id, values);
+  new Promise(resolve => setTimeout(resolve, 500)).then(() => callback());
 };
 
-export const useCommentFormFormik = (values: CommentFormValues) => {
+const onSuccess = ({ resetForm, setStatus, setSubmitting }: FormikHelpers<IComment>) => (
+  e: string
+) => {
+  setSubmitting(false);
+
+  if (e) {
+    setStatus(e);
+    return;
+  }
+
+  if (resetForm) {
+    resetForm();
+  }
+};
+
+export const useCommentFormFormik = (
+  values: IComment,
+  nodeId: INode['id'],
+  uploader: FileUploader,
+  stopEditing?: () => void,
+  isBefore: boolean = false
+) => {
   const { current: initialValues } = useRef(values);
 
-  const onSuccess = useCallback(
-    ({ resetForm, setStatus, setSubmitting }: FormikHelpers<CommentFormValues>) => (e: string) => {
-      setSubmitting(false);
-
-      if (e) {
-        setStatus(e);
-        return;
-      }
-
-      if (resetForm) {
-        resetForm();
-      }
-    },
-    []
-  );
-
   const onSubmit = useCallback(
-    (values: CommentFormValues, helpers: FormikHelpers<CommentFormValues>) => {
+    (values: IComment, helpers: FormikHelpers<IComment>) => {
       helpers.setSubmitting(true);
-      submitComment(0, values, onSuccess(helpers));
+      submitComment(
+        nodeId,
+        {
+          ...values,
+          files: uploader.files,
+        },
+        isBefore,
+        onSuccess(helpers)
+      );
     },
-    [values, onSuccess]
+    [isBefore, nodeId, uploader.files]
   );
 
-  const formik = useFormik({
+  const onReset = useCallback(() => {
+    uploader.setFiles([]);
+
+    if (stopEditing) stopEditing();
+  }, [uploader, stopEditing]);
+
+  return useFormik({
     initialValues,
     validationSchema,
     onSubmit,
     initialStatus: '',
+    onReset,
   });
-
-  return { formik };
 };
 
-export const useCommentFormContext = () => useFormikContext<CommentFormValues>();
+export const useCommentFormContext = () => useFormikContext<IComment>();
diff --git a/src/utils/hooks/useShallowSelect.ts b/src/utils/hooks/useShallowSelect.ts
new file mode 100644
index 00000000..dcc33961
--- /dev/null
+++ b/src/utils/hooks/useShallowSelect.ts
@@ -0,0 +1,5 @@
+import { shallowEqual, useSelector } from 'react-redux';
+import { IState } from '~/redux/store';
+
+export const useShallowSelect = <T extends (state: IState) => any>(selector: T): ReturnType<T> =>
+  useSelector(selector, shallowEqual);

From dad416e6e2c792a51de735ed087237bd2781f61e Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 27 Feb 2021 18:11:38 +0700
Subject: [PATCH 5/9] #34 made submitting comment form

---
 .../comment/LocalCommentForm/index.tsx        | 12 +--
 src/components/node/NodeCommentForm/index.tsx |  2 +-
 src/redux/node/actions.ts                     | 15 ++-
 src/redux/node/constants.ts                   |  1 +
 src/redux/node/sagas.ts                       | 97 +++++++++++++------
 src/utils/hooks/useCommentFormFormik.ts       | 35 +++----
 6 files changed, 97 insertions(+), 65 deletions(-)

diff --git a/src/components/comment/LocalCommentForm/index.tsx b/src/components/comment/LocalCommentForm/index.tsx
index 1511cb91..15ead652 100644
--- a/src/components/comment/LocalCommentForm/index.tsx
+++ b/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'}
diff --git a/src/components/node/NodeCommentForm/index.tsx b/src/components/node/NodeCommentForm/index.tsx
index 87638160..4ea17209 100644
--- a/src/components/node/NodeCommentForm/index.tsx
+++ b/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>
   );
 };
diff --git a/src/redux/node/actions.ts b/src/redux/node/actions.ts
index 74489781..b6f6a9c7 100644
--- a/src/redux/node/actions.ts
+++ b/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,
diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts
index 9d3da6af..b5335f0d 100644
--- a/src/redux/node/constants.ts
+++ b/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`,
 
diff --git a/src/redux/node/sagas.ts b/src/redux/node/sagas.ts
index cf51db12..c9145feb 100644
--- a/src/redux/node/sagas.ts
+++ b/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);
diff --git a/src/utils/hooks/useCommentFormFormik.ts b/src/utils/hooks/useCommentFormFormik.ts
index 073f4d9a..78223c7b 100644
--- a/src/utils/hooks/useCommentFormFormik.ts
+++ b/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(() => {

From 29e5aef01b694205a1c1611e72ee957824bce4cd Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 27 Feb 2021 18:29:05 +0700
Subject: [PATCH 6/9] #34 made error handling and resetting

---
 .../styles.module.scss                        |  3 +-
 .../comment/LocalCommentForm/index.tsx        | 90 +++++++++++++------
 .../LocalCommentForm/styles.module.scss       | 57 ++++++++++++
 .../input/Button/styles.module.scss           | 11 ---
 src/utils/hooks/fileUploader.tsx              |  5 +-
 src/utils/hooks/useCommentFormFormik.ts       | 13 ++-
 6 files changed, 136 insertions(+), 43 deletions(-)
 create mode 100644 src/components/comment/LocalCommentForm/styles.module.scss

diff --git a/src/components/comment/CommentFormFormatButtons/styles.module.scss b/src/components/comment/CommentFormFormatButtons/styles.module.scss
index 5360b104..e63a68c1 100644
--- a/src/components/comment/CommentFormFormatButtons/styles.module.scss
+++ b/src/components/comment/CommentFormFormatButtons/styles.module.scss
@@ -1,9 +1,10 @@
-@import "~/styles/variables.scss";
+@import '~/styles/variables.scss';
 
 .wrap {
   display: flex;
   flex-wrap: wrap;
   height: 32px;
+  flex: 1;
 
   @media(max-width: 480px) {
     display: none;
diff --git a/src/components/comment/LocalCommentForm/index.tsx b/src/components/comment/LocalCommentForm/index.tsx
index 15ead652..cbb52ab2 100644
--- a/src/components/comment/LocalCommentForm/index.tsx
+++ b/src/components/comment/LocalCommentForm/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useCallback, useState } from 'react';
 import { useCommentFormFormik } from '~/utils/hooks/useCommentFormFormik';
 import { FormikProvider } from 'formik';
 import { LocalCommentFormTextarea } from '~/components/comment/LocalCommentFormTextarea';
@@ -11,6 +11,10 @@ import { LocalCommentFormAttaches } from '~/components/comment/LocalCommentFormA
 import { LoaderCircle } from '~/components/input/LoaderCircle';
 import { IComment, INode } from '~/redux/types';
 import { EMPTY_COMMENT } from '~/redux/node/constants';
+import { CommentFormDropzone } from '~/components/comment/CommentFormDropzone';
+import styles from './styles.module.scss';
+import { ERROR_LITERAL } from '~/constants/errors';
+import { Group } from '~/components/containers/Group';
 
 interface IProps {
   comment?: IComment;
@@ -20,41 +24,73 @@ interface IProps {
 
 const LocalCommentForm: FC<IProps> = ({ comment, nodeId, onCancelEdit }) => {
   const [textarea, setTextarea] = useState<HTMLTextAreaElement>();
-  const uploader = useFileUploader(UPLOAD_SUBJECTS.COMMENT, UPLOAD_TARGETS.COMMENTS);
+  const uploader = useFileUploader(
+    UPLOAD_SUBJECTS.COMMENT,
+    UPLOAD_TARGETS.COMMENTS,
+    comment?.files
+  );
   const formik = useCommentFormFormik(comment || EMPTY_COMMENT, nodeId, uploader, onCancelEdit);
   const isLoading = formik.isSubmitting || uploader.isUploading;
   const isEditing = !!comment?.id;
 
+  const clearError = useCallback(() => {
+    if (formik.status) {
+      formik.setStatus('');
+    }
+
+    if (formik.errors.text) {
+      formik.setErrors({
+        ...formik.errors,
+        text: '',
+      });
+    }
+  }, [formik]);
+
+  const error = formik.status || formik.errors.text;
+
   return (
-    <form onSubmit={formik.handleSubmit}>
-      <FormikProvider value={formik}>
-        <FileUploaderProvider value={uploader}>
-          <LocalCommentFormTextarea setRef={setTextarea} />
+    <CommentFormDropzone onUpload={uploader.uploadFiles}>
+      <form onSubmit={formik.handleSubmit} className={styles.wrap}>
+        <FormikProvider value={formik}>
+          <FileUploaderProvider value={uploader}>
+            <div className={styles.input}>
+              <LocalCommentFormTextarea setRef={setTextarea} />
 
-          <CommentFormAttachButtons onUpload={uploader.uploadFiles} />
-          <CommentFormFormatButtons element={textarea} handler={formik.handleChange('text')} />
-          <LocalCommentFormAttaches />
+              {!!error && (
+                <div className={styles.error} onClick={clearError}>
+                  {ERROR_LITERAL[error] || error}
+                </div>
+              )}
+            </div>
 
-          {isLoading && <LoaderCircle size={20} />}
+            <LocalCommentFormAttaches />
 
-          {isEditing && (
-            <Button size="small" color="link" type="button" onClick={onCancelEdit}>
-              Отмена
-            </Button>
-          )}
+            <Group horizontal className={styles.buttons}>
+              <CommentFormAttachButtons onUpload={uploader.uploadFiles} />
+              <CommentFormFormatButtons element={textarea} handler={formik.handleChange('text')} />
 
-          <Button
-            type="submit"
-            size="small"
-            color="gray"
-            iconRight={!isEditing ? 'enter' : 'check'}
-            disabled={isLoading}
-          >
-            {!isEditing ? 'Сказать' : 'Сохранить'}
-          </Button>
-        </FileUploaderProvider>
-      </FormikProvider>
-    </form>
+              {isLoading && <LoaderCircle size={20} />}
+
+              {isEditing && (
+                <Button size="small" color="link" type="button" onClick={onCancelEdit}>
+                  Отмена
+                </Button>
+              )}
+
+              <Button
+                type="submit"
+                size="small"
+                color="gray"
+                iconRight={!isEditing ? 'enter' : 'check'}
+                disabled={isLoading}
+              >
+                {!isEditing ? 'Сказать' : 'Сохранить'}
+              </Button>
+            </Group>
+          </FileUploaderProvider>
+        </FormikProvider>
+      </form>
+    </CommentFormDropzone>
   );
 };
 
diff --git a/src/components/comment/LocalCommentForm/styles.module.scss b/src/components/comment/LocalCommentForm/styles.module.scss
new file mode 100644
index 00000000..12798bf2
--- /dev/null
+++ b/src/components/comment/LocalCommentForm/styles.module.scss
@@ -0,0 +1,57 @@
+@import "src/styles/variables";
+
+.wrap {
+  display: flex;
+  flex-direction: column;
+
+  textarea {
+    min-height: 62px !important;
+  }
+}
+
+.input {
+  @include outer_shadow();
+  position: relative;
+  flex: 1;
+  padding: ($gap / 2) ($gap / 2 + 1px);
+}
+
+.buttons {
+  @include outer_shadow();
+
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: row;
+  background: transparentize(black, 0.8);
+  padding: $gap / 2;
+  border-radius: 0 0 $radius $radius;
+  flex-wrap: wrap;
+
+}
+
+.uploads {
+  padding: ($gap / 2);
+  display: grid;
+  grid-column-gap: $gap / 2;
+  grid-row-gap: $gap / 2;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+}
+
+.attaches {
+  @include outer_shadow();
+}
+
+.error {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  background: $red;
+  z-index: 10;
+  font: $font_12_regular;
+  box-sizing: border-box;
+  padding: 0 $gap;
+  border-radius: 4px 4px 0 0;
+  transform: translate(-50%, 0);
+  cursor: pointer;
+}
diff --git a/src/components/input/Button/styles.module.scss b/src/components/input/Button/styles.module.scss
index c3ee1e0c..676bb62d 100644
--- a/src/components/input/Button/styles.module.scss
+++ b/src/components/input/Button/styles.module.scss
@@ -178,17 +178,6 @@
       fill: white;
     }
   }
-
-  > * {
-    margin: 0 5px;
-
-    &:first-child {
-      margin-left: 0;
-    }
-    &:last-child {
-      margin-right: 0;
-    }
-  }
 }
 
 .micro {
diff --git a/src/utils/hooks/fileUploader.tsx b/src/utils/hooks/fileUploader.tsx
index 9a3bc743..207a86f3 100644
--- a/src/utils/hooks/fileUploader.tsx
+++ b/src/utils/hooks/fileUploader.tsx
@@ -10,12 +10,13 @@ import { selectUploads } from '~/redux/uploads/selectors';
 
 export const useFileUploader = (
   subject: typeof UPLOAD_SUBJECTS[keyof typeof UPLOAD_SUBJECTS],
-  target: typeof UPLOAD_TARGETS[keyof typeof UPLOAD_TARGETS]
+  target: typeof UPLOAD_TARGETS[keyof typeof UPLOAD_TARGETS],
+  initialFiles?: IFile[]
 ) => {
   const dispatch = useDispatch();
   const { files: uploadedFiles, statuses } = useShallowSelect(selectUploads);
 
-  const [files, setFiles] = useState<IFile[]>([]);
+  const [files, setFiles] = useState<IFile[]>(initialFiles || []);
   const [pendingIDs, setPendingIDs] = useState<string[]>([]);
 
   const uploadFiles = useCallback(
diff --git a/src/utils/hooks/useCommentFormFormik.ts b/src/utils/hooks/useCommentFormFormik.ts
index 78223c7b..dd3fc139 100644
--- a/src/utils/hooks/useCommentFormFormik.ts
+++ b/src/utils/hooks/useCommentFormFormik.ts
@@ -1,5 +1,5 @@
 import { IComment, INode } from '~/redux/types';
-import { useCallback, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { FormikHelpers, useFormik, useFormikContext } from 'formik';
 import { array, object, string } from 'yup';
 import { FileUploader } from '~/utils/hooks/fileUploader';
@@ -58,13 +58,22 @@ export const useCommentFormFormik = (
     if (stopEditing) stopEditing();
   }, [uploader, stopEditing]);
 
-  return useFormik({
+  const formik = useFormik({
     initialValues,
     validationSchema,
     onSubmit,
     initialStatus: '',
     onReset,
+    validateOnChange: true,
   });
+
+  useEffect(() => {
+    if (formik.status) {
+      formik.setStatus('');
+    }
+  }, [formik.values.text]);
+
+  return formik;
 };
 
 export const useCommentFormContext = () => useFormikContext<IComment>();

From 62f0fa59caadd3c9f8470cb3c2fe42cb3741ccdd Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 27 Feb 2021 18:55:58 +0700
Subject: [PATCH 7/9] #34 fixed boris layout with hooks

---
 src/components/comment/Comment/index.tsx      |  10 +-
 .../comment/CommentContent/index.tsx          |   7 +-
 src/components/comment/CommentForm/index.tsx  | 271 +++++-------------
 .../comment/CommentForm/styles.module.scss    |   1 +
 .../comment/CommentFormAttaches/index.tsx     | 149 ++++------
 .../CommentFormAttaches/styles.module.scss    |   5 +
 .../comment/LocalCommentForm/index.tsx        |  97 -------
 .../LocalCommentForm/styles.module.scss       |  57 ----
 .../LocalCommentFormAttaches/index.tsx        | 116 --------
 src/components/node/CommendDeleted/index.tsx  |   3 +-
 src/components/node/NodeCommentForm/index.tsx |   6 +-
 src/components/node/NodeComments/index.tsx    | 116 ++++----
 src/containers/node/BorisLayout/index.tsx     |  91 ++----
 src/containers/node/NodeLayout/index.tsx      |   7 +-
 .../profile/ProfileLayout/index.tsx           |   4 +-
 src/redux/node/actions.ts                     |   8 +-
 src/redux/node/constants.ts                   |   3 +-
 src/redux/node/sagas.ts                       |  42 +--
 src/redux/node/selectors.ts                   |  11 +-
 19 files changed, 231 insertions(+), 773 deletions(-)
 create mode 100644 src/components/comment/CommentFormAttaches/styles.module.scss
 delete mode 100644 src/components/comment/LocalCommentForm/index.tsx
 delete mode 100644 src/components/comment/LocalCommentForm/styles.module.scss
 delete mode 100644 src/components/comment/LocalCommentFormAttaches/index.tsx

diff --git a/src/components/comment/Comment/index.tsx b/src/components/comment/Comment/index.tsx
index b7a8b22f..6ee92c31 100644
--- a/src/components/comment/Comment/index.tsx
+++ b/src/components/comment/Comment/index.tsx
@@ -1,10 +1,8 @@
 import React, { FC, HTMLAttributes, memo } from 'react';
 import { CommentWrapper } from '~/components/containers/CommentWrapper';
-import { ICommentGroup } from '~/redux/types';
+import { IComment, ICommentGroup } from '~/redux/types';
 import { CommentContent } from '~/components/comment/CommentContent';
 import styles from './styles.module.scss';
-import { nodeEditComment, nodeLockComment } from '~/redux/node/actions';
-import { INodeState } from '~/redux/node/reducer';
 import { CommendDeleted } from '../../node/CommendDeleted';
 import * as MODAL_ACTIONS from '~/redux/modal/actions';
 
@@ -12,25 +10,21 @@ type IProps = HTMLAttributes<HTMLDivElement> & {
   is_empty?: boolean;
   is_loading?: boolean;
   comment_group: ICommentGroup;
-  comment_data: INodeState['comment_data'];
   is_same?: boolean;
   can_edit?: boolean;
-  onDelete: typeof nodeLockComment;
-  onEdit: typeof nodeEditComment;
+  onDelete: (id: IComment['id'], isLocked: boolean) => void;
   modalShowPhotoswipe: typeof MODAL_ACTIONS.modalShowPhotoswipe;
 };
 
 const Comment: FC<IProps> = memo(
   ({
     comment_group,
-    comment_data,
     is_empty,
     is_same,
     is_loading,
     className,
     can_edit,
     onDelete,
-    onEdit,
     modalShowPhotoswipe,
     ...props
   }) => {
diff --git a/src/components/comment/CommentContent/index.tsx b/src/components/comment/CommentContent/index.tsx
index b79f67d7..b215379e 100644
--- a/src/components/comment/CommentContent/index.tsx
+++ b/src/components/comment/CommentContent/index.tsx
@@ -10,17 +10,16 @@ import { AudioPlayer } from '~/components/media/AudioPlayer';
 import classnames from 'classnames';
 import { PRESETS } from '~/constants/urls';
 import { COMMENT_BLOCK_RENDERERS } from '~/constants/comment';
-import { nodeLockComment } from '~/redux/node/actions';
 import { CommentMenu } from '../CommentMenu';
 import * as MODAL_ACTIONS from '~/redux/modal/actions';
-import { LocalCommentForm } from '~/components/comment/LocalCommentForm';
+import { CommentForm } from '~/components/comment/CommentForm';
 import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
 import { selectNode } from '~/redux/node/selectors';
 
 interface IProps {
   comment: IComment;
   can_edit: boolean;
-  onDelete: typeof nodeLockComment;
+  onDelete: (id: IComment['id'], isLocked: boolean) => void;
   modalShowPhotoswipe: typeof MODAL_ACTIONS.modalShowPhotoswipe;
 }
 
@@ -59,7 +58,7 @@ const CommentContent: FC<IProps> = memo(({ comment, can_edit, onDelete, modalSho
   );
 
   if (isEditing) {
-    return <LocalCommentForm nodeId={current.id} comment={comment} onCancelEdit={stopEditing} />;
+    return <CommentForm nodeId={current.id} comment={comment} onCancelEdit={stopEditing} />;
   }
 
   return (
diff --git a/src/components/comment/CommentForm/index.tsx b/src/components/comment/CommentForm/index.tsx
index ee246687..8b0a1c8c 100644
--- a/src/components/comment/CommentForm/index.tsx
+++ b/src/components/comment/CommentForm/index.tsx
@@ -1,238 +1,97 @@
-import React, { FC, KeyboardEventHandler, memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { Textarea } from '~/components/input/Textarea';
-import styles from './styles.module.scss';
-import { Filler } from '~/components/containers/Filler';
+import React, { FC, useCallback, useState } from 'react';
+import { useCommentFormFormik } from '~/utils/hooks/useCommentFormFormik';
+import { FormikProvider } from 'formik';
+import { LocalCommentFormTextarea } from '~/components/comment/LocalCommentFormTextarea';
 import { Button } from '~/components/input/Button';
-import assocPath from 'ramda/es/assocPath';
-import { IComment, IFileWithUUID, InputHandler } from '~/redux/types';
-import { connect } from 'react-redux';
-import * as NODE_ACTIONS from '~/redux/node/actions';
-import { selectNode } from '~/redux/node/selectors';
-import { LoaderCircle } from '~/components/input/LoaderCircle';
-import { Group } from '~/components/containers/Group';
-import { UPLOAD_SUBJECTS, UPLOAD_TARGETS, UPLOAD_TYPES } from '~/redux/uploads/constants';
-import uuid from 'uuid4';
-import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
-import { selectUploads } from '~/redux/uploads/selectors';
-import { IState } from '~/redux/store';
-import { getFileType } from '~/utils/uploader';
-import { useRandomPhrase } from '~/constants/phrases';
-import { ERROR_LITERAL } from '~/constants/errors';
-import { CommentFormAttaches } from '~/components/comment/CommentFormAttaches';
+import { FileUploaderProvider, useFileUploader } from '~/utils/hooks/fileUploader';
+import { UPLOAD_SUBJECTS, UPLOAD_TARGETS } from '~/redux/uploads/constants';
 import { CommentFormAttachButtons } from '~/components/comment/CommentFormAttachButtons';
-import { CommentFormDropzone } from '~/components/comment/CommentFormDropzone';
 import { CommentFormFormatButtons } from '~/components/comment/CommentFormFormatButtons';
+import { CommentFormAttaches } from '~/components/comment/CommentFormAttaches';
+import { LoaderCircle } from '~/components/input/LoaderCircle';
+import { IComment, INode } from '~/redux/types';
+import { EMPTY_COMMENT } from '~/redux/node/constants';
+import { CommentFormDropzone } from '~/components/comment/CommentFormDropzone';
+import styles from './styles.module.scss';
+import { ERROR_LITERAL } from '~/constants/errors';
+import { Group } from '~/components/containers/Group';
 
-const mapStateToProps = (state: IState) => ({
-  node: selectNode(state),
-  uploads: selectUploads(state),
-});
+interface IProps {
+  comment?: IComment;
+  nodeId: INode['id'];
+  onCancelEdit?: () => void;
+}
 
-const mapDispatchToProps = {
-  nodePostComment: NODE_ACTIONS.nodePostComment,
-  nodeCancelCommentEdit: NODE_ACTIONS.nodeCancelCommentEdit,
-  nodeSetCommentData: NODE_ACTIONS.nodeSetCommentData,
-  uploadUploadFiles: UPLOAD_ACTIONS.uploadUploadFiles,
-};
+const CommentForm: FC<IProps> = ({ comment, nodeId, onCancelEdit }) => {
+  const [textarea, setTextarea] = useState<HTMLTextAreaElement>();
+  const uploader = useFileUploader(
+    UPLOAD_SUBJECTS.COMMENT,
+    UPLOAD_TARGETS.COMMENTS,
+    comment?.files
+  );
+  const formik = useCommentFormFormik(comment || EMPTY_COMMENT, nodeId, uploader, onCancelEdit);
+  const isLoading = formik.isSubmitting || uploader.isUploading;
+  const isEditing = !!comment?.id;
 
-type IProps = ReturnType<typeof mapStateToProps> &
-  typeof mapDispatchToProps & {
-    id: number;
-    is_before?: boolean;
-  };
+  const clearError = useCallback(() => {
+    if (formik.status) {
+      formik.setStatus('');
+    }
 
-const CommentFormUnconnected: FC<IProps> = memo(
-  ({
-    node: { comment_data, is_sending_comment },
-    uploads: { statuses, files },
-    id,
-    is_before = false,
-    nodePostComment,
-    nodeSetCommentData,
-    uploadUploadFiles,
-    nodeCancelCommentEdit,
-  }) => {
-    const [textarea, setTextarea] = useState<HTMLTextAreaElement>();
-    const comment = useMemo(() => comment_data[id], [comment_data, id]);
+    if (formik.errors.text) {
+      formik.setErrors({
+        ...formik.errors,
+        text: '',
+      });
+    }
+  }, [formik]);
 
-    const onUpload = useCallback(
-      (files: File[]) => {
-        const items: IFileWithUUID[] = files.map(
-          (file: File): IFileWithUUID => ({
-            file,
-            temp_id: uuid(),
-            subject: UPLOAD_SUBJECTS.COMMENT,
-            target: UPLOAD_TARGETS.COMMENTS,
-            type: getFileType(file),
-          })
-        );
+  const error = formik.status || formik.errors.text;
 
-        const temps = items.map(file => file.temp_id);
-
-        nodeSetCommentData(id, assocPath(['temp_ids'], [...comment.temp_ids, ...temps], comment));
-        uploadUploadFiles(items);
-      },
-      [uploadUploadFiles, comment, id, nodeSetCommentData]
-    );
-
-    const onInput = useCallback<InputHandler>(
-      text => {
-        nodeSetCommentData(id, assocPath(['text'], text, comment));
-      },
-      [nodeSetCommentData, comment, id]
-    );
-
-    useEffect(() => {
-      const temp_ids = (comment && comment.temp_ids) || [];
-      const added_files = temp_ids
-        .map(temp_uuid => statuses[temp_uuid] && statuses[temp_uuid].uuid)
-        .map(el => !!el && files[el])
-        .filter(el => !!el && !comment.files.some(file => file && file.id === el.id));
-
-      const filtered_temps = temp_ids.filter(
-        temp_id =>
-          statuses[temp_id] &&
-          (!statuses[temp_id].uuid || !added_files.some(file => file.id === statuses[temp_id].uuid))
-      );
-
-      if (added_files.length) {
-        nodeSetCommentData(id, {
-          ...comment,
-          temp_ids: filtered_temps,
-          files: [...comment.files, ...added_files],
-        });
-      }
-    }, [statuses, files]);
-
-    const isUploadingNow = useMemo(() => comment.temp_ids.length > 0, [comment.temp_ids]);
-
-    const onSubmit = useCallback(
-      event => {
-        if (event) event.preventDefault();
-        if (isUploadingNow || is_sending_comment) return;
-
-        nodePostComment(id, is_before);
-      },
-      [nodePostComment, id, is_before, isUploadingNow, is_sending_comment]
-    );
-
-    const onKeyDown = useCallback<KeyboardEventHandler<HTMLTextAreaElement>>(
-      ({ ctrlKey, key }) => {
-        if (!!ctrlKey && key === 'Enter') onSubmit(null);
-      },
-      [onSubmit]
-    );
-
-    const images = useMemo(
-      () => comment.files.filter(file => file && file.type === UPLOAD_TYPES.IMAGE),
-      [comment.files]
-    );
-
-    const locked_images = useMemo(
-      () =>
-        comment.temp_ids
-          .filter(temp => statuses[temp] && statuses[temp].type === UPLOAD_TYPES.IMAGE)
-          .map(temp_id => statuses[temp_id]),
-      [statuses, comment.temp_ids]
-    );
-
-    const audios = useMemo(
-      () => comment.files.filter(file => file && file.type === UPLOAD_TYPES.AUDIO),
-      [comment.files]
-    );
-
-    const locked_audios = useMemo(
-      () =>
-        comment.temp_ids
-          .filter(temp => statuses[temp] && statuses[temp].type === UPLOAD_TYPES.AUDIO)
-          .map(temp_id => statuses[temp_id]),
-      [statuses, comment.temp_ids]
-    );
-
-    const onCancelEdit = useCallback(() => {
-      nodeCancelCommentEdit(id);
-    }, [nodeCancelCommentEdit, comment.id]);
-
-    const placeholder = useRandomPhrase('SIMPLE');
-
-    const clearError = useCallback(() => nodeSetCommentData(id, { error: '' }), [
-      id,
-      nodeSetCommentData,
-    ]);
-
-    useEffect(() => {
-      if (comment.error) clearError();
-    }, [comment.files, comment.text]);
-
-    const setData = useCallback(
-      (data: Partial<IComment>) => {
-        nodeSetCommentData(id, data);
-      },
-      [nodeSetCommentData, id]
-    );
-
-    return (
-      <>
-        <CommentFormDropzone onUpload={onUpload}>
-          <form onSubmit={onSubmit} className={styles.wrap}>
+  return (
+    <CommentFormDropzone onUpload={uploader.uploadFiles}>
+      <form onSubmit={formik.handleSubmit} className={styles.wrap}>
+        <FormikProvider value={formik}>
+          <FileUploaderProvider value={uploader}>
             <div className={styles.input}>
-              <Textarea
-                value={comment.text}
-                handler={onInput}
-                onKeyDown={onKeyDown}
-                disabled={is_sending_comment}
-                placeholder={placeholder}
-                minRows={2}
-                setRef={setTextarea}
-              />
+              <LocalCommentFormTextarea setRef={setTextarea} />
 
-              {comment.error && (
+              {!!error && (
                 <div className={styles.error} onClick={clearError}>
-                  {ERROR_LITERAL[comment.error] || comment.error}
+                  {ERROR_LITERAL[error] || error}
                 </div>
               )}
             </div>
 
-            <CommentFormAttaches
-              images={images}
-              audios={audios}
-              locked_audios={locked_audios}
-              locked_images={locked_images}
-              comment={comment}
-              setComment={setData}
-              onUpload={onUpload}
-            />
+            <CommentFormAttaches />
 
             <Group horizontal className={styles.buttons}>
-              <CommentFormAttachButtons onUpload={onUpload} />
-              <CommentFormFormatButtons element={textarea} handler={onInput} />
+              <CommentFormAttachButtons onUpload={uploader.uploadFiles} />
+              <CommentFormFormatButtons element={textarea} handler={formik.handleChange('text')} />
 
-              <Filler />
+              {isLoading && <LoaderCircle size={20} />}
 
-              {(is_sending_comment || isUploadingNow) && <LoaderCircle size={20} />}
-
-              {id !== 0 && (
+              {isEditing && (
                 <Button size="small" color="link" type="button" onClick={onCancelEdit}>
                   Отмена
                 </Button>
               )}
 
               <Button
+                type="submit"
                 size="small"
                 color="gray"
-                iconRight={id === 0 ? 'enter' : 'check'}
-                disabled={is_sending_comment || isUploadingNow}
+                iconRight={!isEditing ? 'enter' : 'check'}
+                disabled={isLoading}
               >
-                {id === 0 ? 'Сказать' : 'Сохранить'}
+                {!isEditing ? 'Сказать' : 'Сохранить'}
               </Button>
             </Group>
-          </form>
-        </CommentFormDropzone>
-      </>
-    );
-  }
-);
+          </FileUploaderProvider>
+        </FormikProvider>
+      </form>
+    </CommentFormDropzone>
+  );
+};
 
-const CommentForm = connect(mapStateToProps, mapDispatchToProps)(CommentFormUnconnected);
-
-export { CommentForm, CommentFormUnconnected };
+export { CommentForm };
diff --git a/src/components/comment/CommentForm/styles.module.scss b/src/components/comment/CommentForm/styles.module.scss
index c2a58a5c..12798bf2 100644
--- a/src/components/comment/CommentForm/styles.module.scss
+++ b/src/components/comment/CommentForm/styles.module.scss
@@ -27,6 +27,7 @@
   padding: $gap / 2;
   border-radius: 0 0 $radius $radius;
   flex-wrap: wrap;
+
 }
 
 .uploads {
diff --git a/src/components/comment/CommentFormAttaches/index.tsx b/src/components/comment/CommentFormAttaches/index.tsx
index 28830735..1c764f14 100644
--- a/src/components/comment/CommentFormAttaches/index.tsx
+++ b/src/components/comment/CommentFormAttaches/index.tsx
@@ -1,106 +1,83 @@
-import React, { FC, useCallback } from 'react';
-import styles from '~/components/comment/CommentForm/styles.module.scss';
+import React, { FC, useCallback, useMemo } from 'react';
+import styles from './styles.module.scss';
 import { SortableImageGrid } from '~/components/editors/SortableImageGrid';
 import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid';
-import { IComment, IFile } from '~/redux/types';
-import { IUploadStatus } from '~/redux/uploads/reducer';
+import { IFile } from '~/redux/types';
 import { SortEnd } from 'react-sortable-hoc';
-import assocPath from 'ramda/es/assocPath';
 import { moveArrItem } from '~/utils/fn';
 import { useDropZone } from '~/utils/hooks';
-import { COMMENT_FILE_TYPES } from '~/redux/uploads/constants';
+import { COMMENT_FILE_TYPES, UPLOAD_TYPES } from '~/redux/uploads/constants';
+import { useFileUploaderContext } from '~/utils/hooks/fileUploader';
 
-interface IProps {
-  images: IFile[];
-  audios: IFile[];
-  locked_images: IUploadStatus[];
-  locked_audios: IUploadStatus[];
-  comment: IComment;
-  setComment: (data: IComment) => void;
-  onUpload: (files: File[]) => void;
-}
+const CommentFormAttaches: FC = () => {
+  const { files, pending, setFiles, uploadFiles } = useFileUploaderContext();
 
-const CommentFormAttaches: FC<IProps> = ({
-  images,
-  audios,
-  locked_images,
-  locked_audios,
-  comment,
-  setComment,
-  onUpload,
-}) => {
-  const onDrop = useDropZone(onUpload, COMMENT_FILE_TYPES);
+  const images = useMemo(() => files.filter(file => file && file.type === UPLOAD_TYPES.IMAGE), [
+    files,
+  ]);
 
-  const hasImageAttaches = images.length > 0 || locked_images.length > 0;
-  const hasAudioAttaches = audios.length > 0 || locked_audios.length > 0;
+  const pendingImages = useMemo(() => pending.filter(item => item.type === UPLOAD_TYPES.IMAGE), [
+    pending,
+  ]);
+
+  const audios = useMemo(() => files.filter(file => file && file.type === UPLOAD_TYPES.AUDIO), [
+    files,
+  ]);
+
+  const pendingAudios = useMemo(() => pending.filter(item => item.type === UPLOAD_TYPES.AUDIO), [
+    pending,
+  ]);
+
+  const onDrop = useDropZone(uploadFiles, COMMENT_FILE_TYPES);
+
+  const hasImageAttaches = images.length > 0 || pendingImages.length > 0;
+  const hasAudioAttaches = audios.length > 0 || pendingAudios.length > 0;
   const hasAttaches = hasImageAttaches || hasAudioAttaches;
 
   const onImageMove = useCallback(
     ({ oldIndex, newIndex }: SortEnd) => {
-      setComment(
-        assocPath(
-          ['files'],
-          [
-            ...audios,
-            ...(moveArrItem(
-              oldIndex,
-              newIndex,
-              images.filter(file => !!file)
-            ) as IFile[]),
-          ],
-          comment
-        )
-      );
+      setFiles([
+        ...audios,
+        ...(moveArrItem(
+          oldIndex,
+          newIndex,
+          images.filter(file => !!file)
+        ) as IFile[]),
+      ]);
     },
-    [images, audios, comment, setComment]
-  );
-
-  const onFileDelete = useCallback(
-    (fileId: IFile['id']) => {
-      setComment(
-        assocPath(
-          ['files'],
-          comment.files.filter(file => file.id != fileId),
-          comment
-        )
-      );
-    },
-    [setComment, comment]
-  );
-
-  const onTitleChange = useCallback(
-    (fileId: IFile['id'], title: IFile['metadata']['title']) => {
-      setComment(
-        assocPath(
-          ['files'],
-          comment.files.map(file =>
-            file.id === fileId ? { ...file, metadata: { ...file.metadata, title } } : file
-          ),
-          comment
-        )
-      );
-    },
-    [comment, setComment]
+    [images, audios, setFiles]
   );
 
   const onAudioMove = useCallback(
     ({ oldIndex, newIndex }: SortEnd) => {
-      setComment(
-        assocPath(
-          ['files'],
-          [
-            ...images,
-            ...(moveArrItem(
-              oldIndex,
-              newIndex,
-              audios.filter(file => !!file)
-            ) as IFile[]),
-          ],
-          comment
+      setFiles([
+        ...images,
+        ...(moveArrItem(
+          oldIndex,
+          newIndex,
+          audios.filter(file => !!file)
+        ) as IFile[]),
+      ]);
+    },
+    [images, audios, setFiles]
+  );
+
+  const onFileDelete = useCallback(
+    (fileId: IFile['id']) => {
+      setFiles(files.filter(file => file.id !== fileId));
+    },
+    [setFiles, files]
+  );
+
+  const onAudioTitleChange = useCallback(
+    (fileId: IFile['id'], title: IFile['metadata']['title']) => {
+      setFiles(
+        files.map(file =>
+          file.id === fileId ? { ...file, metadata: { ...file.metadata, title } } : file
         )
       );
     },
-    [images, audios, comment, setComment]
+    [files, setFiles]
   );
 
   return (
@@ -112,7 +89,7 @@ const CommentFormAttaches: FC<IProps> = ({
             onSortEnd={onImageMove}
             axis="xy"
             items={images}
-            locked={locked_images}
+            locked={pendingImages}
             pressDelay={50}
             helperClass={styles.helper}
             size={120}
@@ -123,10 +100,10 @@ const CommentFormAttaches: FC<IProps> = ({
           <SortableAudioGrid
             items={audios}
             onDelete={onFileDelete}
-            onTitleChange={onTitleChange}
+            onTitleChange={onAudioTitleChange}
             onSortEnd={onAudioMove}
             axis="y"
-            locked={locked_audios}
+            locked={pendingAudios}
             pressDelay={50}
             helperClass={styles.helper}
           />
diff --git a/src/components/comment/CommentFormAttaches/styles.module.scss b/src/components/comment/CommentFormAttaches/styles.module.scss
new file mode 100644
index 00000000..57ac2ca4
--- /dev/null
+++ b/src/components/comment/CommentFormAttaches/styles.module.scss
@@ -0,0 +1,5 @@
+@import "src/styles/variables";
+
+.attaches {
+  @include outer_shadow();
+}
diff --git a/src/components/comment/LocalCommentForm/index.tsx b/src/components/comment/LocalCommentForm/index.tsx
deleted file mode 100644
index cbb52ab2..00000000
--- a/src/components/comment/LocalCommentForm/index.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React, { FC, useCallback, useState } from 'react';
-import { useCommentFormFormik } from '~/utils/hooks/useCommentFormFormik';
-import { FormikProvider } from 'formik';
-import { LocalCommentFormTextarea } from '~/components/comment/LocalCommentFormTextarea';
-import { Button } from '~/components/input/Button';
-import { FileUploaderProvider, useFileUploader } from '~/utils/hooks/fileUploader';
-import { UPLOAD_SUBJECTS, UPLOAD_TARGETS } from '~/redux/uploads/constants';
-import { CommentFormAttachButtons } from '~/components/comment/CommentFormAttachButtons';
-import { CommentFormFormatButtons } from '~/components/comment/CommentFormFormatButtons';
-import { LocalCommentFormAttaches } from '~/components/comment/LocalCommentFormAttaches';
-import { LoaderCircle } from '~/components/input/LoaderCircle';
-import { IComment, INode } from '~/redux/types';
-import { EMPTY_COMMENT } from '~/redux/node/constants';
-import { CommentFormDropzone } from '~/components/comment/CommentFormDropzone';
-import styles from './styles.module.scss';
-import { ERROR_LITERAL } from '~/constants/errors';
-import { Group } from '~/components/containers/Group';
-
-interface IProps {
-  comment?: IComment;
-  nodeId: INode['id'];
-  onCancelEdit?: () => void;
-}
-
-const LocalCommentForm: FC<IProps> = ({ comment, nodeId, onCancelEdit }) => {
-  const [textarea, setTextarea] = useState<HTMLTextAreaElement>();
-  const uploader = useFileUploader(
-    UPLOAD_SUBJECTS.COMMENT,
-    UPLOAD_TARGETS.COMMENTS,
-    comment?.files
-  );
-  const formik = useCommentFormFormik(comment || EMPTY_COMMENT, nodeId, uploader, onCancelEdit);
-  const isLoading = formik.isSubmitting || uploader.isUploading;
-  const isEditing = !!comment?.id;
-
-  const clearError = useCallback(() => {
-    if (formik.status) {
-      formik.setStatus('');
-    }
-
-    if (formik.errors.text) {
-      formik.setErrors({
-        ...formik.errors,
-        text: '',
-      });
-    }
-  }, [formik]);
-
-  const error = formik.status || formik.errors.text;
-
-  return (
-    <CommentFormDropzone onUpload={uploader.uploadFiles}>
-      <form onSubmit={formik.handleSubmit} className={styles.wrap}>
-        <FormikProvider value={formik}>
-          <FileUploaderProvider value={uploader}>
-            <div className={styles.input}>
-              <LocalCommentFormTextarea setRef={setTextarea} />
-
-              {!!error && (
-                <div className={styles.error} onClick={clearError}>
-                  {ERROR_LITERAL[error] || error}
-                </div>
-              )}
-            </div>
-
-            <LocalCommentFormAttaches />
-
-            <Group horizontal className={styles.buttons}>
-              <CommentFormAttachButtons onUpload={uploader.uploadFiles} />
-              <CommentFormFormatButtons element={textarea} handler={formik.handleChange('text')} />
-
-              {isLoading && <LoaderCircle size={20} />}
-
-              {isEditing && (
-                <Button size="small" color="link" type="button" onClick={onCancelEdit}>
-                  Отмена
-                </Button>
-              )}
-
-              <Button
-                type="submit"
-                size="small"
-                color="gray"
-                iconRight={!isEditing ? 'enter' : 'check'}
-                disabled={isLoading}
-              >
-                {!isEditing ? 'Сказать' : 'Сохранить'}
-              </Button>
-            </Group>
-          </FileUploaderProvider>
-        </FormikProvider>
-      </form>
-    </CommentFormDropzone>
-  );
-};
-
-export { LocalCommentForm };
diff --git a/src/components/comment/LocalCommentForm/styles.module.scss b/src/components/comment/LocalCommentForm/styles.module.scss
deleted file mode 100644
index 12798bf2..00000000
--- a/src/components/comment/LocalCommentForm/styles.module.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-@import "src/styles/variables";
-
-.wrap {
-  display: flex;
-  flex-direction: column;
-
-  textarea {
-    min-height: 62px !important;
-  }
-}
-
-.input {
-  @include outer_shadow();
-  position: relative;
-  flex: 1;
-  padding: ($gap / 2) ($gap / 2 + 1px);
-}
-
-.buttons {
-  @include outer_shadow();
-
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: row;
-  background: transparentize(black, 0.8);
-  padding: $gap / 2;
-  border-radius: 0 0 $radius $radius;
-  flex-wrap: wrap;
-
-}
-
-.uploads {
-  padding: ($gap / 2);
-  display: grid;
-  grid-column-gap: $gap / 2;
-  grid-row-gap: $gap / 2;
-  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-}
-
-.attaches {
-  @include outer_shadow();
-}
-
-.error {
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  background: $red;
-  z-index: 10;
-  font: $font_12_regular;
-  box-sizing: border-box;
-  padding: 0 $gap;
-  border-radius: 4px 4px 0 0;
-  transform: translate(-50%, 0);
-  cursor: pointer;
-}
diff --git a/src/components/comment/LocalCommentFormAttaches/index.tsx b/src/components/comment/LocalCommentFormAttaches/index.tsx
deleted file mode 100644
index 2b5094f3..00000000
--- a/src/components/comment/LocalCommentFormAttaches/index.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import React, { FC, useCallback, useMemo } from 'react';
-import styles from '~/components/comment/CommentForm/styles.module.scss';
-import { SortableImageGrid } from '~/components/editors/SortableImageGrid';
-import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid';
-import { IFile } from '~/redux/types';
-import { SortEnd } from 'react-sortable-hoc';
-import { moveArrItem } from '~/utils/fn';
-import { useDropZone } from '~/utils/hooks';
-import { COMMENT_FILE_TYPES, UPLOAD_TYPES } from '~/redux/uploads/constants';
-import { useFileUploaderContext } from '~/utils/hooks/fileUploader';
-
-const LocalCommentFormAttaches: FC = () => {
-  const { files, pending, setFiles, uploadFiles } = useFileUploaderContext();
-
-  const images = useMemo(() => files.filter(file => file && file.type === UPLOAD_TYPES.IMAGE), [
-    files,
-  ]);
-
-  const pendingImages = useMemo(() => pending.filter(item => item.type === UPLOAD_TYPES.IMAGE), [
-    pending,
-  ]);
-
-  const audios = useMemo(() => files.filter(file => file && file.type === UPLOAD_TYPES.AUDIO), [
-    files,
-  ]);
-
-  const pendingAudios = useMemo(() => pending.filter(item => item.type === UPLOAD_TYPES.AUDIO), [
-    pending,
-  ]);
-
-  const onDrop = useDropZone(uploadFiles, COMMENT_FILE_TYPES);
-
-  const hasImageAttaches = images.length > 0 || pendingImages.length > 0;
-  const hasAudioAttaches = audios.length > 0 || pendingAudios.length > 0;
-  const hasAttaches = hasImageAttaches || hasAudioAttaches;
-
-  const onImageMove = useCallback(
-    ({ oldIndex, newIndex }: SortEnd) => {
-      setFiles([
-        ...audios,
-        ...(moveArrItem(
-          oldIndex,
-          newIndex,
-          images.filter(file => !!file)
-        ) as IFile[]),
-      ]);
-    },
-    [images, audios, setFiles]
-  );
-
-  const onAudioMove = useCallback(
-    ({ oldIndex, newIndex }: SortEnd) => {
-      setFiles([
-        ...images,
-        ...(moveArrItem(
-          oldIndex,
-          newIndex,
-          audios.filter(file => !!file)
-        ) as IFile[]),
-      ]);
-    },
-    [images, audios, setFiles]
-  );
-
-  const onFileDelete = useCallback(
-    (fileId: IFile['id']) => {
-      setFiles(files.filter(file => file.id !== fileId));
-    },
-    [setFiles, files]
-  );
-
-  const onAudioTitleChange = useCallback(
-    (fileId: IFile['id'], title: IFile['metadata']['title']) => {
-      setFiles(
-        files.map(file =>
-          file.id === fileId ? { ...file, metadata: { ...file.metadata, title } } : file
-        )
-      );
-    },
-    [files, setFiles]
-  );
-
-  return (
-    hasAttaches && (
-      <div className={styles.attaches} onDropCapture={onDrop}>
-        {hasImageAttaches && (
-          <SortableImageGrid
-            onDelete={onFileDelete}
-            onSortEnd={onImageMove}
-            axis="xy"
-            items={images}
-            locked={pendingImages}
-            pressDelay={50}
-            helperClass={styles.helper}
-            size={120}
-          />
-        )}
-
-        {hasAudioAttaches && (
-          <SortableAudioGrid
-            items={audios}
-            onDelete={onFileDelete}
-            onTitleChange={onAudioTitleChange}
-            onSortEnd={onAudioMove}
-            axis="y"
-            locked={pendingAudios}
-            pressDelay={50}
-            helperClass={styles.helper}
-          />
-        )}
-      </div>
-    )
-  );
-};
-
-export { LocalCommentFormAttaches };
diff --git a/src/components/node/CommendDeleted/index.tsx b/src/components/node/CommendDeleted/index.tsx
index 340f6f90..f6b6a6ef 100644
--- a/src/components/node/CommendDeleted/index.tsx
+++ b/src/components/node/CommendDeleted/index.tsx
@@ -1,12 +1,11 @@
 import React, { FC, useCallback } from 'react';
 import styles from './styles.module.scss';
 import { Button } from '~/components/input/Button';
-import { nodeLockComment } from '~/redux/node/actions';
 import { IComment } from '~/redux/types';
 
 interface IProps {
   id: IComment['id'];
-  onDelete: typeof nodeLockComment;
+  onDelete: (id: IComment['id'], isLocked: boolean) => void;
 }
 
 const CommendDeleted: FC<IProps> = ({ id, onDelete }) => {
diff --git a/src/components/node/NodeCommentForm/index.tsx b/src/components/node/NodeCommentForm/index.tsx
index 4ea17209..b60df5f4 100644
--- a/src/components/node/NodeCommentForm/index.tsx
+++ b/src/components/node/NodeCommentForm/index.tsx
@@ -2,8 +2,7 @@ import React, { FC } from 'react';
 import { CommentWrapper } from '~/components/containers/CommentWrapper';
 import { connect } from 'react-redux';
 import { selectAuthUser } from '~/redux/auth/selectors';
-import { CommentForm } from '../../comment/CommentForm';
-import { LocalCommentForm } from '~/components/comment/LocalCommentForm';
+import { CommentForm } from '~/components/comment/CommentForm';
 import { INode } from '~/redux/types';
 
 const mapStateToProps = state => ({
@@ -18,8 +17,7 @@ type IProps = ReturnType<typeof mapStateToProps> & {
 const NodeCommentFormUnconnected: FC<IProps> = ({ user, isBefore, nodeId }) => {
   return (
     <CommentWrapper user={user}>
-      <CommentForm id={0} is_before={isBefore} />
-      <LocalCommentForm nodeId={nodeId} />
+      <CommentForm nodeId={nodeId} />
     </CommentWrapper>
   );
 };
diff --git a/src/components/node/NodeComments/index.tsx b/src/components/node/NodeComments/index.tsx
index 205a0e4f..899b337c 100644
--- a/src/components/node/NodeComments/index.tsx
+++ b/src/components/node/NodeComments/index.tsx
@@ -1,89 +1,73 @@
-import React, { FC, useMemo, memo } from 'react';
+import React, { FC, memo, useCallback, useMemo } from 'react';
 import { Comment } from '../../comment/Comment';
-import { Filler } from '~/components/containers/Filler';
 
 import styles from './styles.module.scss';
-import { ICommentGroup, IComment } from '~/redux/types';
+import { IComment, ICommentGroup, IFile } from '~/redux/types';
 import { groupCommentsByUser } from '~/utils/fn';
 import { IUser } from '~/redux/auth/types';
 import { canEditComment } from '~/utils/node';
-import { nodeLockComment, nodeEditComment, nodeLoadMoreComments } from '~/redux/node/actions';
+import { nodeLoadMoreComments, nodeLockComment } from '~/redux/node/actions';
 import { INodeState } from '~/redux/node/reducer';
 import { COMMENTS_DISPLAY } from '~/redux/node/constants';
 import { plural } from '~/utils/dom';
-import * as MODAL_ACTIONS from '~/redux/modal/actions';
+import { modalShowPhotoswipe } from '~/redux/modal/actions';
+import { useDispatch } from 'react-redux';
 
 interface IProps {
   comments?: IComment[];
-  comment_data: INodeState['comment_data'];
-  comment_count: INodeState['comment_count'];
+  count: INodeState['comment_count'];
   user: IUser;
-  onDelete: typeof nodeLockComment;
-  onEdit: typeof nodeEditComment;
-  onLoadMore: typeof nodeLoadMoreComments;
   order?: 'ASC' | 'DESC';
-  modalShowPhotoswipe: typeof MODAL_ACTIONS.modalShowPhotoswipe;
 }
 
-const NodeComments: FC<IProps> = memo(
-  ({
-    comments,
-    comment_data,
-    user,
-    onDelete,
-    onEdit,
-    onLoadMore,
-    comment_count = 0,
-    order = 'DESC',
-    modalShowPhotoswipe,
-  }) => {
-    const comments_left = useMemo(() => Math.max(0, comment_count - comments.length), [
-      comments,
-      comment_count,
-    ]);
+const NodeComments: FC<IProps> = memo(({ comments, user, count = 0, order = 'DESC' }) => {
+  const dispatch = useDispatch();
+  const left = useMemo(() => Math.max(0, count - comments.length), [comments, count]);
 
-    const groupped: ICommentGroup[] = useMemo(
-      () => (order === 'DESC' ? [...comments].reverse() : comments).reduce(groupCommentsByUser, []),
-      [comments, order]
-    );
+  const groupped: ICommentGroup[] = useMemo(
+    () => (order === 'DESC' ? [...comments].reverse() : comments).reduce(groupCommentsByUser, []),
+    [comments, order]
+  );
 
-    const more = useMemo(
-      () =>
-        comments_left > 0 && (
-          <div className={styles.more} onClick={onLoadMore}>
-            Показать ещё{' '}
-            {plural(
-              Math.min(comments_left, COMMENTS_DISPLAY),
-              'комментарий',
-              'комментария',
-              'комментариев'
-            )}
-            {comments_left > COMMENTS_DISPLAY ? ` из ${comments_left} оставшихся` : ''}
-          </div>
-        ),
-      [comments_left, onLoadMore, COMMENTS_DISPLAY]
-    );
+  const onDelete = useCallback(
+    (id: IComment['id'], locked: boolean) => dispatch(nodeLockComment(id, locked)),
+    [dispatch]
+  );
+  const onLoadMoreComments = useCallback(() => dispatch(nodeLoadMoreComments()), [dispatch]);
+  const onShowPhotoswipe = useCallback(
+    (images: IFile[], index: number) => dispatch(modalShowPhotoswipe(images, index)),
+    [dispatch]
+  );
 
-    return (
-      <div className={styles.wrap}>
-        {order === 'DESC' && more}
+  const more = useMemo(
+    () =>
+      left > 0 && (
+        <div className={styles.more} onClick={onLoadMoreComments}>
+          Показать ещё{' '}
+          {plural(Math.min(left, COMMENTS_DISPLAY), 'комментарий', 'комментария', 'комментариев')}
+          {left > COMMENTS_DISPLAY ? ` из ${left} оставшихся` : ''}
+        </div>
+      ),
+    [left, onLoadMoreComments]
+  );
 
-        {groupped.map(group => (
-          <Comment
-            key={group.ids.join()}
-            comment_group={group}
-            comment_data={comment_data}
-            can_edit={canEditComment(group, user)}
-            onDelete={onDelete}
-            onEdit={onEdit}
-            modalShowPhotoswipe={modalShowPhotoswipe}
-          />
-        ))}
+  return (
+    <div className={styles.wrap}>
+      {order === 'DESC' && more}
 
-        {order === 'ASC' && more}
-      </div>
-    );
-  }
-);
+      {groupped.map(group => (
+        <Comment
+          key={group.ids.join()}
+          comment_group={group}
+          can_edit={canEditComment(group, user)}
+          onDelete={onDelete}
+          modalShowPhotoswipe={onShowPhotoswipe}
+        />
+      ))}
+
+      {order === 'ASC' && more}
+    </div>
+  );
+});
 
 export { NodeComments };
diff --git a/src/containers/node/BorisLayout/index.tsx b/src/containers/node/BorisLayout/index.tsx
index 7b252bf6..fb005d40 100644
--- a/src/containers/node/BorisLayout/index.tsx
+++ b/src/containers/node/BorisLayout/index.tsx
@@ -1,8 +1,7 @@
 import React, { FC, useEffect } from 'react';
-import { RouteComponentProps } from 'react-router';
-import { selectNode } from '~/redux/node/selectors';
+import { selectNode, selectNodeComments } from '~/redux/node/selectors';
 import { selectUser } from '~/redux/auth/selectors';
-import { connect } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { NodeComments } from '~/components/node/NodeComments';
 import styles from './styles.module.scss';
 import { Group } from '~/components/containers/Group';
@@ -10,72 +9,49 @@ import boris from '~/sprites/boris_robot.svg';
 import { NodeNoComments } from '~/components/node/NodeNoComments';
 import { useRandomPhrase } from '~/constants/phrases';
 import { NodeCommentForm } from '~/components/node/NodeCommentForm';
-
-import * as NODE_ACTIONS from '~/redux/node/actions';
-import * as AUTH_ACTIONS from '~/redux/auth/actions';
-import * as MODAL_ACTIONS from '~/redux/modal/actions';
-import * as BORIS_ACTIONS from '~/redux/boris/actions';
 import isBefore from 'date-fns/isBefore';
 import { Card } from '~/components/containers/Card';
 import { Footer } from '~/components/main/Footer';
 import { Sticky } from '~/components/containers/Sticky';
-import { selectBorisStats } from '~/redux/boris/selectors';
 import { BorisStats } from '~/components/boris/BorisStats';
+import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { selectBorisStats } from '~/redux/boris/selectors';
+import { authSetUser } from '~/redux/auth/actions';
+import { nodeLoadNode } from '~/redux/node/actions';
+import { borisLoadStats } from '~/redux/boris/actions';
 
-const mapStateToProps = state => ({
-  node: selectNode(state),
-  user: selectUser(state),
-  stats: selectBorisStats(state),
-});
+type IProps = {};
 
-const mapDispatchToProps = {
-  nodeLoadNode: NODE_ACTIONS.nodeLoadNode,
-  nodeLockComment: NODE_ACTIONS.nodeLockComment,
-  nodeEditComment: NODE_ACTIONS.nodeEditComment,
-  nodeLoadMoreComments: NODE_ACTIONS.nodeLoadMoreComments,
-  authSetUser: AUTH_ACTIONS.authSetUser,
-  modalShowPhotoswipe: MODAL_ACTIONS.modalShowPhotoswipe,
-  borisLoadStats: BORIS_ACTIONS.borisLoadStats,
-};
-
-type IProps = ReturnType<typeof mapStateToProps> &
-  typeof mapDispatchToProps &
-  RouteComponentProps<{ id: string }> & {};
-
-const id = 696;
-
-const BorisLayoutUnconnected: FC<IProps> = ({
-  node: { is_loading, is_loading_comments, comments = [], comment_data, comment_count, id },
-  user,
-  user: { is_user, last_seen_boris },
-  nodeLoadNode,
-  nodeLockComment,
-  nodeEditComment,
-  nodeLoadMoreComments,
-  modalShowPhotoswipe,
-  authSetUser,
-  borisLoadStats,
-  stats,
-}) => {
+const BorisLayout: FC<IProps> = () => {
   const title = useRandomPhrase('BORIS_TITLE');
+  const dispatch = useDispatch();
+  const node = useShallowSelect(selectNode);
+  const user = useShallowSelect(selectUser);
+  const stats = useShallowSelect(selectBorisStats);
+  const comments = useShallowSelect(selectNodeComments);
 
   useEffect(() => {
     const last_comment = comments[0];
+
     if (!last_comment) return;
-    if (last_seen_boris && !isBefore(new Date(last_seen_boris), new Date(last_comment.created_at)))
+
+    if (
+      user.last_seen_boris &&
+      !isBefore(new Date(user.last_seen_boris), new Date(last_comment.created_at))
+    )
       return;
 
-    authSetUser({ last_seen_boris: last_comment.created_at });
-  }, [comments, last_seen_boris]);
+    dispatch(authSetUser({ last_seen_boris: last_comment.created_at }));
+  }, [user.last_seen_boris, dispatch, comments]);
 
   useEffect(() => {
-    if (is_loading) return;
-    nodeLoadNode(id, 'DESC');
-  }, [nodeLoadNode, id]);
+    if (node.is_loading) return;
+    dispatch(nodeLoadNode(696, 'DESC'));
+  }, [dispatch]);
 
   useEffect(() => {
-    borisLoadStats();
-  }, [borisLoadStats]);
+    dispatch(borisLoadStats());
+  }, [dispatch]);
 
   return (
     <div className={styles.wrap}>
@@ -92,20 +68,15 @@ const BorisLayoutUnconnected: FC<IProps> = ({
       <div className={styles.container}>
         <Card className={styles.content}>
           <Group className={styles.grid}>
-            {is_user && <NodeCommentForm isBefore nodeId={id} />}
+            {user.is_user && <NodeCommentForm isBefore nodeId={node.current.id} />}
 
-            {is_loading_comments ? (
+            {node.is_loading_comments ? (
               <NodeNoComments is_loading count={7} />
             ) : (
               <NodeComments
                 comments={comments}
-                comment_data={comment_data}
-                comment_count={comment_count}
+                count={node.comment_count}
                 user={user}
-                onDelete={nodeLockComment}
-                onEdit={nodeEditComment}
-                onLoadMore={nodeLoadMoreComments}
-                modalShowPhotoswipe={modalShowPhotoswipe}
                 order="ASC"
               />
             )}
@@ -139,6 +110,4 @@ const BorisLayoutUnconnected: FC<IProps> = ({
   );
 };
 
-const BorisLayout = connect(mapStateToProps, mapDispatchToProps)(BorisLayoutUnconnected);
-
 export { BorisLayout };
diff --git a/src/containers/node/NodeLayout/index.tsx b/src/containers/node/NodeLayout/index.tsx
index 0484b242..a36e6ada 100644
--- a/src/containers/node/NodeLayout/index.tsx
+++ b/src/containers/node/NodeLayout/index.tsx
@@ -181,14 +181,9 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
                       <NodeNoComments is_loading={is_loading_comments || is_loading} />
                     ) : (
                       <NodeComments
+                        count={comment_count}
                         comments={comments}
-                        comment_data={comment_data}
-                        comment_count={comment_count}
                         user={user}
-                        onDelete={nodeLockComment}
-                        onEdit={nodeEditComment}
-                        onLoadMore={nodeLoadMoreComments}
-                        modalShowPhotoswipe={modalShowPhotoswipe}
                         order="DESC"
                       />
                     )}
diff --git a/src/containers/profile/ProfileLayout/index.tsx b/src/containers/profile/ProfileLayout/index.tsx
index 5c9c25a5..9db6fc73 100644
--- a/src/containers/profile/ProfileLayout/index.tsx
+++ b/src/containers/profile/ProfileLayout/index.tsx
@@ -3,11 +3,11 @@ import { RouteComponentProps, useRouteMatch, withRouter } from 'react-router';
 import styles from './styles.module.scss';
 import { NodeNoComments } from '~/components/node/NodeNoComments';
 import { Grid } from '~/components/containers/Grid';
-import { CommentForm } from '~/components/comment/CommentForm';
 import * as NODE_ACTIONS from '~/redux/node/actions';
 import { connect } from 'react-redux';
 import { IUser } from '~/redux/auth/types';
 import { Group } from '~/components/containers/Group';
+import { CommentForm } from '~/components/comment/CommentForm';
 
 const mapStateToProps = () => ({});
 const mapDispatchToProps = {
@@ -39,7 +39,7 @@ const ProfileLayoutUnconnected: FC<IProps> = ({ history, nodeSetCoverImage }) =>
 
       <Grid className={styles.content}>
         <div className={styles.comments}>
-          <CommentForm id={0} />
+          <CommentForm nodeId={0} />
           <NodeNoComments is_loading={false} />
         </div>
       </Grid>
diff --git a/src/redux/node/actions.ts b/src/redux/node/actions.ts
index b6f6a9c7..776cb852 100644
--- a/src/redux/node/actions.ts
+++ b/src/redux/node/actions.ts
@@ -44,12 +44,6 @@ export const nodeSetCurrent = (current: INodeState['current']) => ({
   type: NODE_ACTIONS.SET_CURRENT,
 });
 
-export const nodePostComment = (id: number, is_before: boolean) => ({
-  id,
-  is_before,
-  type: NODE_ACTIONS.POST_COMMENT,
-});
-
 export const nodePostLocalComment = (
   nodeId: INode['id'],
   comment: IComment,
@@ -58,7 +52,7 @@ export const nodePostLocalComment = (
   nodeId,
   comment,
   callback,
-  type: NODE_ACTIONS.POST_LOCAL_COMMENT,
+  type: NODE_ACTIONS.POST_COMMENT,
 });
 
 export const nodeCancelCommentEdit = (id: number) => ({
diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts
index b5335f0d..3f0e29b1 100644
--- a/src/redux/node/constants.ts
+++ b/src/redux/node/constants.ts
@@ -41,8 +41,7 @@ export const NODE_ACTIONS = {
   SET_COMMENT_DATA: `${prefix}SET_COMMENT_DATA`,
   SET_EDITOR: `${prefix}SET_EDITOR`,
 
-  POST_COMMENT: `${prefix}POST_COMMENT`,
-  POST_LOCAL_COMMENT: `${prefix}POST_LOCAL_COMMENT`,
+  POST_COMMENT: `${prefix}POST_LOCAL_COMMENT`,
   SET_COMMENTS: `${prefix}SET_COMMENTS`,
   SET_RELATED: `${prefix}SET_RELATED`,
 
diff --git a/src/redux/node/sagas.ts b/src/redux/node/sagas.ts
index c9145feb..a4387ccd 100644
--- a/src/redux/node/sagas.ts
+++ b/src/redux/node/sagas.ts
@@ -13,7 +13,6 @@ import {
   nodeLoadNode,
   nodeLock,
   nodeLockComment,
-  nodePostComment,
   nodePostLocalComment,
   nodeSave,
   nodeSet,
@@ -25,7 +24,6 @@ import {
   nodeSetLoadingComments,
   nodeSetRelated,
   nodeSetSaveErrors,
-  nodeSetSendingComment,
   nodeSetTags,
   nodeUpdateTags
 } from './actions';
@@ -191,44 +189,7 @@ function* onNodeLoad({ id, order = 'ASC' }: ReturnType<typeof nodeLoadNode>) {
   return;
 }
 
-function* onPostComment({ id }: ReturnType<typeof nodePostComment>) {
-  const { current, comment_data } = yield select(selectNode);
-
-  yield put(nodeSetSendingComment(true));
-  const {
-    data: { comment },
-    error,
-  } = yield call(reqWrapper, postNodeComment, { data: comment_data[id], id: current.id });
-  yield put(nodeSetSendingComment(false));
-
-  if (error || !comment) {
-    return yield put(nodeSetCommentData(id, { error }));
-  }
-
-  const { current: current_node } = yield select(selectNode);
-
-  if (current_node && current_node.id === current.id) {
-    const { comments, comment_data: current_comment_data } = yield select(selectNode);
-
-    if (id === 0) {
-      yield put(nodeSetCommentData(0, { ...EMPTY_COMMENT }));
-      yield put(nodeSetComments([comment, ...comments]));
-    } else {
-      yield put(
-        nodeSet({
-          comment_data: omit([id.toString()], current_comment_data),
-          comments: comments.map(item => (item.id === id ? comment : item)),
-        })
-      );
-    }
-  }
-}
-
-function* onPostLocalComment({
-  nodeId,
-  comment,
-  callback,
-}: ReturnType<typeof nodePostLocalComment>) {
+function* onPostComment({ nodeId, comment, callback }: ReturnType<typeof nodePostLocalComment>) {
   const { data, error }: Unwrap<ReturnType<typeof postNodeComment>> = yield call(
     reqWrapper,
     postNodeComment,
@@ -390,7 +351,6 @@ 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);
diff --git a/src/redux/node/selectors.ts b/src/redux/node/selectors.ts
index fb33213c..7ff85a58 100644
--- a/src/redux/node/selectors.ts
+++ b/src/redux/node/selectors.ts
@@ -1,10 +1,5 @@
 import { IState } from '../store';
-import { INodeState } from './reducer';
-import { IResultWithStatus, INode } from '../types';
 
-export const selectNode = (state: IState): INodeState => state.node;
-
-// export const catchNodeErrors = (data: IResultWithStatus<INode>): IResultWithStatus<INode> => ({
-// data,
-// errors: data.errors,
-// })
+export const selectNode = (state: IState) => state.node;
+export const selectNodeComments = (state: IState) => state.node.comments;
+export const selectNodeCurrent = (state: IState) => state.node.current;

From 86a22cca3cef4527847bebd8aecbd50ca3e9aa0c Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 27 Feb 2021 18:58:17 +0700
Subject: [PATCH 8/9] #34 cleaned IComment

---
 src/redux/node/constants.ts | 3 ---
 src/redux/types.ts          | 3 ---
 2 files changed, 6 deletions(-)

diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts
index 3f0e29b1..81ef9a79 100644
--- a/src/redux/node/constants.ts
+++ b/src/redux/node/constants.ts
@@ -106,10 +106,7 @@ export const EMPTY_COMMENT: IComment = {
   id: null,
   text: '',
   files: [],
-  temp_ids: [],
-  is_private: false,
   user: null,
-  error: '',
 };
 
 export const NODE_EDITORS = {
diff --git a/src/redux/types.ts b/src/redux/types.ts
index dd5b95b4..d38db98c 100644
--- a/src/redux/types.ts
+++ b/src/redux/types.ts
@@ -142,11 +142,8 @@ export interface INode {
 export interface IComment {
   id: number;
   text: string;
-  temp_ids?: string[];
   files: IFile[];
-  is_private: boolean;
   user: IUser;
-  error?: string;
 
   created_at?: string;
   update_at?: string;

From a5947cebe18b1f3acc119cdf9b0b039fc84190ae Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 27 Feb 2021 18:59:48 +0700
Subject: [PATCH 9/9] #34 cleanup

---
 src/components/input/Textarea/index.tsx | 2 +-
 src/redux/node/sagas.ts                 | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/input/Textarea/index.tsx b/src/components/input/Textarea/index.tsx
index d51fa31e..f7d5f180 100644
--- a/src/components/input/Textarea/index.tsx
+++ b/src/components/input/Textarea/index.tsx
@@ -6,7 +6,7 @@ import React, {
   useCallback,
   useEffect,
   useRef,
-  useState
+  useState,
 } from 'react';
 import classNames from 'classnames';
 import autosize from 'autosize';
diff --git a/src/redux/node/sagas.ts b/src/redux/node/sagas.ts
index a4387ccd..95f43082 100644
--- a/src/redux/node/sagas.ts
+++ b/src/redux/node/sagas.ts
@@ -25,7 +25,7 @@ import {
   nodeSetRelated,
   nodeSetSaveErrors,
   nodeSetTags,
-  nodeUpdateTags
+  nodeUpdateTags,
 } from './actions';
 import {
   getNode,
@@ -37,7 +37,7 @@ import {
   postNodeLock,
   postNodeLockComment,
   postNodeStar,
-  updateNodeTags
+  updateNodeTags,
 } from './api';
 import { reqWrapper } from '../auth/sagas';
 import { flowSetNodes, flowSetUpdated } from '../flow/actions';