2021-06-22 18:40:28 +02:00
|
|
|
import { FC, useCallback, useReducer, useState } from 'react';
|
|
|
|
import { NotificationCenterAddNotificationEvent, NotificationCenterEvent } from '../../events';
|
2021-06-22 11:52:47 +02:00
|
|
|
import { useUiEvent } from '../../hooks/events';
|
|
|
|
import { TransitionAnimation } from '../../layout/transitions/TransitionAnimation';
|
|
|
|
import { TransitionAnimationTypes } from '../../layout/transitions/TransitionAnimation.types';
|
2021-06-22 18:40:28 +02:00
|
|
|
import { NotificationCenterContextProvider } from './context/NotificationCenterContext';
|
|
|
|
import { NotificationCenterMessageHandler } from './NotificationCenterMessageHandler';
|
2021-06-22 11:52:47 +02:00
|
|
|
import { NotificationCenterViewProps } from './NotificationCenterView.types';
|
2021-06-22 18:40:28 +02:00
|
|
|
import { initialNotificationCenter, NotificationCenterActions, NotificationCenterReducer } from './reducers/NotificationCenterReducer';
|
|
|
|
import { BroadcastMessageNotification } from './utils/BroadcastMessageNotification';
|
2021-06-22 20:14:41 +02:00
|
|
|
import { HotelWillShutdownNotification } from './utils/HotelWillShutdownNotification';
|
2021-06-22 18:40:28 +02:00
|
|
|
import { ModeratorMessageNotification } from './utils/ModeratorMessageNotification';
|
|
|
|
import { MOTDNotification } from './utils/MOTDNotification';
|
2021-06-22 20:14:41 +02:00
|
|
|
import { NitroNotification } from './utils/Notification';
|
2021-06-22 18:40:28 +02:00
|
|
|
import { BroadcastMessageView } from './views/broadcast-message/BroadcastMessageView';
|
2021-06-22 20:14:41 +02:00
|
|
|
import { HotelWillShutdownView } from './views/hotel-will-shutdown/HotelWillShutdownView';
|
2021-06-22 18:40:28 +02:00
|
|
|
import { ModeratorMessageView } from './views/moderator-message/ModeratorMessageView';
|
|
|
|
import { MOTDView } from './views/motd/MOTDView';
|
2021-06-22 11:52:47 +02:00
|
|
|
|
|
|
|
export const NotificationCenterView: FC<NotificationCenterViewProps> = props =>
|
|
|
|
{
|
|
|
|
const [ isVisible, setIsVisible ] = useState(false);
|
|
|
|
|
2021-06-22 18:40:28 +02:00
|
|
|
const [ notificationCenterState, dispatchNotificationCenterState ] = useReducer(NotificationCenterReducer, initialNotificationCenter);
|
|
|
|
const { notifications = null } = notificationCenterState;
|
|
|
|
|
2021-06-22 11:52:47 +02:00
|
|
|
const onNotificationCenterEvent = useCallback((event: NotificationCenterEvent) =>
|
|
|
|
{
|
|
|
|
switch(event.type)
|
|
|
|
{
|
|
|
|
case NotificationCenterEvent.SHOW_NOTIFICATION_CENTER:
|
|
|
|
setIsVisible(true);
|
|
|
|
return;
|
|
|
|
case NotificationCenterEvent.HIDE_NOTIFICATION_CENTER:
|
|
|
|
setIsVisible(false);
|
|
|
|
return;
|
|
|
|
case NotificationCenterEvent.TOGGLE_NOTIFICATION_CENTER:
|
|
|
|
setIsVisible(value => !value);
|
|
|
|
return;
|
2021-06-22 18:40:28 +02:00
|
|
|
case NotificationCenterEvent.ADD_NOTIFICATION: {
|
|
|
|
const castedEvent = (event as NotificationCenterAddNotificationEvent);
|
|
|
|
|
|
|
|
dispatchNotificationCenterState({
|
|
|
|
type: NotificationCenterActions.ADD_NOTIFICATION,
|
|
|
|
payload: {
|
|
|
|
notification: castedEvent.notification
|
|
|
|
}
|
|
|
|
});
|
|
|
|
return;
|
|
|
|
}
|
2021-06-22 11:52:47 +02:00
|
|
|
}
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
useUiEvent(NotificationCenterEvent.SHOW_NOTIFICATION_CENTER, onNotificationCenterEvent);
|
|
|
|
useUiEvent(NotificationCenterEvent.HIDE_NOTIFICATION_CENTER, onNotificationCenterEvent);
|
|
|
|
useUiEvent(NotificationCenterEvent.TOGGLE_NOTIFICATION_CENTER, onNotificationCenterEvent);
|
2021-06-22 18:40:28 +02:00
|
|
|
useUiEvent(NotificationCenterEvent.ADD_NOTIFICATION, onNotificationCenterEvent);
|
|
|
|
|
|
|
|
const handleButtonClick = useCallback((action: string, value: number) =>
|
|
|
|
{
|
|
|
|
if(!action) return;
|
2021-06-22 11:52:47 +02:00
|
|
|
|
2021-06-22 18:40:28 +02:00
|
|
|
switch(action)
|
|
|
|
{
|
2021-06-22 20:14:41 +02:00
|
|
|
case 'dismiss_notification':
|
2021-06-22 18:40:28 +02:00
|
|
|
dispatchNotificationCenterState({
|
2021-06-22 20:14:41 +02:00
|
|
|
type: NotificationCenterActions.DISMISS_NOTIFICATION,
|
2021-06-22 18:40:28 +02:00
|
|
|
payload: {
|
|
|
|
id: value
|
|
|
|
}
|
|
|
|
});
|
|
|
|
return;
|
2021-06-22 20:14:41 +02:00
|
|
|
case 'remove_notification':
|
|
|
|
dispatchNotificationCenterState({
|
|
|
|
type: NotificationCenterActions.REMOVE_NOTIFICATION,
|
|
|
|
payload: {
|
|
|
|
id: value
|
|
|
|
}
|
|
|
|
});
|
|
|
|
return;
|
2021-06-22 18:40:28 +02:00
|
|
|
}
|
2021-06-22 20:14:41 +02:00
|
|
|
}, [ notificationCenterState, 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 ]);
|
2021-06-22 11:52:47 +02:00
|
|
|
|
|
|
|
return (
|
2021-06-22 18:40:28 +02:00
|
|
|
<NotificationCenterContextProvider value={ { notificationCenterState, dispatchNotificationCenterState } }>
|
|
|
|
<NotificationCenterMessageHandler />
|
|
|
|
<TransitionAnimation className="nitro-notification-center-container" type={ TransitionAnimationTypes.SLIDE_RIGHT } inProp={ isVisible } timeout={ 300 }>
|
2021-06-22 20:14:41 +02:00
|
|
|
<div className="nitro-notification-center pt-5 px-2">
|
|
|
|
{ mapNotifications(notifications, true) }
|
2021-06-22 18:40:28 +02:00
|
|
|
</div>
|
|
|
|
</TransitionAnimation>
|
2021-06-22 20:14:41 +02:00
|
|
|
{ mapNotifications(notifications, false) }
|
2021-06-22 18:40:28 +02:00
|
|
|
</NotificationCenterContextProvider>
|
2021-06-22 11:52:47 +02:00
|
|
|
);
|
|
|
|
}
|