Update mod tools user info

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

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 { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutButton, NitroLayoutGrid, NitroLayoutGridColumn } 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';
 
-
 export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
 {
-    const { onCloseClick = null, userId = null, simple = true } = props;
+    const { onCloseClick = null, userId = null } = props;
-    const [userInfo, setUserInfo] = useState<ModeratorUserInfoData>(null);
+    const [ userInfo, setUserInfo ] = useState<ModeratorUserInfoData>(null);
-    const [sendMessageVisible, setSendMessageVisible] = useState(false);
+    const [ sendMessageVisible, setSendMessageVisible ] = useState(false);
-    const [modActionVisible, setModActionVisible] = useState(false);
+    const [ modActionVisible, setModActionVisible ] = useState(false);
-    const [roomVisitsVisible, setRoomVisitsVisible] = 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<ModToolsUserViewProps> = props =>
 
     CreateMessageHook(ModtoolUserInfoEvent, onModtoolUserInfoEvent);
 
-    const OnlineIcon = useCallback(() => 
+    const userProperties = useMemo(() =>
     {
-        if(userInfo.online) return (<i className="icon icon-pf-online ml-1" />);
+        if(!userInfo) return null;
-        else return (<i className="icon icon-pf-offline ml-1" />);
-    }, [userInfo]);
 
-    const userProperties = useCallback(() =>
+        return [
-    {
-        let properties: IUserInfo[] = [];
-
-        if(!userInfo) return properties;
-
-        properties = [
             {
-                nameKey: 'name',
+                localeKey: 'modtools.userinfo.userName',
-                nameKeyFallback: 'Name',
+                value: userInfo.userName,
-                value: userInfo.userName
+                showOnline: true
             },
             {
-                nameKey: 'cfhs',
+                localeKey: 'modtools.userinfo.cfhCount',
-                nameKeyFallback: 'CFHs',
                 value: userInfo.cfhCount.toString()
             },
             {
-                nameKey: 'abusive_cfhs',
+                localeKey: 'modtools.userinfo.abusiveCfhCount',
-                nameKeyFallback: 'Abusive CFHs',
                 value: userInfo.abusiveCfhCount.toString()
             },
             {
-                nameKey: 'cautions',
+                localeKey: 'modtools.userinfo.cautionCount',
-                nameKeyFallback: 'Cautions',
                 value: userInfo.cautionCount.toString()
             },
             {
-                nameKey: 'bans',
+                localeKey: 'modtools.userinfo.banCount',
-                nameKeyFallback: 'Bans',
                 value: userInfo.banCount.toString()
             },
             {
-                nameKey: 'last_sanction',
+                localeKey: 'modtools.userinfo.lastSanctionTime',
-                nameKeyFallback: 'Last sanction',
                 value: userInfo.lastSanctionTime
             },
             {
-                nameKey: 'trade_locks',
+                localeKey: 'modtools.userinfo.tradingLockCount',
-                nameKeyFallback: 'Trade locks',
                 value: userInfo.tradingLockCount.toString()
             },
             {
-                nameKey: 'lock_expires',
+                localeKey: 'modtools.userinfo.tradingExpiryDate',
-                nameKeyFallback: 'Lock expires',
                 value: userInfo.tradingExpiryDate
             },
             {
-                nameKey: 'last_login',
+                localeKey: 'modtools.userinfo.minutesSinceLastLogin',
-                nameKeyFallback: 'Last login',
                 value: FriendlyTime.format(userInfo.minutesSinceLastLogin * 60, '.ago', 2)
             },
             {
-                nameKey: 'purchase',
+                localeKey: 'modtools.userinfo.lastPurchaseDate',
-                nameKeyFallback: 'Purchases',
                 value: userInfo.lastPurchaseDate
             },
             {
-                nameKey: 'email',
+                localeKey: 'modtools.userinfo.primaryEmailAddress',
-                nameKeyFallback: 'Email',
                 value: userInfo.primaryEmailAddress
             },
             {
-                nameKey: 'acc_bans',
+                localeKey: 'modtools.userinfo.identityRelatedBanCount',
-                nameKeyFallback: 'Banned Accs.',
                 value: userInfo.identityRelatedBanCount.toString()
             },
             {
-                nameKey: 'registered',
+                localeKey: 'modtools.userinfo.registrationAgeInMinutes',
-                nameKeyFallback: 'Registered',
                 value: FriendlyTime.format(userInfo.registrationAgeInMinutes * 60, '.ago', 2)
             },
             {
-                nameKey: 'rank',
+                localeKey: 'modtools.userinfo.userClassification',
-                nameKeyFallback: 'Rank',
                 value: userInfo.userClassification
             }
         ];
+    }, [ userInfo ]);
 
-        return properties;
+    if(!userInfo) return null;
-
-    }, [userInfo]);
 
     return (
         <>
-        <NitroCardView className="nitro-mod-tools-user" simple={true}>
+            <NitroCardView className="nitro-mod-tools-user" simple={true}>
-            <NitroCardHeaderView headerText={'User Info: ' + (userInfo ? userInfo.userName : '')} onCloseClick={() => onCloseClick()} />
+                <NitroCardHeaderView headerText={ LocalizeText('modtools.userinfo.title', [ 'username' ], [ userInfo.userName ]) } onCloseClick={ onCloseClick } />
-            <NitroCardContentView className="text-black">
+                <NitroCardContentView className="text-black">
-                {userInfo &&
+                    <NitroLayoutGrid>
-                    <div className="row">
+                        <NitroLayoutGridColumn size={ 8 }>
-                        {!simple &&
+                            <table className="table table-striped table-sm table-text-small text-black m-0">
-                            <div className="col-sm-3 px-0 d-flex align-items-center">
-                                <AvatarImageView figure={userInfo.figure} direction={2} />
-                            </div>
-                        }
-                        <div className="col-7">
-                            <table className="d-flex flex-column table table-striped table-sm table-text-small text-black">
                                 <tbody>
-                                    {userProperties().map(property =>
+                                    { userProperties.map(property =>
-                                    {
+                                        {
-                                        return (
+
-                                            <tr key={property.nameKey}>
+                                            return (
-                                                <th scope="row">{property.nameKeyFallback}</th>
+                                                <tr>
-                                                <td className={'' + (property.nameKey === 'name' ? 'username' : '')}>
+                                                    <th scope="row">{ LocalizeText(property.localeKey) }</th>
-                                                    {property.value} {(property.nameKey === 'name') && <OnlineIcon/>}
+                                                    <td>
-                                                </td>
+                                                        { property.value }
-                                            </tr>
+                                                        { property.showOnline && <i className={ `icon icon-pf-${ userInfo.online ? 'online' : 'offline' } ms-2` } /> }
-                                        )
+                                                        </td>
-                                    })}
+                                                </tr>
+                                            );
+                                        }) }
                                 </tbody>
                             </table>
-                        </div>
+                        </NitroLayoutGridColumn>
-                        <div className="col-5">
+                        <NitroLayoutGridColumn size={ 4 }>
-                            <button className="btn btn-sm btn-primary" onClick={() => dispatchUiEvent(new ModToolsOpenUserChatlogEvent(userId))}>Room Chat</button>
+                            <NitroLayoutButton variant="primary" size="sm" onClick={ event => dispatchUiEvent(new ModToolsOpenUserChatlogEvent(userId)) }>
-                            <button className="btn btn-sm btn-primary mt-2" onClick={ () => setSendMessageVisible(!sendMessageVisible)}>Send Message</button>
+                                Room Chat
-                            <button className="btn btn-sm btn-primary mt-2" onClick={ () => setRoomVisitsVisible(!roomVisitsVisible)}>Room Visits</button>
+                            </NitroLayoutButton>
-                            <button className="btn btn-sm btn-primary mt-2" onClick={ () => setModActionVisible(!modActionVisible)}>Mod Action</button>
+                            <NitroLayoutButton variant="primary" size="sm" onClick={ event => setSendMessageVisible(!sendMessageVisible) }>
-                        </div>
+                                Send Message
-                    </div>
+                            </NitroLayoutButton>
-                }
+                            <NitroLayoutButton variant="primary" size="sm" onClick={ event => setRoomVisitsVisible(!roomVisitsVisible) }>
-            </NitroCardContentView>
+                                Room Visits
-        </NitroCardView>
+                            </NitroLayoutButton>
-        {(sendMessageVisible && userInfo) && <ModToolsSendUserMessageView user={{ userId: userId, username: userInfo.userName }} onCloseClick={ () => setSendMessageVisible(false)}/>}
+                            <NitroLayoutButton variant="primary" size="sm" onClick={ event => setModActionVisible(!modActionVisible) }>
-        {(userInfo && modActionVisible) && <ModToolsUserModActionView user={{ userId: userId, username: userInfo.userName }} onCloseClick={() => setModActionVisible(false)}/>}
+                                Mod Action
-        {(userInfo && roomVisitsVisible) && <ModToolsUserRoomVisitsView userId={userId} onCloseClick={ () => setRoomVisitsVisible(false)}/>}
+                            </NitroLayoutButton>
+                        </NitroLayoutGridColumn>
+                    </NitroLayoutGrid>
+                </NitroCardContentView>
+            </NitroCardView>
+            { sendMessageVisible &&
+                <ModToolsSendUserMessageView user={ { userId: userId, username: userInfo.userName } } onCloseClick={ event => setSendMessageVisible(false) } /> }
+            { modActionVisible &&
+                <ModToolsUserModActionView user={ { userId: userId, username: userInfo.userName } } onCloseClick={ event => setModActionVisible(false) } /> }
+            { roomVisitsVisible &&
+                <ModToolsUserRoomVisitsView userId={ userId } onCloseClick={ event => setRoomVisitsVisible(false) } /> }
         </>
     );
 }

src/views/mod-tools/views/user/user-info/ModToolsUserView.types.ts

@@ -2,5 +2,4 @@ export interface ModToolsUserViewProps
 {
     userId: number;
     onCloseClick: () => void;
-    simple?: boolean;
 }

src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx

@@ -8,7 +8,7 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
 
     return (
         <NitroCardView className="nitro-mod-tools-user-action" simple={true}>
-            <NitroCardHeaderView headerText={'Mod Action'} onCloseClick={() => onCloseClick()} />
+            <NitroCardHeaderView headerText={'Mod Action'} onCloseClick={ onCloseClick } />
             <NitroCardContentView className="text-black">
                 {user && <div></div>}
             </NitroCardContentView>

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

src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.tsx

@@ -39,7 +39,7 @@ export const ModToolsUserRoomVisitsView: FC<ModToolsUserRoomVisitsViewProps> = p
 
     return (
         <NitroCardView className="nitro-mod-tools-user-visits" simple={true}>
-            <NitroCardHeaderView headerText={'User Visits'} onCloseClick={() => onCloseClick()} />
+            <NitroCardHeaderView headerText={'User Visits'} onCloseClick={ onCloseClick } />
             <NitroCardContentView className="text-black">
                 {roomVisitData &&
                 <div className="row h-100 w-100 user-visits">

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

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

src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessageView.tsx

@@ -19,7 +19,7 @@ export const ModToolsSendUserMessageView: FC<ModToolsSendUserMessageViewProps> =
 
     return (
         <NitroCardView className="nitro-mod-tools-user-message" simple={true}>
-            <NitroCardHeaderView headerText={'Send Message'} onCloseClick={() => onCloseClick()} />
+            <NitroCardHeaderView headerText={'Send Message'} onCloseClick={ onCloseClick } />
             <NitroCardContentView className="text-black">
                 {user && <>
                     <div>Message To: {user.username}</div>