comment form

src/components/input/Button/styles.scss

@@ -42,6 +42,11 @@
     flex: 1;
   }
 
+  &:global(.disabled) {
+    touch-action: none;
+    pointer-events: none;
+  }
+
   &:hover {
     opacity: 1;
 

src/components/input/Textarea/index.tsx

@@ -6,6 +6,8 @@ import React, {
   useLayoutEffect,
   useRef,
   useState,
+  HTMLAttributes,
+  TextareaHTMLAttributes,
 } from 'react';
 import { getStyle } from '~/utils/dom';
 import classNames from 'classnames';
@@ -13,7 +15,7 @@ import classNames from 'classnames';
 import * as styles from '~/styles/inputs.scss';
 import { Icon } from '../Icon';
 
-interface IProps {
+type IProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   value: string;
   placeholder?: string;
   rows?: number;
@@ -24,7 +26,7 @@ interface IProps {
   required?: boolean;
   status?: 'error' | 'success' | '';
   title?: string;
-}
+};
 
 const Textarea = memo<IProps>(
   ({
@@ -37,6 +39,7 @@ const Textarea = memo<IProps>(
     required = false,
     title = '',
     status = '',
+    ...props
   }) => {
     const [rows, setRows] = useState(minRows || 1);
     const [focused, setFocused] = useState(false);
@@ -99,6 +102,7 @@ const Textarea = memo<IProps>(
             ref={textarea}
             onFocus={onFocus}
             onBlur={onBlur}
+            {...props}
           />
         </div>
 

src/components/node/CommentForm/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useEffect } from 'react';
+import React, { FC, useCallback, KeyboardEventHandler } from 'react';
 import { Textarea } from '~/components/input/Textarea';
 import { CommentWrapper } from '~/components/containers/CommentWrapper';
 import * as styles from './styles.scss';
@@ -8,8 +8,9 @@ import assocPath from 'ramda/es/assocPath';
 import { InputHandler, INode } from '~/redux/types';
 import { connect } from 'react-redux';
 import * as NODE_ACTIONS from '~/redux/node/actions';
-import { store } from '~/redux/store';
 import { selectNode } from '~/redux/node/selectors';
+import { LoaderCircle } from '~/components/input/LoaderCircle';
+import { Group } from '~/components/containers/Group';
 
 const mapStateToProps = selectNode;
 const mapDispatchToProps = {
@@ -19,48 +20,63 @@ const mapDispatchToProps = {
 
 type IProps = ReturnType<typeof mapStateToProps> &
   typeof mapDispatchToProps & {
-    id: INode['id'];
+    id: number;
   };
 
 const CommentFormUnconnected: FC<IProps> = ({
   nodePostComment,
   nodeSetCommentData,
   comment_data,
+  is_sending_comment,
   id,
 }) => {
   // const [data, setData] = useState<IComment>({ ...EMPTY_COMMENT });
 
   const onInput = useCallback<InputHandler>(
     text => {
-      nodeSetCommentData(assocPath(['text'], text, comment_data));
+      nodeSetCommentData(id, assocPath(['text'], text, comment_data[id]));
     },
-    [nodeSetCommentData, comment_data]
+    [nodeSetCommentData, comment_data, id]
   );
 
   const onSubmit = useCallback(
     event => {
-      event.preventDefault();
-      nodePostComment();
+      if (event) event.preventDefault();
+      nodePostComment(id);
     },
-    [nodePostComment]
+    [nodePostComment, id]
   );
 
-  useEffect(() => {
-    store.subscribe(console.log);
-  }, []);
+  const onKeyDown = useCallback<KeyboardEventHandler<HTMLTextAreaElement>>(
+    ({ ctrlKey, key }) => {
+      if (!!ctrlKey && key === 'Enter') onSubmit(null);
+    },
+    [onSubmit]
+  );
+
+  const comment = comment_data[id];
 
   return (
     <CommentWrapper>
       <form onSubmit={onSubmit}>
         <div className={styles.input}>
-          <Textarea value={comment_data.text} handler={onInput} />
+          <Textarea
+            value={comment.text}
+            handler={onInput}
+            onKeyDown={onKeyDown}
+            disabled={is_sending_comment}
+          />
         </div>
-        <div className={styles.buttons}>
+
+        <Group horizontal className={styles.buttons}>
           <Filler />
-          <Button size="mini" grey iconRight="enter">
+
+          {is_sending_comment && <LoaderCircle size={20} />}
+
+          <Button size="mini" grey iconRight="enter" disabled={is_sending_comment}>
             Сказать
           </Button>
-        </div>
+        </Group>
       </form>
     </CommentWrapper>
   );

src/components/node/CommentForm/styles.scss

@@ -15,5 +15,9 @@
   padding: $gap / 2;
   border-radius: 0 0 $radius $radius;
 
+  svg {
+    fill: transparentize(white, 0.9);
+  }
+
   @include outer_shadow();
 }