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();
 }

src/containers/node/NodeLayout/index.tsx

@@ -53,7 +53,7 @@ const NodeLayoutUnconnected: FC<IProps> = ({
         <Padder>
           <Group horizontal className={styles.content}>
             <Group className={styles.comments}>
-              <CommentForm id={node.id || null} />
+              <CommentForm id={0} />
 
               {is_loading_comments || !comments.length ? (
                 <NodeNoComments is_loading={is_loading_comments} />

src/redux/node/actions.ts

@@ -33,7 +33,8 @@ export const nodeSetCurrent = (current: INodeState['current']) => ({
   type: NODE_ACTIONS.SET_CURRENT,
 });
 
-export const nodePostComment = () => ({
+export const nodePostComment = (id: number) => ({
+  id,
   type: NODE_ACTIONS.POST_COMMENT,
 });
 
@@ -47,7 +48,8 @@ export const nodeSetComments = (comments: IComment[]) => ({
   type: NODE_ACTIONS.SET_COMMENTS,
 });
 
-export const nodeSetCommentData = (comment_data: IComment) => ({
-  comment_data,
+export const nodeSetCommentData = (id: number, comment: IComment) => ({
+  id,
+  comment,
   type: NODE_ACTIONS.SET_COMMENT_DATA,
 });

src/redux/node/handlers.ts

@@ -35,8 +35,8 @@ const setComments = (state: INodeState, { comments }: ReturnType<typeof nodeSetC
 
 const setCommentData = (
   state: INodeState,
-  { comment_data }: ReturnType<typeof nodeSetCommentData>
-) => assocPath(['comment_data'], comment_data, state);
+  { id, comment }: ReturnType<typeof nodeSetCommentData>
+) => assocPath(['comment_data', id], comment, state);
 
 export const NODE_HANDLERS = {
   [NODE_ACTIONS.SAVE]: setSaveErrors,

src/redux/node/reducer.ts

@@ -7,7 +7,7 @@ export type INodeState = Readonly<{
   editor: INode;
   current: INode;
   comments: IComment[];
-  comment_data: IComment;
+  comment_data: Record<number, IComment>;
 
   error: string;
   errors: Record<string, string>;
@@ -25,7 +25,7 @@ const INITIAL_STATE: INodeState = {
     files: [],
   },
   current: { ...EMPTY_NODE },
-  comment_data: { ...EMPTY_COMMENT },
+  comment_data: { 0: { ...EMPTY_COMMENT } },
   comments: [],
 
   is_loading: false,

src/redux/node/sagas.ts

@@ -47,6 +47,7 @@ function* onNodeLoad({ id, node_type }: ReturnType<typeof nodeLoadNode>) {
   yield put(nodeSetLoading(true));
   yield put(nodeSetLoadingComments(true));
   yield put(nodeSetSaveErrors({}));
+  yield put(nodeSetCommentData(0, { ...EMPTY_COMMENT }));
 
   if (node_type) yield put(nodeSetCurrent({ ...EMPTY_NODE, type: node_type }));
 
@@ -77,26 +78,28 @@ function* onNodeLoad({ id, node_type }: ReturnType<typeof nodeLoadNode>) {
   return;
 }
 
-function* onPostComment() {
+function* onPostComment({ id }: ReturnType<typeof nodePostComment>) {
   const { current, comment_data } = yield select(selectNode);
 
   yield put(nodeSetSendingComment(true));
   const {
-    data: { comment },
+    data: { comment, id: target_id },
     error,
-  } = yield call(reqWrapper, postNodeComment, { data: comment_data, id: current.id });
+  } = yield call(reqWrapper, postNodeComment, { data: comment_data[id], id: current.id });
   yield put(nodeSetSendingComment(false));
 
   if (error || !comment) {
     return yield put(nodeSetSaveErrors({ error: error || ERRORS.EMPTY_RESPONSE }));
   }
 
-  console.log({ comment });
+  const { current: current_node } = yield select(selectNode);
 
-  const { comments } = yield select(selectNode);
-
-  yield put(nodeSetComments([comment, ...comments]));
-  yield put(nodeSetCommentData({ ...EMPTY_COMMENT }));
+  if (current_node && current_node.id === current.id) {
+    // if user still browsing that node
+    const { comments } = yield select(selectNode);
+    yield put(nodeSetComments([comment, ...comments]));
+    yield put(nodeSetCommentData(0, { ...EMPTY_COMMENT }));
+  }
 }
 
 export default function* nodeSaga() {