nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-31 10:22:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Refactor user-profile

Browse Source
This commit is contained in:
Bill 2022-02-21 00:01:26 -05:00
parent abc08e7b86
commit 6fb128ca1c
15 changed files with 160 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/user-profile/UserProfileVew.scss
View File

@ -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;
}
}
}

74
src/components/user-profile/UserProfileView.tsx
View File

@ -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<UserProfileParser>(null);
const [userBadges, setUserBadges] = useState<string[]>([]);
const [userRelationships, setUserRelationships] = useState<RelationshipStatusInfoMessageParser>(null);
const [ userProfile, setUserProfile ] = useState<UserProfileParser>(null);
const [ userBadges, setUserBadges ] = useState<string[]>([]);
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)
setUserBadges(parser.badges);
}, [userProfile, setUserBadges]);
if(!userProfile || (parser.userId !== userProfile.id)) return;
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">
<NitroCardHeaderView headerText={LocalizeText('extendedprofile.caption')} onCloseClick={OnClose} />
<NitroCardView className="user-profile" simple>
<NitroCardHeaderView headerText={ LocalizeText('extendedprofile.caption') } onCloseClick={ onClose } />
<NitroCardContentView>
<div className="row">
<div className="col-sm-7 user-container">
<Grid>
<Column size={ 7 } className="user-container">
<UserContainerView userProfile={ userProfile } />
<BadgesContainerView badges={ userBadges } />
</div>
<div className="col-sm-5">
</Column>
<Column size={ 5 }>
{
userRelationships && <FriendsContainerView relationships={userRelationships} friendsCount={userProfile.friendsCount} />
}
</div>
</div>
<div className="d-flex rooms-button-container align-items-center py-1">
<div className="d-flex align-items-center w-100">
</Column>
</Grid>
<Flex alignItems="center" className="rooms-button-container">
<i className="icon icon-rooms" /><span className="rooms-button">{LocalizeText('extendedprofile.rooms')}</span>
</div>
</div>
</Flex>
<GroupsContainerView itsMe={ userProfile.id === GetSessionDataManager().userId } groups={ userProfile.groups } onLeaveGroup={ onLeaveGroup } />
</NitroCardContentView>
</NitroCardView>

10
src/components/user-profile/views/badges-container/BadgesContainerView.tsx → src/components/user-profile/views/BadgesContainerView.tsx
View File

@ -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<BadgesContainerViewProps> = props =>
{

12
src/components/user-profile/views/friends-container/FriendsContainerView.tsx → src/components/user-profile/views/FriendsContainerView.tsx
View File

@ -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<FriendsContainerViewProps> = props =>
{

16
src/components/user-profile/views/groups-container/GroupsContainerView.tsx → src/components/user-profile/views/GroupsContainerView.tsx
View File

@ -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<GroupsContainerViewProps> = props =>
{

13
src/components/user-profile/views/relationships-container/RelationshipsContainerView.tsx → src/components/user-profile/views/RelationshipsContainerView.tsx
View File

@ -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<RelationshipsContainerViewProps> = props =>
{

12
src/components/user-profile/views/user-container/UserContainerView.tsx → src/components/user-profile/views/UserContainerView.tsx
View File

@ -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<UserContainerViewProps> = props =>
{

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

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

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

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

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

@ -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;
}
}
}

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

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

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

@ -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;
}
}
}

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

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

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

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

2
src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx
View File

@ -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';