Merge branch 'dev2' of https://github.com/emsesp/EMS-ESP32 into dev2

interface/src/components/upload/SingleUpload.tsx

@@ -4,7 +4,7 @@ import { Box, Button, LinearProgress, Typography, useTheme } from '@mui/material
 import { Fragment } from 'react';
 import { useDropzone } from 'react-dropzone';
 import type { Theme } from '@mui/material';
-import type { AxiosProgressEvent } from 'axios';
+import type { Progress } from 'alova';
 import type { FC } from 'react';
 import type { DropzoneState } from 'react-dropzone';
 
@@ -26,11 +26,13 @@ const getBorderColor = (theme: Theme, props: DropzoneState) => {
 export interface SingleUploadProps {
   onDrop: (acceptedFiles: File[]) => void;
   onCancel: () => void;
-  uploading: boolean;
-  progress?: AxiosProgressEvent;
+  isUploading: boolean;
+  progress: Progress;
 }
 
-const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, uploading, progress }) => {
+const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, isUploading, progress }) => {
+  const uploading = isUploading && progress.total > 0;
+
   const dropzoneState = useDropzone({
     onDrop,
     accept: {
@@ -38,20 +40,19 @@ const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, uploading, prog
       'application/json': ['.json'],
       'text/plain': ['.md5']
     },
-    disabled: uploading,
+    disabled: isUploading,
     multiple: false
   });
+
   const { getRootProps, getInputProps } = dropzoneState;
   const theme = useTheme();
-
   const { LL } = useI18nContext();
 
   const progressText = () => {
     if (uploading) {
-      if (progress?.total) {
+      if (progress.total) {
         return LL.UPLOADING() + ': ' + Math.round((progress.loaded * 100) / progress.total) + '%';
       }
-      return LL.UPLOADING() + `\u2026`;
     }
     return LL.UPLOAD_DROP_TEXT();
   };
@@ -81,8 +82,8 @@ const SingleUpload: FC<SingleUploadProps> = ({ onDrop, onCancel, uploading, prog
           <Fragment>
             <Box width="100%" p={2}>
               <LinearProgress
-                variant={!progress || progress.total ? 'determinate' : 'indeterminate'}
-                value={!progress ? 0 : progress.total ? Math.round((progress.loaded * 100) / progress.total) : 0}
+                variant="determinate"
+                value={progress.total === 0 ? 0 : Math.round((progress.loaded * 100) / progress.total)}
               />
             </Box>
             <Button startIcon={<CancelIcon />} variant="outlined" color="secondary" onClick={onCancel}>

interface/src/components/upload/index.ts

@@ -1,2 +1 @@
 export { default as SingleUpload } from './SingleUpload';
-export { default as useFileUpload } from './useFileUpload';

interface/src/components/upload/useFileUpload.ts

@@ -1,71 +0,0 @@
-import axios from 'axios';
-import { useCallback, useEffect, useState } from 'react';
-import { toast } from 'react-toastify';
-
-import type { FileUploadConfig } from 'api/endpoints';
-import type { AxiosPromise, CancelTokenSource, AxiosProgressEvent } from 'axios';
-
-import { useI18nContext } from 'i18n/i18n-react';
-import { extractErrorMessage } from 'utils';
-
-interface MediaUploadOptions {
-  upload: (file: File, config?: FileUploadConfig) => AxiosPromise<void>;
-}
-
-const useFileUpload = ({ upload }: MediaUploadOptions) => {
-  const { LL } = useI18nContext();
-
-  const [uploading, setUploading] = useState<boolean>(false);
-  const [md5, setMd5] = useState<string>('');
-  const [uploadProgress, setUploadProgress] = useState<AxiosProgressEvent>();
-  const [uploadCancelToken, setUploadCancelToken] = useState<CancelTokenSource>();
-
-  const resetUploadingStates = () => {
-    setUploading(false);
-    setUploadProgress(undefined);
-    setUploadCancelToken(undefined);
-    setMd5('');
-  };
-
-  const cancelUpload = useCallback(() => {
-    uploadCancelToken?.cancel();
-    resetUploadingStates();
-  }, [uploadCancelToken]);
-
-  useEffect(
-    () => () => {
-      uploadCancelToken?.cancel();
-    },
-    [uploadCancelToken]
-  );
-
-  const uploadFile = async (images: File[]) => {
-    try {
-      const cancelToken = axios.CancelToken.source();
-      setUploadCancelToken(cancelToken);
-      setUploading(true);
-      const response = await upload(images[0], {
-        onUploadProgress: setUploadProgress,
-        cancelToken: cancelToken.token
-      });
-      resetUploadingStates();
-      if (response.status === 200) {
-        toast.success(LL.UPLOAD() + ' ' + LL.SUCCESSFUL());
-      } else if (response.status === 201) {
-        setMd5(String(response.data));
-        toast.success(LL.UPLOAD() + ' MD5 ' + LL.SUCCESSFUL());
-      }
-    } catch (error) {
-      if (axios.isCancel(error)) {
-        toast.warning(LL.UPLOAD() + ' ' + LL.ABORTED());
-      } else {
-        resetUploadingStates();
-        toast.error(extractErrorMessage(error, LL.UPLOAD() + ' ' + LL.FAILED(0)));
-      }
-    }
-  };
-
-  return [uploadFile, cancelUpload, uploading, uploadProgress, md5] as const;
-};
-
-export default useFileUpload;