From a3d22474c9f6adbca39785c75ddc9224b691f2d8 Mon Sep 17 00:00:00 2001 From: Han Tuerker Date: Wed, 16 Nov 2022 11:07:05 +0300 Subject: [PATCH] extract localFiles and dropzoneState into useFileUploader --- .../fields/File/SideDrawerField.tsx | 27 +++--------- src/components/fields/File/TableCell.tsx | 22 ++-------- src/components/fields/File/useFileUpload.ts | 32 +++++++++++++-- .../fields/Image/SideDrawerField.tsx | 41 +++++++++---------- src/components/fields/Image/TableCell.tsx | 39 +++++++----------- 5 files changed, 70 insertions(+), 91 deletions(-) diff --git a/src/components/fields/File/SideDrawerField.tsx b/src/components/fields/File/SideDrawerField.tsx index af3f6168..00287c23 100644 --- a/src/components/fields/File/SideDrawerField.tsx +++ b/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([]); - - 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 ( <> diff --git a/src/components/fields/File/TableCell.tsx b/src/components/fields/File/TableCell.tsx index eee9a330..d35a8c6f 100644 --- a/src/components/fields/File/TableCell.tsx +++ b/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([]); - 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 ( ([]); + + 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, + }; } diff --git a/src/components/fields/Image/SideDrawerField.tsx b/src/components/fields/Image/SideDrawerField.tsx index 531ba7e7..70c58b88 100644 --- a/src/components/fields/Image/SideDrawerField.tsx +++ b/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 && ( diff --git a/src/components/fields/Image/TableCell.tsx b/src/components/fields/Image/TableCell.tsx index f8f31861..a903f955 100644 --- a/src/components/fields/Image/TableCell.tsx +++ b/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;