fix: 819 upload component improvements (#820)

* refactor(upload): rename Error component to ErrorComponent * refactor(upload): rename Error component to ErrorComponent * refactor(upload): rename Error component to ErrorComponent
bosonprotocol · Oct 28, 2024 · 323e876 · 323e876
1 parent f579af3
commit 323e876
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 16 deletions.
diff --git a/packages/react-kit/src/components/form/Field.styles.ts b/packages/react-kit/src/components/form/Field.styles.ts
@@ -125,6 +125,7 @@ export type FileUploadWrapperTheme = Partial<{
   error: Partial<{
     borderColor: CSSProperties["borderColor"];
   }>;
+  overrides: Partial<CSSProperties>;
 }>;
 export const FileUploadWrapper = styled.div<{
   $error: unknown;
@@ -188,13 +189,16 @@ export const FileUploadWrapper = styled.div<{
     cursor: not-allowed;
     opacity: 0.5;
   }
+  ${({ theme: { overrides } }) => overrides}
 `;
 
 export const FieldFileUpload = styled(FieldInput)`
   display: none;
 `;
 
-export const FieldFileUploadWrapper = styled.div<{ $disabled: boolean }>`
+export const FieldFileUploadWrapper = styled.div<{
+  $disabled: boolean;
+}>`
   position: relative;
   display: inline-block;
   ${({ $disabled }) =>

diff --git a/packages/react-kit/src/components/form/Upload/BaseUpload.tsx b/packages/react-kit/src/components/form/Upload/BaseUpload.tsx
@@ -9,7 +9,7 @@ import { theme } from "../../../theme";
 import Loading from "../../ui/loading/LoadingWrapper";
 import ThemedButton from "../../ui/ThemedButton";
 import { Typography } from "../../ui/Typography";
-import Error from "../Error";
+import ErrorComponent from "../Error";
 import {
   FieldFileUploadWrapper,
   FieldInput,
@@ -52,6 +52,7 @@ function BaseUpload({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   removeFile,
   saveButtonTheme,
+  errorComponent,
   theme,
   ...props
 }: UploadPropsWithNoIpfs & WithUploadToIpfsProps) {
@@ -60,6 +61,7 @@ function BaseUpload({
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [preview, setPreview] = useState<string | null>();
   const [field, meta, helpers] = useField(name);
+  const [errorMesage, setErrorMessage] = useState<string>();
 
   const handleLoading = useCallback(
     (loadingValue: boolean) => {
@@ -216,16 +218,26 @@ function BaseUpload({
         helpers.setTouched(true);
       }
       handleLoading(true);
-      const files = await saveToIpfs(efiles);
-      if (files) {
-        setFiles(files);
-      } else {
-        setFiles([]);
-        console.warn(
-          `There has been an error because 'files' ${files} is falsy in handleSave`
-        );
+      try {
+        const files = await saveToIpfs(efiles, { throwOnError: true });
+        setErrorMessage(undefined);
+        if (files) {
+          setFiles(files);
+        } else {
+          setFiles([]);
+          console.warn(
+            `There has been an error because 'files' ${files} is falsy in handleSave`
+          );
+        }
+      } catch (err) {
+        if (err instanceof Error) {
+          setErrorMessage(err.message);
+        } else {
+          setErrorMessage("Something went wrong");
+        }
+      } finally {
+        handleLoading(false);
       }
-      handleLoading(false);
     },
     [meta.touched, handleLoading, saveToIpfs, helpers, setFiles]
   );
@@ -263,6 +275,7 @@ function BaseUpload({
           }}
         />
       )}
+      {errorMesage && errorComponent?.(errorMesage)}
       <FieldFileUploadWrapper {...wrapperProps} $disabled={!!disabled}>
         <FieldInput
           {...props}
@@ -364,7 +377,7 @@ function BaseUpload({
           <UploadedFiles files={files} handleRemoveFile={handleRemoveFile} />
         )}
       </FieldFileUploadWrapper>
-      <Error display={displayError} message={errorMessage} />
+      <ErrorComponent display={displayError} message={errorMessage} />
     </>
   );
 }

diff --git a/packages/react-kit/src/components/form/Upload/WithUploadToIpfs.tsx b/packages/react-kit/src/components/form/Upload/WithUploadToIpfs.tsx
@@ -22,7 +22,8 @@ export const SUPPORTED_FORMATS = [
 ];
 export interface WithUploadToIpfsProps {
   saveToIpfs: (
-    files: File[] | null
+    files: File[] | null,
+    options?: { throwOnError?: boolean }
   ) => Promise<false | FileProps[] | undefined>;
   loadMedia: (src: string) => Promise<string | undefined>;
   removeFile: (src: string) => Promise<void>;
@@ -39,7 +40,10 @@ export function WithUploadToIpfs<P extends WithUploadToIpfsProps>(
     const { saveFile, loadMedia, removeFile } = useSaveImageToIpfs();
 
     const saveToIpfs: WithUploadToIpfsProps["saveToIpfs"] = useCallback(
-      async (filesArray: File[] | null) => {
+      async (
+        filesArray: File[] | null,
+        options: { throwOnError?: boolean } = {}
+      ) => {
         if (!filesArray) {
           return;
         }
@@ -53,10 +57,12 @@ export function WithUploadToIpfs<P extends WithUploadToIpfsProps>(
             const err = `File ${
               file?.name
             } size cannot exceed more than ${bytesToSize(sizeValidation)}!`;
+            if (options?.throwOnError) throw new Error(err);
             filesErrors.push(err);
           }
           if (!formatValidation.includes(file?.type)) {
             const err = `Uploaded file has unsupported format of ${file?.type}!`;
+            if (options?.throwOnError) throw new Error(err);
             filesErrors.push(err);
           }
         }

diff --git a/packages/react-kit/src/components/form/types.ts b/packages/react-kit/src/components/form/types.ts
@@ -137,8 +137,12 @@ export type UploadProps = BaseProps & {
   borderRadiusUnit?: "px" | "%";
   width?: number;
   height?: number;
+  errorComponent?: (errorMessage: string) => React.ReactNode;
   imgPreviewStyle?: Pick<CSSProperties, "objectFit">;
-  theme?: Partial<{ triggerTheme: FileUploadWrapperTheme }>;
+  theme?: Partial<{
+    triggerTheme: FileUploadWrapperTheme;
+    overrides: React.CSSProperties;
+  }>;
 } & (
     | {
         withEditor: true;

diff --git a/packages/react-kit/src/theme.ts b/packages/react-kit/src/theme.ts
@@ -30,7 +30,8 @@ export const theme = {
       cyan: "#00FFFF",
       lightArrowColor: "#dedfe3",
       darkGreyTimeStamp: "#E8EAF1",
-      lightGrey2: "#eff0f7"
+      lightGrey2: "#eff0f7",
+      greyText: "rgba(28, 13, 24, 0.75)"
     }
   },
   mobile: "768px",