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

Update mod tools user info

Browse Source
This commit is contained in:
Bill 2021-10-20 02:45:04 -04:00
parent 59dfb8d9b4
commit fe6f27737c
9 changed files with 83 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,9 +19,5 @@
color: $black;
background: rgba(0, 0, 0, .05);
}
td {
padding: 0px 5px;
}
}
}

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

@ -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<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);
const { onCloseClick = null, userId = null } = props;
const [ userInfo, setUserInfo ] = useState<ModeratorUserInfoData>(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<ModToolsUserViewProps> = props =>
CreateMessageHook(ModtoolUserInfoEvent, onModtoolUserInfoEvent);
const OnlineIcon = useCallback(() =>
const userProperties = useMemo(() =>
{
if(userInfo.online) return (<i className="icon icon-pf-online ml-1" />);
else return (<i className="icon icon-pf-offline ml-1" />);
}, [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 (
<>
<NitroCardView className="nitro-mod-tools-user" simple={true}>
<NitroCardHeaderView headerText={'User Info: ' + (userInfo ? userInfo.userName : '')} onCloseClick={() => onCloseClick()} />
<NitroCardContentView className="text-black">
{userInfo &&
<div className="row">
{!simple &&
<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">
<NitroCardView className="nitro-mod-tools-user" simple={true}>
<NitroCardHeaderView headerText={ LocalizeText('modtools.userinfo.title', [ 'username' ], [ userInfo.userName ]) } onCloseClick={ onCloseClick } />
<NitroCardContentView className="text-black">
<NitroLayoutGrid>
<NitroLayoutGridColumn size={ 8 }>
<table className="table table-striped table-sm table-text-small text-black m-0">
<tbody>
{userProperties().map(property =>
{
return (
<tr key={property.nameKey}>
<th scope="row">{property.nameKeyFallback}</th>
<td className={'' + (property.nameKey === 'name' ? 'username' : '')}>
{property.value} {(property.nameKey === 'name') && <OnlineIcon/>}
</td>
</tr>
)
})}
{ userProperties.map(property =>
{
return (
<tr>
<th scope="row">{ LocalizeText(property.localeKey) }</th>
<td>
{ property.value }
{ property.showOnline && <i className={ `icon icon-pf-${ userInfo.online ? 'online' : 'offline' } ms-2` } /> }
</td>
</tr>
);
}) }
</tbody>
</table>
</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" 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)}/>}
</NitroLayoutGridColumn>
<NitroLayoutGridColumn size={ 4 }>
<NitroLayoutButton variant="primary" size="sm" onClick={ event => dispatchUiEvent(new ModToolsOpenUserChatlogEvent(userId)) }>
Room Chat
</NitroLayoutButton>
<NitroLayoutButton variant="primary" size="sm" onClick={ event => setSendMessageVisible(!sendMessageVisible) }>
Send Message
</NitroLayoutButton>
<NitroLayoutButton variant="primary" size="sm" onClick={ event => setRoomVisitsVisible(!roomVisitsVisible) }>
Room Visits
</NitroLayoutButton>
<NitroLayoutButton variant="primary" size="sm" onClick={ event => setModActionVisible(!modActionVisible) }>
Mod Action
</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) } /> }
</>
);
}

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

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

2
src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx
View File

@ -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>

3
src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.types.ts
View File

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

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

@ -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">

4
src/views/mod-tools/views/user/user-room-visits/ModToolsUserRoomVisitsView.types.ts
View File

@ -1,5 +1,7 @@
import { MouseEvent } from 'react';
export interface ModToolsUserRoomVisitsViewProps
{
userId: number;
onCloseClick: () => void;
onCloseClick: (event: MouseEvent) => void;
}

3
src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessage.types.ts
View File

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

2
src/views/mod-tools/views/user/user-sendmessage/ModToolsSendUserMessageView.tsx
View File

@ -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>