Fix/is 276 toast rerender (#1333)

* fix: refactor toast components * chore: update id for all toasts
isomerpages · Jul 5, 2023 · cb03b07 · cb03b07
1 parent d1d373d
commit cb03b07
Show file tree

Hide file tree

Showing 49 changed files with 125 additions and 16 deletions.
diff --git a/src/components/CollaboratorModal/components/MainSubmodal.tsx b/src/components/CollaboratorModal/components/MainSubmodal.tsx
@@ -174,7 +174,10 @@ export const MainSubmodal = ({
 
   useEffect(() => {
     if (addCollaboratorSuccess) {
-      successToast({ description: "Collaborator added successfully" })
+      successToast({
+        id: "add-collaborator",
+        description: "Collaborator added successfully",
+      })
       collaboratorFormMethods.reset()
     }
   }, [addCollaboratorSuccess, collaboratorFormMethods, successToast])

diff --git a/src/components/Header/ContactModal/ContactVerificationModal.tsx b/src/components/Header/ContactModal/ContactVerificationModal.tsx
@@ -45,6 +45,7 @@ export const ContactVerificationModal = ({
   const handleSendOtp = async ({ mobile: mobileInput }: ContactProps) => {
     await sendContactOtp({ mobile: mobileInput }) // Non-2xx responses will be caught by axios and thrown as error
     successToast({
+      id: "send-otp-success",
       description: `OTP sent to ${mobileInput}`,
     })
     setMobile(mobileInput)
@@ -54,6 +55,7 @@ export const ContactVerificationModal = ({
     await verifyContactOtp({ mobile, otp })
     onClose()
     successToast({
+      id: "verify-otp-success",
       description: `Successfully changed contact number to ${mobile}!`,
     })
     verifyLoginAndGetUserDetails()

diff --git a/src/components/MediaCreationModal/MediaCreationModal.jsx b/src/components/MediaCreationModal/MediaCreationModal.jsx
@@ -37,6 +37,7 @@ export const MediaCreationModal = ({
     const media = event.target?.files[0] || ""
     if (media.size > MEDIA_FILE_MAX_SIZE) {
       errorToast({
+        id: "create-media-size-error",
         description: "File size exceeds 5MB. Please upload a different file.",
       })
     } else {

diff --git a/src/hooks/collaboratorHooks/useDeleteCollaboratorHook.ts b/src/hooks/collaboratorHooks/useDeleteCollaboratorHook.ts
@@ -26,15 +26,20 @@ export const useDeleteCollaboratorHook = (
           SITE_DASHBOARD_COLLABORATORS_KEY,
           siteName,
         ])
-        successToast({ description: "Collaborator removed successfully" })
+        successToast({
+          id: "delete-collaborator-success",
+          description: "Collaborator removed successfully",
+        })
       },
       onError: (err) => {
         if (err?.response?.status === 422) {
           errorToast({
+            id: "delete-last-collaborator-error",
             description: `You can't be removed, because sites need at least one Admin`,
           })
         } else {
           errorToast({
+            id: "delete-collaborator-error",
             description: `Could not delete site member. ${DEFAULT_RETRY_MSG}`,
           })
         }

diff --git a/src/hooks/collaboratorHooks/useGetCollaboratorRoleHook.ts b/src/hooks/collaboratorHooks/useGetCollaboratorRoleHook.ts
@@ -19,6 +19,7 @@ export const useGetCollaboratorRoleHook = (
     {
       onError: () => {
         errorToast({
+          id: "get-collaborator-role-error",
           description: `Your collaborator role could not be retrieved. ${DEFAULT_RETRY_MSG}`,
         })
       },

diff --git a/src/hooks/collaboratorHooks/useListCollaboratorsHook.ts b/src/hooks/collaboratorHooks/useListCollaboratorsHook.ts
@@ -33,6 +33,7 @@ export const useListCollaborators = (
           setRedirectToPage("/sites")
         } else {
           errorToast({
+            id: "get-collaborators-error",
             description: getAxiosErrorMessage(err, EXCEPTION_ERROR_MESSAGE),
           })
         }

diff --git a/src/hooks/collectionHooks/useCollectionHook.jsx b/src/hooks/collectionHooks/useCollectionHook.jsx
@@ -39,7 +39,8 @@ export function useCollectionHook(params) {
         setRedirectToNotFound(params.siteName)
       } else {
         errorToast({
-          description: `There was a problem trying to load your page. ${DEFAULT_RETRY_MSG}`,
+          id: "get-collection-error",
+          description: `There was a problem trying to load your directory. ${DEFAULT_RETRY_MSG}`,
         })
       }
     },

diff --git a/src/hooks/directoryHooks/contactUsHooks/useGetContactUsHook.ts b/src/hooks/directoryHooks/contactUsHooks/useGetContactUsHook.ts
@@ -17,6 +17,7 @@ export const useGetContactUsHook = (
     {
       onError: (err: AxiosError) => {
         errorToast({
+          id: "get-contact-us-error",
           description: `Your Contact Us page details could not be retrieved. ${DEFAULT_RETRY_MSG}. Error: ${err.response?.data.error.message}`,
         })
       },

diff --git a/src/hooks/directoryHooks/contactUsHooks/useUpdateContactUsHook.ts b/src/hooks/directoryHooks/contactUsHooks/useUpdateContactUsHook.ts
@@ -37,10 +37,14 @@ export const useUpdateContactUsHook = (
     {
       onSuccess: () => {
         queryClient.invalidateQueries([GET_CONTACT_US_KEY, siteName])
-        successToast({ description: "Contact Us page updated successfully" })
+        successToast({
+          id: "update-homepage-success",
+          description: "Contact Us page updated successfully",
+        })
       },
       onError: (err: AxiosError) => {
         errorToast({
+          id: "update-homepage-error",
           description: `Could not update Contact Us page. ${DEFAULT_RETRY_MSG}. Error: ${err.response?.data.error.message}`,
         })
       },

diff --git a/src/hooks/directoryHooks/useCreateDirectoryHook.jsx b/src/hooks/directoryHooks/useCreateDirectoryHook.jsx
@@ -32,6 +32,7 @@ export function useCreateDirectoryHook(params, queryParams) {
       retry: false,
       onError: () => {
         errorToast({
+          id: "create-directory-error",
           description: `A new directory could not be created. ${DEFAULT_RETRY_MSG}`,
         })
         if (queryParams && queryParams.onError) queryParams.onError()

diff --git a/src/hooks/directoryHooks/useDeleteDirectoryHook.jsx b/src/hooks/directoryHooks/useDeleteDirectoryHook.jsx
@@ -24,12 +24,14 @@ export function useDeleteDirectoryHook(params, queryParams) {
     ...queryParams,
     onError: () => {
       errorToast({
+        id: "delete-directory-error",
         description: `Your directory could not be deleted. ${DEFAULT_RETRY_MSG}`,
       })
       if (queryParams && queryParams.onError) queryParams.onError()
     },
     onSuccess: () => {
       successToast({
+        id: "delete-directory-success",
         description: `Successfully deleted directory!`,
       })
       if (params.mediaDirectoryName)

diff --git a/src/hooks/directoryHooks/useGetDirectoryHook.jsx b/src/hooks/directoryHooks/useGetDirectoryHook.jsx
@@ -36,6 +36,7 @@ export function useGetDirectoryHook(params, queryParams) {
           setRedirectToNotFound()
         } else {
           errorToast({
+            id: "get-directory-error",
             description: `There was a problem retrieving directory contents. ${DEFAULT_RETRY_MSG}`,
           })
         }

diff --git a/src/hooks/directoryHooks/useGetFoldersAndPages.ts b/src/hooks/directoryHooks/useGetFoldersAndPages.ts
@@ -35,6 +35,7 @@ export const useGetFoldersAndPages = (
           setRedirectToNotFound()
         } else {
           errorToast({
+            id: "get-folder-pages-error",
             description: `There was a problem retrieving directory contents. ${DEFAULT_RETRY_MSG}`,
           })
         }

diff --git a/src/hooks/directoryHooks/useGetMediaFolders.ts b/src/hooks/directoryHooks/useGetMediaFolders.ts
@@ -35,6 +35,7 @@ export const useGetMediaFolders = (
           setRedirectToNotFound()
         } else {
           errorToast({
+            id: "get-media-directory-error",
             description: `There was a problem retrieving directory contents. ${DEFAULT_RETRY_MSG}`,
           })
         }

diff --git a/src/hooks/directoryHooks/useGetResourceCategory.ts b/src/hooks/directoryHooks/useGetResourceCategory.ts
@@ -35,6 +35,7 @@ export const useGetResourceCategory = (
           setRedirectToNotFound()
         } else {
           errorToast({
+            id: "get-resource-category-error",
             description: `There was a problem retrieving directory contents. ${DEFAULT_RETRY_MSG}`,
           })
         }

diff --git a/src/hooks/directoryHooks/useGetResourceRoom.ts b/src/hooks/directoryHooks/useGetResourceRoom.ts
@@ -32,6 +32,7 @@ export const useGetResourceRoom = (
           setRedirectToNotFound()
         } else {
           errorToast({
+            id: "get-resource-room-error",
             description: `There was a problem retrieving directory contents. ${DEFAULT_RETRY_MSG}`,
           })
         }

diff --git a/src/hooks/directoryHooks/useGetWorkspacePages.ts b/src/hooks/directoryHooks/useGetWorkspacePages.ts
@@ -33,6 +33,7 @@ export const useGetWorkspacePages = (
           setRedirectToNotFound()
         } else {
           errorToast({
+            id: "get-workspace-pages-error",
             description: `There was a problem retrieving ungrouped pages. ${DEFAULT_RETRY_MSG}`,
           })
         }

diff --git a/src/hooks/directoryHooks/useReorderDirectoryHook.jsx b/src/hooks/directoryHooks/useReorderDirectoryHook.jsx
@@ -18,13 +18,15 @@ export function useReorderDirectoryHook(params, queryParams) {
     ...queryParams,
     onError: () => {
       errorToast({
+        id: "reorder-directory-error",
         description: `Your directory order could not be saved. ${DEFAULT_RETRY_MSG}`,
       })
       if (queryParams && queryParams.onError) queryParams.onError()
     },
     onSuccess: () => {
       queryClient.invalidateQueries([DIR_CONTENT_KEY, { ...params }])
       successToast({
+        id: "reorder-directory-success",
         description: `Successfully updated directory order!`,
       })
       if (queryParams && queryParams.onSuccess) queryParams.onSuccess()

diff --git a/src/hooks/directoryHooks/useUpdateDirectoryHook.jsx b/src/hooks/directoryHooks/useUpdateDirectoryHook.jsx
@@ -26,6 +26,7 @@ export function useUpdateDirectoryHook(params, queryParams) {
       ...queryParams,
       onError: () => {
         errorToast({
+          id: "update-directory-error",
           description: `Your directory settings could not be saved. ${DEFAULT_RETRY_MSG}`,
         })
         if (queryParams && queryParams.onError) queryParams.onError()
@@ -58,6 +59,7 @@ export function useUpdateDirectoryHook(params, queryParams) {
             },
           ])
         successToast({
+          id: "update-directory-success",
           description: `Successfully updated directory settings!`,
         })
         if (queryParams && queryParams.onSuccess) queryParams.onSuccess()

diff --git a/src/hooks/homepageHooks/useGetHomepageHook.ts b/src/hooks/homepageHooks/useGetHomepageHook.ts
@@ -17,6 +17,7 @@ export const useGetHomepageHook = (
     {
       onError: (err: AxiosError) => {
         errorToast({
+          id: "get-homepage-error",
           description: `Your homepage could not be retrieved. ${DEFAULT_RETRY_MSG}. Error: ${err.response?.data.error.message}`,
         })
       },

diff --git a/src/hooks/homepageHooks/useUpdateHomepageHook.ts b/src/hooks/homepageHooks/useUpdateHomepageHook.ts
@@ -20,10 +20,14 @@ export const useUpdateHomepageHook = (
     {
       onSuccess: () => {
         queryClient.invalidateQueries([GET_HOMEPAGE_KEY, siteName])
-        successToast({ description: "Homepage updated successfully" })
+        successToast({
+          id: "update-homepage-success",
+          description: "Homepage updated successfully",
+        })
       },
       onError: (err: AxiosError) => {
         errorToast({
+          id: "update-homepage-error",
           description: `Could not update homepage. ${DEFAULT_RETRY_MSG}. Error: ${err.response?.data.error.message}`,
         })
       },

diff --git a/src/hooks/mediaHooks/useCreateMediaHook.jsx b/src/hooks/mediaHooks/useCreateMediaHook.jsx
@@ -26,6 +26,7 @@ export function useCreateMediaHook(params, queryParams) {
       ...queryParams,
       onSuccess: ({ data }) => {
         successToast({
+          id: "upload-media-file-success",
           description: `Media file successfully uploaded!`,
         })
         const newMedia = {
@@ -47,6 +48,7 @@ export function useCreateMediaHook(params, queryParams) {
       },
       onError: () => {
         errorToast({
+          id: "create-media-file-error",
           description: `A new media file could not be created. ${DEFAULT_RETRY_MSG}`,
         })
         if (queryParams && queryParams.onError) queryParams.onError()

diff --git a/src/hooks/mediaHooks/useDeleteMediaHook.jsx b/src/hooks/mediaHooks/useDeleteMediaHook.jsx
@@ -19,12 +19,14 @@ export function useDeleteMediaHook(params, queryParams) {
     ...queryParams,
     onError: () => {
       errorToast({
+        id: "delete-media-file-error",
         description: `Your media file could not be deleted successfully. ${DEFAULT_RETRY_MSG}`,
       })
       if (queryParams && queryParams.onError) queryParams.onError()
     },
     onSuccess: () => {
       successToast({
+        id: "delete-media-file-success",
         description: `Successfully deleted media file!`,
       })
       if (params.mediaRoom || params.mediaDirectoryName)

diff --git a/src/hooks/mediaHooks/useGetMediaHook.jsx b/src/hooks/mediaHooks/useGetMediaHook.jsx
@@ -20,6 +20,7 @@ export function useGetMediaHook(params, queryParams) {
       retry: false,
       onError: () => {
         errorToast({
+          id: "get-media-file-error",
           description: `The media file could not be retrieved. ${DEFAULT_RETRY_MSG}`,
         })
         if (queryParams && queryParams.onError) queryParams.onError()

diff --git a/src/hooks/mediaHooks/useUpdateMediaHook.jsx b/src/hooks/mediaHooks/useUpdateMediaHook.jsx
@@ -30,6 +30,7 @@ export function useUpdateMediaHook(params, queryParams) {
       },
       onSuccess: ({ data }) => {
         successToast({
+          id: "update-media-file-success",
           description: `Successfully updated media file!`,
         })
         if (params.mediaRoom || params.mediaDirectoryName)
@@ -59,6 +60,7 @@ export function useUpdateMediaHook(params, queryParams) {
       onError: (err) => {
         if (err.response.status !== 409)
           errorToast({
+            id: "update-media-file-error",
             description: `Your media file could not be updated. ${DEFAULT_RETRY_MSG}`,
           })
         if (queryParams && queryParams.onError) queryParams.onError(err)

diff --git a/src/hooks/moveHooks/useMoveHook.jsx b/src/hooks/moveHooks/useMoveHook.jsx
@@ -23,21 +23,25 @@ export function useMoveHook(params, queryParams) {
     onError: (err) => {
       if (err.response.status === 409)
         errorToast({
+          id: "move-file-duplicate-error",
           description: `A file of the same name exists in the folder you are moving to. Please rename your file before moving.`,
         })
       else
         errorToast({
+          id: "move-file-generic-error",
           description: `Your file could not be moved. ${DEFAULT_RETRY_MSG}`,
         })
       if (queryParams && queryParams.onError) queryParams.onError()
     },
     onSuccess: (resp) => {
       if (!resp)
         successToast({
+          id: "move-file-present-success",
           description: `File is already in this folder`,
         })
       else
         successToast({
+          id: "move-file-success",
           description: `Successfully moved file`,
         })
       if (params.mediaRoom || params.collectionName)

diff --git a/src/hooks/navHooks/useUpdateNavHook.ts b/src/hooks/navHooks/useUpdateNavHook.ts
@@ -40,12 +40,16 @@ export const useUpdateNavHook = (
     {
       onSuccess: () => {
         queryClient.invalidateQueries([GET_NAV_KEY, siteName])
-        successToast({ description: "Navigation bar updated successfully" })
+        successToast({
+          id: "update-nav-success",
+          description: "Navigation bar updated successfully",
+        })
         // TODO: remove once we have v2 endpoints to support get nav bar details
         window.location.reload()
       },
       onError: (err: AxiosError) => {
         errorToast({
+          id: "update-nav-error",
           description: `Could not update navigation bar. ${DEFAULT_RETRY_MSG}. Error: ${err.response?.data.error.message}`,
         })
       },

diff --git a/src/hooks/notificationHooks/useGetAllNotifications.ts b/src/hooks/notificationHooks/useGetAllNotifications.ts
@@ -19,6 +19,7 @@ export const useGetAllNotifications = (
       enabled: false, // We only manually trigger this query
       onError: () => {
         errorToast({
+          id: "get-all-notifications-error",
           description: `Your notifications could not be retrieved. ${DEFAULT_RETRY_MSG}`,
         })
       },

diff --git a/src/hooks/notificationHooks/useGetNotifications.ts b/src/hooks/notificationHooks/useGetNotifications.ts
@@ -19,6 +19,7 @@ export const useGetNotifications = (
       enabled: false, // Manually triggered
       onError: () => {
         errorToast({
+          id: "get-notifications-error",
           description: `Your notifications could not be retrieved. ${DEFAULT_RETRY_MSG}`,
         })
       },

diff --git a/src/hooks/pageHooks/useCreatePageHook.jsx b/src/hooks/pageHooks/useCreatePageHook.jsx
@@ -56,6 +56,7 @@ export function useCreatePageHook(params, queryParams) {
       },
       onError: (err) => {
         errorToast({
+          id: "create-page-error",
           description: `A new page could not be created. ${getAxiosErrorMessage(
             err
           )}`,

diff --git a/src/hooks/pageHooks/useDeletePageHook.jsx b/src/hooks/pageHooks/useDeletePageHook.jsx
@@ -23,12 +23,14 @@ export function useDeletePageHook(params, queryParams) {
     ...queryParams,
     onError: () => {
       errorToast({
+        id: "delete-page-error",
         description: `Your page could not be deleted successfully. ${DEFAULT_RETRY_MSG}`,
       })
       if (queryParams && queryParams.onError) queryParams.onError()
     },
     onSuccess: () => {
       successToast({
+        id: "delete-page-success",
         description: `Successfully deleted page!`,
       })
       if (params.collectionName)

diff --git a/src/hooks/pageHooks/useGetPageHook.jsx b/src/hooks/pageHooks/useGetPageHook.jsx
@@ -20,6 +20,7 @@ export function useGetPageHook(params, queryParams) {
       retry: false,
       onError: () => {
         errorToast({
+          id: "get-page-error",
           description: `The page data could not be retrieved. ${DEFAULT_RETRY_MSG}`,
         })
         if (queryParams && queryParams.onError) queryParams.onError()

diff --git a/src/hooks/pageHooks/useUpdatePageHook.jsx b/src/hooks/pageHooks/useUpdatePageHook.jsx
@@ -53,13 +53,15 @@ export function useUpdatePageHook(params, queryParams) {
             { siteName: params.siteName, isUnlinked: true },
           ]) // invalidates unlinked pages
         successToast({
+          id: "update-resource-room-name-success",
           description: `Successfully updated page!`,
         })
         if (queryParams && queryParams.onSuccess) queryParams.onSuccess()
       },
       onError: (err) => {
         if (err.response.status !== 409) {
           errorToast({
+            id: "update-page-error",
             description: `Your page could not be updated. ${getAxiosErrorMessage(
               err
             )}`,