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;