refactored comment form

src/components/comment/Comment/index.tsx

@@ -1,12 +1,12 @@
 import React, { FC, HTMLAttributes, memo } from 'react';
 import { CommentWrapper } from '~/components/containers/CommentWrapper';
-import { ICommentGroup, IComment } from '~/redux/types';
+import { ICommentGroup } from '~/redux/types';
-import { CommentContent } from '~/components/node/CommentContent';
+import { CommentContent } from '~/components/comment/CommentContent';
 import styles from './styles.module.scss';
-import { nodeLockComment, nodeEditComment } from '~/redux/node/actions';
+import { nodeEditComment, nodeLockComment } from '~/redux/node/actions';
 import { INodeState } from '~/redux/node/reducer';
 import { CommentForm } from '../CommentForm';
-import { CommendDeleted } from '../CommendDeleted';
+import { CommendDeleted } from '../../node/CommendDeleted';
 import * as MODAL_ACTIONS from '~/redux/modal/actions';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {

src/components/comment/CommentForm/index.tsx

@@ -4,7 +4,7 @@ import styles from './styles.module.scss';
 import { Filler } from '~/components/containers/Filler';
 import { Button } from '~/components/input/Button';
 import assocPath from 'ramda/es/assocPath';
-import { IFile, IFileWithUUID, InputHandler } from '~/redux/types';
+import { IComment, IFile, IFileWithUUID, InputHandler } from '~/redux/types';
 import { connect } from 'react-redux';
 import * as NODE_ACTIONS from '~/redux/node/actions';
 import { selectNode } from '~/redux/node/selectors';
@@ -23,6 +23,8 @@ import { SortEnd } from 'react-sortable-hoc';
 import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid';
 import { getRandomPhrase } from '~/constants/phrases';
 import { ERROR_LITERAL } from '~/constants/errors';
+import { CommentFormAttaches } from '~/components/comment/CommentFormAttaches';
+import { CommentFormButtons } from '~/components/comment/CommentFormButtons';
 
 const mapStateToProps = (state: IState) => ({
   node: selectNode(state),
@@ -53,13 +55,9 @@ const CommentFormUnconnected: FC<IProps> = memo(
     uploadUploadFiles,
     nodeCancelCommentEdit,
   }) => {
-    const onInputChange = useCallback(
+    const onUpload = useCallback(
-      event => {
+      (files: File[]) => {
-        event.preventDefault();
+        const items: IFileWithUUID[] = files.map(
-
-        if (!event.target.files || !event.target.files.length) return;
-
-        const items: IFileWithUUID[] = Array.from(event.target.files).map(
           (file: File): IFileWithUUID => ({
             file,
             temp_id: uuid(),
@@ -109,7 +107,7 @@ const CommentFormUnconnected: FC<IProps> = memo(
       }
     }, [statuses, files]);
 
-    const comment = comment_data[id];
+    const comment = useMemo(() => comment_data[id], [comment_data, id]);
 
     const is_uploading_files = useMemo(() => comment.temp_ids.length > 0, [comment.temp_ids]);
 
@@ -156,88 +154,12 @@ const CommentFormUnconnected: FC<IProps> = memo(
       [statuses, comment.temp_ids]
     );
 
-    const onFileDrop = useCallback(
-      (fileId: IFile['id']) => {
-        nodeSetCommentData(
-          id,
-          assocPath(
-            ['files'],
-            comment.files.filter(file => file.id != fileId),
-            comment_data[id]
-          )
-        );
-      },
-      [comment_data, id, nodeSetCommentData]
-    );
-
-    const onTitleChange = useCallback(
-      (fileId: IFile['id'], title: IFile['metadata']['title']) => {
-        nodeSetCommentData(
-          id,
-          assocPath(
-            ['files'],
-            comment.files.map(file =>
-              file.id === fileId ? { ...file, metadata: { ...file.metadata, title } } : file
-            ),
-            comment_data[id]
-          )
-        );
-      },
-      [comment_data, id, nodeSetCommentData]
-    );
-
-    const onImageMove = useCallback(
-      ({ oldIndex, newIndex }: SortEnd) => {
-        nodeSetCommentData(
-          id,
-          assocPath(
-            ['files'],
-            [
-              ...audios,
-              ...(moveArrItem(
-                oldIndex,
-                newIndex,
-                images.filter(file => !!file)
-              ) as IFile[]),
-            ],
-            comment_data[id]
-          )
-        );
-      },
-      [images, audios, comment_data, nodeSetCommentData]
-    );
-
-    const onAudioMove = useCallback(
-      ({ oldIndex, newIndex }: SortEnd) => {
-        nodeSetCommentData(
-          id,
-          assocPath(
-            ['files'],
-            [
-              ...images,
-              ...(moveArrItem(
-                oldIndex,
-                newIndex,
-                audios.filter(file => !!file)
-              ) as IFile[]),
-            ],
-            comment_data[id]
-          )
-        );
-      },
-      [images, audios, comment_data, nodeSetCommentData]
-    );
-
     const onCancelEdit = useCallback(() => {
       nodeCancelCommentEdit(id);
     }, [nodeCancelCommentEdit, comment.id]);
 
     const placeholder = getRandomPhrase('SIMPLE');
 
-    const hasImageAttaches = images.length > 0 || locked_images.length > 0;
-    const hasAudioAttaches = audios.length > 0 || locked_audios.length > 0;
-    const hasAttaches = hasImageAttaches || hasAudioAttaches;
-
     const clearError = useCallback(() => nodeSetCommentData(id, { error: '' }), [
       id,
       nodeSetCommentData,
@@ -247,6 +169,13 @@ const CommentFormUnconnected: FC<IProps> = memo(
       if (comment.error) clearError();
     }, [comment.files, comment.text]);
 
+    const setData = useCallback(
+      (data: Partial<IComment>) => {
+        nodeSetCommentData(id, data);
+      },
+      [nodeSetCommentData, id]
+    );
+
     return (
       <form onSubmit={onSubmit} className={styles.wrap}>
         <div className={styles.input}>
@@ -266,46 +195,17 @@ const CommentFormUnconnected: FC<IProps> = memo(
           )}
         </div>
 
-        {hasAttaches && (
+        <CommentFormAttaches
-          <div className={styles.attaches}>
+          images={images}
-            {hasImageAttaches && (
+          audios={audios}
-              <SortableImageGrid
+          locked_audios={locked_audios}
-                onDrop={onFileDrop}
+          locked_images={locked_images}
-                onSortEnd={onImageMove}
+          comment={comment}
-                axis="xy"
+          setComment={setData}
-                items={images}
+        />
-                locked={locked_images}
-                pressDelay={50}
-                helperClass={styles.helper}
-                size={120}
-              />
-            )}
-
-            {hasAudioAttaches && (
-              <SortableAudioGrid
-                items={audios}
-                onDrop={onFileDrop}
-                onTitleChange={onTitleChange}
-                onSortEnd={onAudioMove}
-                axis="y"
-                locked={locked_audios}
-                pressDelay={50}
-                helperClass={styles.helper}
-              />
-            )}
-          </div>
-        )}
 
         <Group horizontal className={styles.buttons}>
-          <ButtonGroup>
+          <CommentFormButtons onUpload={onUpload} />
-            <Button iconLeft="photo" size="small" color="gray" iconOnly>
-              <input type="file" onInput={onInputChange} multiple accept="image/*" />
-            </Button>
-
-            <Button iconRight="audio" size="small" color="gray" iconOnly>
-              <input type="file" onInput={onInputChange} multiple accept="audio/*" />
-            </Button>
-          </ButtonGroup>
 
           <Filler />
 

src/components/comment/CommentFormAttaches/index.tsx

@@ -0,0 +1,133 @@
+import React, { FC, useCallback } from 'react';
+import styles from '~/components/comment/CommentForm/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 { SortEnd } from 'react-sortable-hoc';
+import assocPath from 'ramda/es/assocPath';
+import { moveArrItem } from '~/utils/fn';
+
+interface IProps {
+  images: IFile[];
+  audios: IFile[];
+  locked_images: IUploadStatus[];
+  locked_audios: IUploadStatus[];
+  comment: IComment;
+  setComment: (data: IComment) => void;
+}
+
+const CommentFormAttaches: FC<IProps> = ({
+  images,
+  audios,
+  locked_images,
+  locked_audios,
+  comment,
+  setComment,
+}) => {
+  const hasImageAttaches = images.length > 0 || locked_images.length > 0;
+  const hasAudioAttaches = audios.length > 0 || locked_audios.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
+        )
+      );
+    },
+    [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]
+  );
+
+  const onAudioMove = useCallback(
+    ({ oldIndex, newIndex }: SortEnd) => {
+      setComment(
+        assocPath(
+          ['files'],
+          [
+            ...images,
+            ...(moveArrItem(
+              oldIndex,
+              newIndex,
+              audios.filter(file => !!file)
+            ) as IFile[]),
+          ],
+          comment
+        )
+      );
+    },
+    [images, audios, comment, setComment]
+  );
+
+  return (
+    hasAttaches && (
+      <div className={styles.attaches}>
+        {hasImageAttaches && (
+          <SortableImageGrid
+            onDelete={onFileDelete}
+            onSortEnd={onImageMove}
+            axis="xy"
+            items={images}
+            locked={locked_images}
+            pressDelay={50}
+            helperClass={styles.helper}
+            size={120}
+          />
+        )}
+
+        {hasAudioAttaches && (
+          <SortableAudioGrid
+            items={audios}
+            onDelete={onFileDelete}
+            onTitleChange={onTitleChange}
+            onSortEnd={onAudioMove}
+            axis="y"
+            locked={locked_audios}
+            pressDelay={50}
+            helperClass={styles.helper}
+          />
+        )}
+      </div>
+    )
+  );
+};
+
+export { CommentFormAttaches };

src/components/comment/CommentFormButtons/index.tsx

@@ -0,0 +1,36 @@
+import React, { FC, useCallback } from 'react';
+import { ButtonGroup } from '~/components/input/ButtonGroup';
+import { Button } from '~/components/input/Button';
+
+interface IProps {
+  onUpload: (files: File[]) => void;
+}
+
+const CommentFormButtons: FC<IProps> = ({ onUpload }) => {
+  const onInputChange = useCallback(
+    event => {
+      event.preventDefault();
+
+      const files: File[] = Array.from(event.target?.files);
+
+      if (!files || !files.length) return;
+
+      onUpload(files);
+    },
+    [onUpload]
+  );
+
+  return (
+    <ButtonGroup>
+      <Button iconLeft="photo" size="small" color="gray" iconOnly>
+        <input type="file" onInput={onInputChange} multiple accept="image/*" />
+      </Button>
+
+      <Button iconRight="audio" size="small" color="gray" iconOnly>
+        <input type="file" onInput={onInputChange} multiple accept="audio/*" />
+      </Button>
+    </ButtonGroup>
+  );
+};
+
+export { CommentFormButtons };

src/components/editors/AudioGrid/index.tsx

@@ -16,7 +16,13 @@ interface IProps {
 const AudioGrid: FC<IProps> = ({ files, setFiles, locked }) => {
   const onMove = useCallback(
     ({ oldIndex, newIndex }: SortEnd) => {
-      setFiles(moveArrItem(oldIndex, newIndex, files.filter(file => !!file)) as IFile[]);
+      setFiles(
+        moveArrItem(
+          oldIndex,
+          newIndex,
+          files.filter(file => !!file)
+        ) as IFile[]
+      );
     },
     [setFiles, files]
   );
@@ -41,7 +47,7 @@ const AudioGrid: FC<IProps> = ({ files, setFiles, locked }) => {
 
   return (
     <SortableAudioGrid
-      onDrop={onDrop}
+      onDelete={onDrop}
       onTitleChange={onTitleChange}
       onSortEnd={onMove}
       axis="xy"

src/components/editors/ImageGrid/index.tsx

@@ -15,7 +15,13 @@ interface IProps {
 const ImageGrid: FC<IProps> = ({ files, setFiles, locked }) => {
   const onMove = useCallback(
     ({ oldIndex, newIndex }: SortEnd) => {
-      setFiles(moveArrItem(oldIndex, newIndex, files.filter(file => !!file)) as IFile[]);
+      setFiles(
+        moveArrItem(
+          oldIndex,
+          newIndex,
+          files.filter(file => !!file)
+        ) as IFile[]
+      );
     },
     [setFiles, files]
   );
@@ -29,7 +35,7 @@ const ImageGrid: FC<IProps> = ({ files, setFiles, locked }) => {
 
   return (
     <SortableImageGrid
-      onDrop={onDrop}
+      onDelete={onDrop}
       onSortEnd={onMove}
       axis="xy"
       items={files}

src/components/editors/SortableAudioGrid/index.tsx

@@ -11,12 +11,12 @@ const SortableAudioGrid = SortableContainer(
   ({
     items,
     locked,
-    onDrop,
+    onDelete,
     onTitleChange,
   }: {
     items: IFile[];
     locked: IUploadStatus[];
-    onDrop: (file_id: IFile['id']) => void;
+    onDelete: (file_id: IFile['id']) => void;
     onTitleChange: (file_id: IFile['id'], title: IFile['metadata']['title']) => void;
   }) => {
     console.log(locked);
@@ -27,7 +27,12 @@ const SortableAudioGrid = SortableContainer(
           .filter(file => file && file.id)
           .map((file, index) => (
             <SortableAudioGridItem key={file.id} index={index} collection={0}>
-              <AudioPlayer file={file} onDrop={onDrop} onTitleChange={onTitleChange} isEditing />
+              <AudioPlayer
+                file={file}
+                onDelete={onDelete}
+                onTitleChange={onTitleChange}
+                isEditing
+              />
             </SortableAudioGridItem>
           ))}
 

src/components/editors/SortableImageGrid/index.tsx

@@ -12,12 +12,12 @@ const SortableImageGrid = SortableContainer(
   ({
     items,
     locked,
-    onDrop,
+    onDelete,
     size = 200,
   }: {
     items: IFile[];
     locked: IUploadStatus[];
-    onDrop: (file_id: IFile['id']) => void;
+    onDelete: (file_id: IFile['id']) => void;
     size?: number;
   }) => (
     <div
@@ -28,7 +28,7 @@ const SortableImageGrid = SortableContainer(
         .filter(file => file && file.id)
         .map((file, index) => (
           <SortableImageGridItem key={file.id} index={index} collection={0}>
-            <ImageUpload id={file.id} thumb={getURL(file, PRESETS.cover)} onDrop={onDrop} />
+            <ImageUpload id={file.id} thumb={getURL(file, PRESETS.cover)} onDrop={onDelete} />
           </SortableImageGridItem>
         ))}
 

src/components/media/AudioPlayer/index.tsx

@@ -25,14 +25,14 @@ type Props = ReturnType<typeof mapStateToProps> &
   typeof mapDispatchToProps & {
     file: IFile;
     isEditing?: boolean;
-    onDrop?: (id: IFile['id']) => void;
+    onDelete?: (id: IFile['id']) => void;
     onTitleChange?: (file_id: IFile['id'], title: IFile['metadata']['title']) => void;
   };
 
 const AudioPlayerUnconnected = memo(
   ({
     file,
-    onDrop,
+    onDelete,
     isEditing,
     onTitleChange,
     player: { file: current, status },
@@ -78,10 +78,10 @@ const AudioPlayerUnconnected = memo(
     );
 
     const onDropClick = useCallback(() => {
-      if (!onDrop) return;
+      if (!onDelete) return;
 
-      onDrop(file.id);
+      onDelete(file.id);
-    }, [file, onDrop]);
+    }, [file, onDelete]);
 
     const title = useMemo(
       () =>
@@ -111,7 +111,7 @@ const AudioPlayerUnconnected = memo(
 
     return (
       <div onClick={onPlay} className={classNames(styles.wrap, { playing })}>
-        {onDrop && (
+        {onDelete && (
           <div className={styles.drop} onMouseDown={onDropClick}>
             <Icon icon="close" />
           </div>
@@ -149,7 +149,4 @@ const AudioPlayerUnconnected = memo(
   }
 );
 
-export const AudioPlayer = connect(
+export const AudioPlayer = connect(mapStateToProps, mapDispatchToProps)(AudioPlayerUnconnected);
-  mapStateToProps,
-  mapDispatchToProps
-)(AudioPlayerUnconnected);

src/components/node/NodeCommentForm/index.tsx

@@ -13,7 +13,7 @@ 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 { CommentForm } from '../CommentForm';
+import { CommentForm } from '../../comment/CommentForm';
 
 const mapStateToProps = state => ({
   user: selectAuthUser(state),

src/components/node/NodeComments/index.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useMemo, memo } from 'react';
-import { Comment } from '../Comment';
+import { Comment } from '../../comment/Comment';
 import { Filler } from '~/components/containers/Filler';
 
 import styles from './styles.module.scss';

src/components/profile/Message/index.tsx

@@ -5,7 +5,7 @@ import { formatText, getPrettyDate, getURL } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
 import classNames from 'classnames';
 import { Group } from '~/components/containers/Group';
-import { CommentMenu } from '~/components/node/CommentMenu';
+import { CommentMenu } from '~/components/comment/CommentMenu';
 import { MessageForm } from '~/components/profile/MessageForm';
 import { Filler } from '~/components/containers/Filler';
 import { Button } from '~/components/input/Button';

src/containers/profile/ProfileLayout/index.tsx

@@ -1,10 +1,9 @@
 import React, { FC, useEffect, useState } from 'react';
-import { useRouteMatch, withRouter, RouteComponentProps } from 'react-router';
+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/node/CommentForm';
+import { CommentForm } from '~/components/comment/CommentForm';
-import { ProfileInfo } from '../ProfileInfo';
 import * as NODE_ACTIONS from '~/redux/node/actions';
 import { connect } from 'react-redux';
 import { IUser } from '~/redux/auth/types';