diff --git a/web/modals/user-profile/user-profile-action-buttons.react.js b/web/modals/user-profile/user-profile-action-buttons.react.js
new file mode 100644
index 000000000..c14549ccb
--- /dev/null
+++ b/web/modals/user-profile/user-profile-action-buttons.react.js
@@ -0,0 +1,29 @@
+// @flow
+
+import * as React from 'react';
+
+import type { ThreadInfo } from 'lib/types/thread-types';
+
+import UserProfileMessageButton from './user-profile-message-button.react.js';
+import css from './user-profile.css';
+
+type Props = {
+ +threadInfo: ThreadInfo,
+};
+
+function UserProfileActionButtons(props: Props): React.Node {
+ const { threadInfo } = props;
+
+ const userProfileActionButtons = React.useMemo(
+ () => (
+
+
+
+ ),
+ [threadInfo],
+ );
+
+ return userProfileActionButtons;
+}
+
+export default UserProfileActionButtons;
diff --git a/web/modals/user-profile/user-profile.react.js b/web/modals/user-profile/user-profile.react.js
index c04db85b1..f77645a21 100644
--- a/web/modals/user-profile/user-profile.react.js
+++ b/web/modals/user-profile/user-profile.react.js
@@ -1,89 +1,89 @@
// @flow
import * as React from 'react';
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import { relationshipBlockedInEitherDirection } from 'lib/shared/relationship-utils.js';
import { useUserProfileThreadInfo } from 'lib/shared/thread-utils.js';
import { stringForUserExplicit } from 'lib/shared/user-utils.js';
import type { UserInfo } from 'lib/types/user-types';
import sleep from 'lib/utils/sleep.js';
-import UserProfileMessageButton from './user-profile-message-button.react.js';
+import UserProfileActionButtons from './user-profile-action-buttons.react.js';
import css from './user-profile.css';
import UserAvatar from '../../avatars/user-avatar.react.js';
type Props = {
+userInfo: ?UserInfo,
};
function UserProfile(props: Props): React.Node {
const { userInfo } = props;
const userProfileThreadInfo = useUserProfileThreadInfo(userInfo);
const usernameText = stringForUserExplicit(userInfo);
const [usernameCopied, setUsernameCopied] = React.useState(false);
const onClickCopyUsername = React.useCallback(async () => {
if (usernameCopied) {
return;
}
await navigator.clipboard.writeText(usernameText);
setUsernameCopied(true);
await sleep(3000);
setUsernameCopied(false);
}, [usernameCopied, usernameText]);
- const messageButton = React.useMemo(() => {
+ const actionButtons = React.useMemo(() => {
if (
!userProfileThreadInfo ||
relationshipBlockedInEitherDirection(userInfo?.relationshipStatus)
) {
return null;
}
return (
-
+
);
}, [userInfo?.relationshipStatus, userProfileThreadInfo]);
const userProfile = React.useMemo(
() => (
{usernameText}
{!usernameCopied ? 'Copy username' : 'Username copied!'}
-
{messageButton}
+ {actionButtons}
),
[
- messageButton,
+ actionButtons,
onClickCopyUsername,
userInfo?.id,
usernameCopied,
usernameText,
],
);
return userProfile;
}
export default UserProfile;