From 62d4e032062801c8fb14329baf10851dbe5f857d Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Mon, 9 Nov 2020 18:44:36 +0700
Subject: [PATCH] added comment form drop zone

---
 src/components/comment/CommentForm/index.tsx  | 121 +++++++++---------
 .../comment/CommentFormAttaches/index.tsx     |   8 +-
 .../comment/CommentFormButtons/index.tsx      |   6 +-
 .../comment/CommentFormDropzone/index.tsx     |  14 ++
 .../editors/SortableAudioGrid/index.tsx       |   2 -
 .../editors/SortableImageGrid/index.tsx       |  43 ++++---
 src/redux/uploads/constants.ts                |   5 +
 src/utils/hooks.ts                            |  36 ++++--
 8 files changed, 142 insertions(+), 93 deletions(-)
 create mode 100644 src/components/comment/CommentFormDropzone/index.tsx

diff --git a/src/components/comment/CommentForm/index.tsx b/src/components/comment/CommentForm/index.tsx
index a7ff6c2f..6481aa7e 100644
--- a/src/components/comment/CommentForm/index.tsx
+++ b/src/components/comment/CommentForm/index.tsx
@@ -20,6 +20,7 @@ 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),
@@ -50,8 +51,12 @@ const CommentFormUnconnected: FC<IProps> = memo(
     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,
@@ -64,28 +69,25 @@ const CommentFormUnconnected: FC<IProps> = memo(
 
         const temps = items.map(file => file.temp_id);
 
-        nodeSetCommentData(
-          id,
-          assocPath(['temp_ids'], [...comment_data[id].temp_ids, ...temps], comment_data[id])
-        );
+        nodeSetCommentData(id, assocPath(['temp_ids'], [...comment.temp_ids, ...temps], comment));
         uploadUploadFiles(items);
       },
-      [uploadUploadFiles, comment_data, id, nodeSetCommentData]
+      [uploadUploadFiles, comment, id, nodeSetCommentData]
     );
 
     const onInput = useCallback<InputHandler>(
       text => {
-        nodeSetCommentData(id, assocPath(['text'], text, comment_data[id]));
+        nodeSetCommentData(id, assocPath(['text'], text, comment));
       },
-      [nodeSetCommentData, comment_data, id]
+      [nodeSetCommentData, comment, id]
     );
 
     useEffect(() => {
-      const temp_ids = (comment_data && comment_data[id] && comment_data[id].temp_ids) || [];
+      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_data[id].files.some(file => file && file.id === el.id));
+        .filter(el => !!el && !comment.files.some(file => file && file.id === el.id));
 
       const filtered_temps = temp_ids.filter(
         temp_id =>
@@ -95,25 +97,23 @@ const CommentFormUnconnected: FC<IProps> = memo(
 
       if (added_files.length) {
         nodeSetCommentData(id, {
-          ...comment_data[id],
+          ...comment,
           temp_ids: filtered_temps,
-          files: [...comment_data[id].files, ...added_files],
+          files: [...comment.files, ...added_files],
         });
       }
     }, [statuses, files]);
 
-    const comment = useMemo(() => comment_data[id], [comment_data, id]);
-
-    const is_uploading_files = useMemo(() => comment.temp_ids.length > 0, [comment.temp_ids]);
+    const isUploadingNow = 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;
+        if (isUploadingNow || is_sending_comment) return;
 
         nodePostComment(id, is_before);
       },
-      [nodePostComment, id, is_before, is_uploading_files, is_sending_comment]
+      [nodePostComment, id, is_before, isUploadingNow, is_sending_comment]
     );
 
     const onKeyDown = useCallback<KeyboardEventHandler<HTMLTextAreaElement>>(
@@ -172,56 +172,59 @@ const CommentFormUnconnected: FC<IProps> = memo(
     );
 
     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}
+      <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}
           />
 
-          {comment.error && (
-            <div className={styles.error} onClick={clearError}>
-              {ERROR_LITERAL[comment.error] || comment.error}
-            </div>
-          )}
-        </div>
+          <Group horizontal className={styles.buttons}>
+            <CommentFormAttachButtons onUpload={onUpload} />
 
-        <CommentFormAttaches
-          images={images}
-          audios={audios}
-          locked_audios={locked_audios}
-          locked_images={locked_images}
-          comment={comment}
-          setComment={setData}
-        />
+            <Filler />
 
-        <Group horizontal className={styles.buttons}>
-          <CommentFormAttachButtons onUpload={onUpload} />
+            {(is_sending_comment || isUploadingNow) && <LoaderCircle size={20} />}
 
-          <Filler />
+            {id !== 0 && (
+              <Button size="small" color="link" type="button" onClick={onCancelEdit}>
+                Отмена
+              </Button>
+            )}
 
-          {(is_sending_comment || is_uploading_files) && <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>
-          )}
-
-          <Button
-            size="small"
-            color="gray"
-            iconRight={id === 0 ? 'enter' : 'check'}
-            disabled={is_sending_comment || is_uploading_files}
-          >
-            {id === 0 ? 'Сказать' : 'Сохранить'}
-          </Button>
-        </Group>
-      </form>
+          </Group>
+        </form>
+      </CommentFormDropzone>
     );
   }
 );
diff --git a/src/components/comment/CommentFormAttaches/index.tsx b/src/components/comment/CommentFormAttaches/index.tsx
index d3408b18..28830735 100644
--- a/src/components/comment/CommentFormAttaches/index.tsx
+++ b/src/components/comment/CommentFormAttaches/index.tsx
@@ -7,6 +7,8 @@ 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[];
@@ -15,6 +17,7 @@ interface IProps {
   locked_audios: IUploadStatus[];
   comment: IComment;
   setComment: (data: IComment) => void;
+  onUpload: (files: File[]) => void;
 }
 
 const CommentFormAttaches: FC<IProps> = ({
@@ -24,7 +27,10 @@ const CommentFormAttaches: FC<IProps> = ({
   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;
@@ -99,7 +105,7 @@ const CommentFormAttaches: FC<IProps> = ({
 
   return (
     hasAttaches && (
-      <div className={styles.attaches}>
+      <div className={styles.attaches} onDropCapture={onDrop}>
         {hasImageAttaches && (
           <SortableImageGrid
             onDelete={onFileDelete}
diff --git a/src/components/comment/CommentFormButtons/index.tsx b/src/components/comment/CommentFormButtons/index.tsx
index 230712dc..97eb6a03 100644
--- a/src/components/comment/CommentFormButtons/index.tsx
+++ b/src/components/comment/CommentFormButtons/index.tsx
@@ -1,21 +1,19 @@
 import React, { FC, useCallback } from 'react';
 import { ButtonGroup } from '~/components/input/ButtonGroup';
 import { Button } from '~/components/input/Button';
-import { FILE_MIMES, UPLOAD_TYPES } from '~/redux/uploads/constants';
+import { COMMENT_FILE_TYPES } from '~/redux/uploads/constants';
 
 interface IProps {
   onUpload: (files: File[]) => void;
 }
 
-const ALLOWED_TYPES = [...FILE_MIMES[UPLOAD_TYPES.IMAGE], ...FILE_MIMES[UPLOAD_TYPES.AUDIO]];
-
 const CommentFormAttachButtons: FC<IProps> = ({ onUpload }) => {
   const onInputChange = useCallback(
     event => {
       event.preventDefault();
 
       const files = Array.from(event.target?.files as File[]).filter((file: File) =>
-        ALLOWED_TYPES.includes(file.type)
+        COMMENT_FILE_TYPES.includes(file.type)
       );
       if (!files || !files.length) return;
 
diff --git a/src/components/comment/CommentFormDropzone/index.tsx b/src/components/comment/CommentFormDropzone/index.tsx
new file mode 100644
index 00000000..5c06fb67
--- /dev/null
+++ b/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 };
diff --git a/src/components/editors/SortableAudioGrid/index.tsx b/src/components/editors/SortableAudioGrid/index.tsx
index d807a0a5..38368863 100644
--- a/src/components/editors/SortableAudioGrid/index.tsx
+++ b/src/components/editors/SortableAudioGrid/index.tsx
@@ -19,8 +19,6 @@ const SortableAudioGrid = SortableContainer(
     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
diff --git a/src/components/editors/SortableImageGrid/index.tsx b/src/components/editors/SortableImageGrid/index.tsx
index 4c40d94e..ccaa3784 100644
--- a/src/components/editors/SortableImageGrid/index.tsx
+++ b/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';
@@ -19,26 +19,31 @@ const SortableImageGrid = SortableContainer(
     locked: IUploadStatus[];
     onDelete: (file_id: IFile['id']) => void;
     size?: number;
-  }) => (
-    <div
-      className={styles.grid}
-      style={{ gridTemplateColumns: `repeat(auto-fill, minmax(${size}px, 1fr))` }}
-    >
-      {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} />
+  }) => {
+    const preventEvent = useCallback(event => event.preventDefault(), []);
+
+    return (
+      <div
+        className={styles.grid}
+        style={{ gridTemplateColumns: `repeat(auto-fill, minmax(${size}px, 1fr))` }}
+        onDropCapture={preventEvent}
+      >
+        {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>
         ))}
-
-      {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>
-  )
+      </div>
+    );
+  }
 );
 
 export { SortableImageGrid };
diff --git a/src/redux/uploads/constants.ts b/src/redux/uploads/constants.ts
index 1662ef99..27f91abf 100644
--- a/src/redux/uploads/constants.ts
+++ b/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],
+];
diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts
index 54119c0b..80230f2a 100644
--- a/src/utils/hooks.ts
+++ b/src/utils/hooks.ts
@@ -1,19 +1,18 @@
-import {
-  useCallback, useEffect, useRef, useState
-} from 'react';
+import { useCallback, useEffect } from 'react';
 
 export const useCloseOnEscape = (onRequestClose: () => void, ignore_inputs = false) => {
   const onEscape = useCallback(
-    (event) => {
+    event => {
       if (event.key !== 'Escape') return;
       if (
-        ignore_inputs
-        && (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA')
-      ) return;
+        ignore_inputs &&
+        (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA')
+      )
+        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]
+  );
+};