mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-22 22:30:52 +01:00
Update profile
This commit is contained in:
Bill
parent
15157e3636
commit
8d3c16b624
@ -1,7 +1,6 @@
|
||||
import { RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer';
|
||||
import { FC } from 'react';
|
||||
import { LocalizeText } from '../../../api';
|
||||
import { Text } from '../../../common';
|
||||
import { LocalizeText } from '../../api';
|
||||
import { RelationshipsContainerView } from './RelationshipsContainerView';
|
||||
|
||||
interface FriendsContainerViewProps
|
||||
@ -16,11 +15,11 @@ export const FriendsContainerView: FC<FriendsContainerViewProps> = props =>
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-1">
|
||||
<Text small>
|
||||
<p className="text-sm">
|
||||
<b>{ LocalizeText('extendedprofile.friends.count') }</b> { friendsCount }
|
||||
</Text>
|
||||
<Text bold small>{ LocalizeText('extendedprofile.relstatus') }</Text>
|
||||
<div className="flex flex-col gap-2">
|
||||
</p>
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="text-sm font-bold">{ LocalizeText('extendedprofile.relstatus') }</p>
|
||||
<RelationshipsContainerView relationships={ relationships } />
|
||||
</div>
|
||||
</div>
|
||||
@ -1,9 +1,9 @@
|
||||
import { GroupInformationComposer, GroupInformationEvent, GroupInformationParser, HabboGroupEntryData } from '@nitrots/nitro-renderer';
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { SendMessageComposer, ToggleFavoriteGroup } from '../../../api';
|
||||
import { AutoGrid, Column, Grid, GridProps, LayoutBadgeImageView, LayoutGridItem } from '../../../common';
|
||||
import { useMessageEvent } from '../../../hooks';
|
||||
import { GroupInformationView } from '../../groups/views/GroupInformationView';
|
||||
import { SendMessageComposer, ToggleFavoriteGroup } from '../../api';
|
||||
import { AutoGrid, Column, Grid, GridProps, LayoutBadgeImageView, LayoutGridItem } from '../../common';
|
||||
import { useMessageEvent } from '../../hooks';
|
||||
import { GroupInformationView } from '../groups/views/GroupInformationView';
|
||||
|
||||
interface GroupsContainerViewProps extends GridProps
|
||||
{
|
||||
@ -1,7 +1,7 @@
|
||||
import { RelationshipStatusEnum, RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer';
|
||||
import { FC } from 'react';
|
||||
import { GetUserProfile, LocalizeText } from '../../../api';
|
||||
import { Flex, LayoutAvatarImageView, Text } from '../../../common';
|
||||
import { GetUserProfile, LocalizeText } from '../../api';
|
||||
import { Flex, LayoutAvatarImageView } from '../../common';
|
||||
|
||||
interface RelationshipsContainerViewProps
|
||||
{
|
||||
@ -27,26 +27,26 @@ export const RelationshipsContainerView: FC<RelationshipsContainerViewProps> = p
|
||||
<Flex center className="h-[25px]">
|
||||
<i className={ `nitro-friends-spritesheet icon-${ relationshipName }` } />
|
||||
</Flex>
|
||||
<div className="flex flex-col !flex-grow gap-0">
|
||||
<Flex alignItems="center" className="bg-white rounded px-2 py-1 h-[25px]" justifyContent="between">
|
||||
<Text pointer small underline onClick={ event => (relationshipInfo && (relationshipInfo.randomFriendId >= 1) && GetUserProfile(relationshipInfo.randomFriendId)) }>
|
||||
<div className="flex flex-col flex-grow gap-0">
|
||||
<div className="flex items-center justify-between bg-white rounded px-2 py-1 h-[25px]">
|
||||
<p className="text-sm underline pointer" onClick={ event => (relationshipInfo && (relationshipInfo.randomFriendId >= 1) && GetUserProfile(relationshipInfo.randomFriendId)) }>
|
||||
{ (!relationshipInfo || (relationshipInfo.friendCount === 0)) &&
|
||||
LocalizeText('extendedprofile.add.friends') }
|
||||
{ (relationshipInfo && (relationshipInfo.friendCount >= 1)) &&
|
||||
relationshipInfo.randomFriendName }
|
||||
</Text>
|
||||
</p>
|
||||
{ (relationshipInfo && (relationshipInfo.friendCount >= 1)) &&
|
||||
<div className="flex items-center justify-center w-[50px] h-[50px] top-[20px] -right-[8px] relative">
|
||||
<LayoutAvatarImageView direction={ 4 } figure={ relationshipInfo.randomFriendFigure } headOnly={ true } />
|
||||
</div> }
|
||||
</Flex>
|
||||
<Text italics small className="mt-[2px] ml-[5px] !text-[#939392]">
|
||||
</div>
|
||||
<p className="italics text-sm mt-[2px] ml-[5px] !text-[#939392]">
|
||||
{ (!relationshipInfo || (relationshipInfo.friendCount === 0)) &&
|
||||
LocalizeText('extendedprofile.no.friends.in.this.category') }
|
||||
{ (relationshipInfo && (relationshipInfo.friendCount > 1)) &&
|
||||
LocalizeText(`extendedprofile.relstatus.others.${ relationshipName }`, [ 'count' ], [ (relationshipInfo.friendCount - 1).toString() ]) }
|
||||
|
||||
</Text>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -1,14 +1,11 @@
|
||||
import { GetSessionDataManager, RequestFriendComposer, UserProfileParser } from '@nitrots/nitro-renderer';
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { FriendlyTime, LocalizeText, SendMessageComposer } from '../../../api';
|
||||
import { LayoutAvatarImageView, Text } from '../../../common';
|
||||
import { FriendlyTime, LocalizeText, SendMessageComposer } from '../../api';
|
||||
import { LayoutAvatarImageView, Text } from '../../common';
|
||||
|
||||
interface UserContainerViewProps
|
||||
{
|
||||
export const UserContainerView: FC<{
|
||||
userProfile: UserProfileParser;
|
||||
}
|
||||
|
||||
export const UserContainerView: FC<UserContainerViewProps> = props =>
|
||||
}> = props =>
|
||||
{
|
||||
const { userProfile = null } = props;
|
||||
const [ requestSent, setRequestSent ] = useState(userProfile.requestSent);
|
||||
@ -34,21 +31,21 @@ export const UserContainerView: FC<UserContainerViewProps> = props =>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex flex-col gap-0">
|
||||
<Text bold>{ userProfile.username }</Text>
|
||||
<Text italics small textBreak>{ userProfile.motto } </Text>
|
||||
<p className="leading-tight">{ userProfile.username }</p>
|
||||
<p className="text-sm italic leading-tight">{ userProfile.motto }</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<Text small>
|
||||
<p className="text-sm leading-none">
|
||||
<b>{ LocalizeText('extendedprofile.created') }</b> { userProfile.registration }
|
||||
</Text>
|
||||
<Text small>
|
||||
</p>
|
||||
<p className="text-sm leading-none">
|
||||
<b>{ LocalizeText('extendedprofile.last.login') }</b> { FriendlyTime.format(userProfile.secondsSinceLastVisit, '.ago', 2) }
|
||||
</Text>
|
||||
<Text small>
|
||||
</p>
|
||||
<p className="text-sm leading-none">
|
||||
<b>{ LocalizeText('extendedprofile.achievementscore') }</b> { userProfile.achievementPoints }
|
||||
</Text>
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-1">
|
||||
<div className="flex items-center gap-1">
|
||||
{ userProfile.isOnline &&
|
||||
<i className="nitro-icon icon-pf-online" /> }
|
||||
{ !userProfile.isOnline &&
|
||||
@ -60,11 +57,11 @@ export const UserContainerView: FC<UserContainerViewProps> = props =>
|
||||
<>
|
||||
<i className="nitro-icon icon-pf-tick" />
|
||||
{ isOwnProfile &&
|
||||
<Text>{ LocalizeText('extendedprofile.me') }</Text> }
|
||||
<p>{ LocalizeText('extendedprofile.me') }</p> }
|
||||
{ userProfile.isMyFriend &&
|
||||
<Text>{ LocalizeText('extendedprofile.friend') }</Text> }
|
||||
<p>{ LocalizeText('extendedprofile.friend') }</p> }
|
||||
{ (requestSent || userProfile.requestSent) &&
|
||||
<Text>{ LocalizeText('extendedprofile.friendrequestsent') }</Text> }
|
||||
<p>{ LocalizeText('extendedprofile.friendrequestsent') }</p> }
|
||||
</> }
|
||||
</div>
|
||||
</div>
|
||||
@ -1,12 +1,12 @@
|
||||
import { CreateLinkEvent, ExtendedProfileChangedMessageEvent, GetSessionDataManager, RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, 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 { Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
|
||||
import { Flex, Grid, LayoutBadgeImageView, Text } from '../../common';
|
||||
import { useMessageEvent, useNitroEvent } from '../../hooks';
|
||||
import { BadgesContainerView } from './views/BadgesContainerView';
|
||||
import { FriendsContainerView } from './views/FriendsContainerView';
|
||||
import { GroupsContainerView } from './views/GroupsContainerView';
|
||||
import { UserContainerView } from './views/UserContainerView';
|
||||
import { NitroCard } from '../../layout';
|
||||
import { FriendsContainerView } from './FriendsContainerView';
|
||||
import { GroupsContainerView } from './GroupsContainerView';
|
||||
import { UserContainerView } from './UserContainerView';
|
||||
|
||||
export const UserProfileView: FC<{}> = props =>
|
||||
{
|
||||
@ -94,29 +94,32 @@ export const UserProfileView: FC<{}> = props =>
|
||||
if(!userProfile) return null;
|
||||
|
||||
return (
|
||||
<NitroCardView className="w-[470px] h-[460px]" theme="primary-slim" uniqueKey="nitro-user-profile">
|
||||
<NitroCardHeaderView headerText={ LocalizeText('extendedprofile.caption') } onCloseClick={ onClose } />
|
||||
<NitroCardContentView overflow="hidden">
|
||||
<NitroCard className="w-[470px] h-[460px]" uniqueKey="nitro-user-profile">
|
||||
<NitroCard.Header
|
||||
headerText={ LocalizeText('extendedprofile.caption') }
|
||||
onCloseClick={ onClose } />
|
||||
<NitroCard.Content
|
||||
className="overflow-hidden">
|
||||
<Grid fullHeight={ false } gap={ 2 }>
|
||||
<Column className="border-r border-r-gray pe-2" gap={ 1 } size={ 7 }>
|
||||
<div className="flex flex-col col-span-7 gap-1 border-r border-r-gray pe-2">
|
||||
<UserContainerView userProfile={ userProfile } />
|
||||
<Grid fullHeight className="bg-muted rounded px-2 py-1" columnCount={ 5 }>
|
||||
<BadgesContainerView center fullWidth badges={ userBadges } />
|
||||
</Grid>
|
||||
</Column>
|
||||
<Column size={ 5 }>
|
||||
<div className="flex items-center justify-center w-full gap-3 p-2 rounded bg-muted">
|
||||
{ userBadges && (userBadges.length > 0) && userBadges.map((badge, index) => <LayoutBadgeImageView key={ badge } badgeCode={ badge } />) }
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col col-span-5">
|
||||
{ userRelationships &&
|
||||
<FriendsContainerView friendsCount={ userProfile.friendsCount } relationships={ userRelationships } /> }
|
||||
</Column>
|
||||
</div>
|
||||
</Grid>
|
||||
<Flex alignItems="center" className=" border-t border-t-gray border-b border-b-gray px-2 py-1">
|
||||
<Flex alignItems="center" className="px-2 py-1 border-t border-b border-t-gray border-b-gray">
|
||||
<Flex alignItems="center" gap={ 1 } onClick={ event => CreateLinkEvent(`navigator/search/hotel_view/owner:${ userProfile.username }`) }>
|
||||
<i className="nitro-icon icon-rooms" />
|
||||
<Text bold pointer underline>{ LocalizeText('extendedprofile.rooms') }</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<GroupsContainerView fullWidth groups={ userProfile.groups } itsMe={ userProfile.id === GetSessionDataManager().userId } onLeaveGroup={ onLeaveGroup } />
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
</NitroCard.Content>
|
||||
</NitroCard>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
import { FC } from 'react';
|
||||
import { Column, FlexProps, LayoutBadgeImageView } from '../../../common';
|
||||
|
||||
interface BadgesContainerViewProps extends FlexProps
|
||||
{
|
||||
badges: string[];
|
||||
}
|
||||
|
||||
export const BadgesContainerView: FC<BadgesContainerViewProps> = props =>
|
||||
{
|
||||
const { badges = null, gap = 1, justifyContent = 'between', ...rest } = props;
|
||||
|
||||
return (
|
||||
<>
|
||||
{ badges && (badges.length > 0) && badges.map((badge, index) =>
|
||||
{
|
||||
return (
|
||||
<Column key={ badge } center>
|
||||
<LayoutBadgeImageView key={ badge } badgeCode={ badge } />
|
||||
</Column>
|
||||
);
|
||||
}) }
|
||||
</>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user