Merge pull request #485 from dataware-tools/feature/use-toast-for-err…

…or-notification Use toast for error notification
dataware-tools · Aug 4, 2022 · 36a5b6b · 36a5b6b
2 parents e643cc8 + dd80afe
commit 36a5b6b
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 80 deletions.
diff --git a/src/components/organisms/DatabaseConfigModal/index.tsx b/src/components/organisms/DatabaseConfigModal/index.tsx
@@ -27,7 +27,11 @@ import { DisplayFieldsConfigBody } from "./DisplayFieldsConfigBody";
 import { InputFieldsConfigBody } from "./InputFieldsConfigBody";
 import { SearchFieldsConfigBody } from "./SearchFieldsConfigBody";
 import { SecretFieldsConfigBody } from "./SecretFieldsConfigBody";
-import { fetchMetaStore, useGetConfig } from "utils";
+import {
+  enqueueErrorToastForFetchError,
+  fetchMetaStore,
+  useGetConfig,
+} from "utils";
 
 export type ConfigNameType = "record_list_display_columns";
 
@@ -189,14 +193,15 @@ export const DatabaseConfigModal = ({
     );
 
     if (updateConfigError) {
-      const { reason, instruction } =
-        extractErrorMessageFromFetchError(updateConfigError);
-      setError({ reason, instruction });
+      enqueueErrorToastForFetchError(
+        "Failed to update configs for database",
+        updateConfigError
+      );
     } else {
       getConfigMutate(updateConfigRes);
+      propsOnClose();
     }
     setIsSaving(false);
-    propsOnClose();
   };
 
   const isFetchComplete = Boolean(!fetchError && databaseConfig);

diff --git a/src/components/organisms/DatabaseDeleteModal.tsx b/src/components/organisms/DatabaseDeleteModal.tsx
@@ -3,14 +3,10 @@ import { metaStore } from "@dataware-tools/api-meta-store-client";
 import {
   ConfirmModal,
   ConfirmModalProps,
-  ErrorMessageProps,
-  ErrorMessage,
   Spacer,
-  extractErrorMessageFromFetchError,
 } from "@dataware-tools/app-common";
 import Box from "@mui/material/Box";
 import TextField from "@mui/material/TextField";
-import { useState } from "react";
 import {
   useForm,
   Controller,
@@ -22,13 +18,17 @@ import { useNavigate } from "react-router-dom";
 import { useRecoilValue } from "recoil";
 import { ElemCenteringFlexDiv } from "components/atoms/ElemCenteringFlexDiv";
 import { databasePaginateState } from "globalStates";
-import { useListDatabases, fetchMetaStore, APP_ROUTE } from "utils";
+import {
+  enqueueErrorToastForFetchError,
+  useListDatabases,
+  fetchMetaStore,
+  APP_ROUTE,
+} from "utils";
 
 type ConfirmInputType = { databaseId: string };
 type ValidateRuleType = ControllerProps["rules"];
 
 export type DatabaseDeleteModalPresentationProps = {
-  error?: ErrorMessageProps;
   formControl: Control<ConfirmInputType>;
   validateRules: Record<keyof ConfirmInputType, ValidateRuleType>;
   validateErrors: FieldErrors<ConfirmInputType>;
@@ -45,7 +45,6 @@ export type DatabaseDeleteModalProps = {
 };
 
 export const DatabaseDeleteModalPresentation = ({
-  error,
   databaseId,
   onClose,
   formControl,
@@ -60,36 +59,32 @@ export const DatabaseDeleteModalPresentation = ({
       title={`Are you sure you want to delete ${databaseId}?`}
       confirmMode="delete"
       body={
-        error ? (
-          <ErrorMessage {...error} />
-        ) : (
-          <ElemCenteringFlexDiv>
-            <Box component="span" sx={{ color: "error.main" }}>
-              Type "{databaseId}" to confirm:
-            </Box>
-            <Spacer direction="horizontal" size="1rem" />
-            <Controller
-              name="databaseId"
-              control={formControl}
-              rules={validateRules.databaseId}
-              render={({ field }) => {
-                return (
-                  <TextField
-                    {...field}
-                    error={Boolean(validateErrors.databaseId)}
-                    helperText={
-                      validateErrors.databaseId
-                        ? validateErrorMessages.databaseId[
-                            validateErrors.databaseId.type
-                          ]
-                        : undefined
-                    }
-                  />
-                );
-              }}
-            />
-          </ElemCenteringFlexDiv>
-        )
+        <ElemCenteringFlexDiv>
+          <Box component="span" sx={{ color: "error.main" }}>
+            Type "{databaseId}" to confirm:
+          </Box>
+          <Spacer direction="horizontal" size="1rem" />
+          <Controller
+            name="databaseId"
+            control={formControl}
+            rules={validateRules.databaseId}
+            render={({ field }) => {
+              return (
+                <TextField
+                  {...field}
+                  error={Boolean(validateErrors.databaseId)}
+                  helperText={
+                    validateErrors.databaseId
+                      ? validateErrorMessages.databaseId[
+                          validateErrors.databaseId.type
+                        ]
+                      : undefined
+                  }
+                />
+              );
+            }}
+          />
+        </ElemCenteringFlexDiv>
       }
       {...dialogProps}
     />
@@ -108,10 +103,6 @@ export const DatabaseDeleteModal = ({
     handleSubmit,
     formState: { errors: validateErrors },
   } = useForm<ConfirmInputType>();
-  const [error, setError] = useState<
-    DatabaseDeleteModalPresentationProps["error"] | undefined
-  >(undefined);
-
   const { mutate: listDatabaseMutate } = useListDatabases(getAccessToken, {
     page,
     perPage,
@@ -153,12 +144,10 @@ export const DatabaseDeleteModal = ({
         );
 
         if (deleteDatabaseError) {
-          const { reason, instruction } =
-            extractErrorMessageFromFetchError(deleteDatabaseError);
-          setError({
-            reason,
-            instruction,
-          });
+          enqueueErrorToastForFetchError(
+            "Failed to delete database",
+            deleteDatabaseError
+          );
           cancelCloseModal = true;
         } else if (deleteDatabaseRes) {
           listDatabaseMutate();
@@ -178,7 +167,6 @@ export const DatabaseDeleteModal = ({
 
   return (
     <DatabaseDeleteModalPresentation
-      error={error}
       validateErrors={validateErrors}
       validateErrorMessages={validateErrorMessages}
       validateRules={validateRules}

diff --git a/src/components/organisms/FileEditModal.tsx b/src/components/organisms/FileEditModal.tsx
@@ -11,6 +11,7 @@ import {
 } from "components/organisms/MetadataEditModal";
 import {
   compInputFields,
+  enqueueErrorToastForFetchError,
   fetchMetaStore,
   useGetConfig,
   useListFiles,
@@ -98,9 +99,10 @@ export const FileEditModal = ({
     );
 
     if (saveFileError) {
-      const { reason, instruction } =
-        extractErrorMessageFromFetchError(saveFileError);
-      setError({ reason, instruction });
+      enqueueErrorToastForFetchError(
+        "Failed to update file metadata",
+        saveFileError
+      );
       return false;
     }
 

diff --git a/src/components/organisms/FileList.tsx b/src/components/organisms/FileList.tsx
@@ -2,7 +2,6 @@ import { useAuth0 } from "@auth0/auth0-react";
 import { fileProvider } from "@dataware-tools/api-file-provider-client";
 import { metaStore } from "@dataware-tools/api-meta-store-client";
 import {
-  alert,
   API_ROUTE,
   confirm,
   ErrorMessage,
@@ -22,6 +21,7 @@ import {
   FilePreviewModalProps,
 } from "components/organisms/FilePreviewModal";
 import {
+  enqueueErrorToastForFetchError,
   useListFiles,
   fetchFileProvider,
   fetchMetaStore,
@@ -152,9 +152,10 @@ export const FileList = ({
     );
 
     if (deleteFileEntityError) {
-      await alert({
-        title: `Error occur! : ${JSON.stringify(deleteFileEntityError)}`,
-      });
+      enqueueErrorToastForFetchError(
+        "Failed to delete file",
+        deleteFileEntityError
+      );
       return;
     }
 
@@ -168,9 +169,10 @@ export const FileList = ({
     );
 
     if (deleteFileMetaError) {
-      await alert({
-        title: `Error occur! : ${JSON.stringify(deleteFileMetaError)}`,
-      });
+      enqueueErrorToastForFetchError(
+        "Failed to delete metdata of the file",
+        deleteFileMetaError
+      );
       return;
     }
 
@@ -200,7 +202,7 @@ export const FileList = ({
           window.open(API_ROUTE.FILE.BASE + "/download/" + res.token, "_blank");
         })
         .catch((e) => {
-          alert({ title: "Failed to download the file: " + e });
+          enqueueErrorToastForFetchError("Failed to download file", e);
         });
     });
   };

diff --git a/src/components/organisms/MetadataEditModal.tsx b/src/components/organisms/MetadataEditModal.tsx
@@ -241,7 +241,6 @@ export const MetadataEditModal = ({
 
       setIsSaving(false);
       if (!isSubmitSucceed) {
-        await alert({ title: "save failed. please retry saving" });
         return;
       }
     }

diff --git a/src/components/organisms/RecordDetailModal.tsx b/src/components/organisms/RecordDetailModal.tsx
@@ -16,8 +16,6 @@ import {
   DialogTabBarProps,
   ErrorMessageProps,
   confirm,
-  alert,
-  extractErrorMessageFromFetchError,
 } from "@dataware-tools/app-common";
 import EditIcon from "@mui/icons-material/Edit";
 import UploadIcon from "@mui/icons-material/Upload";
@@ -33,6 +31,7 @@ import {
 } from "components/organisms/RecordEditModal";
 import { RecordInfo } from "components/organisms/RecordInfo";
 import {
+  enqueueErrorToastForFetchError,
   useGetRecord,
   useListFiles,
   uploadFileToFileProvider,
@@ -234,10 +233,7 @@ export const RecordDetailModal = ({
     );
 
     if (createFileError) {
-      await alert({
-        title: "Fail to upload",
-        body: extractErrorMessageFromFetchError(createFileError).reason,
-      });
+      enqueueErrorToastForFetchError("Failed to upload file", createFileError);
       setIsAddingFile(false);
       return;
     }

diff --git a/src/components/organisms/RecordEditModal.tsx b/src/components/organisms/RecordEditModal.tsx
@@ -13,6 +13,7 @@ import {
 import { recordPaginateState } from "globalStates";
 import {
   compInputFields,
+  enqueueErrorToastForFetchError,
   fetchMetaStore,
   useGetRecord,
   useGetConfig,
@@ -118,9 +119,7 @@ export const RecordEditModal = ({
         );
 
     if (saveRecordError) {
-      const { reason, instruction } =
-        extractErrorMessageFromFetchError(saveRecordError);
-      setError({ reason, instruction });
+      enqueueErrorToastForFetchError("Failed to save record", saveRecordError);
       return false;
     }
 

diff --git a/src/components/organisms/RecordList.tsx b/src/components/organisms/RecordList.tsx
@@ -20,6 +20,7 @@ import { useRecoilState } from "recoil";
 import { RecordDetailModal } from "components/organisms/RecordDetailModal";
 import { useIsActionPermitted, recordPaginateState } from "globalStates";
 import {
+  enqueueErrorToastForFetchError,
   useGetConfig,
   fetchMetaStore,
   useListRecords,
@@ -143,7 +144,7 @@ export const RecordList = ({
       });
       listRecordsMutate(newRecordList, false);
 
-      const [deleteRecordRes, deleteRecordError] = await fetchMetaStore(
+      const [, deleteRecordError] = await fetchMetaStore(
         getAccessToken,
         metaStore.RecordService.deleteRecord,
         {
@@ -153,12 +154,13 @@ export const RecordList = ({
       );
 
       if (deleteRecordError) {
-        const { reason, instruction } =
-          extractErrorMessageFromFetchError(deleteRecordError);
-        setError({ reason, instruction });
-      } else if (deleteRecordRes) {
-        listRecordsMutate();
+        enqueueErrorToastForFetchError(
+          "Failed to delete record",
+          deleteRecordError
+        );
       }
+
+      listRecordsMutate();
     }
   };
-Original file line number
+Diff line change
@@ Expand Up / @@ -241,7 +241,6 @@ export const MetadataEditModal = ({ @@
           setIsSaving(false);
           if (!isSubmitSucceed) {
-            await alert({ title: "save failed. please retry saving" });
             return;
           }
         }
@@ Expand Down @@