Use notication hook and unify config options

TACC-Cloud · Feb 13, 2025 · f11e01d · f11e01d
1 parent 93fc17c
commit f11e01d
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 43 deletions.
diff --git a/react/src/components/AssetsPanel/AssetsPanel.tsx b/react/src/components/AssetsPanel/AssetsPanel.tsx
@@ -96,21 +96,13 @@ const AssetsPanel: React.FC<Props> = ({
       {
         onSuccess: () => {
           setIsModalOpen(false);
-          notification.open({
-            type: 'success',
-            message: 'Success!',
+          notification.success({
             description: 'Import started!',
-            placement: 'bottomLeft',
-            closable: false,
           });
         },
         onError: () => {
-          notification.open({
-            type: 'error',
-            message: 'Error!',
+          notification.error({
             description: 'Import failed! Try again?',
-            placement: 'bottomLeft',
-            closable: false,
           });
         },
       }

diff --git a/react/src/components/DeleteMapModal/DeleteMapModal.tsx b/react/src/components/DeleteMapModal/DeleteMapModal.tsx
@@ -38,9 +38,7 @@ const DeleteMapModal = ({
           parentToggle();
           navigate(ROUTES.MAIN);
           notification.success({
-            message: 'Success',
             description: 'Your map was successfully deleted.',
-            placement: 'bottomLeft',
           });
         },
       }

diff --git a/react/src/components/ManageMapProjectPanel/ManageMapProjectPanel.tsx b/react/src/components/ManageMapProjectPanel/ManageMapProjectPanel.tsx
@@ -6,7 +6,7 @@ import { Project, ProjectRequest } from '@hazmapper/types';
 import MapTabContent from './MapTabContent';
 import MembersTabContent from './MembersTabContent';
 import PublicTabContent from './PublicTabContent';
-import { useUpdateProjectInfo } from '@hazmapper/hooks';
+import { useUpdateProjectInfo, useNotification } from '@hazmapper/hooks';
 import SaveTabContent from './SaveTabContent';
 
 interface ManageMapProjectModalProps {
@@ -17,7 +17,7 @@ const ManageMapProjectPanel: React.FC<ManageMapProjectModalProps> = ({
   project: activeProject,
 }) => {
   const [activeKey, setActiveKey] = useState('1');
-  const [updateApi, contextHolder] = notification.useNotification();
+  const notification = useNotification();
 
   const { mutate, isPending } = useUpdateProjectInfo();
 
@@ -30,21 +30,13 @@ const ManageMapProjectPanel: React.FC<ManageMapProjectModalProps> = ({
 
     mutate(newData, {
       onSuccess: () => {
-        updateApi.open({
-          type: 'success',
-          message: 'Success!',
+        notification.success({
           description: 'Your project was successfully updated.',
-          placement: 'bottomLeft',
-          closable: false,
         });
       },
       onError: () => {
-        updateApi.open({
-          type: 'error',
-          message: 'Error!',
+        notification.error({
           description: 'There was an error updating your project.',
-          placement: 'bottomLeft',
-          closable: false,
         });
       },
     });
@@ -99,7 +91,6 @@ const ManageMapProjectPanel: React.FC<ManageMapProjectModalProps> = ({
 
   return (
     <Flex vertical className={styles.root}>
-      {contextHolder}
       <Tabs
         type="card"
         size="small"

diff --git a/react/src/context/NotificationProvider.tsx b/react/src/context/NotificationProvider.tsx
@@ -2,12 +2,15 @@ import React from 'react';
 import { notification } from 'antd';
 import type { ArgsProps } from 'antd/es/notification';
 
+// takes antd's ArgProps or just a descxriptino and optional message
+type NotificationConfig = ArgsProps | { description: string; message?: string };
+
 type NotificationAPI = {
-  success: (config: ArgsProps) => void;
-  error: (config: ArgsProps) => void;
-  info: (config: ArgsProps) => void;
-  warning: (config: ArgsProps) => void;
-  open: (config: ArgsProps) => void;
+  success: (config: NotificationConfig) => void;
+  error: (config: NotificationConfig) => void;
+  info: (config: NotificationConfig) => void;
+  warning: (config: NotificationConfig) => void;
+  open: (config: NotificationConfig) => void;
 };
 
 // Create context with default value and proper typing
@@ -24,16 +27,25 @@ export const NotificationProvider: React.FC<{
 }> = ({ children }) => {
   const [api, contextHolder] = notification.useNotification();
 
-  const notificationApi = React.useMemo(
-    () => ({
-      success: (config) => api.success(config),
-      error: (config) => api.error(config),
-      info: (config) => api.info(config),
-      warning: (config) => api.warning(config),
-      open: (config) => api.open(config),
-    }),
-    [api]
-  );
+  const notificationApi: NotificationAPI = React.useMemo(() => {
+    const defaultProps: Partial<ArgsProps> = {
+      placement: 'bottomLeft',
+      closable: false,
+    };
+
+    return {
+      success: (config) =>
+        api.success({ message: 'Success', ...defaultProps, ...config }),
+      error: (config) =>
+        api.error({ message: 'Error', ...defaultProps, ...config }),
+      info: (config) =>
+        api.info({ message: 'Info', ...defaultProps, ...config }),
+      warning: (config) =>
+        api.warning({ message: 'Warning', ...defaultProps, ...config }),
+      open: (config) =>
+        api.open({ message: 'Unknown', ...defaultProps, ...config }),
+    };
+  }, [api]);
 
   return (
     <NotificationContext.Provider value={notificationApi}>

diff --git a/react/src/hooks/notifications/useGeoapiNotificationsPolling.ts b/react/src/hooks/notifications/useGeoapiNotificationsPolling.ts
@@ -44,10 +44,8 @@ export const useGeoapiNotificationsPolling = () => {
       recentNotifications.forEach((note) => {
         notification.open({
           type: note.status,
-          message: 'Error!',
+          message: `${note.status[0].toUpperCase()}${note.status.slice(1)}!`,
           description: note.message,
-          placement: 'bottomLeft',
-          closable: false,
         });
       });