nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 14:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix relationships

Browse Source
This commit is contained in:
Dank074 2021-08-13 02:46:37 -05:00
parent d29af07bfe
commit 262fe87660
11 changed files with 163 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/views/Styles.scss
View File

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

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

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

39
src/views/user-profile/UserProfileVew.scss
View File

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

18
src/views/user-profile/UserProfileView.tsx
View File

@ -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">
<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} />
<div className="col-sm-6 user-container">
<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>

12
src/views/user-profile/views/badges-container/BadgesContainerView.tsx
View File

@ -7,13 +7,19 @@ export const BadgesContainerView: FC<BadgesContainerViewProps> = props =>
const {badges = null} = props;
return (
<div className="row badge-container">
<div className="col-sm-12 d-flex">
<div className="row badge-container 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>
);

45
src/views/user-profile/views/friends-container/FriendsContainerView.tsx
View File

@ -1,54 +1,17 @@
import { UserProfileComposer, UserRelationshipDataParser } from '@nitrots/nitro-renderer';
import { FC, useCallback } from 'react';
import { SendMessageHook } from '../../../../hooks';
import { FC } from 'react';
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">
<RelationshipComponent type={'heart'} />
<RelationshipComponent type={'smile'} />
<RelationshipComponent type={'bobba'} />
</div>
<RelationshipsContainerView relationships={relationships} />
</div>
)
}

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

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

38
src/views/user-profile/views/relationships-container/RelationshipsContainerView.scss Normal file
View File

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

69
src/views/user-profile/views/relationships-container/RelationshipsContainerView.tsx Normal file
View File

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

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

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

2
src/views/user-profile/views/user-container/UserContainerView.tsx
View File

@ -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 />