nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 03:13:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

Updates

Browse Source
This commit is contained in:
MyNameIsBatman 2021-06-22 15:14:41 -03:00
parent 351571fdbe
commit 00bdafb42d
11 changed files with 185 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,9 +8,12 @@ import { NotificationCenterMessageHandler } from './NotificationCenterMessageHan
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';
@ -59,7 +62,15 @@ export const NotificationCenterView: FC<NotificationCenterViewProps> = props =>
switch(action)
{
case 'dismiss_alert':
case 'dismiss_notification':
dispatchNotificationCenterState({
type: NotificationCenterActions.DISMISS_NOTIFICATION,
payload: {
id: value
}
});
return;
case 'remove_notification':
dispatchNotificationCenterState({
type: NotificationCenterActions.REMOVE_NOTIFICATION,
payload: {
@ -68,28 +79,38 @@ export const NotificationCenterView: FC<NotificationCenterViewProps> = props =>
});
return;
}
}, []);
}, [ 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 ]);
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">
<div className="nitro-notification-center pt-5 px-2">
{ mapNotifications(notifications, true) }
</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;
}) }
{ mapNotifications(notifications, false) }
</NotificationCenterContextProvider>
);
}

3
src/views/notification-center/NotificationCenterView.types.ts
View File

@ -5,5 +5,6 @@ export interface NotificationCenterViewProps
export class NotificationViewProps
{
onCloseClick: () => void;
inTray?: boolean = false;
onButtonClick: (action: string) => void;
}

19
src/views/notification-center/reducers/NotificationCenterReducer.tsx
View File

@ -19,6 +19,7 @@ export class NotificationCenterActions
{
public static ADD_NOTIFICATION: string = 'NCA_ADD_NOTIFICATION';
public static REMOVE_NOTIFICATION: string = 'NCA_REMOVE_NOTIFICATION';
public static DISMISS_NOTIFICATION: string = 'NCA_DISMISS_NOTIFICATION';
}
export const initialNotificationCenter: INotificationCenterState = {
@ -34,7 +35,7 @@ export const NotificationCenterReducer: Reducer<INotificationCenterState, INotif
if(!notification) return state;
if(state.notifications) return {...state, notifications: [...state.notifications, notification]};
if(state.notifications) return {...state, notifications: [notification, ...state.notifications]};
return {...state, notifications: [notification]};
}
@ -54,6 +55,22 @@ export const NotificationCenterReducer: Reducer<INotificationCenterState, INotif
return {...state, notifications};
}
case NotificationCenterActions.DISMISS_NOTIFICATION: {
const id = (action.payload.id || null);
if(!id) return state;
if(!state.notifications) return state;
const notifications = Array.from(state.notifications);
const notificationIndex = notifications.findIndex(notification => notification.id === id);
if(notificationIndex === -1) return state;
notifications[notificationIndex].dismiss();
return {...state, notifications};
}
default:
return state;
}

18
src/views/notification-center/utils/Notification.ts
View File

@ -5,15 +5,23 @@ export class NitroNotification
private _id: number;
private _title: string;
private _message: string;
private _dismissed: boolean = false;
private _timestamp: number;
constructor(message: string = null, title: string = null)
{
this._id = ++NitroNotification.CURRENT_ID;
this._title = title;
this._timestamp = Date.now();
if(message) this._message = message.replace(/\r\n|\r|\n/g, '<br />');
}
public dismiss(): void
{
this._dismissed = true;
}
public get id(): number
{
return this._id;
@ -28,4 +36,14 @@ export class NitroNotification
{
return this._message;
}
public get dismissed(): boolean
{
return this._dismissed;
}
public get timestamp(): number
{
return this._timestamp;
}
}

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

@ -2,21 +2,27 @@ import { FC } from 'react';
import { NitroCardContentView, NitroCardView } from '../../../../layout';
import { NitroCardSimpleHeaderView } from '../../../../layout/card/simple-header';
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, onCloseClick = null } = 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">
<NitroCardSimpleHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ onCloseClick } />
<NitroCardContentView>
<div className="text-black">
<div dangerouslySetInnerHTML={ {__html: notification.message } } />
</div>
<NitroCardSimpleHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
<NitroCardContentView className="text-black">
{ content }
</NitroCardContentView>
</NitroCardView>
);

29
src/views/notification-center/views/hotel-will-shutdown/HotelWillShutdownView.tsx Normal file
View File

@ -0,0 +1,29 @@
import { FC } from 'react';
import { NitroCardContentView, NitroCardView } from '../../../../layout';
import { NitroCardSimpleHeaderView } from '../../../../layout/card/simple-header';
import { LocalizeText } from '../../../../utils/LocalizeText';
import { NotificationTrayItemView } from '../tray-item/NotificationTrayItemView';
import { HotelWillShutdownViewProps } from './HotelWillShutdownView.types';
export const HotelWillShutdownView: FC<HotelWillShutdownViewProps> = props =>
{
const { notification = null, inTray = null, onButtonClick = null } = props;
if(!notification) return null;
const content = <>{ LocalizeText('opening.hours.shutdown', ['m'], [notification.minutes.toString()]) }</>;
if(inTray)
return (
<NotificationTrayItemView title={ LocalizeText('mod.alert.title') } content={ content } timestamp={ notification.timestamp } onCloseClick={ () => onButtonClick('remove_notification') } />
);
return (
<NitroCardView className="nitro-notification">
<NitroCardSimpleHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
<NitroCardContentView className="text-black">
{ content }
</NitroCardContentView>
</NitroCardView>
);
};

7
src/views/notification-center/views/hotel-will-shutdown/HotelWillShutdownView.types.ts Normal file
View File

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

24
src/views/notification-center/views/moderator-message/ModeratorMessageView.tsx
View File

@ -2,24 +2,32 @@ import { FC } from 'react';
import { NitroCardContentView, NitroCardView } from '../../../../layout';
import { NitroCardSimpleHeaderView } from '../../../../layout/card/simple-header';
import { LocalizeText } from '../../../../utils/LocalizeText';
import { NotificationTrayItemView } from '../tray-item/NotificationTrayItemView';
import { ModeratorMessageViewProps } from './ModeratorMessageView.types';
export const ModeratorMessageView: FC<ModeratorMessageViewProps> = props =>
{
const { notification = null, onCloseClick = null } = props;
const { notification = null, inTray = null, onButtonClick = null } = props;
if(!notification) return null;
return (
<NitroCardView className="nitro-notification">
<NitroCardSimpleHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ onCloseClick } />
<NitroCardContentView>
<div className="text-black">
const content = <>
<div dangerouslySetInnerHTML={ {__html: notification.message } } />
<div className="fw-bold text-center">
<a href={ notification.link } rel="noreferrer" target="_blank" onClick={ onCloseClick }>{ LocalizeText('mod.alert.link') }</a>
</div>
<a href={ notification.link } rel="noreferrer" target="_blank" onClick={ () => onButtonClick('dismiss_notification') }>{ LocalizeText('mod.alert.link') }</a>
</div>
</>;
if(inTray)
return (
<NotificationTrayItemView title={ LocalizeText('mod.alert.title') } content={ content } timestamp={ notification.timestamp } onCloseClick={ () => onButtonClick('remove_notification') } />
);
return (
<NitroCardView className="nitro-notification">
<NitroCardSimpleHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
<NitroCardContentView className="text-black">
{ content }
</NitroCardContentView>
</NitroCardView>
);

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

@ -2,24 +2,30 @@ import { FC } from 'react';
import { NitroCardContentView, NitroCardView } from '../../../../layout';
import { NitroCardSimpleHeaderView } from '../../../../layout/card/simple-header';
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, onCloseClick = null } = props;
const { notification = null, inTray = null, onButtonClick = null } = props;
if(!notification) return null;
return (
<NitroCardView className="nitro-notification">
<NitroCardSimpleHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ onCloseClick } />
<NitroCardContentView>
<div className="text-black">
{ notification.messages.map((message, index) =>
const content = notification.messages.map((message, index) =>
{
return <div key={ index } dangerouslySetInnerHTML={ {__html: message } } />
}) }
</div>
});
if(inTray)
return (
<NotificationTrayItemView title={ LocalizeText('mod.alert.title') } content={ content } timestamp={ notification.timestamp } onCloseClick={ () => onButtonClick('remove_notification') } />
);
return (
<NitroCardView className="nitro-notification">
<NitroCardSimpleHeaderView headerText={ LocalizeText('mod.alert.title') } onCloseClick={ () => onButtonClick('dismiss_notification') } />
<NitroCardContentView className="text-black">
{ content }
</NitroCardContentView>
</NitroCardView>
);

22
src/views/notification-center/views/tray-item/NotificationTrayItemView.tsx Normal file
View File

@ -0,0 +1,22 @@
import { FC } from 'react';
import { NotificationTrayItemViewProps } from './NotificationTrayItemView.types';
export const NotificationTrayItemView: FC<NotificationTrayItemViewProps> = props =>
{
const { title = null, content = null, timestamp = null, onCloseClick = null } = props;
return (
<div className="rounded bg-muted mb-2 text-black">
<div className="py-1 px-2 fw-bold d-flex justify-content-between align-items-center">
<div className="me-2">{ title }</div>
<i className="fas fa-times cursor-pointer" onClick={ onCloseClick }></i>
</div>
<div className="py-1 px-2">
{ content }
</div>
<div className="py-1 px-2">
<i className="far fa-clock"></i> { timestamp }
</div>
</div>
);
};

7
src/views/notification-center/views/tray-item/NotificationTrayItemView.types.ts Normal file
View File

@ -0,0 +1,7 @@
export class NotificationTrayItemViewProps
{
title: string;
content: any;
timestamp: number;
onCloseClick: () => void;
}