diff --git a/react/src/components/AssetsPanel/AssetsPanel.tsx b/react/src/components/AssetsPanel/AssetsPanel.tsx index d13d3956..e6e6ba3c 100644 --- a/react/src/components/AssetsPanel/AssetsPanel.tsx +++ b/react/src/components/AssetsPanel/AssetsPanel.tsx @@ -96,21 +96,13 @@ const AssetsPanel: React.FC = ({ { 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 index 6160ec44..3e5f2ca2 100644 --- 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 index f9d20686..c0567db4 100644 --- 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 = ({ 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 = ({ 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 = ({ return ( - {contextHolder} 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 = { + 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 ( diff --git a/react/src/hooks/notifications/useGeoapiNotificationsPolling.ts b/react/src/hooks/notifications/useGeoapiNotificationsPolling.ts index 58a8a6d2..d98d5134 100644 --- 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, }); });