extract localFiles and dropzoneState into useFileUploader

src/components/fields/File/SideDrawerField.tsx

@@ -1,10 +1,6 @@
-import { useState } from "react";
-import { ISideDrawerFieldProps } from "@src/components/fields/types";
 import { useSetAtom } from "jotai";
 import { format } from "date-fns";
 
-import { useDropzone } from "react-dropzone";
-
 import {
   alpha,
   ButtonBase,
@@ -14,15 +10,15 @@ import {
   Chip,
 } from "@mui/material";
 import { Upload as UploadIcon } from "@src/assets/icons";
-import { FileIcon } from ".";
 
+import { ISideDrawerFieldProps } from "@src/components/fields/types";
 import CircularProgressOptical from "@src/components/CircularProgressOptical";
 import { DATE_TIME_FORMAT } from "@src/constants/dates";
-
 import { fieldSx, getFieldId } from "@src/components/SideDrawer/utils";
 import { projectScope, confirmDialogAtom } from "@src/atoms/projectScope";
 import { FileValue } from "@src/types/table";
 import useFileUpload from "./useFileUpload";
+import { FileIcon } from ".";
 
 export default function File_({
   column,
@@ -31,23 +27,10 @@ export default function File_({
   disabled,
 }: ISideDrawerFieldProps) {
   const confirm = useSetAtom(confirmDialogAtom, projectScope);
-  const { loading, progress, handleUpload, handleDelete } = useFileUpload(
-    _rowy_ref,
-    column.key
-  );
+  const { loading, progress, handleDelete, localFiles, dropzoneState } =
+    useFileUpload(_rowy_ref, column.key, { multiple: true });
 
-  const [localFiles, setLocalFiles] = useState<File[]>([]);
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop: async (acceptedFiles: File[]) => {
-      if (acceptedFiles.length > 0) {
-        setLocalFiles(acceptedFiles);
-        await handleUpload(acceptedFiles);
-        setLocalFiles([]);
-      }
-    },
-    multiple: true,
-  });
+  const { isDragActive, getRootProps, getInputProps } = dropzoneState;
 
   return (
     <>

src/components/fields/File/TableCell.tsx

@@ -1,8 +1,6 @@
-import { useState } from "react";
 import { IHeavyCellProps } from "@src/components/fields/types";
 import { useSetAtom } from "jotai";
 
-import { useDropzone } from "react-dropzone";
 import { format } from "date-fns";
 
 import { alpha, Stack, Grid, Tooltip, Chip, IconButton } from "@mui/material";
@@ -23,26 +21,12 @@ export default function File_({
   docRef,
 }: IHeavyCellProps) {
   const confirm = useSetAtom(confirmDialogAtom, projectScope);
-  const [localFiles, setLocalFiles] = useState<File[]>([]);
 
-  const { loading, progress, handleUpload, handleDelete } = useFileUpload(
-    docRef,
-    column.key
-  );
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop: async (acceptedFiles: File[]) => {
-      if (acceptedFiles.length > 0) {
-        setLocalFiles(acceptedFiles);
-        await handleUpload(acceptedFiles);
-        setLocalFiles([]);
-      }
-    },
-    multiple: true,
-  });
+  const { loading, progress, handleDelete, localFiles, dropzoneState } =
+    useFileUpload(docRef, column.key, { multiple: true });
 
+  const { isDragActive, getRootProps, getInputProps } = dropzoneState;
   const dropzoneProps = getRootProps();
-
   return (
     <Stack
       direction="row"

src/components/fields/File/useFileUpload.ts

@@ -1,15 +1,33 @@
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
 import { useSetAtom } from "jotai";
 import { some } from "lodash-es";
 
 import { tableScope, updateFieldAtom } from "@src/atoms/tableScope";
 import useUploader from "@src/hooks/useFirebaseStorageUploader";
 import { FileValue } from "@src/types/table";
+import { DropzoneOptions, useDropzone } from "react-dropzone";
 
-export default function useFileUpload(docRef: any, fieldName: string) {
+export default function useFileUpload(
+  docRef: any,
+  fieldName: string,
+  dropzoneOptions: DropzoneOptions = {}
+) {
   const updateField = useSetAtom(updateFieldAtom, tableScope);
   const { uploaderState, upload, deleteUpload } = useUploader();
 
+  const [localFiles, setLocalFiles] = useState<File[]>([]);
+
+  const dropzoneState = useDropzone({
+    onDrop: async (acceptedFiles: File[]) => {
+      if (acceptedFiles.length > 0) {
+        setLocalFiles(acceptedFiles);
+        await handleUpload(acceptedFiles);
+        setLocalFiles([]);
+      }
+    },
+    ...dropzoneOptions,
+  });
+
   const uploadingFiles = Object.keys(uploaderState);
 
   const progress =
@@ -57,5 +75,13 @@ export default function useFileUpload(docRef: any, fieldName: string) {
     [deleteUpload, docRef, fieldName, updateField]
   );
 
-  return { progress, loading, uploaderState, handleUpload, handleDelete };
+  return {
+    localFiles,
+    progress,
+    loading,
+    uploaderState,
+    handleUpload,
+    handleDelete,
+    dropzoneState,
+  };
 }

src/components/fields/Image/SideDrawerField.tsx

@@ -1,10 +1,8 @@
 import { ISideDrawerFieldProps } from "@src/components/fields/types";
-import { useState } from "react";
+import { useMemo } from "react";
 import { useSetAtom } from "jotai";
 import { assignIn } from "lodash-es";
 
-import { useDropzone } from "react-dropzone";
-
 import {
   alpha,
   ButtonBase,
@@ -89,29 +87,28 @@ export default function Image_({
 }: ISideDrawerFieldProps) {
   const confirm = useSetAtom(confirmDialogAtom, projectScope);
 
-  const { loading, progress, handleUpload, handleDelete, uploaderState } =
-    useFileUpload(_rowy_ref, column.key);
-
-  const [localImages, setLocalImages] = useState<
-    (File & { localURL: string })[]
-  >([]);
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop: async (acceptedFiles: File[]) => {
-      if (acceptedFiles.length > 0) {
-        setLocalImages(
-          acceptedFiles.map((file) =>
-            assignIn(file, { localURL: URL.createObjectURL(file) })
-          )
-        );
-        await handleUpload(acceptedFiles);
-        setLocalImages([]);
-      }
-    },
+  const {
+    loading,
+    progress,
+    handleDelete,
+    uploaderState,
+    localFiles,
+    dropzoneState,
+  } = useFileUpload(_rowy_ref, column.key, {
     multiple: true,
     accept: IMAGE_MIME_TYPES,
   });
 
+  const localImages = useMemo(
+    () =>
+      localFiles.map((file) =>
+        assignIn(file, { localURL: URL.createObjectURL(file) })
+      ),
+    [localFiles]
+  );
+
+  const { getRootProps, getInputProps, isDragActive } = dropzoneState;
+
   return (
     <>
       {!disabled && (

src/components/fields/Image/TableCell.tsx

@@ -1,8 +1,7 @@
-import { useState } from "react";
+import { useMemo } from "react";
 import { IHeavyCellProps } from "@src/components/fields/types";
 import { useAtom, useSetAtom } from "jotai";
 import { assignIn } from "lodash-es";
-import { useDropzone } from "react-dropzone";
 
 import {
   alpha,
@@ -89,31 +88,21 @@ export default function Image_({
   const confirm = useSetAtom(confirmDialogAtom, projectScope);
   const [tableSchema] = useAtom(tableSchemaAtom, tableScope);
 
-  const { loading, progress, handleUpload, handleDelete } = useFileUpload(
-    docRef,
-    column.key
+  const { loading, progress, handleDelete, localFiles, dropzoneState } =
+    useFileUpload(docRef, column.key, {
+      multiple: true,
+      accept: IMAGE_MIME_TYPES,
+    });
+
+  const localImages = useMemo(
+    () =>
+      localFiles.map((file) =>
+        assignIn(file, { localURL: URL.createObjectURL(file) })
+      ),
+    [localFiles]
   );
 
-  const [localImages, setLocalImages] = useState<
-    (File & { localURL: string })[]
-  >([]);
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop: async (acceptedFiles: File[]) => {
-      if (acceptedFiles.length > 0) {
-        setLocalImages(
-          acceptedFiles.map((file) =>
-            assignIn(file, { localURL: URL.createObjectURL(file) })
-          )
-        );
-        await handleUpload(acceptedFiles);
-        setLocalImages([]);
-      }
-    },
-    multiple: true,
-    accept: IMAGE_MIME_TYPES,
-  });
-
+  const { getRootProps, getInputProps, isDragActive } = dropzoneState;
   const dropzoneProps = getRootProps();
 
   const rowHeight = tableSchema.rowHeight ?? DEFAULT_ROW_HEIGHT;