diff --git a/src/views/mod-tools/views/user/user-info/ModToolsUserView.scss b/src/views/mod-tools/views/user/user-info/ModToolsUserView.scss index cb138384..ddc24350 100644 --- a/src/views/mod-tools/views/user/user-info/ModToolsUserView.scss +++ b/src/views/mod-tools/views/user/user-info/ModToolsUserView.scss @@ -19,9 +19,5 @@ color: $black; background: rgba(0, 0, 0, .05); } - - td { - padding: 0px 5px; - } } } diff --git a/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx b/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx index b056553b..5981f666 100644 --- a/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx +++ b/src/views/mod-tools/views/user/user-info/ModToolsUserView.tsx @@ -1,29 +1,26 @@ import { FriendlyTime, ModeratorUserInfoData, ModtoolRequestUserInfoComposer, ModtoolUserInfoEvent } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useEffect, useState } from 'react'; +import { FC, useCallback, useEffect, useMemo, useState } from 'react'; +import { LocalizeText } from '../../../../../api'; 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 { IUserInfo } from '../../../utils/IUserInfo'; +import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutButton, NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../../layout'; 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'; - export const ModToolsUserView: FC = props => { - const { onCloseClick = null, userId = null, simple = true } = props; - const [userInfo, setUserInfo] = useState(null); - const [sendMessageVisible, setSendMessageVisible] = useState(false); - const [modActionVisible, setModActionVisible] = useState(false); - const [roomVisitsVisible, setRoomVisitsVisible] = useState(false); + const { onCloseClick = null, userId = null } = props; + const [ userInfo, setUserInfo ] = useState(null); + const [ sendMessageVisible, setSendMessageVisible ] = useState(false); + const [ modActionVisible, setModActionVisible ] = useState(false); + const [ roomVisitsVisible, setRoomVisitsVisible ] = useState(false); useEffect(() => { SendMessageHook(new ModtoolRequestUserInfoComposer(userId)); - }, [userId]); - + }, [ userId ]); const onModtoolUserInfoEvent = useCallback((event: ModtoolUserInfoEvent) => { @@ -36,137 +33,121 @@ export const ModToolsUserView: FC = props => CreateMessageHook(ModtoolUserInfoEvent, onModtoolUserInfoEvent); - const OnlineIcon = useCallback(() => + const userProperties = useMemo(() => { - if(userInfo.online) return (); - else return (); - }, [userInfo]); + if(!userInfo) return null; - const userProperties = useCallback(() => - { - let properties: IUserInfo[] = []; - - if(!userInfo) return properties; - - properties = [ + return [ { - nameKey: 'name', - nameKeyFallback: 'Name', - value: userInfo.userName + localeKey: 'modtools.userinfo.userName', + value: userInfo.userName, + showOnline: true }, { - nameKey: 'cfhs', - nameKeyFallback: 'CFHs', + localeKey: 'modtools.userinfo.cfhCount', value: userInfo.cfhCount.toString() }, { - nameKey: 'abusive_cfhs', - nameKeyFallback: 'Abusive CFHs', + localeKey: 'modtools.userinfo.abusiveCfhCount', value: userInfo.abusiveCfhCount.toString() }, { - nameKey: 'cautions', - nameKeyFallback: 'Cautions', + localeKey: 'modtools.userinfo.cautionCount', value: userInfo.cautionCount.toString() }, { - nameKey: 'bans', - nameKeyFallback: 'Bans', + localeKey: 'modtools.userinfo.banCount', value: userInfo.banCount.toString() }, { - nameKey: 'last_sanction', - nameKeyFallback: 'Last sanction', + localeKey: 'modtools.userinfo.lastSanctionTime', value: userInfo.lastSanctionTime }, { - nameKey: 'trade_locks', - nameKeyFallback: 'Trade locks', + localeKey: 'modtools.userinfo.tradingLockCount', value: userInfo.tradingLockCount.toString() }, { - nameKey: 'lock_expires', - nameKeyFallback: 'Lock expires', + localeKey: 'modtools.userinfo.tradingExpiryDate', value: userInfo.tradingExpiryDate }, { - nameKey: 'last_login', - nameKeyFallback: 'Last login', + localeKey: 'modtools.userinfo.minutesSinceLastLogin', value: FriendlyTime.format(userInfo.minutesSinceLastLogin * 60, '.ago', 2) }, { - nameKey: 'purchase', - nameKeyFallback: 'Purchases', + localeKey: 'modtools.userinfo.lastPurchaseDate', value: userInfo.lastPurchaseDate }, { - nameKey: 'email', - nameKeyFallback: 'Email', + localeKey: 'modtools.userinfo.primaryEmailAddress', value: userInfo.primaryEmailAddress }, { - nameKey: 'acc_bans', - nameKeyFallback: 'Banned Accs.', + localeKey: 'modtools.userinfo.identityRelatedBanCount', value: userInfo.identityRelatedBanCount.toString() }, { - nameKey: 'registered', - nameKeyFallback: 'Registered', + localeKey: 'modtools.userinfo.registrationAgeInMinutes', value: FriendlyTime.format(userInfo.registrationAgeInMinutes * 60, '.ago', 2) }, { - nameKey: 'rank', - nameKeyFallback: 'Rank', + localeKey: 'modtools.userinfo.userClassification', value: userInfo.userClassification } ]; + }, [ userInfo ]); - return properties; - - }, [userInfo]); + if(!userInfo) return null; return ( <> - - onCloseClick()} /> - - {userInfo && -
- {!simple && -
- -
- } -
- + + + + + +
- {userProperties().map(property => - { - return ( - - - - - ) - })} + { userProperties.map(property => + { + + return ( + + + + + ); + }) }
{property.nameKeyFallback} - {property.value} {(property.nameKey === 'name') && } -
{ LocalizeText(property.localeKey) } + { property.value } + { property.showOnline && } +
-
-
- - - - -
-
- } -
-
- {(sendMessageVisible && userInfo) && setSendMessageVisible(false)}/>} - {(userInfo && modActionVisible) && setModActionVisible(false)}/>} - {(userInfo && roomVisitsVisible) && setRoomVisitsVisible(false)}/>} + + + dispatchUiEvent(new ModToolsOpenUserChatlogEvent(userId)) }> + Room Chat + + setSendMessageVisible(!sendMessageVisible) }> + Send Message + + setRoomVisitsVisible(!roomVisitsVisible) }> + Room Visits + + setModActionVisible(!modActionVisible) }> + Mod Action + + + + + + { sendMessageVisible && + setSendMessageVisible(false) } /> } + { modActionVisible && + setModActionVisible(false) } /> } + { roomVisitsVisible && + setRoomVisitsVisible(false) } /> } ); } diff --git a/src/views/mod-tools/views/user/user-info/ModToolsUserView.types.ts b/src/views/mod-tools/views/user/user-info/ModToolsUserView.types.ts index 21d30670..534d647d 100644 --- a/src/views/mod-tools/views/user/user-info/ModToolsUserView.types.ts +++ b/src/views/mod-tools/views/user/user-info/ModToolsUserView.types.ts @@ -2,5 +2,4 @@ export interface ModToolsUserViewProps { userId: number; onCloseClick: () => void; - simple?: boolean; } diff --git a/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx b/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx index c78f12f6..2a8495a2 100644 --- a/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx +++ b/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx @@ -8,7 +8,7 @@ export const ModToolsUserModActionView: FC = pro return ( - onCloseClick()} /> + {user &&
}
diff --git a/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.types.ts b/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.types.ts index 2025d10d..28714abc 100644 --- a/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.types.ts +++ b/src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.types.ts @@ -1,7 +1,8 @@ +import { MouseEvent } from 'react'; import { ISelectedUser } from '../../../utils/ISelectedUser'; export interface ModToolsUserModActionViewProps { user: ISelectedUser; - onCloseClick: () => void; + onCloseClick: (event: MouseEvent) => void; } diff --git a/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx b/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx index 8d1a709e..76aff1fd 100644 --- a/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx +++ b/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx @@ -39,7 +39,7 @@ export const ModToolsUserRoomVisitsView: FC = p return ( - onCloseClick()} /> + {roomVisitData &&
diff --git a/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.types.ts b/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.types.ts index 8aaebec5..4bbcaf40 100644 --- a/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.types.ts +++ b/src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.types.ts @@ -1,5 +1,7 @@ +import { MouseEvent } from 'react'; + export interface ModToolsUserRoomVisitsViewProps { userId: number; - onCloseClick: () => void; + onCloseClick: (event: MouseEvent) => void; } diff --git a/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessage.types.ts b/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessage.types.ts index 617945f0..e8f071d8 100644 --- a/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessage.types.ts +++ b/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessage.types.ts @@ -1,7 +1,8 @@ +import { MouseEvent } from 'react'; import { ISelectedUser } from '../../../utils/ISelectedUser'; export interface ModToolsSendUserMessageViewProps { user: ISelectedUser; - onCloseClick: () => void; + onCloseClick: (event: MouseEvent) => void; } diff --git a/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessageView.tsx b/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessageView.tsx index 7305bf93..f1e5f01f 100644 --- a/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessageView.tsx +++ b/src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessageView.tsx @@ -19,7 +19,7 @@ export const ModToolsSendUserMessageView: FC = return ( - onCloseClick()} /> + {user && <>
Message To: {user.username}