From 6fb128ca1c17965302ab91939c64d5b2af2b5266 Mon Sep 17 00:00:00 2001 From: Bill Date: Mon, 21 Feb 2022 00:01:26 -0500 Subject: [PATCH] Refactor user-profile --- .../user-profile/UserProfileVew.scss | 61 +++++++++- .../user-profile/UserProfileView.tsx | 104 ++++++++++-------- .../BadgesContainerView.tsx | 10 +- .../FriendsContainerView.tsx | 12 +- .../GroupsContainerView.tsx | 16 ++- .../RelationshipsContainerView.tsx | 13 ++- .../UserContainerView.tsx | 12 +- .../BadgesContainerView.types.ts | 3 - .../FriendsContainerView.types.ts | 6 - .../groups-container/GroupsContainerView.scss | 23 ---- .../GroupsContainerView.types.ts | 8 -- .../RelationshipsContainerView.scss | 35 ------ .../RelationshipsContainerView.types.ts | 7 -- .../user-container/UserContainerView.types.ts | 6 - .../views/user/InfoStandWidgetUserView.tsx | 2 +- 15 files changed, 160 insertions(+), 158 deletions(-) rename src/components/user-profile/views/{badges-container => }/BadgesContainerView.tsx (81%) rename src/components/user-profile/views/{friends-container => }/FriendsContainerView.tsx (68%) rename src/components/user-profile/views/{groups-container => }/GroupsContainerView.tsx (84%) rename src/components/user-profile/views/{relationships-container => }/RelationshipsContainerView.tsx (89%) rename src/components/user-profile/views/{user-container => }/UserContainerView.tsx (87%) delete mode 100644 src/components/user-profile/views/badges-container/BadgesContainerView.types.ts delete mode 100644 src/components/user-profile/views/friends-container/FriendsContainerView.types.ts delete mode 100644 src/components/user-profile/views/groups-container/GroupsContainerView.scss delete mode 100644 src/components/user-profile/views/groups-container/GroupsContainerView.types.ts delete mode 100644 src/components/user-profile/views/relationships-container/RelationshipsContainerView.scss delete mode 100644 src/components/user-profile/views/relationships-container/RelationshipsContainerView.types.ts delete mode 100644 src/components/user-profile/views/user-container/UserContainerView.types.ts diff --git a/src/components/user-profile/UserProfileVew.scss b/src/components/user-profile/UserProfileVew.scss index d335cddd..5adc408a 100644 --- a/src/components/user-profile/UserProfileVew.scss +++ b/src/components/user-profile/UserProfileVew.scss @@ -45,5 +45,62 @@ } } -@import './views/relationships-container/RelationshipsContainerView'; -@import './views/groups-container/GroupsContainerView'; +.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; + } + } +} + +.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; + } + } + +} diff --git a/src/components/user-profile/UserProfileView.tsx b/src/components/user-profile/UserProfileView.tsx index 33cfb22e..30f2d9c6 100644 --- a/src/components/user-profile/UserProfileView.tsx +++ b/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 { FriendsContainerView } from './views/friends-container/FriendsContainerView'; -import { GroupsContainerView } from './views/groups-container/GroupsContainerView'; -import { UserContainerView } from './views/user-container/UserContainerView'; +import { BadgesContainerView } from './views/BadgesContainerView'; +import { FriendsContainerView } from './views/FriendsContainerView'; +import { GroupsContainerView } from './views/GroupsContainerView'; +import { UserContainerView } from './views/UserContainerView'; -export const UserProfileView: FC = props => +export const UserProfileView: FC<{}> = props => { - const [userProfile, setUserProfile] = useState(null); - const [userBadges, setUserBadges] = useState([]); - const [userRelationships, setUserRelationships] = useState(null); + const [ userProfile, setUserProfile ] = useState(null); + const [ userBadges, setUserBadges ] = useState([]); + const [ userRelationships, setUserRelationships ] = useState(null); - const OnClose = useCallback(() => + const onClose = () => { - setUserProfile(null); - setUserBadges([]); - setUserRelationships(null); - }, []); + BatchUpdates(() => + { + setUserProfile(null); + setUserBadges([]); + setUserRelationships(null); + }); + } const onLeaveGroup = useCallback(() => { @@ -29,67 +33,71 @@ 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) - setUserBadges(parser.badges); - }, [userProfile, setUserBadges]); + if(!userProfile || (parser.userId !== userProfile.id)) return; + + setUserBadges(parser.badges); + }, [ userProfile ]); - CreateMessageHook(UserCurrentBadgesEvent, OnUserCurrentBadgesEvent); + CreateMessageHook(UserCurrentBadgesEvent, onUserCurrentBadgesEvent); const OnUserRelationshipsEvent = useCallback((event: RelationshipStatusInfoEvent) => { const parser = event.getParser(); - if(userProfile && parser.userId === userProfile.id) - setUserRelationships(parser); - }, [userProfile, setUserRelationships]); + if(!userProfile || (parser.userId !== userProfile.id)) return; + + setUserRelationships(parser); + }, [ userProfile ]); CreateMessageHook(RelationshipStatusInfoEvent, OnUserRelationshipsEvent); - const OnUserProfileEvent = useCallback((event: UserProfileEvent) => + const onUserProfileEvent = useCallback((event: UserProfileEvent) => { const parser = event.getParser(); if(userProfile) { - setUserProfile(null); - setUserBadges([]); - setUserRelationships(null); + 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 ( - - - -
-
- - -
-
- { - userRelationships && - } -
-
-
-
- {LocalizeText('extendedprofile.rooms')} -
-
- + + + + + + + + + + { + userRelationships && + } + + + + {LocalizeText('extendedprofile.rooms')} + + ) diff --git a/src/components/user-profile/views/badges-container/BadgesContainerView.tsx b/src/components/user-profile/views/BadgesContainerView.tsx similarity index 81% rename from src/components/user-profile/views/badges-container/BadgesContainerView.tsx rename to src/components/user-profile/views/BadgesContainerView.tsx index 6c950af6..14794c30 100644 --- a/src/components/user-profile/views/badges-container/BadgesContainerView.tsx +++ b/src/components/user-profile/views/BadgesContainerView.tsx @@ -1,7 +1,11 @@ import { FC } from 'react'; -import { NitroCardGridItemView, NitroCardGridView } from '../../../../layout'; -import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView'; -import { BadgesContainerViewProps } from './BadgesContainerView.types'; +import { NitroCardGridItemView, NitroCardGridView } from '../../../layout'; +import { BadgeImageView } from '../../../views/shared/badge-image/BadgeImageView'; + +interface BadgesContainerViewProps +{ + badges: string[]; +} export const BadgesContainerView: FC = props => { diff --git a/src/components/user-profile/views/friends-container/FriendsContainerView.tsx b/src/components/user-profile/views/FriendsContainerView.tsx similarity index 68% rename from src/components/user-profile/views/friends-container/FriendsContainerView.tsx rename to src/components/user-profile/views/FriendsContainerView.tsx index b76457ac..b206fc80 100644 --- a/src/components/user-profile/views/friends-container/FriendsContainerView.tsx +++ b/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 { RelationshipsContainerView } from '../relationships-container/RelationshipsContainerView'; -import { FriendsContainerViewProps } from './FriendsContainerView.types'; +import { LocalizeText } from '../../../api'; +import { RelationshipsContainerView } from './RelationshipsContainerView'; + +interface FriendsContainerViewProps +{ + relationships: RelationshipStatusInfoMessageParser; + friendsCount: number; +} export const FriendsContainerView: FC = props => { diff --git a/src/components/user-profile/views/groups-container/GroupsContainerView.tsx b/src/components/user-profile/views/GroupsContainerView.tsx similarity index 84% rename from src/components/user-profile/views/groups-container/GroupsContainerView.tsx rename to src/components/user-profile/views/GroupsContainerView.tsx index 6c11d09b..ce4b6870 100644 --- a/src/components/user-profile/views/groups-container/GroupsContainerView.tsx +++ b/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 { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView'; -import { GroupInformationView } from '../../../groups/views/information/GroupInformationView'; -import { GroupsContainerViewProps } from './GroupsContainerView.types'; +import { CreateMessageHook, SendMessageHook } from '../../../hooks'; +import { BadgeImageView } from '../../../views/shared/badge-image/BadgeImageView'; +import { GroupInformationView } from '../../groups/views/information/GroupInformationView'; + +interface GroupsContainerViewProps +{ + itsMe: boolean; + groups: HabboGroupEntryData[]; + onLeaveGroup: () => void; +} export const GroupsContainerView: FC = props => { diff --git a/src/components/user-profile/views/relationships-container/RelationshipsContainerView.tsx b/src/components/user-profile/views/RelationshipsContainerView.tsx similarity index 89% rename from src/components/user-profile/views/relationships-container/RelationshipsContainerView.tsx rename to src/components/user-profile/views/RelationshipsContainerView.tsx index ec3c9e65..7f89d42d 100644 --- a/src/components/user-profile/views/relationships-container/RelationshipsContainerView.tsx +++ b/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 { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView'; -import { RelationshipsContainerViewProps } from './RelationshipsContainerView.types'; +import { GetUserProfile, LocalizeText } from '../../../api'; +import { AvatarImageView } from '../../../views/shared/avatar-image/AvatarImageView'; + +interface RelationshipsContainerViewProps +{ + relationships: RelationshipStatusInfoMessageParser; + simple?: boolean; +} export const RelationshipsContainerView: FC = props => { diff --git a/src/components/user-profile/views/user-container/UserContainerView.tsx b/src/components/user-profile/views/UserContainerView.tsx similarity index 87% rename from src/components/user-profile/views/user-container/UserContainerView.tsx rename to src/components/user-profile/views/UserContainerView.tsx index f2714614..bcd3e359 100644 --- a/src/components/user-profile/views/user-container/UserContainerView.tsx +++ b/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 { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView'; -import { UserContainerViewProps } from './UserContainerView.types'; +import { GetSessionDataManager, LocalizeText } from '../../../api'; +import { AvatarImageView } from '../../../views/shared/avatar-image/AvatarImageView'; + +interface UserContainerViewProps +{ + userProfile: UserProfileParser; +} export const UserContainerView: FC = props => { diff --git a/src/components/user-profile/views/badges-container/BadgesContainerView.types.ts b/src/components/user-profile/views/badges-container/BadgesContainerView.types.ts deleted file mode 100644 index d57276ab..00000000 --- a/src/components/user-profile/views/badges-container/BadgesContainerView.types.ts +++ /dev/null @@ -1,3 +0,0 @@ -export interface BadgesContainerViewProps { - badges: string[]; -} diff --git a/src/components/user-profile/views/friends-container/FriendsContainerView.types.ts b/src/components/user-profile/views/friends-container/FriendsContainerView.types.ts deleted file mode 100644 index 99ba31df..00000000 --- a/src/components/user-profile/views/friends-container/FriendsContainerView.types.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer'; - -export interface FriendsContainerViewProps { - relationships: RelationshipStatusInfoMessageParser; - friendsCount: number; -} diff --git a/src/components/user-profile/views/groups-container/GroupsContainerView.scss b/src/components/user-profile/views/groups-container/GroupsContainerView.scss deleted file mode 100644 index c4d8b17e..00000000 --- a/src/components/user-profile/views/groups-container/GroupsContainerView.scss +++ /dev/null @@ -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; - } - } -} diff --git a/src/components/user-profile/views/groups-container/GroupsContainerView.types.ts b/src/components/user-profile/views/groups-container/GroupsContainerView.types.ts deleted file mode 100644 index 0bfdf75e..00000000 --- a/src/components/user-profile/views/groups-container/GroupsContainerView.types.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { HabboGroupEntryData } from '@nitrots/nitro-renderer'; - -export interface GroupsContainerViewProps -{ - itsMe: boolean; - groups: HabboGroupEntryData[]; - onLeaveGroup: () => void; -} diff --git a/src/components/user-profile/views/relationships-container/RelationshipsContainerView.scss b/src/components/user-profile/views/relationships-container/RelationshipsContainerView.scss deleted file mode 100644 index 631424c4..00000000 --- a/src/components/user-profile/views/relationships-container/RelationshipsContainerView.scss +++ /dev/null @@ -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; - } - } - -} diff --git a/src/components/user-profile/views/relationships-container/RelationshipsContainerView.types.ts b/src/components/user-profile/views/relationships-container/RelationshipsContainerView.types.ts deleted file mode 100644 index 2bf0d119..00000000 --- a/src/components/user-profile/views/relationships-container/RelationshipsContainerView.types.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer'; - -export interface RelationshipsContainerViewProps -{ - relationships: RelationshipStatusInfoMessageParser; - simple?: boolean; -} diff --git a/src/components/user-profile/views/user-container/UserContainerView.types.ts b/src/components/user-profile/views/user-container/UserContainerView.types.ts deleted file mode 100644 index 88df91d4..00000000 --- a/src/components/user-profile/views/user-container/UserContainerView.types.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { UserProfileParser } from '@nitrots/nitro-renderer'; - -export interface UserContainerViewProps -{ - userProfile: UserProfileParser; -} diff --git a/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx b/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx index 8012bbc2..44e90e40 100644 --- a/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx +++ b/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';