Page MenuHomePhabricator
Files F3523825

D9412.id31772.diff
No OneTemporary
Actions

D9412.id31772.diff
View Options

diff --git a/web/modals/user-profile/user-profile-message-button.react.js b/web/modals/user-profile/user-profile-message-button.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/user-profile/user-profile-message-button.react.js
@@ -0,0 +1,43 @@
+// @flow
+
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
+import type { ThreadInfo } from 'lib/types/thread-types.js';
+
+import css from './user-profile.css';
+import Button from '../../components/button.react.js';
+import { useOnClickThread } from '../../selectors/thread-selectors.js';
+
+type Props = {
+ +threadInfo: ThreadInfo,
+};
+
+function UserProfileMessageButton(props: Props): React.Node {
+ const { threadInfo } = props;
+
+ const { clearModals } = useModalContext();
+ const onClickThread = useOnClickThread(threadInfo);
+
+ const onClickMessageButton = React.useCallback(
+ (event: SyntheticEvent<HTMLElement>) => {
+ clearModals();
+ onClickThread(event);
+ },
+ [clearModals, onClickThread],
+ );
+
+ return (
+ <Button
+ variant="filled"
+ onClick={onClickMessageButton}
+ className={css.actionButton}
+ >
+ <SWMansionIcon icon="send-2" size={22} />
+ <div>Message</div>
+ </Button>
+ );
+}
+
+export default UserProfileMessageButton;
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
@@ -1,7 +1,10 @@
.container {
+ padding: 0 32px 32px;
+}
+
+.userInfoContainer {
display: flex;
align-items: center;
- padding: 0 32px 32px;
}
.usernameContainer {
@@ -29,3 +32,8 @@
font-size: var(--xs-font-12);
margin-left: 4px;
}
+
+.actionButton {
+ column-gap: 8px;
+ flex-grow: 1;
+}
diff --git a/web/modals/user-profile/user-profile.react.js b/web/modals/user-profile/user-profile.react.js
--- a/web/modals/user-profile/user-profile.react.js
+++ b/web/modals/user-profile/user-profile.react.js
@@ -3,10 +3,13 @@
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 css from './user-profile.css';
import UserAvatar from '../../avatars/user-avatar.react.js';
@@ -17,6 +20,8 @@
function UserProfile(props: Props): React.Node {
const { userInfo } = props;
+ const userProfileThreadInfo = useUserProfileThreadInfo(userInfo);
+
const usernameText = stringForUserExplicit(userInfo);
const [usernameCopied, setUsernameCopied] = React.useState<boolean>(false);
@@ -32,21 +37,40 @@
setUsernameCopied(false);
}, [usernameCopied, usernameText]);
+ const messageButton = React.useMemo(() => {
+ if (
+ !userProfileThreadInfo ||
+ relationshipBlockedInEitherDirection(userInfo?.relationshipStatus)
+ ) {
+ return null;
+ }
+
+ return (
+ <UserProfileMessageButton threadInfo={userProfileThreadInfo.threadInfo} />
+ );
+ }, [userInfo?.relationshipStatus, userProfileThreadInfo]);
+
return (
<div className={css.container}>
- <UserAvatar userID={userInfo?.id} size="L" />
- <div className={css.usernameContainer}>
- <div className={css.usernameText}>{usernameText}</div>
- <div
- className={css.copyUsernameContainer}
- onClick={onClickCopyUsername}
- >
- <SWMansionIcon icon={!usernameCopied ? 'copy' : 'check'} size={16} />
- <p className={css.copyUsernameText}>
- {!usernameCopied ? 'Copy username' : 'Username copied!'}
- </p>
+ <div className={css.userInfoContainer}>
+ <UserAvatar userID={userInfo?.id} size="L" />
+ <div className={css.usernameContainer}>
+ <div className={css.usernameText}>{usernameText}</div>
+ <div
+ className={css.copyUsernameContainer}
+ onClick={onClickCopyUsername}
+ >
+ <SWMansionIcon
+ icon={!usernameCopied ? 'copy' : 'check'}
+ size={16}
+ />
+ <p className={css.copyUsernameText}>
+ {!usernameCopied ? 'Copy username' : 'Username copied!'}
+ </p>
+ </div>
</div>
</div>
+ {messageButton}
</div>
);
}

File Metadata

Mime Type
text/plain
Expires
Tue, Dec 24, 10:25 AM (17 h, 44 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2698053
Default Alt Text
D9412.id31772.diff (4 KB)

Event Timeline