Refactor user-profile

src/components/user-profile/UserProfileVew.scss

@@ -45,5 +45,62 @@
     }
 }
 
-@import './views/relationships-container/RelationshipsContainerView';
+.profile-groups {
-@import './views/groups-container/GroupsContainerView';
+    height: 219px;
+
+    .profile-groups-item {
+        width: 50px;
+        height: 50px;
+        border-radius: $border-radius;
+        border-color: $grid-border-color !important;
+        background-color: $grid-bg-color;
+        border: nth(map-values($border-widths), 2) solid;
+
+        &.active {
+            border-color: $grid-active-border-color !important;
+            background-color: $grid-active-bg-color !important;
+        }
+
+        .icon {
+            z-index: 1;
+            top: 0px;
+            right: 0px;
+        }
+    }
+}
+
+.relationships-container {
+
+    .relationship-container {
+
+        .relationship 
+        {
+            position: relative;
+            
+            &.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;
+            }
+        }
+
+        .others-text {
+            margin-left: 20px;
+            height: 21px;
+            color: #939392;
+        }
+    }
+    
+}

src/components/user-profile/UserProfileView.tsx

@@ -1,25 +1,29 @@
 import { RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, UserCurrentBadgesComposer, UserCurrentBadgesEvent, UserProfileEvent, UserProfileParser, UserRelationshipsComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { GetSessionDataManager, GetUserProfile, LocalizeText } from '../../api';
-import { CreateMessageHook, SendMessageHook } from '../../hooks';
+import { Column, Flex, Grid } from '../../common';
+import { BatchUpdates, CreateMessageHook, SendMessageHook } from '../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
-import { BadgesContainerView } from './views/badges-container/BadgesContainerView';
+import { BadgesContainerView } from './views/BadgesContainerView';
-import { FriendsContainerView } from './views/friends-container/FriendsContainerView';
+import { FriendsContainerView } from './views/FriendsContainerView';
-import { GroupsContainerView } from './views/groups-container/GroupsContainerView';
+import { GroupsContainerView } from './views/GroupsContainerView';
-import { UserContainerView } from './views/user-container/UserContainerView';
+import { UserContainerView } from './views/UserContainerView';
 
-export const UserProfileView: FC = props =>
+export const UserProfileView: FC<{}> = props =>
 {
-    const [userProfile, setUserProfile] = useState<UserProfileParser>(null);
+    const [ userProfile, setUserProfile ] = useState<UserProfileParser>(null);
-    const [userBadges, setUserBadges] = useState<string[]>([]);
+    const [ userBadges, setUserBadges ] = useState<string[]>([]);
-    const [userRelationships, setUserRelationships] = useState<RelationshipStatusInfoMessageParser>(null);
+    const [ userRelationships, setUserRelationships ] = useState<RelationshipStatusInfoMessageParser>(null);
 
-    const OnClose = useCallback(() =>
+    const onClose = () =>
+    {
+        BatchUpdates(() =>
         {
             setUserProfile(null);
             setUserBadges([]);
             setUserRelationships(null);
-    }, []);
+        });
+    }
 
     const onLeaveGroup = useCallback(() =>
     {
@@ -29,66 +33,70 @@ export const UserProfileView: FC = props =>
         }
     }, [ userProfile ]);
     
-    const OnUserCurrentBadgesEvent = useCallback((event: UserCurrentBadgesEvent) =>
+    const onUserCurrentBadgesEvent = useCallback((event: UserCurrentBadgesEvent) =>
     {
         const parser = event.getParser();
 
-        if(userProfile && parser.userId === userProfile.id)
+        if(!userProfile || (parser.userId !== userProfile.id)) return;
-            setUserBadges(parser.badges);
-    }, [userProfile, setUserBadges]);
         
-    CreateMessageHook(UserCurrentBadgesEvent, OnUserCurrentBadgesEvent);
+        setUserBadges(parser.badges);
+    }, [ userProfile ]);
+
+    CreateMessageHook(UserCurrentBadgesEvent, onUserCurrentBadgesEvent);
 
     const OnUserRelationshipsEvent = useCallback((event: RelationshipStatusInfoEvent) =>
     {
         const parser = event.getParser();
 
-        if(userProfile && parser.userId === userProfile.id)
+        if(!userProfile || (parser.userId !== userProfile.id)) return;
+        
         setUserRelationships(parser);
-    }, [userProfile, setUserRelationships]);
+    }, [ userProfile ]);
 
     CreateMessageHook(RelationshipStatusInfoEvent, OnUserRelationshipsEvent);
 
-    const OnUserProfileEvent = useCallback((event: UserProfileEvent) =>
+    const onUserProfileEvent = useCallback((event: UserProfileEvent) =>
     {
         const parser = event.getParser();
 
         if(userProfile)
+        {
+            BatchUpdates(() =>
             {
                 setUserProfile(null);
                 setUserBadges([]);
                 setUserRelationships(null);
+            });
         }
         
         setUserProfile(parser);
+
         SendMessageHook(new UserCurrentBadgesComposer(parser.id));
         SendMessageHook(new UserRelationshipsComposer(parser.id));
-    }, [userProfile]);
+    }, [ userProfile ]);
 
-    CreateMessageHook(UserProfileEvent, OnUserProfileEvent);
+    CreateMessageHook(UserProfileEvent, onUserProfileEvent);
 
     if(!userProfile) return null;
 
     return (
-        <NitroCardView simple={ true } className="user-profile">
+        <NitroCardView className="user-profile" simple>
-                <NitroCardHeaderView headerText={LocalizeText('extendedprofile.caption')} onCloseClick={OnClose} />
+            <NitroCardHeaderView headerText={ LocalizeText('extendedprofile.caption') } onCloseClick={ onClose } />
             <NitroCardContentView>
-                    <div className="row">
+                <Grid>
-                        <div className="col-sm-7 user-container">
+                    <Column size={ 7 } className="user-container">
                         <UserContainerView userProfile={ userProfile } />
                         <BadgesContainerView badges={ userBadges } />
-                        </div>
+                    </Column>
-                        <div className="col-sm-5">
+                    <Column size={ 5 }>
                         {
                             userRelationships && <FriendsContainerView relationships={userRelationships} friendsCount={userProfile.friendsCount} />
                         }
-                        </div>
+                    </Column>
-                    </div>
+                </Grid>
-                    <div className="d-flex rooms-button-container align-items-center py-1">
+                <Flex alignItems="center" className="rooms-button-container">
-                        <div className="d-flex align-items-center w-100">
                     <i className="icon icon-rooms" /><span className="rooms-button">{LocalizeText('extendedprofile.rooms')}</span>
-                        </div>
+                </Flex>
-                    </div>
                 <GroupsContainerView itsMe={ userProfile.id === GetSessionDataManager().userId } groups={ userProfile.groups } onLeaveGroup={ onLeaveGroup } />
             </NitroCardContentView>
         </NitroCardView>

src/components/user-profile/views/BadgesContainerView.tsx

@@ -1,7 +1,11 @@
 import { FC } from 'react';
-import { NitroCardGridItemView, NitroCardGridView } from '../../../../layout';
+import { NitroCardGridItemView, NitroCardGridView } from '../../../layout';
-import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
+import { BadgeImageView } from '../../../views/shared/badge-image/BadgeImageView';
-import { BadgesContainerViewProps } from './BadgesContainerView.types';
+
+interface BadgesContainerViewProps
+{
+    badges: string[];
+}
 
 export const BadgesContainerView: FC<BadgesContainerViewProps> = props =>
 {

src/components/user-profile/views/FriendsContainerView.tsx

@@ -1,7 +1,13 @@
+import { RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
-import { LocalizeText } from '../../../../api';
+import { LocalizeText } from '../../../api';
-import { RelationshipsContainerView } from '../relationships-container/RelationshipsContainerView';
+import { RelationshipsContainerView } from './RelationshipsContainerView';
-import { FriendsContainerViewProps } from './FriendsContainerView.types';
+
+interface FriendsContainerViewProps
+{
+    relationships: RelationshipStatusInfoMessageParser;
+    friendsCount: number;
+}
 
 export const FriendsContainerView: FC<FriendsContainerViewProps> = props => 
 {

src/components/user-profile/views/GroupsContainerView.tsx

@@ -1,10 +1,16 @@
-import { GroupFavoriteComposer, GroupInformationComposer, GroupInformationEvent, GroupInformationParser } from '@nitrots/nitro-renderer';
+import { GroupFavoriteComposer, GroupInformationComposer, GroupInformationEvent, GroupInformationParser, HabboGroupEntryData } from '@nitrots/nitro-renderer';
 import classNames from 'classnames';
 import { FC, useCallback, useEffect, useState } from 'react';
-import { CreateMessageHook, SendMessageHook } from '../../../../hooks';
+import { CreateMessageHook, SendMessageHook } from '../../../hooks';
-import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
+import { BadgeImageView } from '../../../views/shared/badge-image/BadgeImageView';
-import { GroupInformationView } from '../../../groups/views/information/GroupInformationView';
+import { GroupInformationView } from '../../groups/views/information/GroupInformationView';
-import { GroupsContainerViewProps } from './GroupsContainerView.types';
+
+interface GroupsContainerViewProps
+{
+    itsMe: boolean;
+    groups: HabboGroupEntryData[];
+    onLeaveGroup: () => void;
+}
 
 export const GroupsContainerView: FC<GroupsContainerViewProps> = props =>
 {

src/components/user-profile/views/RelationshipsContainerView.tsx

@@ -1,8 +1,13 @@
-import { RelationshipStatusEnum, RelationshipStatusInfo } from '@nitrots/nitro-renderer';
+import { RelationshipStatusEnum, RelationshipStatusInfo, RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
-import { GetUserProfile, LocalizeText } from '../../../../api';
+import { GetUserProfile, LocalizeText } from '../../../api';
-import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
+import { AvatarImageView } from '../../../views/shared/avatar-image/AvatarImageView';
-import { RelationshipsContainerViewProps } from './RelationshipsContainerView.types';
+
+interface RelationshipsContainerViewProps
+{
+    relationships: RelationshipStatusInfoMessageParser;
+    simple?: boolean;
+}
 
 export const RelationshipsContainerView: FC<RelationshipsContainerViewProps> = props =>
 {

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

@@ -1,8 +1,12 @@
-import { FriendlyTime } from '@nitrots/nitro-renderer';
+import { FriendlyTime, UserProfileParser } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
-import { GetSessionDataManager, LocalizeText } from '../../../../api';
+import { GetSessionDataManager, LocalizeText } from '../../../api';
-import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
+import { AvatarImageView } from '../../../views/shared/avatar-image/AvatarImageView';
-import { UserContainerViewProps } from './UserContainerView.types';
+
+interface UserContainerViewProps
+{
+    userProfile: UserProfileParser;
+}
 
 export const UserContainerView: FC<UserContainerViewProps> = props =>
 {

src/components/user-profile/views/badges-container/BadgesContainerView.types.ts

@@ -1,3 +0,0 @@
-export interface BadgesContainerViewProps {
-    badges: string[];
-}

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

@@ -1,6 +0,0 @@
-import { RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer';
-
-export interface FriendsContainerViewProps {
-    relationships: RelationshipStatusInfoMessageParser;
-    friendsCount: number;
-}

src/components/user-profile/views/groups-container/GroupsContainerView.scss

@@ -1,23 +0,0 @@
-.profile-groups {
-    height: 219px;
-
-    .profile-groups-item {
-        width: 50px;
-        height: 50px;
-        border-radius: $border-radius;
-        border-color: $grid-border-color !important;
-        background-color: $grid-bg-color;
-        border: nth(map-values($border-widths), 2) solid;
-
-        &.active {
-            border-color: $grid-active-border-color !important;
-            background-color: $grid-active-bg-color !important;
-        }
-
-        .icon {
-            z-index: 1;
-            top: 0px;
-            right: 0px;
-        }
-    }
-}

src/components/user-profile/views/groups-container/GroupsContainerView.types.ts

@@ -1,8 +0,0 @@
-import { HabboGroupEntryData } from '@nitrots/nitro-renderer';
-
-export interface GroupsContainerViewProps
-{
-    itsMe: boolean;
-    groups: HabboGroupEntryData[];
-    onLeaveGroup: () => void;
-}

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

@@ -1,35 +0,0 @@
-.relationships-container {
-
-    .relationship-container {
-
-        .relationship 
-        {
-            position: relative;
-            
-            &.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;
-            }
-        }
-
-        .others-text {
-            margin-left: 20px;
-            height: 21px;
-            color: #939392;
-        }
-    }
-    
-}

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

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

src/components/user-profile/views/user-container/UserContainerView.types.ts

@@ -1,6 +0,0 @@
-import { UserProfileParser } from '@nitrots/nitro-renderer';
-
-export interface UserContainerViewProps
-{
-    userProfile: UserProfileParser;
-}

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

@@ -5,7 +5,7 @@ import { FC, FocusEvent, KeyboardEvent, useCallback, useEffect, useState } from
 import { GetGroupInformation, LocalizeText, RoomWidgetChangeMottoMessage, RoomWidgetUpdateInfostandUserEvent } from '../../../../../../api';
 import { Base } from '../../../../../../common/Base';
 import { Flex } from '../../../../../../common/Flex';
-import { RelationshipsContainerView } from '../../../../../../components/user-profile/views/relationships-container/RelationshipsContainerView';
+import { RelationshipsContainerView } from '../../../../../../components/user-profile/views/RelationshipsContainerView';
 import { CreateMessageHook, SendMessageHook } from '../../../../../../hooks';
 import { CreateEventDispatcherHook } from '../../../../../../hooks/events';
 import { UserProfileIconView } from '../../../../../../layout';