diff --git a/web/modals/user-profile/user-profile-action-buttons.react.js b/web/modals/user-profile/user-profile-action-buttons.react.js
--- a/web/modals/user-profile/user-profile-action-buttons.react.js
+++ b/web/modals/user-profile/user-profile-action-buttons.react.js
@@ -1,11 +1,16 @@
// @flow
+import { faUserMinus, faUserPlus } from '@fortawesome/free-solid-svg-icons';
import * as React from 'react';
+import { useRelationshipPrompt } from 'lib/hooks/relationship-prompt.js';
+import { userRelationshipStatus } from 'lib/types/relationship-types.js';
import type { ThreadInfo } from 'lib/types/thread-types';
import UserProfileMessageButton from './user-profile-message-button.react.js';
import css from './user-profile.css';
+import RelationshipPromptButton from '../../chat/relationship-prompt/relationship-prompt-button.js';
+import { buttonThemes } from '../../components/button.react.js';
type Props = {
+threadInfo: ThreadInfo,
@@ -14,11 +19,82 @@
function UserProfileActionButtons(props: Props): React.Node {
const { threadInfo } = props;
- return (
-
-
-
- );
+ const {
+ otherUserInfo,
+ callbacks: { friendUser, unfriendUser },
+ } = useRelationshipPrompt(threadInfo);
+
+ const userProfileActionButtons = React.useMemo(() => {
+ if (
+ !otherUserInfo ||
+ otherUserInfo.relationshipStatus === userRelationshipStatus.FRIEND
+ ) {
+ return ;
+ }
+
+ if (
+ otherUserInfo.relationshipStatus ===
+ userRelationshipStatus.REQUEST_RECEIVED
+ ) {
+ return (
+ <>
+
+
+
+ Incoming friend request
+
+
+
+
+
+
+ >
+ );
+ }
+
+ if (
+ otherUserInfo.relationshipStatus === userRelationshipStatus.REQUEST_SENT
+ ) {
+ return (
+
+
+
+
+ );
+ }
+ return (
+
+
+
+
+ );
+ }, [otherUserInfo, friendUser, threadInfo, unfriendUser]);
+
+ return userProfileActionButtons;
}
export default UserProfileActionButtons;
diff --git a/web/modals/user-profile/user-profile.css b/web/modals/user-profile/user-profile.css
--- a/web/modals/user-profile/user-profile.css
+++ b/web/modals/user-profile/user-profile.css
@@ -6,6 +6,7 @@
.userInfoContainer {
display: flex;
align-items: center;
+ margin-bottom: 24px;
}
.usernameContainer {
@@ -34,12 +35,18 @@
margin-left: 4px;
}
-.buttonsContainer {
- margin-top: 24px;
+.multiButtonRowContainer {
display: flex;
+ column-gap: 8px;
}
.actionButton {
column-gap: 8px;
- flex-grow: 1;
+ width: 100%;
+ min-width: 272px;
+}
+
+.incomingFriendRequestText {
+ color: var(--fg);
+ margin: 24px 0 8px 0;
}