diff --git a/src/components/DropZone.tsx b/src/components/DropZone.tsx index 46cd93e1..c5784e60 100644 --- a/src/components/DropZone.tsx +++ b/src/components/DropZone.tsx @@ -1,12 +1,14 @@ import { Box, Button, Text, useTheme, useToast } from "@chakra-ui/react" -import { getDropZoneBorder } from "../utils/getDropZoneBorder" import { useDropzone } from "react-dropzone" import XLSX from "xlsx" +import { useState } from "react" +import { getDropZoneBorder } from "../utils/getDropZoneBorder" const UPLOAD_TITLE = "Upload .xlsx, .xls or .csv file" const ERROR_TOAST_DESCRIPTION = "upload rejected" const ACTIVE_DROP_ZONE_TITLE = "Drop file here..." const BUTTON_TITLE = "Select file" +const LOADING_TITLE = "Processing..." type DropZoneProps = { onContinue: (data: XLSX.WorkBook) => void @@ -17,12 +19,14 @@ export const DropZone = ({ onContinue }: DropZoneProps) => { colors: { rsi }, } = useTheme() const toast = useToast() + const [loading, setLoading] = useState(false) const { getRootProps, getInputProps, isDragActive, open } = useDropzone({ noClick: true, noKeyboard: true, maxFiles: 1, accept: ".xls, .csv, .xlsx", onDropRejected: (fileRejections) => { + setLoading(false) fileRejections.forEach((fileRejection) => { toast({ status: "error", @@ -32,18 +36,18 @@ export const DropZone = ({ onContinue }: DropZoneProps) => { }) }, onDrop: async ([file]) => { + setLoading(true) const arrayBuffer = await file.arrayBuffer() const workbook = XLSX.read(arrayBuffer) onContinue(workbook) }, }) + return ( { {ACTIVE_DROP_ZONE_TITLE} + ) : loading ? ( + + {LOADING_TITLE} + ) : ( <> {UPLOAD_TITLE} - + )} diff --git a/src/components/SelectSheet.tsx b/src/components/SelectSheet.tsx index 1dd32227..5a52ca4d 100644 --- a/src/components/SelectSheet.tsx +++ b/src/components/SelectSheet.tsx @@ -1,4 +1,4 @@ -import { Flex, Heading, Radio, RadioGroup, Stack, Button } from "@chakra-ui/react" +import { Flex, Heading, Radio, RadioGroup, Stack } from "@chakra-ui/react" import { useState } from "react" import { ContinueButton } from "./ContinueButton"