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';
|
|
|
|
import { ModeratorMessageNotification } from './utils/ModeratorMessageNotification';
|
|
|
|
import { MOTDNotification } from './utils/MOTDNotification';
|
|
|
|
import { BroadcastMessageView } from './views/broadcast-message/BroadcastMessageView';
|
|
|
|
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)
|
|
|
|
{
|
|
|
|
case 'dismiss_alert':
|
|
|
|
dispatchNotificationCenterState({
|
|
|
|
type: NotificationCenterActions.REMOVE_NOTIFICATION,
|
|
|
|
payload: {
|
|
|
|
id: value
|
|
|
|
}
|
|
|
|
});
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}, []);
|
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 }>
|
|
|
|
<div className="nitro-notification-center">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</TransitionAnimation>
|
|
|
|
{ notifications && notifications.map(notification =>
|
|
|
|
{
|
|
|
|
if(notification instanceof BroadcastMessageNotification)
|
|
|
|
return <BroadcastMessageView key={ notification.id } notification={ notification as BroadcastMessageNotification } onCloseClick={ () => handleButtonClick('dismiss_alert', notification.id) } />
|
|
|
|
if(notification instanceof MOTDNotification)
|
|
|
|
return <MOTDView key={ notification.id } notification={ notification as MOTDNotification } onCloseClick={ () => handleButtonClick('dismiss_alert', notification.id) } />
|
|
|
|
if(notification instanceof ModeratorMessageNotification)
|
|
|
|
return <ModeratorMessageView key={ notification.id } notification={ notification as ModeratorMessageNotification } onCloseClick={ () => handleButtonClick('dismiss_alert', notification.id) } />
|
|
|
|
else
|
|
|
|
return null;
|
|
|
|
|
|
|
|
}) }
|
|
|
|
</NotificationCenterContextProvider>
|
2021-06-22 11:52:47 +02:00
|
|
|
);
|
|
|
|
}
|