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

added user room visits view

Browse Source
This commit is contained in:
dank074 2021-10-19 21:48:43 -05:00
parent e81cc1e7fd
commit 59dfb8d9b4
12 changed files with 197 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/views/mod-tools/ModToolsView.scss
View File

@ -5,3 +5,4 @@
@import './views/room/room-tools/ModToolsRoomView';
@import './views/chatlog/ChatlogView';
@import './views/user/user-info/ModToolsUserView';
@import './views/user/user-room-visits/ModToolsUserRoomVisitsView';

19
src/views/mod-tools/ModToolsView.tsx
View File

@ -1,4 +1,4 @@
import { RoomEngineEvent, RoomEngineObjectEvent, RoomObjectCategory } from '@nitrots/nitro-renderer';
import { ModeratorInitMessageEvent, RoomEngineEvent, RoomEngineObjectEvent, RoomObjectCategory } from '@nitrots/nitro-renderer';
import { FC, useCallback, useReducer, useState } from 'react';
import { GetRoomSession } from '../../api';
import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent';
@ -6,6 +6,7 @@ import { ModToolsOpenRoomChatlogEvent } from '../../events/mod-tools/ModToolsOpe
import { ModToolsOpenRoomInfoEvent } from '../../events/mod-tools/ModToolsOpenRoomInfoEvent';
import { ModToolsOpenUserChatlogEvent } from '../../events/mod-tools/ModToolsOpenUserChatlogEvent';
import { ModToolsOpenUserInfoEvent } from '../../events/mod-tools/ModToolsOpenUserInfoEvent';
import { CreateMessageHook } from '../../hooks';
import { useRoomEngineEvent } from '../../hooks/events';
import { dispatchUiEvent, useUiEvent } from '../../hooks/events/ui/ui-event';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
@ -154,6 +155,22 @@ export const ModToolsView: FC<ModToolsViewProps> = props =>
useRoomEngineEvent(RoomEngineObjectEvent.SELECTED, onRoomEngineObjectEvent);
const onModeratorInitMessageEvent = useCallback((event: ModeratorInitMessageEvent) =>
{
const parser = event.getParser();
if(!parser) return;
dispatchModToolsState({
type: ModToolsActions.SET_INIT_DATA,
payload: {
settings: parser.data
}
});
}, []);
CreateMessageHook(ModeratorInitMessageEvent, onModeratorInitMessageEvent);
const handleClick = useCallback((action: string, value?: string) =>
{
if(!action) return;

10
src/views/mod-tools/reducers/ModToolsReducer.tsx
View File

@ -1,7 +1,9 @@
import { ModeratorInitData } from '@nitrots/nitro-renderer';
import { Reducer } from 'react';
export interface IModToolsState
{
settings: ModeratorInitData;
currentRoomId: number;
openRooms: number[];
openRoomChatlogs: number[];
@ -13,6 +15,7 @@ export interface IModToolsAction
{
type: string;
payload: {
settings?: ModeratorInitData;
currentRoomId?: number;
openRooms?: number[];
openRoomChatlogs?: number[];
@ -23,6 +26,7 @@ export interface IModToolsAction
export class ModToolsActions
{
public static SET_INIT_DATA: string = 'MTA_SET_INIT_DATA';
public static SET_CURRENT_ROOM_ID: string = 'MTA_SET_CURRENT_ROOM_ID';
public static SET_OPEN_ROOMS: string = 'MTA_SET_OPEN_ROOMS';
public static SET_OPEN_USERINFO: string = 'MTA_SET_OPEN_USERINFO';
@ -32,6 +36,7 @@ export class ModToolsActions
}
export const initialModTools: IModToolsState = {
settings: null,
currentRoomId: null,
openRooms: null,
openRoomChatlogs: null,
@ -43,6 +48,11 @@ export const ModToolsReducer: Reducer<IModToolsState, IModToolsAction> = (state,
{
switch(action.type)
{
case ModToolsActions.SET_INIT_DATA: {
const data = (action.payload.settings || state.settings || null);
return { ...state, data };
}
case ModToolsActions.SET_CURRENT_ROOM_ID: {
const currentRoomId = (action.payload.currentRoomId || state.currentRoomId || null);

2
src/views/mod-tools/views/user/user-info/ModToolsUserView.scss
View File

@ -1,6 +1,6 @@
.nitro-mod-tools-user {
width: 350px;
height: 400px;
height: 370px;
.username {
color: #1E7295;

17
src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx
View File

@ -5,6 +5,9 @@ import { CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../..
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
import { IUserInfo } from '../../../utils/IUserInfo';
import { ModToolsUserModActionView } from '../user-mod-action/ModToolsUserModActionView';
import { ModToolsUserRoomVisitsView } from '../user-room-visits/ModToolsUserRoomVisitsView';
import { ModToolsSendUserMessageView } from '../user-sendmessage/ModToolsSendUserMessageView';
import { ModToolsUserViewProps } from './ModToolsUserView.types';
@ -12,6 +15,9 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
{
const { onCloseClick = null, userId = null, simple = true } = props;
const [userInfo, setUserInfo] = useState<ModeratorUserInfoData>(null);
const [sendMessageVisible, setSendMessageVisible] = useState(false);
const [modActionVisible, setModActionVisible] = useState(false);
const [roomVisitsVisible, setRoomVisitsVisible] = useState(false);
useEffect(() =>
{
@ -120,6 +126,7 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
}, [userInfo]);
return (
<>
<NitroCardView className="nitro-mod-tools-user" simple={true}>
<NitroCardHeaderView headerText={'User Info: ' + (userInfo ? userInfo.userName : '')} onCloseClick={() => onCloseClick()} />
<NitroCardContentView className="text-black">
@ -149,13 +156,17 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
</div>
<div className="col-5">
<button className="btn btn-sm btn-primary" onClick={() => dispatchUiEvent(new ModToolsOpenUserChatlogEvent(userId))}>Room Chat</button>
<button className="btn btn-sm btn-primary mt-2">Send Message</button>
<button className="btn btn-sm btn-primary mt-2">Room Visits</button>
<button className="btn btn-sm btn-primary mt-2">Mod Action</button>
<button className="btn btn-sm btn-primary mt-2" onClick={ () => setSendMessageVisible(!sendMessageVisible)}>Send Message</button>
<button className="btn btn-sm btn-primary mt-2" onClick={ () => setRoomVisitsVisible(!roomVisitsVisible)}>Room Visits</button>
<button className="btn btn-sm btn-primary mt-2" onClick={ () => setModActionVisible(!modActionVisible)}>Mod Action</button>
</div>
</div>
}
</NitroCardContentView>
</NitroCardView>
{(sendMessageVisible && userInfo) && <ModToolsSendUserMessageView user={{ userId: userId, username: userInfo.userName }} onCloseClick={ () => setSendMessageVisible(false)}/>}
{(userInfo && modActionVisible) && <ModToolsUserModActionView user={{ userId: userId, username: userInfo.userName }} onCloseClick={() => setModActionVisible(false)}/>}
{(userInfo && roomVisitsVisible) && <ModToolsUserRoomVisitsView userId={userId} onCloseClick={ () => setRoomVisitsVisible(false)}/>}
</>
);
}

17
src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx Normal file
View File

@ -0,0 +1,17 @@
import { FC } from 'react';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
import { ModToolsUserModActionViewProps } from './ModToolsUserModActionView.types';
export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = props =>
{
const { user = null, onCloseClick = null } = props;
return (
<NitroCardView className="nitro-mod-tools-user-action" simple={true}>
<NitroCardHeaderView headerText={'Mod Action'} onCloseClick={() => onCloseClick()} />
<NitroCardContentView className="text-black">
{user && <div></div>}
</NitroCardContentView>
</NitroCardView>
);
}

7
src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.types.ts Normal file
View File

@ -0,0 +1,7 @@
import { ISelectedUser } from '../../../utils/ISelectedUser';
export interface ModToolsUserModActionViewProps
{
user: ISelectedUser;
onCloseClick: () => void;
}

14
src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.scss Normal file
View File

@ -0,0 +1,14 @@
.nitro-mod-tools-user-visits {
min-width: 300px;
.user-visits {
min-height: 200px;
.roomvisits-container {
div.room-visit {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
}
}
}

66
src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx Normal file
View File

@ -0,0 +1,66 @@
import { ModtoolReceivedRoomsUserEvent, ModtoolRequestUserRoomsComposer, ModtoolRoomVisitedData } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import { AutoSizer, List, ListRowProps, ListRowRenderer } from 'react-virtualized';
import { CreateMessageHook, SendMessageHook } from '../../../../../hooks';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
import { ModToolsUserRoomVisitsViewProps } from './ModToolsUserRoomVisitsView.types';
export const ModToolsUserRoomVisitsView: FC<ModToolsUserRoomVisitsViewProps> = props =>
{
const { userId = null, onCloseClick = null } = props;
const [roomVisitData, setRoomVisitData] = useState<ModtoolRoomVisitedData>(null);
useEffect(() =>
{
SendMessageHook(new ModtoolRequestUserRoomsComposer(userId));
}, [userId]);
const onModtoolReceivedRoomsUserEvent = useCallback((event: ModtoolReceivedRoomsUserEvent) =>
{
const parser = event.getParser();
if(!parser || parser.data.userId !== userId) return;
setRoomVisitData(parser.data);
}, [userId]);
CreateMessageHook(ModtoolReceivedRoomsUserEvent, onModtoolReceivedRoomsUserEvent);
const RowRenderer: ListRowRenderer = (props: ListRowProps) =>
{
const item = roomVisitData.rooms[props.index];
return (
<div style={props.style} key={props.key} className="room-visit">
{item.enterHour}:{item.enterMinute} <b>Room:</b> {item.roomName}
</div>);
}
return (
<NitroCardView className="nitro-mod-tools-user-visits" simple={true}>
<NitroCardHeaderView headerText={'User Visits'} onCloseClick={() => onCloseClick()} />
<NitroCardContentView className="text-black">
{roomVisitData &&
<div className="row h-100 w-100 user-visits">
<AutoSizer defaultWidth={400} defaultHeight={200}>
{({ height, width }) =>
{
return (
<List
width={width}
height={height}
rowCount={roomVisitData.rooms.length}
rowHeight={25}
className={'roomvisits-container'}
rowRenderer={RowRenderer}
/>
)
}}
</AutoSizer>
</div>
}
</NitroCardContentView>
</NitroCardView>
);
}

5
src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.types.ts Normal file
View File

@ -0,0 +1,5 @@
export interface ModToolsUserRoomVisitsViewProps
{
userId: number;
onCloseClick: () => void;
}

7
src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessage.types.ts Normal file
View File

@ -0,0 +1,7 @@
import { ISelectedUser } from '../../../utils/ISelectedUser';
export interface ModToolsSendUserMessageViewProps
{
user: ISelectedUser;
onCloseClick: () => void;
}

37
src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessageView.tsx Normal file
View File

@ -0,0 +1,37 @@
import { ModMessageMessageComposer } from '@nitrots/nitro-renderer';
import { FC, useCallback, useState } from 'react';
import { SendMessageHook } from '../../../../../hooks';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
import { ModToolsSendUserMessageViewProps } from './ModToolsSendUserMessage.types';
export const ModToolsSendUserMessageView: FC<ModToolsSendUserMessageViewProps> = props =>
{
const { user = null, onCloseClick = null } = props;
const [message, setMessage] = useState('');
const sendMessage = useCallback(() =>
{
if(message.trim().length === 0) return;
SendMessageHook(new ModMessageMessageComposer(user.userId, message, -999));
}, [message, user.userId]);
return (
<NitroCardView className="nitro-mod-tools-user-message" simple={true}>
<NitroCardHeaderView headerText={'Send Message'} onCloseClick={() => onCloseClick()} />
<NitroCardContentView className="text-black">
{user && <>
<div>Message To: {user.username}</div>
<div className="form-group mb-2">
<textarea className="form-control" value={message} onChange={e => setMessage(e.target.value)}></textarea>
</div>
<div className="form-group mb-2">
<button type="button" className="btn btn-primary" onClick={ () => sendMessage()}>Send message</button>
</div>
</>}
</NitroCardContentView>
</NitroCardView>
);
}