nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 14:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Notification center updates

Browse Source
This commit is contained in:
Bill 2021-07-08 01:46:59 -04:00
parent 2ad0f8a999
commit 1966d14396
15 changed files with 178 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/events/notification-center/NotificationCenterAlertEvent.ts Normal file
View File

@ -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;
}
}

1
src/events/notification-center/index.ts
View File

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

66
src/views/notification-center/NotificationCenterMessageHandler.tsx
View File

@ -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;
}

21
src/views/notification-center/NotificationCenterView.scss
View File

@ -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;
}
}

123
src/views/notification-center/NotificationCenterView.tsx
View File

@ -1,116 +1,49 @@
import { FC, useCallback, useReducer, useState } from 'react';
import { NotificationCenterAddNotificationEvent, NotificationCenterEvent } from '../../events';
import { FC, useCallback, useState } from 'react';
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 { 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';
import { NotificationCenterBroadcastMessageView } from './views/broadcast-message/NotificationCenterBroadcastMessageView';
export const NotificationCenterView: FC<NotificationCenterViewProps> = props =>
{
const [ isVisible, setIsVisible ] = useState(false);
const [ alerts, setAlerts ] = useState<NotificationCenterAlertEvent[]>([]);
const [ notificationCenterState, dispatchNotificationCenterState ] = useReducer(NotificationCenterReducer, initialNotificationCenter);
const { notifications = null } = notificationCenterState;
const onNotificationCenterEvent = useCallback((event: NotificationCenterEvent) =>
const onNotificationCenterAlertEvent = useCallback((event: NotificationCenterAlertEvent) =>
{
switch(event.type)
setAlerts(prevValue =>
{
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;
case NotificationCenterEvent.ADD_NOTIFICATION: {
const castedEvent = (event as NotificationCenterAddNotificationEvent);
dispatchNotificationCenterState({
type: NotificationCenterActions.ADD_NOTIFICATION,
payload: {
notification: castedEvent.notification
}
return [ ...prevValue, event ];
});
return;
}
}
}, []);
useUiEvent(NotificationCenterEvent.SHOW_NOTIFICATION_CENTER, onNotificationCenterEvent);
useUiEvent(NotificationCenterEvent.HIDE_NOTIFICATION_CENTER, onNotificationCenterEvent);
useUiEvent(NotificationCenterEvent.TOGGLE_NOTIFICATION_CENTER, onNotificationCenterEvent);
useUiEvent(NotificationCenterEvent.ADD_NOTIFICATION, onNotificationCenterEvent);
useUiEvent(NotificationCenterAlertEvent.HOTEL_ALERT, onNotificationCenterAlertEvent);
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)
{
case 'dismiss_notification':
dispatchNotificationCenterState({
type: NotificationCenterActions.DISMISS_NOTIFICATION,
payload: {
id: value
}
if(index >= 0) newAlerts.splice(index, 1);
return newAlerts;
});
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 }>
<div className="nitro-notification-center pt-5 px-2">
{ mapNotifications(notifications, true) }
</div>
</TransitionAnimation>
{ mapNotifications(notifications, false) }
</NotificationCenterContextProvider>
{ (alerts.length > 0) && alerts.map((alert, index) =>
{
switch(alert.type)
{
case NotificationCenterAlertEvent.HOTEL_ALERT:
default:
return <NotificationCenterBroadcastMessageView key={ index } notification={ alert } onClose={ () => closeAlert(alert) } />;
}
})}
</>
);
}

18
src/views/notification-center/views/alert-base/NotificationCenterAlertBase.tsx Normal file
View File

@ -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>
);
}

5
src/views/notification-center/views/alert-base/NotificationCenterAlertBase.types.ts Normal file
View File

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

28
src/views/notification-center/views/broadcast-message/BroadcastMessageView.tsx
View File

@ -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>
);
};

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

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

30
src/views/notification-center/views/broadcast-message/NotificationCenterBroadcastMessageView.tsx Normal file
View File

@ -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>
);
};

7
src/views/notification-center/views/broadcast-message/NotificationCenterBroadcastMessageView.types.ts Normal file
View File

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

31
src/views/notification-center/views/motd/MOTDView.tsx
View File

@ -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>
);
};

7
src/views/notification-center/views/motd/MOTDView.types.ts
View File

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

10
src/views/notification-center/views/motd/NotificationCenterMotdView.tsx Normal file
View File

@ -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 } />;
}

7
src/views/notification-center/views/motd/NotificationCenterMotdView.types.ts Normal file
View File

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