fix relationships

src/views/Styles.scss

@@ -17,3 +17,4 @@
 @import './mod-tools/ModToolsView';
 @import './achievements/AchievementsView';
 @import './user-profile/UserProfileVew';
+@import './user-profile/views/relationships-container/RelationshipsContainerView';

src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx

@@ -1,9 +1,11 @@
-import { RoomSessionUserBadgesEvent } from '@nitrots/nitro-renderer';
+import { RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, RoomSessionUserBadgesEvent, UserRelationshipsComposer } from '@nitrots/nitro-renderer';
 import { FC, FocusEvent, KeyboardEvent, useCallback, useEffect, useState } from 'react';
+import { CreateMessageHook, SendMessageHook } from '../../../../../../hooks';
 import { CreateEventDispatcherHook } from '../../../../../../hooks/events';
 import { LocalizeText } from '../../../../../../utils/LocalizeText';
 import { AvatarImageView } from '../../../../../shared/avatar-image/AvatarImageView';
 import { BadgeImageView } from '../../../../../shared/badge-image/BadgeImageView';
+import { RelationshipsContainerView } from '../../../../../user-profile/views/relationships-container/RelationshipsContainerView';
 import { useRoomContext } from '../../../../context/RoomContext';
 import { RoomWidgetUpdateInfostandUserEvent } from '../../../../events/RoomWidgetUpdateInfostandUserEvent';
 import { RoomWidgetChangeMottoMessage } from '../../../../messages';
@@ -16,6 +18,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
     const [ badges, setBadges ] = useState<string[]>([]);
     const [ motto, setMotto ] = useState(null);
     const [ isEditingMotto, setIsEditingMotto ] = useState(false);
+    const [ userRelationships, setUserRelationships ] = useState<RelationshipStatusInfoMessageParser>(null);
 
     const saveMotto = useCallback((motto: string) =>
     {
@@ -50,11 +53,27 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
 
     CreateEventDispatcherHook(RoomSessionUserBadgesEvent.RSUBE_BADGES, eventDispatcher, onRoomSessionUserBadgesEvent);
 
+    const OnUserRelationshipsEvent = useCallback((event: RelationshipStatusInfoEvent) =>
+    {
+        const parser = event.getParser();
+
+        if (userData && userData.webID === parser.userId)
+            setUserRelationships(parser);
+    }, [userData]);
+
+    CreateMessageHook(RelationshipStatusInfoEvent, OnUserRelationshipsEvent);
+
     useEffect(() =>
     {
         setBadges(userData.badges);
         setIsEditingMotto(false);
         setMotto(userData.motto);
+        SendMessageHook(new UserRelationshipsComposer(userData.webID));
+
+        return () => {
+            setBadges([]);
+            setUserRelationships(null);
+        }
     }, [ userData ]);
 
     if(!userData) return null;
@@ -122,7 +141,9 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
                         <div className="small text-wrap">
                             { LocalizeText('infostand.text.handitem', [ 'item' ], [ LocalizeText('handitem' + userData.carryItem) ]) }
                         </div>
-                    </> }
+                    </> 
+                }
+                <RelationshipsContainerView relationships={userRelationships} simple={true}/>
             </div>
         </div>);
 }

src/views/user-profile/UserProfileVew.scss

@@ -24,11 +24,6 @@
         border-radius: 5px;
         margin: 0px;
         margin-bottom: 2px;
-
-        .badge-image {
-            margin-left: 2px;
-            margin-right: 2px;
-        }
     }
 
     .rooms-button-container
@@ -49,39 +44,5 @@
     .friends-container
     {
         height: 100%;
-
-        .relationships-container {
-
-            .relationship-container {
-                margin: 10px;
-
-                .relationship 
-                {
-                    margin-left: 10px;
-                    background-color: white;
-                    padding: 5px;
-                    border-radius: 5px;
-                    display: inline-block;
-                    text-decoration: underline;
-                    width: 100%;
-
-                    .relationship-text
-                    {
-                        cursor: pointer;
-                    }
-
-                    .avatar-image {
-                        position: absolute;
-                        width: 50px;
-                        height: 80px;
-                        right: 0;
-                        margin-top: -60px;
-                        margin-right: 10px;
-                    }
-                }
-            }
-            
-        }
-        
     }
 }

src/views/user-profile/UserProfileView.tsx

@@ -1,4 +1,4 @@
-import { UserCurrentBadgesComposer, UserCurrentBadgesEvent, UserProfileEvent, UserProfileParser, UserRelationshipsComposer, UserRelationshipsEvent, UserRelationshipsParser } from '@nitrots/nitro-renderer';
+import { RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, UserCurrentBadgesComposer, UserCurrentBadgesEvent, UserProfileEvent, UserProfileParser, UserRelationshipsComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { CreateMessageHook, SendMessageHook } from '../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
@@ -11,7 +11,7 @@ export const UserProfileView: FC = props =>
 {
     const [userProfile, setUserProfile] = useState<UserProfileParser>(null);
     const [userBadges, setUserBadges] = useState<string[]>([]);
-    const [userRelationships, setUserRelationships] = useState<UserRelationshipsParser>(null);
+    const [userRelationships, setUserRelationships] = useState<RelationshipStatusInfoMessageParser>(null);
 
     const OnClose = useCallback(() =>
     {
@@ -30,15 +30,15 @@ export const UserProfileView: FC = props =>
 
     CreateMessageHook(UserCurrentBadgesEvent, OnUserCurrentBadgesEvent);
 
-    const OnUserRelationshipsEvent = useCallback((event: UserRelationshipsEvent) =>
+    const OnUserRelationshipsEvent = useCallback((event: RelationshipStatusInfoEvent) =>
     {
         const parser = event.getParser();
 
-        if (userProfile && parser.id === userProfile.id)
+        if (userProfile && parser.userId === userProfile.id)
             setUserRelationships(parser);
     }, [userProfile, setUserRelationships]);
 
-    CreateMessageHook(UserRelationshipsEvent, OnUserRelationshipsEvent);
+    CreateMessageHook(RelationshipStatusInfoEvent, OnUserRelationshipsEvent);
 
     const OnUserProfileEvent = useCallback((event: UserProfileEvent) =>
     {
@@ -65,13 +65,13 @@ export const UserProfileView: FC = props =>
                 <NitroCardHeaderView headerText={LocalizeText('extendedprofile.caption')} onCloseClick={OnClose} />
                 <NitroCardContentView>
                     <div className="row">
-                        <div className="col-sm-7 user-container">
+                        <div className="col-sm-6 user-container">
-                            <UserContainerView id={userProfile.id} username={userProfile.username} motto={userProfile.motto} figure={userProfile.figure} secondsSinceLastLogin={userProfile.lastVisit} creation={userProfile.registration} achievementScore={userProfile.achievementPoints} isFriend={userProfile.isMyFriend} isOnline={userProfile.isOnline} requestSent={userProfile.requestSent} />
+                            <UserContainerView id={userProfile.id} username={userProfile.username} motto={userProfile.motto} figure={userProfile.figure} secondsSinceLastLogin={userProfile.secondsSinceLastVisit} creation={userProfile.registration} achievementScore={userProfile.achievementPoints} isFriend={userProfile.isMyFriend} isOnline={userProfile.isOnline} requestSent={userProfile.requestSent} />
                             <BadgesContainerView badges={userBadges} />
                         </div>
-                        <div className="col-sm-5">
+                        <div className="col-sm-6">
                             {
-                                userRelationships && <FriendsContainerView relationships={new Map([['heart', userRelationships.hearts], ['smile', userRelationships.smiles], ['bobba', userRelationships.bobbas]])} friendsCount={userProfile.friendsCount} />
+                                userRelationships && <FriendsContainerView relationships={userRelationships} friendsCount={userProfile.friendsCount} />
                             }
                         </div>
                     </div>

src/views/user-profile/views/badges-container/BadgesContainerView.tsx

@@ -7,13 +7,19 @@ export const BadgesContainerView: FC<BadgesContainerViewProps> = props =>
     const {badges = null} = props;
 
     return (
-        <div className="row badge-container">
+        <div className="row badge-container d-flex">
-            <div className="col-sm-12 d-flex">
+            <div className="nitro-card-grid theme-default">
+                <div className="row row-cols-5 align-content-start">
                 {
                     badges.map( (badge, index) => {
-                        return <BadgeImageView badgeCode={badge} key={index}/>
+                        return (
+                        <div className="grid-item-container" key={index}>
+                            <BadgeImageView badgeCode={badge}/>
+                        </div>
+                        )
                     })
                 }
+                </div>
             </div>
         </div>
     );

src/views/user-profile/views/friends-container/FriendsContainerView.tsx

@@ -1,54 +1,17 @@
-import { UserProfileComposer, UserRelationshipDataParser } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
-import { FC, useCallback } from 'react';
-import { SendMessageHook } from '../../../../hooks';
 import { LocalizeText } from '../../../../utils';
-import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
+import { RelationshipsContainerView } from '../relationships-container/RelationshipsContainerView';
 import { FriendsContainerViewProps } from './FriendsContainerView.types';
 
 export const FriendsContainerView: FC<FriendsContainerViewProps> = props => 
 {
     const { relationships = null, friendsCount = null } = props;
 
-    const OnUserClick = useCallback((user: UserRelationshipDataParser) =>
-    {
-        if(user)
-            SendMessageHook(new UserProfileComposer(user.userId));
-    }, []);
-    
-    const RelationshipComponent = useCallback(({ type }) =>
-    {
-        const randomUserIndex = (relationships && relationships.has(type) && relationships.get(type).length) ?
-            Math.floor(Math.random() * relationships.get(type).length) : -1;
-
-        const randomUser = randomUserIndex > -1 ? relationships.get(type)[randomUserIndex] : null;
-
-        return (
-            <div className="relationship-container d-flex">
-                <i className={`icon icon-relationship-${type}`} />
-                <span className="relationship">
-                    <span className="relationship-text" onClick={() => OnUserClick(randomUser)}>
-                        {
-                            randomUser ? randomUser.username : LocalizeText('extendedprofile.add.friends')
-                        }
-                    </span>
-                    {
-                        randomUser &&
-                        <AvatarImageView figure={randomUser.figure} headOnly={true} direction={4} />
-                    }
-                </span>
-            </div>
-        );
-    }, [OnUserClick, relationships]);
-
     return (
-        <div className="friends-container">
+        <div className="friends-container h-100">
             <div className="mb-1" dangerouslySetInnerHTML={{ __html: LocalizeText('extendedprofile.friends.count', ['count'], [friendsCount.toString()]) }} />
             <div className="mb-1"><b>{LocalizeText('extendedprofile.relstatus')}</b></div>
-            <div className="row justify-content-center relationships-container align-items-center">
+            <RelationshipsContainerView relationships={relationships} />
-                <RelationshipComponent type={'heart'} />
-                <RelationshipComponent type={'smile'} />
-                <RelationshipComponent type={'bobba'} />
-            </div>
         </div>
     )
 }

src/views/user-profile/views/friends-container/FriendsContainerView.types.ts

@@ -1,6 +1,6 @@
-import { UserRelationshipDataParser } from '@nitrots/nitro-renderer';
+import { RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer';
 
 export interface FriendsContainerViewProps {
-    relationships: Map<string, UserRelationshipDataParser[]>;
+    relationships: RelationshipStatusInfoMessageParser;
     friendsCount: number;
 }

src/views/user-profile/views/relationships-container/RelationshipsContainerView.scss

@@ -0,0 +1,38 @@
+.relationships-container {
+
+    .relationship-container {
+        //margin-bottom: 10px;
+
+        .relationship 
+        {
+            margin-left: 10px;
+            display: inline-block;
+            
+            &.advanced {
+                background-color: white;
+                padding: 5px;
+                border-radius: 5px;
+            }
+
+            .relationship-text {
+                text-decoration: underline;
+            }
+
+            .avatar-image {
+                position: absolute;
+                width: 50px;
+                height: 80px;
+                right: 0;
+                margin-top: -60px;
+                margin-right: 10px;
+            }
+        }
+
+        .others-text {
+            margin-left: 20px;
+            height: 21px;
+            color: #939392;
+        }
+    }
+    
+}

src/views/user-profile/views/relationships-container/RelationshipsContainerView.tsx

@@ -0,0 +1,69 @@
+import { RelationshipStatusEnum, RelationshipStatusInfo, UserProfileComposer } from '@nitrots/nitro-renderer';
+import { FC, useCallback } from 'react';
+import { SendMessageHook } from '../../../../hooks';
+import { LocalizeText } from '../../../../utils';
+import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
+import { RelationshipsContainerViewProps } from './RelationshipsContainerView.types';
+
+export const RelationshipsContainerView: FC<RelationshipsContainerViewProps> = props =>
+{
+    const { relationships = null, simple = false } = props;
+
+    const OnUserClick = useCallback((user: RelationshipStatusInfo) =>
+    {
+        if (user)
+            SendMessageHook(new UserProfileComposer(user.randomFriendId));
+    }, []);
+
+    const RelationshipComponent = useCallback(({ type }) =>
+    {
+        const relationshipInfo = (relationships && relationships.relationshipStatusMap.hasKey(type)) ? relationships.relationshipStatusMap.getValue(type) : null;
+
+        if (simple && !relationshipInfo) return null;
+
+        const relationshipName = RelationshipStatusEnum.RELATIONSHIP_NAMES[type].toLocaleLowerCase();
+
+        return (
+            <div className="relationship-container row row-cols-2 d-flex align-items-center">
+                <i className={`icon icon-relationship-${relationshipName} col-2`} />
+                <span className={'relationship col-10' + (!simple ? ' advanced' : '')}>
+                    <span className="cursor-pointer relationship-text" onClick={() => OnUserClick(relationshipInfo)}>
+                        {
+                            (relationshipInfo && relationshipInfo.friendCount > 0) ? relationshipInfo.randomFriendName : LocalizeText('extendedprofile.add.friends')
+                        }
+                    </span> 
+                    {
+                        (simple && relationshipInfo && relationshipInfo.friendCount > 1) &&
+                        <span>
+                            {' ' + LocalizeText(`extendedprofile.relstatus.others.${relationshipName}`, ['count'], [(relationshipInfo.friendCount - 1).toString()])}
+                        </span>
+                    }
+                    {
+                        (!simple && relationshipInfo && relationshipInfo.friendCount > 0) &&
+                        <AvatarImageView figure={relationshipInfo.randomFriendFigure} headOnly={true} direction={4} />
+                    }
+                </span>
+
+                {
+                    !simple && <div className="others-text">
+                        {
+                            (relationshipInfo && relationshipInfo.friendCount > 1) ? LocalizeText(`extendedprofile.relstatus.others.${relationshipName}`, ['count'], [(relationshipInfo.friendCount - 1).toString()]) : ''
+                        }
+                        {
+                            (relationshipInfo && relationshipInfo.friendCount < 1) ? LocalizeText('extendedprofile.no.friends.in.this.category') : ''
+                        }
+                    </div>
+                }
+
+            </div>
+        );
+    }, [OnUserClick, relationships, simple]);
+
+    return (
+        <div className="row justify-content-center relationships-container align-items-center flex-fill">
+            <RelationshipComponent type={RelationshipStatusEnum.HEART} />
+            <RelationshipComponent type={RelationshipStatusEnum.SMILE} />
+            <RelationshipComponent type={RelationshipStatusEnum.BOBBA} />
+        </div>
+    );
+}

src/views/user-profile/views/relationships-container/RelationshipsContainerView.types.ts

@@ -0,0 +1,7 @@
+import { RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer';
+
+export interface RelationshipsContainerViewProps
+{
+    relationships: RelationshipStatusInfoMessageParser;
+    simple?: boolean;
+}

src/views/user-profile/views/user-container/UserContainerView.tsx

@@ -34,7 +34,7 @@ export const UserContainerView: FC<UserContainerViewProps> = props =>
                     <h5>{username}</h5>
                     <div className="mb-1">{motto}</div>
                     <div className="mb-1" dangerouslySetInnerHTML={{ __html: LocalizeText('extendedprofile.created', ['created'], [creation]) }} />
-                    <div className="mb-1" dangerouslySetInnerHTML={{ __html: LocalizeText('extendedprofile.last.login', ['lastlogin'], [FriendlyTime.format(secondsSinceLastLogin, '.ago', 1)]) }} />
+                    <div className="mb-1" dangerouslySetInnerHTML={{ __html: LocalizeText('extendedprofile.last.login', ['lastlogin'], [FriendlyTime.format(secondsSinceLastLogin, '.ago', 2)]) }} />
                     <div className="mb-1"><b>{LocalizeText('extendedprofile.achievementscore')}</b> {achievementScore}</div>
                     <OnlineIcon />
                     <FriendRequestComponent />