Merge pull request #20 from muerwre/19-comment-data-inside-component

19 comment data inside component

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

@@ -0,0 +1,234 @@
+import React, { FC, KeyboardEventHandler, memo, useCallback, useEffect, useMemo } from 'react';
+import { Textarea } from '~/components/input/Textarea';
+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 { 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 { getRandomPhrase } from '~/constants/phrases';
+import { ERROR_LITERAL } from '~/constants/errors';
+import { CommentFormAttaches } from '~/components/comment/CommentFormAttaches';
+import { CommentFormAttachButtons } from '~/components/comment/CommentFormButtons';
+import { CommentFormDropzone } from '~/components/comment/CommentFormDropzone';
+
+const mapStateToProps = (state: IState) => ({
+  node: selectNode(state),
+  uploads: selectUploads(state),
+});
+
+const mapDispatchToProps = {
+  nodePostComment: NODE_ACTIONS.nodePostComment,
+  nodeCancelCommentEdit: NODE_ACTIONS.nodeCancelCommentEdit,
+  nodeSetCommentData: NODE_ACTIONS.nodeSetCommentData,
+  uploadUploadFiles: UPLOAD_ACTIONS.uploadUploadFiles,
+};
+
+type IProps = ReturnType<typeof mapStateToProps> &
+  typeof mapDispatchToProps & {
+    id: number;
+    is_before?: boolean;
+  };
+
+const CommentFormUnconnected: FC<IProps> = memo(
+  ({
+    node: { comment_data, is_sending_comment },
+    uploads: { statuses, files },
+    id,
+    is_before = false,
+    nodePostComment,
+    nodeSetCommentData,
+    uploadUploadFiles,
+    nodeCancelCommentEdit,
+  }) => {
+    const comment = useMemo(() => comment_data[id], [comment_data, id]);
+
+    const onUpload = useCallback(
+      (files: File[]) => {
+        console.log(files);
+
+        const items: IFileWithUUID[] = files.map(
+          (file: File): IFileWithUUID => ({
+            file,
+            temp_id: uuid(),
+            subject: UPLOAD_SUBJECTS.COMMENT,
+            target: UPLOAD_TARGETS.COMMENTS,
+            type: getFileType(file),
+          })
+        );
+
+        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 = getRandomPhrase('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}>
+          <div className={styles.input}>
+            <Textarea
+              value={comment.text}
+              handler={onInput}
+              onKeyDown={onKeyDown}
+              disabled={is_sending_comment}
+              placeholder={placeholder}
+              minRows={2}
+            />
+
+            {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}
+          />
+
+          <Group horizontal className={styles.buttons}>
+            <CommentFormAttachButtons onUpload={onUpload} />
+
+            <Filler />
+
+            {(is_sending_comment || isUploadingNow) && <LoaderCircle size={20} />}
+
+            {id !== 0 && (
+              <Button size="small" color="link" type="button" onClick={onCancelEdit}>
+                Отмена
+              </Button>
+            )}
+
+            <Button
+              size="small"
+              color="gray"
+              iconRight={id === 0 ? 'enter' : 'check'}
+              disabled={is_sending_comment || isUploadingNow}
+            >
+              {id === 0 ? 'Сказать' : 'Сохранить'}
+            </Button>
+          </Group>
+        </form>
+      </CommentFormDropzone>
+    );
+  }
+);
+
+const CommentForm = connect(mapStateToProps, mapDispatchToProps)(CommentFormUnconnected);
+
+export { CommentForm, CommentFormUnconnected };

src/components/comment/CommentFormAttaches/index.tsx

@@ -0,0 +1,139 @@
+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';
+import { useDropZone } from '~/utils/hooks';
+import { COMMENT_FILE_TYPES } from '~/redux/uploads/constants';
+
+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<IProps> = ({
+  images,
+  audios,
+  locked_images,
+  locked_audios,
+  comment,
+  setComment,
+  onUpload,
+}) => {
+  const onDrop = useDropZone(onUpload, COMMENT_FILE_TYPES);
+
+  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} onDropCapture={onDrop}>
+        {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,38 @@
+import React, { FC, useCallback } from 'react';
+import { ButtonGroup } from '~/components/input/ButtonGroup';
+import { Button } from '~/components/input/Button';
+import { COMMENT_FILE_TYPES } from '~/redux/uploads/constants';
+
+interface IProps {
+  onUpload: (files: File[]) => void;
+}
+
+const CommentFormAttachButtons: FC<IProps> = ({ onUpload }) => {
+  const onInputChange = useCallback(
+    event => {
+      event.preventDefault();
+
+      const files = Array.from(event.target?.files as File[]).filter((file: File) =>
+        COMMENT_FILE_TYPES.includes(file.type)
+      );
+      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 { CommentFormAttachButtons };

src/components/comment/CommentFormDropzone/index.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from 'react';
+import { COMMENT_FILE_TYPES } from '~/redux/uploads/constants';
+import { useDropZone } from '~/utils/hooks';
+
+interface IProps {
+  onUpload: (files: File[]) => void;
+}
+
+const CommentFormDropzone: FC<IProps> = ({ children, onUpload }) => {
+  const onDrop = useDropZone(onUpload, COMMENT_FILE_TYPES);
+  return <div onDropCapture={onDrop}>{children}</div>;
+};
+
+export { CommentFormDropzone };

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,23 +11,26 @@ 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);
-
     return (
       <div className={styles.grid}>
         {items
           .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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { SortableContainer } from 'react-sortable-hoc';
 import { ImageUpload } from '~/components/upload/ImageUpload';
 import styles from './styles.module.scss';
@@ -12,33 +12,38 @@ 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
+    const preventEvent = useCallback(event => event.preventDefault(), []);
-      className={styles.grid}
+
-      style={{ gridTemplateColumns: `repeat(auto-fill, minmax(${size}px, 1fr))` }}
+    return (
-    >
+      <div
-      {items
+        className={styles.grid}
-        .filter(file => file && file.id)
+        style={{ gridTemplateColumns: `repeat(auto-fill, minmax(${size}px, 1fr))` }}
-        .map((file, index) => (
+        onDropCapture={preventEvent}
-          <SortableImageGridItem key={file.id} index={index} collection={0}>
+      >
-            <ImageUpload id={file.id} thumb={getURL(file, PRESETS.cover)} onDrop={onDrop} />
+        {items
+          .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={onDelete} />
+            </SortableImageGridItem>
+          ))}
+
+        {locked.map((item, index) => (
+          <SortableImageGridItem key={item.temp_id} index={index} collection={1} disabled>
+            <ImageUpload thumb={item.preview} progress={item.progress} is_uploading />
           </SortableImageGridItem>
         ))}
-
+      </div>
-      {locked.map((item, index) => (
+    );
-        <SortableImageGridItem key={item.temp_id} index={index} collection={1} disabled>
+  }
-          <ImageUpload thumb={item.preview} progress={item.progress} is_uploading />
-        </SortableImageGridItem>
-      ))}
-    </div>
-  )
 );
 
 export { SortableImageGrid };

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/CommentForm/index.tsx

@@ -1,336 +0,0 @@
-import React, { FC, KeyboardEventHandler, memo, useCallback, useEffect, useMemo } from 'react';
-import { Textarea } from '~/components/input/Textarea';
-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 { 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 { ButtonGroup } from '~/components/input/ButtonGroup';
-import { SortableImageGrid } from '~/components/editors/SortableImageGrid';
-import { moveArrItem } from '~/utils/fn';
-import { SortEnd } from 'react-sortable-hoc';
-import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid';
-import { getRandomPhrase } from '~/constants/phrases';
-import { ERROR_LITERAL } from '~/constants/errors';
-
-const mapStateToProps = (state: IState) => ({
-  node: selectNode(state),
-  uploads: selectUploads(state),
-});
-
-const mapDispatchToProps = {
-  nodePostComment: NODE_ACTIONS.nodePostComment,
-  nodeCancelCommentEdit: NODE_ACTIONS.nodeCancelCommentEdit,
-  nodeSetCommentData: NODE_ACTIONS.nodeSetCommentData,
-  uploadUploadFiles: UPLOAD_ACTIONS.uploadUploadFiles,
-};
-
-type IProps = ReturnType<typeof mapStateToProps> &
-  typeof mapDispatchToProps & {
-    id: number;
-    is_before?: boolean;
-  };
-
-const CommentFormUnconnected: FC<IProps> = memo(
-  ({
-    node: { comment_data, is_sending_comment },
-    uploads: { statuses, files },
-    id,
-    is_before = false,
-    nodePostComment,
-    nodeSetCommentData,
-    uploadUploadFiles,
-    nodeCancelCommentEdit,
-  }) => {
-    const onInputChange = useCallback(
-      event => {
-        event.preventDefault();
-
-        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(),
-            subject: UPLOAD_SUBJECTS.COMMENT,
-            target: UPLOAD_TARGETS.COMMENTS,
-            type: getFileType(file),
-          })
-        );
-
-        const temps = items.map(file => file.temp_id);
-
-        nodeSetCommentData(
-          id,
-          assocPath(['temp_ids'], [...comment_data[id].temp_ids, ...temps], comment_data[id])
-        );
-        uploadUploadFiles(items);
-      },
-      [uploadUploadFiles, comment_data, id, nodeSetCommentData]
-    );
-
-    const onInput = useCallback<InputHandler>(
-      text => {
-        nodeSetCommentData(id, assocPath(['text'], text, comment_data[id]));
-      },
-      [nodeSetCommentData, comment_data, id]
-    );
-
-    useEffect(() => {
-      const temp_ids = (comment_data && comment_data[id] && comment_data[id].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_data[id].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_data[id],
-          temp_ids: filtered_temps,
-          files: [...comment_data[id].files, ...added_files],
-        });
-      }
-    }, [statuses, files]);
-
-    const comment = comment_data[id];
-
-    const is_uploading_files = useMemo(() => comment.temp_ids.length > 0, [comment.temp_ids]);
-
-    const onSubmit = useCallback(
-      event => {
-        if (event) event.preventDefault();
-        if (is_uploading_files || is_sending_comment) return;
-
-        nodePostComment(id, is_before);
-      },
-      [nodePostComment, id, is_before, is_uploading_files, 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 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,
-    ]);
-
-    useEffect(() => {
-      if (comment.error) clearError();
-    }, [comment.files, comment.text]);
-
-    return (
-      <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}
-          />
-
-          {comment.error && (
-            <div className={styles.error} onClick={clearError}>
-              {ERROR_LITERAL[comment.error] || comment.error}
-            </div>
-          )}
-        </div>
-
-        {hasAttaches && (
-          <div className={styles.attaches}>
-            {hasImageAttaches && (
-              <SortableImageGrid
-                onDrop={onFileDrop}
-                onSortEnd={onImageMove}
-                axis="xy"
-                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>
-            <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 />
-
-          {(is_sending_comment || is_uploading_files) && <LoaderCircle size={20} />}
-
-          {id !== 0 && (
-            <Button size="small" color="link" type="button" onClick={onCancelEdit}>
-              Отмена
-            </Button>
-          )}
-
-          <Button
-            size="small"
-            color="gray"
-            iconRight={id === 0 ? 'enter' : 'check'}
-            disabled={is_sending_comment || is_uploading_files}
-          >
-            {id === 0 ? 'Сказать' : 'Сохранить'}
-          </Button>
-        </Group>
-      </form>
-    );
-  }
-);
-
-const CommentForm = connect(mapStateToProps, mapDispatchToProps)(CommentFormUnconnected);
-
-export { CommentForm, CommentFormUnconnected };

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';

src/redux/uploads/constants.ts

@@ -69,3 +69,8 @@ export const FILE_MIMES = {
   [UPLOAD_TYPES.AUDIO]: ['audio/mpeg3', 'audio/mpeg', 'audio/mp3'],
   [UPLOAD_TYPES.OTHER]: [],
 };
+
+export const COMMENT_FILE_TYPES = [
+  ...FILE_MIMES[UPLOAD_TYPES.IMAGE],
+  ...FILE_MIMES[UPLOAD_TYPES.AUDIO],
+];

src/utils/hooks.ts

@@ -1,19 +1,18 @@
-import {
+import { useCallback, useEffect } from 'react';
-  useCallback, useEffect, useRef, useState
-} from 'react';
 
 export const useCloseOnEscape = (onRequestClose: () => void, ignore_inputs = false) => {
   const onEscape = useCallback(
-    (event) => {
+    event => {
       if (event.key !== 'Escape') return;
       if (
-        ignore_inputs
+        ignore_inputs &&
-        && (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA')
+        (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA')
-      ) return;
+      )
+        return;
 
       onRequestClose();
     },
-    [ignore_inputs, onRequestClose],
+    [ignore_inputs, onRequestClose]
   );
 
   useEffect(() => {
@@ -34,3 +33,24 @@ export const useDelayedReady = (setReady: (val: boolean) => void, delay: number
     };
   }, [delay, setReady]);
 };
+
+/**
+ * useDropZone returns onDrop handler to upload files
+ * @param onUpload -- upload callback
+ * @param allowedTypes -- list of allowed types
+ */
+export const useDropZone = (onUpload: (file: File[]) => void, allowedTypes?: string[]) => {
+  return useCallback(
+    event => {
+      event.preventDefault();
+      const files: File[] = Array.from((event.dataTransfer?.files as File[]) || []).filter(
+        (file: File) => file?.type && (!allowedTypes || allowedTypes.includes(file.type))
+      );
+
+      if (!files || !files.length) return;
+
+      onUpload(files);
+    },
+    [onUpload]
+  );
+};