From 34e3b3d7e3c1e7b6881f4bf41b1bf6fe4d049265 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Mon, 14 Mar 2022 06:51:58 -0400
Subject: [PATCH] Fix friend request button

---
 .../user-profile/UserProfileView.tsx          |  2 +-
 .../user-profile/views/UserContainerView.tsx  | 27 ++++++++++++++-----
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/user-profile/UserProfileView.tsx b/src/components/user-profile/UserProfileView.tsx
index 2786c382..c8d005f1 100644
--- a/src/components/user-profile/UserProfileView.tsx
+++ b/src/components/user-profile/UserProfileView.tsx
@@ -73,7 +73,7 @@ export const UserProfileView: FC<{}> = props =>
     if(!userProfile) return null;
 
     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 } />
             <NitroCardContentView overflow="hidden">
                 <Grid fullHeight={ false } gap={ 2 }>
diff --git a/src/components/user-profile/views/UserContainerView.tsx b/src/components/user-profile/views/UserContainerView.tsx
index 0dd17d33..97cef6cc 100644
--- a/src/components/user-profile/views/UserContainerView.tsx
+++ b/src/components/user-profile/views/UserContainerView.tsx
@@ -1,7 +1,7 @@
-import { FriendlyTime, UserProfileParser } from '@nitrots/nitro-renderer';
-import { FC } from 'react';
-import { GetSessionDataManager, LocalizeText } from '../../../api';
-import { Button, Column, Flex, LayoutAvatarImageView, Text } from '../../../common';
+import { FriendlyTime, RequestFriendComposer, UserProfileParser } from '@nitrots/nitro-renderer';
+import { FC, useEffect, useState } from 'react';
+import { GetSessionDataManager, LocalizeText, SendMessageComposer } from '../../../api';
+import { Column, Flex, LayoutAvatarImageView, Text } from '../../../common';
 
 interface UserContainerViewProps
 {
@@ -11,8 +11,21 @@ interface UserContainerViewProps
 export const UserContainerView: FC<UserContainerViewProps> = props =>
 {
     const { userProfile = null } = props;
+    const [ requestSent, setRequestSent ] = useState(userProfile.requestSent);
     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 (
         <Flex gap={ 2 }>
@@ -42,7 +55,7 @@ export const UserContainerView: FC<UserContainerViewProps> = props =>
                         <i className="icon icon-pf-offline" /> }
                     <Flex alignItems="center" gap={ 1 }>
                         { canSendFriendRequest &&
-                            <Button variant="success" className="add-friend">{ LocalizeText('extendedprofile.addasafriend') }</Button> }
+                            <Text small underline pointer onClick={ addFriend }>{ LocalizeText('extendedprofile.addasafriend') }</Text> }
                         { !canSendFriendRequest &&
                             <>
                                 <i className="icon icon-pf-tick" />
@@ -50,7 +63,7 @@ export const UserContainerView: FC<UserContainerViewProps> = props =>
                                     <Text>{ LocalizeText('extendedprofile.me') }</Text> }
                                 { userProfile.isMyFriend &&
                                     <Text>{ LocalizeText('extendedprofile.friend') }</Text> }
-                                { userProfile.requestSent &&
+                                { (requestSent || userProfile.requestSent) &&
                                     <Text>{ LocalizeText('extendedprofile.friendrequestsent') }</Text> }
                             </> }
                     </Flex>