2021-08-22 07:00:05 +02:00
|
|
|
import { FC, ReactNode, useCallback, useMemo, useState } from 'react';
|
2021-07-08 07:46:59 +02:00
|
|
|
import { NotificationCenterAlertEvent } from '../../events';
|
2021-08-22 07:00:05 +02:00
|
|
|
import { NotificationBubbleEvent } from '../../events/notification-center/NotificationBubbleEvent';
|
2021-06-22 11:52:47 +02:00
|
|
|
import { useUiEvent } from '../../hooks/events';
|
2021-08-22 07:00:05 +02:00
|
|
|
import { NotificationItem } from './common/NotificationItem';
|
2021-06-22 18:40:28 +02:00
|
|
|
import { NotificationCenterMessageHandler } from './NotificationCenterMessageHandler';
|
2021-06-22 11:52:47 +02:00
|
|
|
import { NotificationCenterViewProps } from './NotificationCenterView.types';
|
2021-07-08 07:46:59 +02:00
|
|
|
import { NotificationCenterBroadcastMessageView } from './views/broadcast-message/NotificationCenterBroadcastMessageView';
|
2021-08-22 07:00:05 +02:00
|
|
|
import { NotificationBubbleView } from './views/notification-bubble/NotificationBubbleView';
|
2021-06-22 11:52:47 +02:00
|
|
|
|
|
|
|
export const NotificationCenterView: FC<NotificationCenterViewProps> = props =>
|
|
|
|
{
|
2021-07-08 07:46:59 +02:00
|
|
|
const [ alerts, setAlerts ] = useState<NotificationCenterAlertEvent[]>([]);
|
2021-08-22 07:00:05 +02:00
|
|
|
const [ bubbleAlerts, setBubbleAlerts ] = useState<NotificationItem[]>([]);
|
2021-08-05 19:32:09 +02:00
|
|
|
|
2021-07-08 07:46:59 +02:00
|
|
|
const onNotificationCenterAlertEvent = useCallback((event: NotificationCenterAlertEvent) =>
|
2021-06-22 11:52:47 +02:00
|
|
|
{
|
2021-07-08 07:46:59 +02:00
|
|
|
setAlerts(prevValue =>
|
|
|
|
{
|
|
|
|
return [ ...prevValue, event ];
|
|
|
|
});
|
2021-06-22 11:52:47 +02:00
|
|
|
}, []);
|
|
|
|
|
2021-07-08 07:46:59 +02:00
|
|
|
useUiEvent(NotificationCenterAlertEvent.HOTEL_ALERT, onNotificationCenterAlertEvent);
|
2021-06-22 20:14:41 +02:00
|
|
|
|
2021-08-22 07:00:05 +02:00
|
|
|
const onNotificationBubbleEvent = useCallback((event: NotificationBubbleEvent) =>
|
|
|
|
{
|
|
|
|
console.log(event);
|
|
|
|
const notificationItem = new NotificationItem(event.message, event.notificationType, null, event.linkUrl);
|
|
|
|
|
|
|
|
setBubbleAlerts(prevValue => [ notificationItem, ...prevValue ]);
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
useUiEvent(NotificationBubbleEvent.NEW_BUBBLE, onNotificationBubbleEvent);
|
|
|
|
|
2021-07-08 07:46:59 +02:00
|
|
|
const closeAlert = useCallback((alert: NotificationCenterAlertEvent) =>
|
2021-06-22 20:14:41 +02:00
|
|
|
{
|
2021-07-08 07:46:59 +02:00
|
|
|
setAlerts(prevValue =>
|
2021-06-22 20:14:41 +02:00
|
|
|
{
|
2021-07-08 07:46:59 +02:00
|
|
|
const newAlerts = [ ...prevValue ];
|
|
|
|
const index = newAlerts.findIndex(value => (alert === value));
|
2021-06-22 20:14:41 +02:00
|
|
|
|
2021-07-08 07:46:59 +02:00
|
|
|
if(index >= 0) newAlerts.splice(index, 1);
|
|
|
|
|
|
|
|
return newAlerts;
|
2021-06-22 20:14:41 +02:00
|
|
|
});
|
2021-07-08 07:46:59 +02:00
|
|
|
}, []);
|
2021-06-22 11:52:47 +02:00
|
|
|
|
2021-08-22 07:00:05 +02:00
|
|
|
const closeBubbleAlert = useCallback((item: NotificationItem) =>
|
|
|
|
{
|
|
|
|
setBubbleAlerts(prevValue =>
|
|
|
|
{
|
|
|
|
const newAlerts = [ ...prevValue ];
|
|
|
|
const index = newAlerts.findIndex(value => (item === value));
|
|
|
|
|
|
|
|
if(index >= 0) newAlerts.splice(index, 1);
|
|
|
|
|
|
|
|
return newAlerts;
|
|
|
|
})
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
const getBubbleAlerts = useMemo(() =>
|
|
|
|
{
|
|
|
|
if(!bubbleAlerts || !bubbleAlerts.length) return null;
|
|
|
|
|
|
|
|
const elements: ReactNode[] = [];
|
|
|
|
|
|
|
|
for(const alert of bubbleAlerts) elements.push(<NotificationBubbleView key={ alert.id } notificationItem={ alert } close={ () => closeBubbleAlert(alert) } />);
|
|
|
|
|
|
|
|
return elements;
|
|
|
|
}, [ bubbleAlerts, closeBubbleAlert ]);
|
|
|
|
|
2021-06-22 11:52:47 +02:00
|
|
|
return (
|
2021-07-08 07:46:59 +02:00
|
|
|
<>
|
2021-06-22 18:40:28 +02:00
|
|
|
<NotificationCenterMessageHandler />
|
2021-08-22 07:00:05 +02:00
|
|
|
<div className="nitro-notification-center">
|
|
|
|
{ getBubbleAlerts }
|
|
|
|
</div>
|
2021-07-08 07:46:59 +02:00
|
|
|
{ (alerts.length > 0) && alerts.map((alert, index) =>
|
|
|
|
{
|
|
|
|
switch(alert.type)
|
|
|
|
{
|
|
|
|
case NotificationCenterAlertEvent.HOTEL_ALERT:
|
|
|
|
default:
|
|
|
|
return <NotificationCenterBroadcastMessageView key={ index } notification={ alert } onClose={ () => closeAlert(alert) } />;
|
|
|
|
}
|
|
|
|
})}
|
|
|
|
</>
|
2021-06-22 11:52:47 +02:00
|
|
|
);
|
|
|
|
}
|