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';
|
2021-11-17 09:48:41 +01:00
|
|
|
import { GetSessionDataManager, GetUserProfile, LocalizeText } from '../../api';
|
2021-08-12 08:30:02 +02:00
|
|
|
import { CreateMessageHook, SendMessageHook } from '../../hooks';
|
|
|
|
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
|
|
|
|
import { BadgesContainerView } from './views/badges-container/BadgesContainerView';
|
|
|
|
import { FriendsContainerView } from './views/friends-container/FriendsContainerView';
|
2021-08-28 07:33:55 +02:00
|
|
|
import { GroupsContainerView } from './views/groups-container/GroupsContainerView';
|
2021-08-12 08:30:02 +02:00
|
|
|
import { UserContainerView } from './views/user-container/UserContainerView';
|
|
|
|
|
|
|
|
export const UserProfileView: FC = props =>
|
|
|
|
{
|
|
|
|
const [userProfile, setUserProfile] = useState<UserProfileParser>(null);
|
|
|
|
const [userBadges, setUserBadges] = useState<string[]>([]);
|
2021-08-13 09:46:37 +02:00
|
|
|
const [userRelationships, setUserRelationships] = useState<RelationshipStatusInfoMessageParser>(null);
|
2021-08-12 08:30:02 +02:00
|
|
|
|
|
|
|
const OnClose = useCallback(() =>
|
|
|
|
{
|
|
|
|
setUserProfile(null);
|
|
|
|
setUserBadges([]);
|
|
|
|
setUserRelationships(null);
|
|
|
|
}, []);
|
2021-08-30 19:54:24 +02:00
|
|
|
|
|
|
|
const onLeaveGroup = useCallback(() =>
|
|
|
|
{
|
2021-11-17 09:48:41 +01:00
|
|
|
if(userProfile && userProfile.id === GetSessionDataManager().userId)
|
|
|
|
{
|
|
|
|
GetUserProfile(userProfile.id);
|
|
|
|
}
|
2021-08-30 19:54:24 +02:00
|
|
|
}, [ userProfile ]);
|
2021-08-12 08:30:02 +02:00
|
|
|
|
|
|
|
const OnUserCurrentBadgesEvent = useCallback((event: UserCurrentBadgesEvent) =>
|
|
|
|
{
|
|
|
|
const parser = event.getParser();
|
|
|
|
|
2021-08-16 08:00:31 +02:00
|
|
|
if(userProfile && parser.userId === userProfile.id)
|
2021-08-12 08:30:02 +02:00
|
|
|
setUserBadges(parser.badges);
|
|
|
|
}, [userProfile, setUserBadges]);
|
|
|
|
|
|
|
|
CreateMessageHook(UserCurrentBadgesEvent, OnUserCurrentBadgesEvent);
|
|
|
|
|
2021-08-13 09:46:37 +02:00
|
|
|
const OnUserRelationshipsEvent = useCallback((event: RelationshipStatusInfoEvent) =>
|
2021-08-12 08:30:02 +02:00
|
|
|
{
|
|
|
|
const parser = event.getParser();
|
|
|
|
|
2021-08-16 08:00:31 +02:00
|
|
|
if(userProfile && parser.userId === userProfile.id)
|
2021-08-12 08:30:02 +02:00
|
|
|
setUserRelationships(parser);
|
|
|
|
}, [userProfile, setUserRelationships]);
|
|
|
|
|
2021-08-13 09:46:37 +02:00
|
|
|
CreateMessageHook(RelationshipStatusInfoEvent, OnUserRelationshipsEvent);
|
2021-08-12 08:30:02 +02:00
|
|
|
|
|
|
|
const OnUserProfileEvent = useCallback((event: UserProfileEvent) =>
|
|
|
|
{
|
|
|
|
const parser = event.getParser();
|
|
|
|
|
2021-08-30 19:54:24 +02:00
|
|
|
if(userProfile)
|
2021-08-12 09:16:19 +02:00
|
|
|
{
|
2021-08-30 19:54:24 +02:00
|
|
|
setUserProfile(null);
|
2021-08-12 09:16:19 +02:00
|
|
|
setUserBadges([]);
|
|
|
|
setUserRelationships(null);
|
|
|
|
}
|
2021-08-12 08:30:02 +02:00
|
|
|
|
|
|
|
setUserProfile(parser);
|
|
|
|
SendMessageHook(new UserCurrentBadgesComposer(parser.id));
|
|
|
|
SendMessageHook(new UserRelationshipsComposer(parser.id));
|
2021-08-12 09:16:19 +02:00
|
|
|
}, [userProfile]);
|
2021-08-12 08:30:02 +02:00
|
|
|
|
|
|
|
CreateMessageHook(UserProfileEvent, OnUserProfileEvent);
|
|
|
|
|
2021-08-16 08:00:31 +02:00
|
|
|
if(!userProfile) return null;
|
2021-08-12 08:30:02 +02:00
|
|
|
|
|
|
|
return (
|
2021-08-22 08:37:03 +02:00
|
|
|
<NitroCardView simple={ true } className="user-profile">
|
2021-08-12 08:30:02 +02:00
|
|
|
<NitroCardHeaderView headerText={LocalizeText('extendedprofile.caption')} onCloseClick={OnClose} />
|
|
|
|
<NitroCardContentView>
|
|
|
|
<div className="row">
|
2021-08-22 08:37:03 +02:00
|
|
|
<div className="col-sm-7 user-container">
|
2021-08-30 19:54:24 +02:00
|
|
|
<UserContainerView userProfile={ userProfile } />
|
|
|
|
<BadgesContainerView badges={ userBadges } />
|
2021-08-12 08:30:02 +02:00
|
|
|
</div>
|
2021-08-22 08:37:03 +02:00
|
|
|
<div className="col-sm-5">
|
2021-08-12 08:30:02 +02:00
|
|
|
{
|
2021-08-13 09:46:37 +02:00
|
|
|
userRelationships && <FriendsContainerView relationships={userRelationships} friendsCount={userProfile.friendsCount} />
|
2021-08-12 08:30:02 +02:00
|
|
|
}
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-08-22 08:37:03 +02:00
|
|
|
<div className="d-flex rooms-button-container align-items-center py-1">
|
|
|
|
<div className="d-flex align-items-center w-100">
|
2021-08-12 08:30:02 +02:00
|
|
|
<i className="icon icon-rooms" /><span className="rooms-button">{LocalizeText('extendedprofile.rooms')}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-09-06 10:10:19 +02:00
|
|
|
<GroupsContainerView 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
|
|
|
)
|
|
|
|
}
|