From 8e40cf988506af056154f026b5fbc846e74510b4 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Mon, 30 Oct 2023 17:23:30 +0600
Subject: [PATCH] fix file uploads on comments

---
 .../comment/CommentEditingForm/index.tsx      | 38 +++++++++----------
 .../upload/UploadDropzone/index.tsx           | 17 ++++++---
 src/containers/node/NodeCommentForm/index.tsx |  6 ++-
 3 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/src/components/comment/CommentEditingForm/index.tsx b/src/components/comment/CommentEditingForm/index.tsx
index 684f35c9..e8f6baa6 100644
--- a/src/components/comment/CommentEditingForm/index.tsx
+++ b/src/components/comment/CommentEditingForm/index.tsx
@@ -1,5 +1,7 @@
 import { FC } from 'react';
 
+import { observer } from 'mobx-react-lite';
+
 import { CommentForm } from '~/components/comment/CommentForm';
 import { UploadDropzone } from '~/components/upload/UploadDropzone';
 import { UploadSubject, UploadTarget } from '~/constants/uploads';
@@ -14,25 +16,23 @@ interface CommentEditingFormProps {
   onCancelEdit?: () => void;
 }
 
-const CommentEditingForm: FC<CommentEditingFormProps> = ({
-  saveComment,
-  comment,
-  onCancelEdit,
-}) => {
-  const uploader = useUploader(UploadSubject.Comment, UploadTarget.Comments);
+const CommentEditingForm: FC<CommentEditingFormProps> = observer(
+  ({ saveComment, comment, onCancelEdit }) => {
+    const uploader = useUploader(UploadSubject.Comment, UploadTarget.Comments);
 
-  return (
-    <UploadDropzone onUpload={uploader.uploadFiles}>
-      <UploaderContextProvider value={uploader}>
-        <CommentForm
-          saveComment={saveComment}
-          comment={comment}
-          onCancelEdit={onCancelEdit}
-          allowUploads
-        />
-      </UploaderContextProvider>
-    </UploadDropzone>
-  );
-};
+    return (
+      <UploadDropzone onUpload={uploader.uploadFiles}>
+        <UploaderContextProvider value={uploader}>
+          <CommentForm
+            saveComment={saveComment}
+            comment={comment}
+            onCancelEdit={onCancelEdit}
+            allowUploads
+          />
+        </UploaderContextProvider>
+      </UploadDropzone>
+    );
+  },
+);
 
 export { CommentEditingForm };
diff --git a/src/components/upload/UploadDropzone/index.tsx b/src/components/upload/UploadDropzone/index.tsx
index 859559d4..9083cabb 100644
--- a/src/components/upload/UploadDropzone/index.tsx
+++ b/src/components/upload/UploadDropzone/index.tsx
@@ -4,7 +4,6 @@ import classnames from 'classnames';
 import classNames from 'classnames';
 import Dropzone from 'react-dropzone';
 
-
 import { DropHereIcon } from '~/components/input/DropHereIcon';
 import { useDragDetector } from '~/hooks/dom/useDragDetector';
 import { DivProps } from '~/utils/types';
@@ -16,26 +15,34 @@ interface IProps extends DivProps {
   helperClassName?: string;
 }
 
-const UploadDropzone: FC<IProps> = ({ children, onUpload, helperClassName, ...rest }) => {
+const UploadDropzone: FC<IProps> = ({
+  children,
+  onUpload,
+  helperClassName,
+  ...rest
+}) => {
   const { isDragging: isDraggingOnBody, onStopDragging } = useDragDetector();
   const onDrop = useCallback(
     (files: File[]) => {
       onStopDragging();
       onUpload(files);
     },
-    [onStopDragging, onUpload]
+    [onStopDragging, onUpload],
   );
 
   return (
-    <Dropzone onDrop={onDrop}>
-      {({ getRootProps, isDragActive }) => (
+    <Dropzone onDrop={onDrop} noClick>
+      {({ getRootProps, isDragActive, getInputProps }) => (
         <div
           {...getRootProps({
             ...rest,
             className: classnames(styles.zone),
           })}
         >
+          <input {...getInputProps()} />
+
           {children}
+
           <div
             className={classNames(styles.helper, helperClassName, {
               [styles.active]: isDragActive || isDraggingOnBody,
diff --git a/src/containers/node/NodeCommentForm/index.tsx b/src/containers/node/NodeCommentForm/index.tsx
index dcb71055..60d15d66 100644
--- a/src/containers/node/NodeCommentForm/index.tsx
+++ b/src/containers/node/NodeCommentForm/index.tsx
@@ -1,5 +1,7 @@
 import { FC, useCallback } from 'react';
 
+import { observer } from 'mobx-react-lite';
+
 import { CommentForm } from '~/components/comment/CommentForm';
 import { CommentWrapper } from '~/components/containers/CommentWrapper';
 import { UploadDropzone } from '~/components/upload/UploadDropzone';
@@ -16,7 +18,7 @@ export interface Props {
   saveComment: (comment: IComment) => Promise<IComment | undefined>;
 }
 
-const NodeCommentForm: FC<Props> = ({ saveComment }) => {
+const NodeCommentForm: FC<Props> = observer(({ saveComment }) => {
   const { user, isUser } = useAuth();
   const showLoginDialog = useShowModal(Dialog.Login);
 
@@ -42,6 +44,6 @@ const NodeCommentForm: FC<Props> = ({ saveComment }) => {
       </UploaderContextProvider>
     </UploadDropzone>
   );
-};
+});
 
 export { NodeCommentForm };