diff --git a/src/components/user-profile/BadgeInfoView.tsx b/src/components/user-profile/BadgeInfoView.tsx new file mode 100644 index 0000000..a06c11e --- /dev/null +++ b/src/components/user-profile/BadgeInfoView.tsx @@ -0,0 +1,31 @@ +import { FC, useState } from 'react'; +import { LocalizeBadgeDescription, LocalizeBadgeName } from '../../api'; +import { Flex, LayoutBadgeImageView } from '../../common'; + +interface BadgeInfoViewProps +{ + badgeCode: string; +} + +export const BadgeInfoView: FC = props => +{ + const { badgeCode } = props; + const [ isHovered, setIsHovered ] = useState(false); + + return ( + setIsHovered(true) } + onMouseLeave={ () => setIsHovered(false) } + > + + { isHovered && ( +
+
+
{ LocalizeBadgeName(badgeCode) }
+
{ LocalizeBadgeDescription(badgeCode) }
+
+ ) } + + ); +}; diff --git a/src/components/user-profile/UserContainerView.tsx b/src/components/user-profile/UserContainerView.tsx index d6e3fb9..ed357b0 100644 --- a/src/components/user-profile/UserContainerView.tsx +++ b/src/components/user-profile/UserContainerView.tsx @@ -37,7 +37,7 @@ export const UserContainerView: FC<{
-

{ userProfile.username }

+

{ userProfile.username }

{ userProfile.motto }

diff --git a/src/components/user-profile/UserProfileView.tsx b/src/components/user-profile/UserProfileView.tsx index f57612b..20fc0e7 100644 --- a/src/components/user-profile/UserProfileView.tsx +++ b/src/components/user-profile/UserProfileView.tsx @@ -1,24 +1,31 @@ -import { CreateLinkEvent, ExtendedProfileChangedMessageEvent, GetSessionDataManager, RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, RoomEngineObjectEvent, RoomObjectCategory, RoomObjectType, UserCurrentBadgesComposer, UserCurrentBadgesEvent, UserProfileEvent, UserProfileParser, UserRelationshipsComposer } from '@nitrots/nitro-renderer'; +import { ExtendedProfileChangedMessageEvent, GetSessionDataManager, NavigatorSearchComposer, NavigatorSearchEvent, RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, RoomDataParser, RoomEngineObjectEvent, RoomObjectCategory, RoomObjectType, UserCurrentBadgesComposer, UserCurrentBadgesEvent, UserProfileEvent, UserProfileParser, UserRelationshipsComposer } from '@nitrots/nitro-renderer'; import { FC, useState } from 'react'; -import { GetRoomSession, GetUserProfile, LocalizeText, SendMessageComposer } from '../../api'; -import { Flex, Grid, LayoutBadgeImageView, Text } from '../../common'; +import { CreateRoomSession, GetRoomSession, GetUserProfile, LocalizeText, SendMessageComposer } from '../../api'; +import { Flex, Text } from '../../common'; +import { BadgeInfoView } from './BadgeInfoView'; import { useMessageEvent, useNitroEvent } from '../../hooks'; import { NitroCard } from '../../layout'; import { FriendsContainerView } from './FriendsContainerView'; import { GroupsContainerView } from './GroupsContainerView'; import { UserContainerView } from './UserContainerView'; +type ProfileTab = 'badge' | 'amici' | 'stanze' | 'gruppi'; + export const UserProfileView: FC<{}> = props => { const [ userProfile, setUserProfile ] = useState(null); const [ userBadges, setUserBadges ] = useState([]); const [ userRelationships, setUserRelationships ] = useState(null); + const [ activeTab, setActiveTab ] = useState('badge'); + const [ userRooms, setUserRooms ] = useState(null); const onClose = () => { setUserProfile(null); setUserBadges([]); setUserRelationships(null); + setActiveTab('badge'); + setUserRooms(null); }; const onLeaveGroup = () => @@ -28,6 +35,16 @@ export const UserProfileView: FC<{}> = props => GetUserProfile(userProfile.id); }; + const onTabClick = (tab: ProfileTab) => + { + setActiveTab(tab); + + if(tab === 'stanze' && !userRooms && userProfile) + { + SendMessageComposer(new NavigatorSearchComposer('hotel_view', `owner:${ userProfile.username }`)); + } + }; + useMessageEvent(UserCurrentBadgesEvent, event => { const parser = event.getParser(); @@ -63,6 +80,8 @@ export const UserProfileView: FC<{}> = props => { setUserBadges([]); setUserRelationships(null); + setActiveTab('badge'); + setUserRooms(null); } SendMessageComposer(new UserCurrentBadgesComposer(parser.id)); @@ -78,6 +97,28 @@ export const UserProfileView: FC<{}> = props => GetUserProfile(parser.userId); }); + useMessageEvent(NavigatorSearchEvent, event => + { + if(!userProfile || activeTab !== 'stanze') return; + + const parser = event.getParser(); + const result = parser.result; + + if(!result) return; + + const rooms: RoomDataParser[] = []; + + for(const resultList of result.results) + { + if(resultList.rooms && resultList.rooms.length) + { + for(const room of resultList.rooms) rooms.push(room); + } + } + + setUserRooms(rooms); + }); + useNitroEvent(RoomEngineObjectEvent.SELECTED, event => { if(!userProfile) return; @@ -98,27 +139,79 @@ export const UserProfileView: FC<{}> = props => - - -
- -
- { userBadges && (userBadges.length > 0) && userBadges.map((badge, index) => ) } + +
+ +
+ + onTabClick('badge') }> + Badge + + onTabClick('amici') }> + Amici + + onTabClick('stanze') }> + Stanze + + onTabClick('gruppi') }> + Gruppi + + +
+ { activeTab === 'badge' && ( +
+ { userBadges && (userBadges.length > 0) + ? userBadges.map((badge, index) => ( + + )) + : ( + + Nessun badge da mostrare + + ) + }
-
-
- { userRelationships && - } -
- - - CreateLinkEvent(`navigator/search/hotel_view/owner:${ userProfile.username }`) }> - - { LocalizeText('extendedprofile.rooms') } - - - + ) } + { activeTab === 'amici' && ( +
+ { userRelationships ? ( + + ) : ( + + Caricamento... + + ) } +
+ ) } + { activeTab === 'stanze' && ( +
+ { !userRooms && ( + + Caricamento stanze... + + ) } + { userRooms && userRooms.length === 0 && ( + + Nessuna stanza trovata + + ) } + { userRooms && userRooms.length > 0 && userRooms.map(room => ( + CreateRoomSession(room.roomId) }> +
+ { room.roomName } + { room.description && { room.description } } +
+ { room.userCount }/{ room.maxUserCount } +
+ )) } +
+ ) } + { activeTab === 'gruppi' && ( +
+ +
+ ) } +
);