Notification center updates

src/events/notification-center/NotificationCenterAlertEvent.ts

@@ -0,0 +1,34 @@
+import { NitroEvent } from 'nitro-renderer';
+
+export class NotificationCenterAlertEvent extends NitroEvent
+{
+    public static HOTEL_ALERT: string = 'NCAE_HOTEL_ALERT';
+
+    private _message: string[];
+    private _clickUrl: string;
+    private _headerText: string;
+
+    constructor(type: string, message: string[], clickUrl = null, headerText = null)
+    {
+        super(type);
+
+        this._message = message;
+        this._clickUrl = clickUrl;
+        this._headerText = headerText;
+    }
+
+    public get message(): string[]
+    {
+        return this._message;
+    }
+
+    public get clickUrl(): string
+    {
+        return this._clickUrl;
+    }
+
+    public get headerText(): string
+    {
+        return this._headerText;
+    }
+}

src/events/notification-center/index.ts

@@ -1,2 +1,3 @@
 export * from './NotificationCenterAddNotificationEvent';
+export * from './NotificationCenterAlertEvent';
 export * from './NotificationCenterEvent';

src/views/notification-center/NotificationCenterMessageHandler.tsx

@@ -1,14 +1,13 @@
 import { HabboBroadcastMessageEvent, HotelWillShutdownEvent, ModeratorMessageEvent, MOTDNotificationEvent, NotificationDialogMessageEvent } from 'nitro-renderer';
 import { FC, useCallback } from 'react';
+import { NotificationCenterAlertEvent } from '../../events';
+import { dispatchUiEvent } from '../../hooks/events';
 import { CreateMessageHook } from '../../hooks/messages';
 import { useNotificationCenterContext } from './context/NotificationCenterContext';
 import { INotificationCenterMessageHandlerProps } from './NotificationCenterMessageHandler.types';
 import { NotificationCenterActions } from './reducers/NotificationCenterReducer';
-import { BroadcastMessageNotification } from './utils/BroadcastMessageNotification';
 import { DialogMessageNotification } from './utils/DialogMessageNotification';
 import { HotelWillShutdownNotification } from './utils/HotelWillShutdownNotification';
-import { ModeratorMessageNotification } from './utils/ModeratorMessageNotification';
-import { MOTDNotification } from './utils/MOTDNotification';
 
 export const NotificationCenterMessageHandler: FC<INotificationCenterMessageHandlerProps> = props =>
 {
@@ -18,10 +17,31 @@ export const NotificationCenterMessageHandler: FC<INotificationCenterMessageHand
     {
         const parser = event.getParser();
 
+        dispatchUiEvent(new NotificationCenterAlertEvent(NotificationCenterAlertEvent.HOTEL_ALERT, [ parser.message ]));
+    }, []);
+
+    const onModeratorMessageEvent = useCallback((event: ModeratorMessageEvent) =>
+    {
+        const parser = event.getParser();
+
+        dispatchUiEvent(new NotificationCenterAlertEvent(NotificationCenterAlertEvent.HOTEL_ALERT, [ parser.message ], parser.link));
+    }, []);
+
+    const onMOTDNotificationEvent = useCallback((event: MOTDNotificationEvent) =>
+    {
+        const parser = event.getParser();
+
+        dispatchUiEvent(new NotificationCenterAlertEvent(NotificationCenterAlertEvent.HOTEL_ALERT, parser.messages));
+    }, []);
+
+    const onHotelWillShutdownEvent = useCallback((event: HotelWillShutdownEvent) =>
+    {
+        const parser = event.getParser();
+
         dispatchNotificationCenterState({
             type: NotificationCenterActions.ADD_NOTIFICATION,
             payload: {
-                notification: new BroadcastMessageNotification(parser.message)
+                notification: new HotelWillShutdownNotification(parser.minutes)
             }
         });
     }, [ dispatchNotificationCenterState ]);
@@ -38,47 +58,11 @@ export const NotificationCenterMessageHandler: FC<INotificationCenterMessageHand
         });
     }, [ dispatchNotificationCenterState ]);
 
-    const onModeratorMessageEvent = useCallback((event: ModeratorMessageEvent) =>
-    {
-        const parser = event.getParser();
-
-        dispatchNotificationCenterState({
-            type: NotificationCenterActions.ADD_NOTIFICATION,
-            payload: {
-                notification: new ModeratorMessageNotification(parser.message, parser.link)
-            }
-        });
-    }, [ dispatchNotificationCenterState ]);
-
-    const onMOTDNotificationEvent = useCallback((event: MOTDNotificationEvent) =>
-    {
-        const parser = event.getParser();
-
-        dispatchNotificationCenterState({
-            type: NotificationCenterActions.ADD_NOTIFICATION,
-            payload: {
-                notification: new MOTDNotification(parser.messages)
-            }
-        });
-    }, [ dispatchNotificationCenterState ]);
-
-    const onHotelWillShutdownEvent = useCallback((event: HotelWillShutdownEvent) =>
-    {
-        const parser = event.getParser();
-
-        dispatchNotificationCenterState({
-            type: NotificationCenterActions.ADD_NOTIFICATION,
-            payload: {
-                notification: new HotelWillShutdownNotification(parser.minutes)
-            }
-        });
-    }, [ dispatchNotificationCenterState ]);
-
     CreateMessageHook(HabboBroadcastMessageEvent, onHabboBroadcastMessageEvent);
-    CreateMessageHook(NotificationDialogMessageEvent, onNotificationDialogMessageEvent);
     CreateMessageHook(ModeratorMessageEvent, onModeratorMessageEvent);
     CreateMessageHook(MOTDNotificationEvent, onMOTDNotificationEvent);
     CreateMessageHook(HotelWillShutdownEvent, onHotelWillShutdownEvent);
+    CreateMessageHook(NotificationDialogMessageEvent, onNotificationDialogMessageEvent);
 
     return null;
 }

src/views/notification-center/NotificationCenterView.scss

@@ -1,3 +1,15 @@
+.nitro-alert {
+    width: 350px;
+
+    .content-area {
+        min-height: 125px;
+        height: 125px;
+        max-height: 430px;
+        resize: vertical;
+        overflow: auto;
+    }
+}
+
 .nitro-notification-center-container {
     position: absolute;
     top: 0;
@@ -13,12 +25,3 @@
         pointer-events: all;
     }
 }
-
-.nitro-notification {
-    width: 350px;
-
-    .content-area {
-        max-height: 200px;
-        overflow-y: auto;
-    }
-}

src/views/notification-center/NotificationCenterView.tsx

@@ -1,116 +1,49 @@
-import { FC, useCallback, useReducer, useState } from 'react';
+import { FC, useCallback, useState } from 'react';
-import { NotificationCenterAddNotificationEvent, NotificationCenterEvent } from '../../events';
+import { NotificationCenterAlertEvent } from '../../events';
 import { useUiEvent } from '../../hooks/events';
-import { TransitionAnimation } from '../../layout/transitions/TransitionAnimation';
-import { TransitionAnimationTypes } from '../../layout/transitions/TransitionAnimation.types';
-import { NotificationCenterContextProvider } from './context/NotificationCenterContext';
 import { NotificationCenterMessageHandler } from './NotificationCenterMessageHandler';
 import { NotificationCenterViewProps } from './NotificationCenterView.types';
-import { initialNotificationCenter, NotificationCenterActions, NotificationCenterReducer } from './reducers/NotificationCenterReducer';
+import { NotificationCenterBroadcastMessageView } from './views/broadcast-message/NotificationCenterBroadcastMessageView';
-import { BroadcastMessageNotification } from './utils/BroadcastMessageNotification';
-import { HotelWillShutdownNotification } from './utils/HotelWillShutdownNotification';
-import { ModeratorMessageNotification } from './utils/ModeratorMessageNotification';
-import { MOTDNotification } from './utils/MOTDNotification';
-import { NitroNotification } from './utils/Notification';
-import { BroadcastMessageView } from './views/broadcast-message/BroadcastMessageView';
-import { HotelWillShutdownView } from './views/hotel-will-shutdown/HotelWillShutdownView';
-import { ModeratorMessageView } from './views/moderator-message/ModeratorMessageView';
-import { MOTDView } from './views/motd/MOTDView';
 
 export const NotificationCenterView: FC<NotificationCenterViewProps> = props =>
 {
-    const [ isVisible, setIsVisible ] = useState(false);
+    const [ alerts, setAlerts ] = useState<NotificationCenterAlertEvent[]>([]);
 
-    const [ notificationCenterState, dispatchNotificationCenterState ] = useReducer(NotificationCenterReducer, initialNotificationCenter);
+    const onNotificationCenterAlertEvent = useCallback((event: NotificationCenterAlertEvent) =>
-    const { notifications = null } = notificationCenterState;
-
-    const onNotificationCenterEvent = useCallback((event: NotificationCenterEvent) =>
     {
-        switch(event.type)
+        setAlerts(prevValue =>
             {
-            case NotificationCenterEvent.SHOW_NOTIFICATION_CENTER:
+                return [ ...prevValue, event ];
-                setIsVisible(true);
-                return;
-            case NotificationCenterEvent.HIDE_NOTIFICATION_CENTER:
-                setIsVisible(false);
-                return;
-            case NotificationCenterEvent.TOGGLE_NOTIFICATION_CENTER:
-                setIsVisible(value => !value);
-                return;
-            case NotificationCenterEvent.ADD_NOTIFICATION: {
-                const castedEvent = (event as NotificationCenterAddNotificationEvent);
-                
-                dispatchNotificationCenterState({
-                    type: NotificationCenterActions.ADD_NOTIFICATION,
-                    payload: {
-                        notification: castedEvent.notification
-                    }
             });
-                return;
-            }
-        }
     }, []);
 
-    useUiEvent(NotificationCenterEvent.SHOW_NOTIFICATION_CENTER, onNotificationCenterEvent);
+    useUiEvent(NotificationCenterAlertEvent.HOTEL_ALERT, onNotificationCenterAlertEvent);
-    useUiEvent(NotificationCenterEvent.HIDE_NOTIFICATION_CENTER, onNotificationCenterEvent);
-    useUiEvent(NotificationCenterEvent.TOGGLE_NOTIFICATION_CENTER, onNotificationCenterEvent);
-    useUiEvent(NotificationCenterEvent.ADD_NOTIFICATION, onNotificationCenterEvent);
 
-    const handleButtonClick = useCallback((action: string, value: number) =>
+    const closeAlert = useCallback((alert: NotificationCenterAlertEvent) =>
     {
-        if(!action) return;
+        setAlerts(prevValue =>
+            {
+                const newAlerts = [ ...prevValue ];
+                const index = newAlerts.findIndex(value => (alert === value));
 
-        switch(action)
+                if(index >= 0) newAlerts.splice(index, 1);
-        {
+
-            case 'dismiss_notification':
+                return newAlerts;
-                dispatchNotificationCenterState({
-                    type: NotificationCenterActions.DISMISS_NOTIFICATION,
-                    payload: {
-                        id: value
-                    }
             });
-                return;
+    }, []);
-            case 'remove_notification':
-                    dispatchNotificationCenterState({
-                        type: NotificationCenterActions.REMOVE_NOTIFICATION,
-                        payload: {
-                            id: value
-                        }
-                    });
-                    return;
-        }
-    }, [ dispatchNotificationCenterState ]);
-
-    const mapNotifications = useCallback((notifications: NitroNotification[], inTray: boolean) =>
-    {
-        if(!notifications) return null;
-
-        return notifications.map(notification =>
-            {
-                if(!inTray && notification.dismissed) return null;
-
-                if(notification instanceof BroadcastMessageNotification)
-                    return <BroadcastMessageView key={ notification.id } inTray={ inTray } notification={ notification as BroadcastMessageNotification } onButtonClick={ (action) => handleButtonClick(action, notification.id) } />
-                if(notification instanceof MOTDNotification)
-                    return <MOTDView key={ notification.id } inTray={ inTray } notification={ notification as MOTDNotification } onButtonClick={ (action) => handleButtonClick(action, notification.id) } />
-                if(notification instanceof ModeratorMessageNotification)
-                    return <ModeratorMessageView key={ notification.id } inTray={ inTray } notification={ notification as ModeratorMessageNotification } onButtonClick={ (action) => handleButtonClick(action, notification.id) } />
-                if(notification instanceof HotelWillShutdownNotification)
-                    return <HotelWillShutdownView key={ notification.id } inTray={ inTray } notification={ notification as HotelWillShutdownNotification } onButtonClick={ (action) => handleButtonClick(action, notification.id) } />
-                else
-                    return null;
-            });
-    }, [ handleButtonClick ]);
 
     return (
-        <NotificationCenterContextProvider value={ { notificationCenterState, dispatchNotificationCenterState } }>
+        <>
             <NotificationCenterMessageHandler />
-            <TransitionAnimation className="nitro-notification-center-container" type={ TransitionAnimationTypes.SLIDE_RIGHT } inProp={ isVisible } timeout={ 300 }>
+            { (alerts.length > 0) && alerts.map((alert, index) =>
-                <div className="nitro-notification-center pt-5 px-2">
+                {
-                    { mapNotifications(notifications, true) }
+                    switch(alert.type)
-                </div>
+                    {
-            </TransitionAnimation>
+                        case NotificationCenterAlertEvent.HOTEL_ALERT:
-            { mapNotifications(notifications, false) }
+                        default:
-        </NotificationCenterContextProvider>
+                            return <NotificationCenterBroadcastMessageView key={ index } notification={ alert } onClose={ () => closeAlert(alert) } />;
+                    }
+                })}
+        </>
     );
 }

src/views/notification-center/views/alert-base/NotificationCenterAlertBase.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
+import { LocalizeText } from '../../../../utils/LocalizeText';
+import { NotificationCenterAlertBaseProps } from './NotificationCenterAlertBase.types';
+
+export const NotificationCenterAlertBase: FC<NotificationCenterAlertBaseProps> = props =>
+{
+    const { headerText = LocalizeText('mod.alert.title'), onClose = null, children = null } = props;
+
+    return (
+        <NitroCardView className="nitro-alert" simple={ true }>
+            <NitroCardHeaderView headerText={ headerText } onCloseClick={ onClose } />
+            <NitroCardContentView className="d-flex flex-column justify-content-between text-black">
+                { children }
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}

src/views/notification-center/views/alert-base/NotificationCenterAlertBase.types.ts

@@ -0,0 +1,5 @@
+export interface NotificationCenterAlertBaseProps
+{
+    headerText?: string;
+    onClose: () => void;
+}

src/views/notification-center/views/broadcast-message/BroadcastMessageView.tsx

@@ -1,28 +0,0 @@
-import { FC } from 'react';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
-import { LocalizeText } from '../../../../utils/LocalizeText';
-import { NotificationTrayItemView } from '../tray-item/NotificationTrayItemView';
-import { BroadcastMessageViewProps } from './BroadcastMessageView.types';
-
-export const BroadcastMessageView: FC<BroadcastMessageViewProps> = props =>
-{
-    const { notification = null, inTray = null, onButtonClick = null } = props;
-    
-    if(!notification) return null;
-
-    const content = <div dangerouslySetInnerHTML={ {__html: notification.message } } />;
-
-    if(inTray)
-        return (
-            <NotificationTrayItemView title={ LocalizeText('mod.alert.title') } content={ content } timestamp={ notification.timestamp } onCloseClick={ () => onButtonClick('remove_notification') } />
-        );
-        
-    return (
-        <NitroCardView className="nitro-notification" simple={ true }>
-            <NitroCardHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
-            <NitroCardContentView className="text-black">
-                { content }
-            </NitroCardContentView>
-        </NitroCardView>
-    );
-};

src/views/notification-center/views/broadcast-message/BroadcastMessageView.types.ts

@@ -1,7 +0,0 @@
-import { NotificationViewProps } from '../../NotificationCenterView.types';
-import { BroadcastMessageNotification } from './../../utils/BroadcastMessageNotification';
-
-export class BroadcastMessageViewProps extends NotificationViewProps
-{
-    notification: BroadcastMessageNotification;
-}

src/views/notification-center/views/broadcast-message/NotificationCenterBroadcastMessageView.tsx

@@ -0,0 +1,30 @@
+import { FC, useMemo } from 'react';
+import { LocalizeText } from '../../../../utils/LocalizeText';
+import { NotificationCenterAlertBase } from '../alert-base/NotificationCenterAlertBase';
+import { NotificationCenterBroadcastMessageViewProps } from './NotificationCenterBroadcastMessageView.types';
+
+export const NotificationCenterBroadcastMessageView: FC<NotificationCenterBroadcastMessageViewProps> = props =>
+{
+    const { notification = null, onClose = null } = props;
+
+    const message = useMemo(() =>
+    {
+        let finalMessage = '';
+
+        notification.message.forEach(message =>
+            {
+                finalMessage += message.replace(/\r\n|\r|\n/g, '<br />');
+            });
+
+        return finalMessage;
+    }, [ notification ]);
+
+    return (
+        <NotificationCenterAlertBase onClose={ onClose }>
+            <div dangerouslySetInnerHTML={ {__html: message } } />
+            <div className="d-flex justify-content-center align-items-center">
+                <button type="button" className="btn btn-primary" onClick={ onClose }>{ LocalizeText('generic.close') }</button>
+            </div>
+        </NotificationCenterAlertBase>
+    );
+};

src/views/notification-center/views/broadcast-message/NotificationCenterBroadcastMessageView.types.ts

@@ -0,0 +1,7 @@
+import { NotificationCenterAlertEvent } from '../../../../events';
+
+export class NotificationCenterBroadcastMessageViewProps
+{
+    notification: NotificationCenterAlertEvent;
+    onClose: () => void;
+}

src/views/notification-center/views/motd/MOTDView.tsx

@@ -1,31 +0,0 @@
-import { FC } from 'react';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
-import { LocalizeText } from '../../../../utils/LocalizeText';
-import { NotificationTrayItemView } from '../tray-item/NotificationTrayItemView';
-import { MOTDViewProps } from './MOTDView.types';
-
-export const MOTDView: FC<MOTDViewProps> = props =>
-{
-    const { notification = null, inTray = null, onButtonClick = null } = props;
-    
-    if(!notification) return null;
-
-    const content = notification.messages.map((message, index) =>
-    {
-        return <div key={ index } dangerouslySetInnerHTML={ {__html: message } } />
-    });
-
-    if(inTray)
-        return (
-            <NotificationTrayItemView title={ LocalizeText('mod.alert.title') } content={ content } timestamp={ notification.timestamp } onCloseClick={ () => onButtonClick('remove_notification') } />
-        );
-
-    return (
-        <NitroCardView className="nitro-notification" simple={ true }>
-            <NitroCardHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
-            <NitroCardContentView className="text-black">
-                { content }
-            </NitroCardContentView>
-        </NitroCardView>
-    );
-};

src/views/notification-center/views/motd/MOTDView.types.ts

@@ -1,7 +0,0 @@
-import { NotificationViewProps } from '../../NotificationCenterView.types';
-import { MOTDNotification } from './../../utils/MOTDNotification';
-
-export class MOTDViewProps extends NotificationViewProps
-{
-    notification: MOTDNotification;
-}

src/views/notification-center/views/motd/NotificationCenterMotdView.tsx

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { NotificationCenterBroadcastMessageView } from '../broadcast-message/NotificationCenterBroadcastMessageView';
+import { NotificationCenterMotdViewProps } from './NotificationCenterMotdView.types';
+
+export const NotificationCenterMotdView: FC<NotificationCenterMotdViewProps> = props =>
+{
+    const { notification = null, onClose = null } = props;
+
+    return <NotificationCenterBroadcastMessageView notification={ notification } onClose={ onClose } />;
+}

src/views/notification-center/views/motd/NotificationCenterMotdView.types.ts

@@ -0,0 +1,7 @@
+import { NotificationCenterAlertEvent } from '../../../../events';
+
+export interface NotificationCenterMotdViewProps
+{
+    notification: NotificationCenterAlertEvent;
+    onClose: () => void;
+}