2021-08-22 07:00:05 +02:00
|
|
|
import { FC, ReactNode, useCallback, useMemo, useState } from 'react';
|
2022-03-12 06:23:57 +01:00
|
|
|
import { NotificationAlertItem, NotificationBubbleItem, NotificationBubbleType, NotificationConfirmItem } from '../../api';
|
|
|
|
import { Column } from '../../common';
|
|
|
|
import { NotificationAlertEvent, NotificationBubbleEvent, NotificationConfirmEvent } from '../../events';
|
2022-03-03 10:11:31 +01:00
|
|
|
import { UseUiEvent } from '../../hooks';
|
2021-06-22 18:40:28 +02:00
|
|
|
import { NotificationCenterMessageHandler } from './NotificationCenterMessageHandler';
|
2021-09-18 10:31:08 +02:00
|
|
|
import { GetAlertLayout } from './views/alert-layouts/GetAlertLayout';
|
2021-08-26 08:38:16 +02:00
|
|
|
import { GetBubbleLayout } from './views/bubble-layouts/GetBubbleLayout';
|
2022-01-04 08:33:18 +01:00
|
|
|
import { GetConfirmLayout } from './views/confirm-layouts/GetConfirmLayout';
|
2021-06-22 11:52:47 +02:00
|
|
|
|
2022-03-12 06:23:57 +01:00
|
|
|
export const NotificationCenterView: FC<{}> = props =>
|
2021-06-22 11:52:47 +02:00
|
|
|
{
|
2021-09-18 10:31:08 +02:00
|
|
|
const [ alerts, setAlerts ] = useState<NotificationAlertItem[]>([]);
|
|
|
|
const [ bubbleAlerts, setBubbleAlerts ] = useState<NotificationBubbleItem[]>([]);
|
2022-01-04 08:33:18 +01:00
|
|
|
const [ confirms, setConfirms ] = useState<NotificationConfirmItem[]>([]);
|
2021-08-05 19:32:09 +02:00
|
|
|
|
2021-09-18 10:31:08 +02:00
|
|
|
const onNotificationAlertEvent = useCallback((event: NotificationAlertEvent) =>
|
2021-06-22 11:52:47 +02:00
|
|
|
{
|
2021-09-18 10:31:08 +02:00
|
|
|
const alertItem = new NotificationAlertItem(event.messages, event.alertType, event.clickUrl, event.clickUrlText, event.title, event.imageUrl);
|
|
|
|
|
|
|
|
setAlerts(prevValue => [ alertItem, ...prevValue ]);
|
2021-06-22 11:52:47 +02:00
|
|
|
}, []);
|
|
|
|
|
2022-03-03 10:11:31 +01:00
|
|
|
UseUiEvent(NotificationAlertEvent.ALERT, onNotificationAlertEvent);
|
2021-06-22 20:14:41 +02:00
|
|
|
|
2021-08-22 07:00:05 +02:00
|
|
|
const onNotificationBubbleEvent = useCallback((event: NotificationBubbleEvent) =>
|
|
|
|
{
|
2021-09-18 10:31:08 +02:00
|
|
|
const notificationItem = new NotificationBubbleItem(event.message, event.notificationType, event.imageUrl, event.linkUrl);
|
2021-08-22 07:00:05 +02:00
|
|
|
|
|
|
|
setBubbleAlerts(prevValue => [ notificationItem, ...prevValue ]);
|
|
|
|
}, []);
|
|
|
|
|
2022-03-03 10:11:31 +01:00
|
|
|
UseUiEvent(NotificationBubbleEvent.NEW_BUBBLE, onNotificationBubbleEvent);
|
2021-08-22 07:00:05 +02:00
|
|
|
|
2022-01-04 08:33:18 +01:00
|
|
|
const onNotificationConfirmEvent = useCallback((event: NotificationConfirmEvent) =>
|
|
|
|
{
|
|
|
|
const confirmItem = new NotificationConfirmItem(event.type, event.message, event.onConfirm, event.onCancel, event.confirmText, event.cancelText, event.title);
|
|
|
|
|
|
|
|
setConfirms(prevValue => [ confirmItem, ...prevValue ]);
|
|
|
|
}, []);
|
|
|
|
|
2022-03-03 10:11:31 +01:00
|
|
|
UseUiEvent(NotificationConfirmEvent.CONFIRM, onNotificationConfirmEvent);
|
2022-01-04 08:33:18 +01:00
|
|
|
|
2021-09-18 10:31:08 +02:00
|
|
|
const closeAlert = useCallback((alert: NotificationAlertItem) =>
|
2021-06-22 20:14:41 +02:00
|
|
|
{
|
2021-07-08 07:46:59 +02:00
|
|
|
setAlerts(prevValue =>
|
2022-04-01 19:33:08 +02:00
|
|
|
{
|
|
|
|
const newAlerts = [ ...prevValue ];
|
|
|
|
const index = newAlerts.findIndex(value => (alert === value));
|
2021-06-22 20:14:41 +02:00
|
|
|
|
2022-04-01 19:33:08 +02:00
|
|
|
if(index >= 0) newAlerts.splice(index, 1);
|
2021-07-08 07:46:59 +02:00
|
|
|
|
2022-04-01 19:33:08 +02:00
|
|
|
return newAlerts;
|
|
|
|
});
|
2021-07-08 07:46:59 +02:00
|
|
|
}, []);
|
2021-06-22 11:52:47 +02:00
|
|
|
|
2021-09-18 10:31:08 +02:00
|
|
|
const closeBubbleAlert = useCallback((item: NotificationBubbleItem) =>
|
2021-08-22 07:00:05 +02:00
|
|
|
{
|
|
|
|
setBubbleAlerts(prevValue =>
|
2022-04-01 19:33:08 +02:00
|
|
|
{
|
|
|
|
const newAlerts = [ ...prevValue ];
|
|
|
|
const index = newAlerts.findIndex(value => (item === value));
|
2021-08-22 07:00:05 +02:00
|
|
|
|
2022-04-01 19:33:08 +02:00
|
|
|
if(index >= 0) newAlerts.splice(index, 1);
|
2021-08-22 07:00:05 +02:00
|
|
|
|
2022-04-01 19:33:08 +02:00
|
|
|
return newAlerts;
|
|
|
|
})
|
2021-08-22 07:00:05 +02:00
|
|
|
}, []);
|
|
|
|
|
2022-01-04 08:33:18 +01:00
|
|
|
const closeConfirm = useCallback((item: NotificationConfirmItem) =>
|
|
|
|
{
|
|
|
|
setConfirms(prevValue =>
|
2022-04-01 19:33:08 +02:00
|
|
|
{
|
|
|
|
const newConfirms = [ ...prevValue ];
|
|
|
|
const index = newConfirms.findIndex(value => (item === value));
|
2022-01-04 08:33:18 +01:00
|
|
|
|
2022-04-01 19:33:08 +02:00
|
|
|
if(index >= 0) newConfirms.splice(index, 1);
|
2022-01-04 08:33:18 +01:00
|
|
|
|
2022-04-01 19:33:08 +02:00
|
|
|
return newConfirms;
|
|
|
|
})
|
2022-01-04 08:33:18 +01:00
|
|
|
}, []);
|
|
|
|
|
2021-09-18 10:31:08 +02:00
|
|
|
const getAlerts = useMemo(() =>
|
|
|
|
{
|
|
|
|
if(!alerts || !alerts.length) return null;
|
|
|
|
|
|
|
|
const elements: ReactNode[] = [];
|
|
|
|
|
|
|
|
for(const alert of alerts)
|
|
|
|
{
|
|
|
|
const element = GetAlertLayout(alert, () => closeAlert(alert));
|
|
|
|
|
|
|
|
elements.push(element);
|
|
|
|
}
|
|
|
|
|
|
|
|
return elements;
|
|
|
|
}, [ alerts, closeAlert ]);
|
|
|
|
|
2021-08-22 07:00:05 +02:00
|
|
|
const getBubbleAlerts = useMemo(() =>
|
|
|
|
{
|
|
|
|
if(!bubbleAlerts || !bubbleAlerts.length) return null;
|
|
|
|
|
|
|
|
const elements: ReactNode[] = [];
|
|
|
|
|
2021-08-26 08:38:16 +02:00
|
|
|
for(const alert of bubbleAlerts)
|
|
|
|
{
|
|
|
|
const element = GetBubbleLayout(alert, () => closeBubbleAlert(alert));
|
|
|
|
|
2021-09-18 10:31:08 +02:00
|
|
|
if(alert.notificationType === NotificationBubbleType.CLUBGIFT)
|
2021-08-26 08:38:16 +02:00
|
|
|
{
|
|
|
|
elements.unshift(element);
|
|
|
|
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
|
|
|
|
elements.push(element);
|
|
|
|
}
|
2021-08-22 07:00:05 +02:00
|
|
|
|
|
|
|
return elements;
|
|
|
|
}, [ bubbleAlerts, closeBubbleAlert ]);
|
|
|
|
|
2022-01-04 08:33:18 +01:00
|
|
|
const getConfirms = useMemo(() =>
|
|
|
|
{
|
|
|
|
if(!confirms || !confirms.length) return null;
|
|
|
|
|
|
|
|
const elements: ReactNode[] = [];
|
|
|
|
|
|
|
|
for(const confirm of confirms)
|
|
|
|
{
|
|
|
|
const element = GetConfirmLayout(confirm, () => closeConfirm(confirm));
|
|
|
|
|
|
|
|
elements.push(element);
|
|
|
|
}
|
|
|
|
|
|
|
|
return elements;
|
|
|
|
}, [ confirms, closeConfirm ]);
|
|
|
|
|
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 />
|
2022-03-12 06:23:57 +01:00
|
|
|
<Column gap={ 1 }>
|
2021-08-22 07:00:05 +02:00
|
|
|
{ getBubbleAlerts }
|
2022-03-12 06:23:57 +01:00
|
|
|
</Column>
|
2022-01-07 23:53:41 +01:00
|
|
|
{ getConfirms }
|
|
|
|
{ getAlerts }
|
2021-07-08 07:46:59 +02:00
|
|
|
</>
|
2021-06-22 11:52:47 +02:00
|
|
|
);
|
|
|
|
}
|