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

Fix friend request button

Browse Source
This commit is contained in:
Bill 2022-03-14 06:51:58 -04:00
parent 1322f92287
commit 34e3b3d7e3
2 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -73,7 +73,7 @@ export const UserProfileView: FC<{}> = props =>
if(!userProfile) return null; if(!userProfile) return null;
return ( return (
<NitroCardView className="user-profile" theme="primary-slim"> <NitroCardView uniqueKey="nitro-user-profile" theme="primary-slim" className="user-profile">
<NitroCardHeaderView headerText={ LocalizeText('extendedprofile.caption') } onCloseClick={ onClose } /> <NitroCardHeaderView headerText={ LocalizeText('extendedprofile.caption') } onCloseClick={ onClose } />
<NitroCardContentView overflow="hidden"> <NitroCardContentView overflow="hidden">
<Grid fullHeight={ false } gap={ 2 }> <Grid fullHeight={ false } gap={ 2 }>

27
src/components/user-profile/views/UserContainerView.tsx
View File

@ -1,7 +1,7 @@
import { FriendlyTime, UserProfileParser } from '@nitrots/nitro-renderer'; import { FriendlyTime, RequestFriendComposer, UserProfileParser } from '@nitrots/nitro-renderer';
import { FC } from 'react'; import { FC, useEffect, useState } from 'react';
import { GetSessionDataManager, LocalizeText } from '../../../api'; import { GetSessionDataManager, LocalizeText, SendMessageComposer } from '../../../api';
import { Button, Column, Flex, LayoutAvatarImageView, Text } from '../../../common'; import { Column, Flex, LayoutAvatarImageView, Text } from '../../../common';
interface UserContainerViewProps interface UserContainerViewProps
{ {
@ -11,8 +11,21 @@ interface UserContainerViewProps
export const UserContainerView: FC<UserContainerViewProps> = props => export const UserContainerView: FC<UserContainerViewProps> = props =>
{ {
const { userProfile = null } = props; const { userProfile = null } = props;
const [ requestSent, setRequestSent ] = useState(userProfile.requestSent);
const isOwnProfile = (userProfile.id === GetSessionDataManager().userId); const isOwnProfile = (userProfile.id === GetSessionDataManager().userId);
const canSendFriendRequest = (!isOwnProfile && !userProfile.isMyFriend && !userProfile.requestSent); const canSendFriendRequest = !requestSent && (!isOwnProfile && !userProfile.isMyFriend && !userProfile.requestSent);
const addFriend = () =>
{
setRequestSent(true);
SendMessageComposer(new RequestFriendComposer(userProfile.username));
}
useEffect(() =>
{
setRequestSent(userProfile.requestSent);
}, [ userProfile ])
return ( return (
<Flex gap={ 2 }> <Flex gap={ 2 }>
@ -42,7 +55,7 @@ export const UserContainerView: FC<UserContainerViewProps> = props =>
<i className="icon icon-pf-offline" /> } <i className="icon icon-pf-offline" /> }
<Flex alignItems="center" gap={ 1 }> <Flex alignItems="center" gap={ 1 }>
{ canSendFriendRequest && { canSendFriendRequest &&
<Button variant="success" className="add-friend">{ LocalizeText('extendedprofile.addasafriend') }</Button> } <Text small underline pointer onClick={ addFriend }>{ LocalizeText('extendedprofile.addasafriend') }</Text> }
{ !canSendFriendRequest && { !canSendFriendRequest &&
<> <>
<i className="icon icon-pf-tick" /> <i className="icon icon-pf-tick" />
@ -50,7 +63,7 @@ export const UserContainerView: FC<UserContainerViewProps> = props =>
<Text>{ LocalizeText('extendedprofile.me') }</Text> } <Text>{ LocalizeText('extendedprofile.me') }</Text> }
{ userProfile.isMyFriend && { userProfile.isMyFriend &&
<Text>{ LocalizeText('extendedprofile.friend') }</Text> } <Text>{ LocalizeText('extendedprofile.friend') }</Text> }
{ userProfile.requestSent && { (requestSent || userProfile.requestSent) &&
<Text>{ LocalizeText('extendedprofile.friendrequestsent') }</Text> } <Text>{ LocalizeText('extendedprofile.friendrequestsent') }</Text> }
</> } </> }
</Flex> </Flex>