nitro-react/src/components/user-profile/UserProfileView.tsx

102 lines
4.3 KiB
TypeScript
Raw Normal View History

2021-11-17 09:48:41 +01:00
import { RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, UserCurrentBadgesComposer, UserCurrentBadgesEvent, UserProfileEvent, UserProfileParser, UserRelationshipsComposer } from '@nitrots/nitro-renderer';
2021-08-12 08:30:02 +02:00
import { FC, useCallback, useState } from 'react';
2022-03-03 10:11:31 +01:00
import { GetSessionDataManager, GetUserProfile, LocalizeText, SendMessageComposer } from '../../api';
2022-03-14 11:39:09 +01:00
import { Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
2022-03-03 10:11:31 +01:00
import { BatchUpdates, UseMessageEventHook } from '../../hooks';
2022-02-21 06:01:26 +01:00
import { BadgesContainerView } from './views/BadgesContainerView';
import { FriendsContainerView } from './views/FriendsContainerView';
import { GroupsContainerView } from './views/GroupsContainerView';
import { UserContainerView } from './views/UserContainerView';
2021-08-12 08:30:02 +02:00
2022-02-21 06:01:26 +01:00
export const UserProfileView: FC<{}> = props =>
2021-08-12 08:30:02 +02:00
{
2022-02-21 06:01:26 +01:00
const [ userProfile, setUserProfile ] = useState<UserProfileParser>(null);
const [ userBadges, setUserBadges ] = useState<string[]>([]);
const [ userRelationships, setUserRelationships ] = useState<RelationshipStatusInfoMessageParser>(null);
2021-08-12 08:30:02 +02:00
2022-02-21 06:01:26 +01:00
const onClose = () =>
2021-08-12 08:30:02 +02:00
{
2022-02-21 06:01:26 +01:00
BatchUpdates(() =>
{
setUserProfile(null);
setUserBadges([]);
setUserRelationships(null);
});
}
2021-08-30 19:54:24 +02:00
const onLeaveGroup = useCallback(() =>
{
2022-03-14 11:39:09 +01:00
if(!userProfile || (userProfile.id !== GetSessionDataManager().userId)) return;
GetUserProfile(userProfile.id);
2021-08-30 19:54:24 +02:00
}, [ userProfile ]);
2021-08-12 08:30:02 +02:00
2022-02-21 06:01:26 +01:00
const onUserCurrentBadgesEvent = useCallback((event: UserCurrentBadgesEvent) =>
2021-08-12 08:30:02 +02:00
{
const parser = event.getParser();
2022-02-21 06:01:26 +01:00
if(!userProfile || (parser.userId !== userProfile.id)) return;
setUserBadges(parser.badges);
}, [ userProfile ]);
2021-08-12 08:30:02 +02:00
2022-03-03 10:11:31 +01:00
UseMessageEventHook(UserCurrentBadgesEvent, onUserCurrentBadgesEvent);
2021-08-12 08:30:02 +02:00
2022-03-14 11:39:09 +01:00
const onUserRelationshipsEvent = useCallback((event: RelationshipStatusInfoEvent) =>
2021-08-12 08:30:02 +02:00
{
const parser = event.getParser();
2022-02-21 06:01:26 +01:00
if(!userProfile || (parser.userId !== userProfile.id)) return;
setUserRelationships(parser);
}, [ userProfile ]);
2021-08-12 08:30:02 +02:00
2022-03-14 11:39:09 +01:00
UseMessageEventHook(RelationshipStatusInfoEvent, onUserRelationshipsEvent);
2021-08-12 08:30:02 +02:00
2022-02-21 06:01:26 +01:00
const onUserProfileEvent = useCallback((event: UserProfileEvent) =>
2021-08-12 08:30:02 +02:00
{
const parser = event.getParser();
2022-03-14 11:39:09 +01:00
BatchUpdates(() =>
{
setUserProfile(parser);
setUserBadges([]);
setUserRelationships(null);
});
2022-02-21 06:01:26 +01:00
2022-03-03 10:11:31 +01:00
SendMessageComposer(new UserCurrentBadgesComposer(parser.id));
SendMessageComposer(new UserRelationshipsComposer(parser.id));
2022-03-14 11:39:09 +01:00
}, []);
2021-08-12 08:30:02 +02:00
2022-03-03 10:11:31 +01:00
UseMessageEventHook(UserProfileEvent, onUserProfileEvent);
2021-08-12 08:30:02 +02:00
2021-08-16 08:00:31 +02:00
if(!userProfile) return null;
2021-08-12 08:30:02 +02:00
return (
2022-03-14 11:51:58 +01:00
<NitroCardView uniqueKey="nitro-user-profile" theme="primary-slim" className="user-profile">
2022-02-21 06:01:26 +01:00
<NitroCardHeaderView headerText={ LocalizeText('extendedprofile.caption') } onCloseClick={ onClose } />
2022-03-14 11:39:09 +01:00
<NitroCardContentView overflow="hidden">
<Grid fullHeight={ false } gap={ 2 }>
<Column size={ 7 } gap={ 1 } className="user-container pe-2">
2022-02-21 06:01:26 +01:00
<UserContainerView userProfile={ userProfile } />
2022-03-14 11:39:09 +01:00
<Grid columnCount={ 5 } fullHeight className="bg-muted rounded px-2 py-1">
<BadgesContainerView fullWidth center badges={ userBadges } />
</Grid>
2022-02-21 06:01:26 +01:00
</Column>
<Column size={ 5 }>
2022-03-14 11:39:09 +01:00
{ userRelationships &&
<FriendsContainerView relationships={ userRelationships } friendsCount={ userProfile.friendsCount } /> }
2022-02-21 06:01:26 +01:00
</Column>
</Grid>
2022-03-14 11:39:09 +01:00
<Flex alignItems="center" className="rooms-button-container px-2 py-1">
<Flex alignItems="center" gap={ 1 }>
<i className="icon icon-rooms" />
<Text bold underline pointer>{ LocalizeText('extendedprofile.rooms') }</Text>
</Flex>
2022-02-21 06:01:26 +01:00
</Flex>
2022-03-14 11:39:09 +01:00
<GroupsContainerView fullWidth itsMe={ userProfile.id === GetSessionDataManager().userId } groups={ userProfile.groups } onLeaveGroup={ onLeaveGroup } />
2021-08-22 08:37:03 +02:00
</NitroCardContentView>
</NitroCardView>
2021-08-12 08:30:02 +02:00
)
}