refactor: use useGlobalAnnouncement

Author: TheMaskedTurtle

src/components/App/app-top-bar.tsx

@@ -15,8 +15,8 @@ import {
     useState,
 } from 'react';
 import { capitalize, Tab, Tabs, useTheme } from '@mui/material';
-import { Groups, ManageAccounts, PeopleAlt, NotificationImportant } from '@mui/icons-material';
-import { fetchAppsMetadata, logout, Metadata, TopBar, useNotificationsListener } from '@gridsuite/commons-ui';
+import { Groups, ManageAccounts, NotificationImportant, PeopleAlt } from '@mui/icons-material';
+import { fetchAppsMetadata, logout, Metadata, TopBar, useGlobalAnnouncement } from '@gridsuite/commons-ui';
 import { useParameterState } from '../parameters';
 import { APP_NAME, PARAM_LANGUAGE, PARAM_THEME } from '../../utils/config-params';
 import { NavLink, type To, useMatches, useNavigate } from 'react-router';
@@ -29,7 +29,6 @@ import AppPackage from '../../../package.json';
 import { AppState } from '../../redux/reducer';
 import { AppDispatch } from '../../redux/store';
 import { MainPaths } from '../../routes/utils';
-import { NOTIFICATIONS_URL_KEYS } from '../../utils/notifications-provider';
 
 const tabs = new Map<MainPaths, ReactElement>([
     [
@@ -112,31 +111,7 @@ const AppTopBar: FunctionComponent = () => {
 
     const [appsAndUrls, setAppsAndUrls] = useState<Metadata[]>([]);
 
-    const [announcementInfos, setAnnouncementInfos] = useState<AnnouncementProps | null>(null);
-
-    useNotificationsListener(NOTIFICATIONS_URL_KEYS.GLOBAL_CONFIG, {
-        listenerCallbackMessage: (event) => {
-            const eventData = JSON.parse(event.data);
-            if (eventData.headers.messageType === 'announcement') {
-                if (
-                    announcementInfos != null &&
-                    announcementInfos.announcementId === eventData.headers.announcementId
-                ) {
-                    // If we receive a notification for an announcement that we already received we ignore it
-                    return;
-                }
-                const announcement = {
-                    announcementId: eventData.headers.announcementId,
-                    message: eventData.payload,
-                    severity: eventData.headers.severity,
-                    duration: eventData.headers.duration,
-                } as AnnouncementProps;
-                setAnnouncementInfos(announcement);
-            } else if (eventData.headers.messageType === 'cancelAnnouncement') {
-                setAnnouncementInfos(null);
-            }
-        },
-    });
+    const announcementInfos = useGlobalAnnouncement(user);
 
     useEffect(() => {
         if (user !== null) {

src/pages/banners/add-announcement-form.tsx

@@ -98,7 +98,7 @@ const AddAnnouncementForm: FunctionComponent<AddAnnouncementProps> = ({ onAnnoun
                             {...register('startDate')}
                             name={START_DATE}
                             label={intl.formatMessage({ id: 'banners.table.startDate' })}
-                            onChange={(newValue) => setValue('startDate', newValue)}
+                            onChange={(newValue) => setValue('startDate', newValue?.toISOString() ?? '')}
                         />
                     </LocalizationProvider>
                 </Grid>
@@ -108,7 +108,7 @@ const AddAnnouncementForm: FunctionComponent<AddAnnouncementProps> = ({ onAnnoun
                             {...register('endDate')}
                             name={END_DATE}
                             label={intl.formatMessage({ id: 'banners.table.endDate' })}
-                            onChange={(newValue) => setValue('endDate', newValue)}
+                            onChange={(newValue) => setValue('endDate', newValue?.toISOString() ?? '')}
                         />
                     </LocalizationProvider>
                 </Grid>

src/services/user-admin.ts

@@ -306,7 +306,7 @@ export type Announcement = {
 export function addAnnouncement(announcement: Announcement): Promise<void> {
     console.debug(`Creating announcement ...`);
     return backendFetch(
-        `${USER_ADMIN_URL}/announcements/${announcement.id}?startDate=${announcement.startDate}&endDate=${announcement.endDate}&severity=${announcement.severity}`,
+        `${USER_ADMIN_URL}/announcements?startDate=${announcement.startDate}&endDate=${announcement.endDate}&severity=${announcement.severity}`,
         {
             method: 'post',
             headers: {

src/utils/notifications-provider.ts

@@ -10,13 +10,7 @@ import { useSelector } from 'react-redux';
 import type { AppState } from '../redux/reducer';
 import { getUrlWithToken, getWsBase } from './api-ws';
 import { APP_NAME } from './config-params';
-
-export enum NOTIFICATIONS_URL_KEYS {
-    CONFIG = 'CONFIG',
-    GLOBAL_CONFIG = 'GLOBAL_CONFIG',
-}
-
-export const PREFIX_CONFIG_NOTIFICATION_WS = '/config-notification';
+import { NotificationsUrlKeys, PREFIX_CONFIG_NOTIFICATION_WS } from '@gridsuite/commons-ui';
 
 export function useNotificationsUrlGenerator() {
     // The websocket API doesn't allow relative urls
@@ -28,17 +22,17 @@ export function useNotificationsUrlGenerator() {
     return useMemo(
         () =>
             ({
-                [NOTIFICATIONS_URL_KEYS.CONFIG]: tokenId
+                [NotificationsUrlKeys.CONFIG]: tokenId
                     ? getUrlWithToken(
                           `${wsBase}${PREFIX_CONFIG_NOTIFICATION_WS}/notify?${new URLSearchParams({
                               appName: APP_NAME,
                           })}`
                       )
                     : undefined,
-                [NOTIFICATIONS_URL_KEYS.GLOBAL_CONFIG]: tokenId
+                [NotificationsUrlKeys.GLOBAL_CONFIG]: tokenId
                     ? getUrlWithToken(`${wsBase}${PREFIX_CONFIG_NOTIFICATION_WS}/global`)
                     : undefined,
-            }) satisfies Record<NOTIFICATIONS_URL_KEYS, string | undefined>,
+            }) satisfies { [Key in NotificationsUrlKeys]?: string | undefined },
         [wsBase, tokenId]
     );
 }