diff --git a/src/events/mod-tools/ModToolsEvent.ts b/src/events/mod-tools/ModToolsEvent.ts index b6070a36..ac7dc7d8 100644 --- a/src/events/mod-tools/ModToolsEvent.ts +++ b/src/events/mod-tools/ModToolsEvent.ts @@ -5,6 +5,8 @@ export class ModToolsEvent extends NitroEvent public static SHOW_MOD_TOOLS: string = 'MTE_SHOW_MOD_TOOLS'; public static HIDE_MOD_TOOLS: string = 'MTE_HIDE_MOD_TOOLS'; public static TOGGLE_MOD_TOOLS: string = 'MTE_TOGGLE_MOD_TOOLS'; - public static SELECT_USER: string = 'MTE_SELECT_USER'; public static OPEN_ROOM_INFO: string = 'MTE_OPEN_ROOM_INFO'; + public static OPEN_ROOM_CHATLOG: string = 'MTE_OPEN_ROOM_CHATLOG'; + public static OPEN_USER_INFO: string = 'MTE_OPEN_USER_INFO'; + public static OPEN_USER_CHATLOG: string = 'MTE_OPEN_USER_CHATLOG'; } diff --git a/src/events/mod-tools/ModToolsOpenRoomChatlogEvent.ts b/src/events/mod-tools/ModToolsOpenRoomChatlogEvent.ts new file mode 100644 index 00000000..692e687d --- /dev/null +++ b/src/events/mod-tools/ModToolsOpenRoomChatlogEvent.ts @@ -0,0 +1,18 @@ +import { ModToolsEvent } from './ModToolsEvent'; + +export class ModToolsOpenRoomChatlogEvent extends ModToolsEvent +{ + private _roomId: number; + + constructor(roomId: number) + { + super(ModToolsEvent.OPEN_ROOM_CHATLOG); + + this._roomId = roomId; + } + + public get roomId(): number + { + return this._roomId; + } +} diff --git a/src/events/mod-tools/ModToolsOpenUserChatlogEvent.ts b/src/events/mod-tools/ModToolsOpenUserChatlogEvent.ts new file mode 100644 index 00000000..aa8858e8 --- /dev/null +++ b/src/events/mod-tools/ModToolsOpenUserChatlogEvent.ts @@ -0,0 +1,18 @@ +import { ModToolsEvent } from './ModToolsEvent'; + +export class ModToolsOpenUserChatlogEvent extends ModToolsEvent +{ + private _userId: number; + + constructor(userId: number) + { + super(ModToolsEvent.OPEN_USER_CHATLOG); + + this._userId = userId; + } + + public get userId(): number + { + return this._userId; + } +} diff --git a/src/events/mod-tools/ModToolsOpenUserInfoEvent.ts b/src/events/mod-tools/ModToolsOpenUserInfoEvent.ts new file mode 100644 index 00000000..58148ee9 --- /dev/null +++ b/src/events/mod-tools/ModToolsOpenUserInfoEvent.ts @@ -0,0 +1,18 @@ +import { ModToolsEvent } from './ModToolsEvent'; + +export class ModToolsOpenUserInfoEvent extends ModToolsEvent +{ + private _userId: number; + + constructor(userId: number) + { + super(ModToolsEvent.OPEN_USER_INFO); + + this._userId = userId; + } + + public get userId(): number + { + return this._userId; + } +} diff --git a/src/events/mod-tools/ModToolsSelectUserEvent.ts b/src/events/mod-tools/ModToolsSelectUserEvent.ts deleted file mode 100644 index 148ffe28..00000000 --- a/src/events/mod-tools/ModToolsSelectUserEvent.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ModToolsEvent } from './ModToolsEvent'; - -export class ModToolsSelectUserEvent extends ModToolsEvent -{ - private _webID: number; - private _name: string; - - constructor(webID: number, name: string) - { - super(ModToolsEvent.SELECT_USER); - - this._webID = webID; - this._name = name; - } - - public get webID(): number - { - return this._webID; - } - - public get name(): string - { - return this._name; - } -} diff --git a/src/views/mod-tools/ModToolsView.scss b/src/views/mod-tools/ModToolsView.scss index 66fe1306..73b4142d 100644 --- a/src/views/mod-tools/ModToolsView.scss +++ b/src/views/mod-tools/ModToolsView.scss @@ -2,6 +2,6 @@ width: 200px; } -@import './views/room-chatlog/ModToolsChatlogView'; @import './views/room/ModToolsRoomView'; @import './views/chatlog/ChatlogView'; +@import './views/user/ModToolsUserView'; diff --git a/src/views/mod-tools/ModToolsView.tsx b/src/views/mod-tools/ModToolsView.tsx index 60fc1ba3..3c5dec10 100644 --- a/src/views/mod-tools/ModToolsView.tsx +++ b/src/views/mod-tools/ModToolsView.tsx @@ -1,29 +1,31 @@ -import { RoomEngineEvent } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useEffect, useReducer, useState } from 'react'; +import { 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'; +import { ModToolsOpenRoomChatlogEvent } from '../../events/mod-tools/ModToolsOpenRoomChatlogEvent'; import { ModToolsOpenRoomInfoEvent } from '../../events/mod-tools/ModToolsOpenRoomInfoEvent'; -import { ModToolsSelectUserEvent } from '../../events/mod-tools/ModToolsSelectUserEvent'; +import { ModToolsOpenUserChatlogEvent } from '../../events/mod-tools/ModToolsOpenUserChatlogEvent'; +import { ModToolsOpenUserInfoEvent } from '../../events/mod-tools/ModToolsOpenUserInfoEvent'; import { useRoomEngineEvent } from '../../hooks/events'; import { dispatchUiEvent, useUiEvent } from '../../hooks/events/ui/ui-event'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout'; import { ModToolsContextProvider } from './context/ModToolsContext'; import { ModToolsViewProps } from './ModToolsView.types'; import { initialModTools, ModToolsActions, ModToolsReducer } from './reducers/ModToolsReducer'; +import { ISelectedUser } from './utils/ISelectedUser'; import { ModToolsChatlogView } from './views/room-chatlog/ModToolsChatlogView'; import { ModToolsRoomView } from './views/room/ModToolsRoomView'; import { ModToolsTicketsView } from './views/tickets/ModToolsTicketsView'; +import { ModToolsUserChatlogView } from './views/user-chatlog/ModToolsUserChatlogView'; import { ModToolsUserView } from './views/user/ModToolsUserView'; export const ModToolsView: FC = props => { const [ isVisible, setIsVisible ] = useState(false); const [ modToolsState, dispatchModToolsState ] = useReducer(ModToolsReducer, initialModTools); - const { currentRoomId = null, selectedUser = null, openRooms = null, openChatlogs = null } = modToolsState; - - const [ isRoomVisible, setIsRoomVisible ] = useState(false); - const [ isUserVisible, setIsUserVisible ] = useState(false); + const { currentRoomId = null, openRooms = null, openRoomChatlogs = null, openUserChatlogs = null, openUserInfo = null } = modToolsState; + const [ selectedUser, setSelectedUser] = useState(null); const [ isTicketsVisible, setIsTicketsVisible ] = useState(false); - const [ isChatlogVisible, setChatlogVisible ] = useState(false); const onModToolsEvent = useCallback((event: ModToolsEvent) => { @@ -38,41 +40,76 @@ export const ModToolsView: FC = props => case ModToolsEvent.TOGGLE_MOD_TOOLS: setIsVisible(value => !value); return; - case ModToolsEvent.SELECT_USER: { - const castedEvent = (event as ModToolsSelectUserEvent); - - dispatchModToolsState({ - type: ModToolsActions.SET_SELECTED_USER, - payload: { - selectedUser: { - webID: castedEvent.webID, - name: castedEvent.name - } - } - }); - return; - } case ModToolsEvent.OPEN_ROOM_INFO: { const castedEvent = (event as ModToolsOpenRoomInfoEvent); if(openRooms && openRooms.includes(castedEvent.roomId)) return; + const rooms = openRooms || []; + dispatchModToolsState({ type: ModToolsActions.SET_OPEN_ROOMS, payload: { - openRooms: [...openRooms, castedEvent.roomId] + openRooms: [...rooms, castedEvent.roomId] + } + }); + return; + } + case ModToolsEvent.OPEN_ROOM_CHATLOG: { + const castedEvent = (event as ModToolsOpenRoomChatlogEvent); + + if(openRoomChatlogs && openRoomChatlogs.includes(castedEvent.roomId)) return; + + const chatlogs = openRoomChatlogs || []; + + dispatchModToolsState({ + type: ModToolsActions.SET_OPEN_ROOM_CHATLOGS, + payload: { + openRoomChatlogs: [...chatlogs, castedEvent.roomId] + } + }); + return; + } + case ModToolsEvent.OPEN_USER_INFO: { + const castedEvent = (event as ModToolsOpenUserInfoEvent); + + if(openUserInfo && openUserInfo.includes(castedEvent.userId)) return; + + const userInfo = openUserInfo || []; + + dispatchModToolsState({ + type: ModToolsActions.SET_OPEN_USERINFO, + payload: { + openUserInfo: [...userInfo, castedEvent.userId] + } + }); + return; + } + case ModToolsEvent.OPEN_USER_CHATLOG: { + const castedEvent = (event as ModToolsOpenUserChatlogEvent); + + if(openUserChatlogs && openUserChatlogs.includes(castedEvent.userId)) return; + + const userChatlog = openUserChatlogs || []; + + dispatchModToolsState({ + type: ModToolsActions.SET_OPEN_USER_CHATLOGS, + payload: { + openUserChatlogs: [...userChatlog, castedEvent.userId] } }); return; } } - }, [ dispatchModToolsState, setIsVisible, openRooms ]); + }, [openRooms, openRoomChatlogs, openUserInfo, openUserChatlogs]); useUiEvent(ModToolsEvent.SHOW_MOD_TOOLS, onModToolsEvent); useUiEvent(ModToolsEvent.HIDE_MOD_TOOLS, onModToolsEvent); useUiEvent(ModToolsEvent.TOGGLE_MOD_TOOLS, onModToolsEvent); - useUiEvent(ModToolsEvent.SELECT_USER, onModToolsEvent); useUiEvent(ModToolsEvent.OPEN_ROOM_INFO, onModToolsEvent); + useUiEvent(ModToolsEvent.OPEN_ROOM_CHATLOG, onModToolsEvent); + useUiEvent(ModToolsEvent.OPEN_USER_INFO, onModToolsEvent); + useUiEvent(ModToolsEvent.OPEN_USER_CHATLOG, onModToolsEvent); const onRoomEngineEvent = useCallback((event: RoomEngineEvent) => { @@ -100,6 +137,23 @@ export const ModToolsView: FC = props => useRoomEngineEvent(RoomEngineEvent.INITIALIZED, onRoomEngineEvent); useRoomEngineEvent(RoomEngineEvent.DISPOSED, onRoomEngineEvent); + const onRoomEngineObjectEvent = useCallback((event: RoomEngineObjectEvent) => + { + if(event.category !== RoomObjectCategory.UNIT) return; + + const roomSession = GetRoomSession(); + + if(!roomSession) return; + + const userData = roomSession.userDataManager.getUserDataByIndex(event.objectId); + + if(!userData) return; + + setSelectedUser({ userId: userData.webID, username: userData.name }); + }, []); + + useRoomEngineEvent(RoomEngineObjectEvent.SELECTED, onRoomEngineObjectEvent); + const handleClick = useCallback((action: string, value?: string) => { if(!action) return; @@ -139,27 +193,95 @@ export const ModToolsView: FC = props => }); return; } - case 'close_chatlog': { - const itemIndex = openChatlogs.indexOf(Number(value)); + case 'toggle_room_chatlog': { + if(!openRoomChatlogs) + { + dispatchUiEvent(new ModToolsOpenRoomChatlogEvent(currentRoomId)); + return; + } - const clone = Array.from(openChatlogs); + const itemIndex = openRoomChatlogs.indexOf(currentRoomId); + + if(itemIndex > -1) + { + handleClick('close_room_chatlog', currentRoomId.toString()); + } + else + { + dispatchUiEvent(new ModToolsOpenRoomChatlogEvent(currentRoomId)); + } + return; + } + case 'close_room_chatlog': { + const itemIndex = openRoomChatlogs.indexOf(Number(value)); + + const clone = Array.from(openRoomChatlogs); clone.splice(itemIndex, 1); dispatchModToolsState({ - type: ModToolsActions.SET_OPEN_CHATLOGS, + type: ModToolsActions.SET_OPEN_ROOM_CHATLOGS, payload: { - openChatlogs: clone + openRoomChatlogs: clone + } + }); + return; + } + case 'toggle_user_info': { + + if(!selectedUser) return; + + const userId = selectedUser.userId; + + if(!openUserInfo) + { + dispatchUiEvent(new ModToolsOpenUserInfoEvent(userId)); + return; + } + + const itemIndex = openUserInfo.indexOf(userId); + + if(itemIndex > -1) + { + handleClick('close_user_info', userId.toString()); + } + else + { + dispatchUiEvent(new ModToolsOpenUserInfoEvent(userId)); + } + return; + } + case 'close_user_info': { + const itemIndex = openUserInfo.indexOf(Number(value)); + + const clone = Array.from(openUserInfo); + clone.splice(itemIndex, 1); + + dispatchModToolsState({ + type: ModToolsActions.SET_OPEN_USERINFO, + payload: { + openUserInfo: clone + } + }); + return; + } + case 'close_user_chatlog': { + const itemIndex = openUserChatlogs.indexOf(Number(value)); + + const clone = Array.from(openUserChatlogs); + clone.splice(itemIndex, 1); + + dispatchModToolsState({ + type: ModToolsActions.SET_OPEN_USER_CHATLOGS, + payload: { + openUserChatlogs: clone } }); return; } } - }, [ dispatchModToolsState, openRooms, openChatlogs, currentRoomId ]); + }, [openRooms, currentRoomId, openRoomChatlogs, selectedUser, openUserInfo, openUserChatlogs]); - useEffect(() => - { - if(!isVisible) return; - }, [ isVisible ]); + if(!isVisible) return null; return ( @@ -168,8 +290,8 @@ export const ModToolsView: FC = props => setIsVisible(false) } /> - - + + } @@ -178,10 +300,23 @@ export const ModToolsView: FC = props => return handleClick('close_room', roomId.toString()) } />; }) } + { openRoomChatlogs && openRoomChatlogs.map(roomId => + { + return handleClick('close_room_chatlog', roomId.toString()) } />; + }) + } + { openUserInfo && openUserInfo.map(userId => + { + return handleClick('close_user_info', userId.toString())}/> + }) + } + { openUserChatlogs && openUserChatlogs.map(userId => + { + return handleClick('close_user_chatlog', userId.toString())}/> + }) + } - { isUserVisible && } { isTicketsVisible && setIsTicketsVisible(false) } /> } - { isChatlogVisible && setChatlogVisible(false) }/>} ); } diff --git a/src/views/mod-tools/reducers/ModToolsReducer.tsx b/src/views/mod-tools/reducers/ModToolsReducer.tsx index 955d70b9..9301e941 100644 --- a/src/views/mod-tools/reducers/ModToolsReducer.tsx +++ b/src/views/mod-tools/reducers/ModToolsReducer.tsx @@ -2,48 +2,47 @@ import { Reducer } from 'react'; export interface IModToolsState { - selectedUser: {webID: number, name: string}; currentRoomId: number; openRooms: number[]; - openChatlogs: number[]; + openRoomChatlogs: number[]; + openUserInfo: number[]; + openUserChatlogs: number[]; } export interface IModToolsAction { type: string; payload: { - selectedUser?: {webID: number, name: string}; currentRoomId?: number; openRooms?: number[]; - openChatlogs?: number[]; + openRoomChatlogs?: number[]; + openUserInfo?: number[]; + openUserChatlogs?: number[]; } } export class ModToolsActions { - public static SET_SELECTED_USER: string = 'MTA_SET_SELECTED_USER'; 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_CHATLOGS: string = 'MTA_SET_OPEN_CHATLOGS'; + public static SET_OPEN_USERINFO: string = 'MTA_SET_OPEN_USERINFO'; + public static SET_OPEN_ROOM_CHATLOGS: string = 'MTA_SET_OPEN_CHATLOGS'; + public static SET_OPEN_USER_CHATLOGS: string = 'MTA_SET_OPEN_USER_CHATLOGS'; public static RESET_STATE: string = 'MTA_RESET_STATE'; } export const initialModTools: IModToolsState = { - selectedUser: null, currentRoomId: null, openRooms: null, - openChatlogs: null + openRoomChatlogs: null, + openUserChatlogs: null, + openUserInfo: null }; export const ModToolsReducer: Reducer = (state, action) => { switch(action.type) { - case ModToolsActions.SET_SELECTED_USER: { - const selectedUser = (action.payload.selectedUser || state.selectedUser || null); - - return { ...state, selectedUser }; - } case ModToolsActions.SET_CURRENT_ROOM_ID: { const currentRoomId = (action.payload.currentRoomId || state.currentRoomId || null); @@ -54,6 +53,21 @@ export const ModToolsReducer: Reducer = (state, return { ...state, openRooms }; } + case ModToolsActions.SET_OPEN_USERINFO: { + const openUserInfo = (action.payload.openUserInfo || state.openUserInfo || null); + + return { ...state, openUserInfo }; + } + case ModToolsActions.SET_OPEN_ROOM_CHATLOGS: { + const openRoomChatlogs = (action.payload.openRoomChatlogs || state.openRoomChatlogs || null); + + return { ...state, openRoomChatlogs }; + } + case ModToolsActions.SET_OPEN_USER_CHATLOGS: { + const openUserChatlogs = (action.payload.openUserChatlogs || state.openUserChatlogs || null); + + return { ...state, openUserChatlogs }; + } case ModToolsActions.RESET_STATE: { return { ...initialModTools }; } diff --git a/src/views/mod-tools/utils/ISelectedUser.ts b/src/views/mod-tools/utils/ISelectedUser.ts new file mode 100644 index 00000000..c5a657a9 --- /dev/null +++ b/src/views/mod-tools/utils/ISelectedUser.ts @@ -0,0 +1,4 @@ +export interface ISelectedUser { + userId: number; + username: string; +} diff --git a/src/views/mod-tools/views/chatlog/ChatlogView.scss b/src/views/mod-tools/views/chatlog/ChatlogView.scss index 662d0c7a..33df955a 100644 --- a/src/views/mod-tools/views/chatlog/ChatlogView.scss +++ b/src/views/mod-tools/views/chatlog/ChatlogView.scss @@ -26,6 +26,10 @@ word-break: break-all; } } + + .room-info { + border-bottom: 1px solid rgba(0, 0, 0, 0.2); + } } } } diff --git a/src/views/mod-tools/views/chatlog/ChatlogView.tsx b/src/views/mod-tools/views/chatlog/ChatlogView.tsx index 78b3dd07..563bf700 100644 --- a/src/views/mod-tools/views/chatlog/ChatlogView.tsx +++ b/src/views/mod-tools/views/chatlog/ChatlogView.tsx @@ -1,16 +1,18 @@ -import { UserProfileComposer } from '@nitrots/nitro-renderer'; -import { FC } from 'react'; +import { ChatRecordData, ModtoolRoomChatlogLine, UserProfileComposer } from '@nitrots/nitro-renderer'; +import { FC, useCallback } from 'react'; import { AutoSizer, CellMeasurer, CellMeasurerCache, List, ListRowProps, ListRowRenderer } from 'react-virtualized'; -import { SendMessageHook } from '../../../../hooks'; +import { TryVisitRoom } from '../../../../api'; +import { ModToolsOpenRoomInfoEvent } from '../../../../events/mod-tools/ModToolsOpenRoomInfoEvent'; +import { dispatchUiEvent, SendMessageHook } from '../../../../hooks'; import { ChatlogViewProps } from './ChatlogView.types'; export const ChatlogView: FC = props => { - const { record = null } = props; + const { records = null } = props; - const rowRenderer: ListRowRenderer = (props: ListRowProps) => + const simpleRowRenderer: ListRowRenderer = (props: ListRowProps) => { - const item = record.chatlog[props.index]; + const item = records[0].chatlog[props.index]; return ( = props => ); }; + const advancedRowRenderer: ListRowRenderer = (props: ListRowProps) => + { + let chatlogEntry: ModtoolRoomChatlogLine; + let currentRecord: ChatRecordData; + let isRoomInfo = false; + + let totalIndex = 0; + for(let i = 0; i < records.length; i++) + { + currentRecord = records[i]; + + totalIndex++; // row for room info + totalIndex = totalIndex + currentRecord.chatlog.length; + + if(props.index > (totalIndex - 1)) + { + continue; // it is not in current one + } + + if( (props.index + 1) === (totalIndex - currentRecord.chatlog.length)) + { + console.log(`global: ${props.index} roomInfo ${currentRecord.roomName}`); + isRoomInfo = true; + break; + } + const index = props.index - (totalIndex - currentRecord.chatlog.length); + chatlogEntry = currentRecord.chatlog[index]; + console.log(`global: ${props.index} local: ${index} value: ${chatlogEntry}`); + break; + } + + return ( + + {isRoomInfo && } + {!isRoomInfo && +
+
{chatlogEntry.timestamp}
+
SendMessageHook(new UserProfileComposer(chatlogEntry.userId))}>{chatlogEntry.userName}
+
{chatlogEntry.message}
+
+ } + +
+ ); + } + + const getNumRowsForAdvanced = useCallback(() => + { + let count = 0; + + for(let i = 0; i < records.length; i++) + { + count++; // add room info row + count = count + records[i].chatlog.length; + } + + return count; + }, [records]); + const cache = new CellMeasurerCache({ defaultHeight: 25, fixedWidth: true }); + const RoomInfo = useCallback(({ roomId, roomName, uniqueKey, style }) => + { + return ( +
+
Room: {roomName}
+ + +
+ ); + }, []); + return ( <> - {record &&
-
-
Time
-
User
-
Message
-
-
- - {({ height, width }) => - { - cache.clearAll(); - - return ( - - ) - } - } - -
-
} + { + (records && records.length) && + <> + {(records.length === 1) && } +
+
+
Time
+
User
+
Message
+
+
+ + {({ height, width }) => + { + cache.clearAll(); + + return ( + 1 ? getNumRowsForAdvanced() : records[0].chatlog.length} + rowHeight={cache.rowHeight} + className={'chatlog-container'} + rowRenderer={records.length > 1 ? advancedRowRenderer : simpleRowRenderer} + deferredMeasurementCache={cache} /> + ) + } + } + +
+
+ + } ); } diff --git a/src/views/mod-tools/views/chatlog/ChatlogView.types.ts b/src/views/mod-tools/views/chatlog/ChatlogView.types.ts index edf5ed3e..f307109f 100644 --- a/src/views/mod-tools/views/chatlog/ChatlogView.types.ts +++ b/src/views/mod-tools/views/chatlog/ChatlogView.types.ts @@ -2,5 +2,5 @@ import { ChatRecordData } from '@nitrots/nitro-renderer'; export interface ChatlogViewProps { - record: ChatRecordData; + records: ChatRecordData[]; } diff --git a/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.scss b/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.scss deleted file mode 100644 index cf1d0dca..00000000 --- a/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.scss +++ /dev/null @@ -1,3 +0,0 @@ -.nitro-mod-tools-room-chatlog { - -} diff --git a/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.tsx b/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.tsx index dbf902c6..b1799000 100644 --- a/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.tsx +++ b/src/views/mod-tools/views/room-chatlog/ModToolsChatlogView.tsx @@ -1,6 +1,5 @@ import { ChatRecordData, ModtoolRequestRoomChatlogComposer, ModtoolRoomChatlogEvent } from '@nitrots/nitro-renderer'; import { FC, useCallback, useEffect, useState } from 'react'; -import { TryVisitRoom } from '../../../../api'; import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout'; import { ChatlogView } from '../chatlog/ChatlogView'; @@ -28,33 +27,12 @@ export const ModToolsChatlogView: FC = props => CreateMessageHook(ModtoolRoomChatlogEvent, onModtoolRoomChatlogEvent); - const handleClick = useCallback((action: string, value?: string) => - { - if(!action) return; - - switch(action) - { - case 'close': - onCloseClick(); - return; - case 'visit_room': - TryVisitRoom(roomChatlog.roomId); - return; - } - }, [onCloseClick, roomChatlog]); - return ( - handleClick('close')} /> + onCloseClick()} /> {roomChatlog && - <> -
- - -
- - + }
diff --git a/src/views/mod-tools/views/room/ModToolsRoomView.scss b/src/views/mod-tools/views/room/ModToolsRoomView.scss index 55ed938a..4faa2b33 100644 --- a/src/views/mod-tools/views/room/ModToolsRoomView.scss +++ b/src/views/mod-tools/views/room/ModToolsRoomView.scss @@ -1,3 +1,8 @@ .nitro-mod-tools-room { width: 240px; + + .username { + color: #1E7295; + text-decoration: underline; + } } diff --git a/src/views/mod-tools/views/room/ModToolsRoomView.tsx b/src/views/mod-tools/views/room/ModToolsRoomView.tsx index c236a9d2..a6bd2a7b 100644 --- a/src/views/mod-tools/views/room/ModToolsRoomView.tsx +++ b/src/views/mod-tools/views/room/ModToolsRoomView.tsx @@ -1,5 +1,8 @@ import { ModtoolRequestRoomInfoComposer, ModtoolRoomInfoEvent } from '@nitrots/nitro-renderer'; import { FC, useCallback, useEffect, useState } from 'react'; +import { TryVisitRoom } from '../../../../api'; +import { ModToolsOpenRoomChatlogEvent } from '../../../../events/mod-tools/ModToolsOpenRoomChatlogEvent'; +import { dispatchUiEvent } from '../../../../hooks'; import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout'; import { ModToolsRoomViewProps } from './ModToolsRoomView.types'; @@ -57,15 +60,15 @@ export const ModToolsRoomView: FC = props =>
- Room Owner: { ownerName } + Room Owner: { ownerName }
- +
Users in room: { usersInRoom }
- +
diff --git a/src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.tsx b/src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.tsx new file mode 100644 index 00000000..23b1590d --- /dev/null +++ b/src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.tsx @@ -0,0 +1,41 @@ +import { ChatRecordData, ModtoolRequestUserChatlogComposer, ModtoolUserChatlogEvent } from '@nitrots/nitro-renderer'; +import { FC, useCallback, useEffect, useState } from 'react'; +import { CreateMessageHook, SendMessageHook } from '../../../../hooks'; +import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout'; +import { ChatlogView } from '../chatlog/ChatlogView'; +import { ModToolsUserChatlogViewProps } from './ModToolsUserChatlogView.types'; + +export const ModToolsUserChatlogView: FC = props => +{ + const { userId = null, onCloseClick = null } = props; + const [userChatlog, setUserChatlog] = useState(null); + const [username, setUsername] = useState(null); + + useEffect(() => + { + SendMessageHook(new ModtoolRequestUserChatlogComposer(userId)); + }, [userId]); + + const onModtoolUserChatlogEvent = useCallback((event: ModtoolUserChatlogEvent) => + { + const parser = event.getParser(); + + if(!parser) return; + + setUsername(parser.username); + setUserChatlog(parser.roomVisits); + }, [setUsername, setUserChatlog]); + + CreateMessageHook(ModtoolUserChatlogEvent, onModtoolUserChatlogEvent); + + return ( + + onCloseClick()} /> + + {userChatlog && + + } + + + ); +} diff --git a/src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.types.ts b/src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.types.ts new file mode 100644 index 00000000..c8eea569 --- /dev/null +++ b/src/views/mod-tools/views/user-chatlog/ModToolsUserChatlogView.types.ts @@ -0,0 +1,5 @@ +export interface ModToolsUserChatlogViewProps +{ + userId: number; + onCloseClick: () => void; +} diff --git a/src/views/mod-tools/views/user/ModToolsUserView.scss b/src/views/mod-tools/views/user/ModToolsUserView.scss new file mode 100644 index 00000000..05757d6c --- /dev/null +++ b/src/views/mod-tools/views/user/ModToolsUserView.scss @@ -0,0 +1,8 @@ +.nitro-mod-tools-user { + width: 240px; + + .username { + color: #1E7295; + text-decoration: underline; + } +} diff --git a/src/views/mod-tools/views/user/ModToolsUserView.tsx b/src/views/mod-tools/views/user/ModToolsUserView.tsx index d3a2f076..03c109fa 100644 --- a/src/views/mod-tools/views/user/ModToolsUserView.tsx +++ b/src/views/mod-tools/views/user/ModToolsUserView.tsx @@ -1,14 +1,58 @@ -import { FC } from 'react'; +import { ModeratorUserInfoData, ModtoolRequestUserInfoComposer, ModtoolUserInfoEvent } from '@nitrots/nitro-renderer'; +import { FC, useCallback, useEffect, useState } from 'react'; +import { ModToolsOpenUserChatlogEvent } from '../../../../events/mod-tools/ModToolsOpenUserChatlogEvent'; +import { CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../../../hooks'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout'; +import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView'; import { ModToolsUserViewProps } from './ModToolsUserView.types'; export const ModToolsUserView: FC = props => { + const { onCloseClick = null, userId = null, simple = true } = props; + const [userInfo, setUserInfo] = useState(null); + + useEffect(() => + { + SendMessageHook(new ModtoolRequestUserInfoComposer(userId)); + }, [userId]); + + + const onModtoolUserInfoEvent = useCallback((event: ModtoolUserInfoEvent) => + { + const parser = event.getParser(); + + if(!parser) return; + + console.log(parser); + setUserInfo(parser.data); + }, [setUserInfo]); + + CreateMessageHook(ModtoolUserInfoEvent, onModtoolUserInfoEvent); + return ( - - {} } /> + + onCloseClick()} /> - + {userInfo && + <> + {!simple && +
+ +
+ } +
+
+ Name: {userInfo.userName} +
+ +
+
+
+ CFHs: {userInfo.cfhCount} +
+
+ + }
); diff --git a/src/views/mod-tools/views/user/ModToolsUserView.types.ts b/src/views/mod-tools/views/user/ModToolsUserView.types.ts index 55b9477c..21d30670 100644 --- a/src/views/mod-tools/views/user/ModToolsUserView.types.ts +++ b/src/views/mod-tools/views/user/ModToolsUserView.types.ts @@ -1,2 +1,6 @@ export interface ModToolsUserViewProps -{} +{ + userId: number; + onCloseClick: () => void; + simple?: boolean; +}