mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-27 08:00:51 +01:00
fix relationships
This commit is contained in:
parent
d29af07bfe
commit
262fe87660
@ -17,3 +17,4 @@
|
||||
@import './mod-tools/ModToolsView';
|
||||
@import './achievements/AchievementsView';
|
||||
@import './user-profile/UserProfileVew';
|
||||
@import './user-profile/views/relationships-container/RelationshipsContainerView';
|
||||
|
@ -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>);
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -7,14 +7,20 @@ 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>
|
||||
);
|
||||
}
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
@ -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>
|
||||
);
|
||||
}
|
@ -0,0 +1,7 @@
|
||||
import { RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer';
|
||||
|
||||
export interface RelationshipsContainerViewProps
|
||||
{
|
||||
relationships: RelationshipStatusInfoMessageParser;
|
||||
simple?: boolean;
|
||||
}
|
@ -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 />
|
||||
|
Loading…
Reference in New Issue
Block a user