Page MenuHomePhabricator
Files F3519616

D9412.id.diff
No OneTemporary
Actions

D9412.id.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,48 @@
+// @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],
+ );
+
+ const userProfileMessageButton = React.useMemo(
+ () => (
+ <Button
+ variant="filled"
+ onClick={onClickMessageButton}
+ className={css.actionButton}
+ >
+ <SWMansionIcon icon="send-2" size={22} />
+ <div>Message</div>
+ </Button>
+ ),
+ [onClickMessageButton],
+ );
+
+ return userProfileMessageButton;
+}
+
+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,11 +1,14 @@
.container {
- display: flex;
- align-items: center;
padding: 0 32px 32px;
width: 552px;
max-width: 80vw;
}
+.userInfoContainer {
+ display: flex;
+ align-items: center;
+}
+
.usernameContainer {
padding-left: 16px;
}
@@ -31,3 +34,13 @@
font-size: var(--xs-font-12);
margin-left: 4px;
}
+
+.buttonsContainer {
+ margin-top: 24px;
+ display: flex;
+}
+
+.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,28 +37,50 @@
setUsernameCopied(false);
}, [usernameCopied, usernameText]);
+ const messageButton = React.useMemo(() => {
+ if (
+ !userProfileThreadInfo ||
+ relationshipBlockedInEitherDirection(userInfo?.relationshipStatus)
+ ) {
+ return null;
+ }
+
+ return (
+ <UserProfileMessageButton threadInfo={userProfileThreadInfo.threadInfo} />
+ );
+ }, [userInfo?.relationshipStatus, userProfileThreadInfo]);
+
const userProfile = React.useMemo(
() => (
<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>
+ <div className={css.buttonsContainer}>{messageButton}</div>
</div>
),
- [onClickCopyUsername, userInfo?.id, usernameCopied, usernameText],
+ [
+ messageButton,
+ onClickCopyUsername,
+ userInfo?.id,
+ usernameCopied,
+ usernameText,
+ ],
);
return userProfile;

File Metadata

Mime Type
text/plain
Expires
Mon, Dec 23, 10:43 PM (16 h, 30 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2696943
Default Alt Text
D9412.id.diff (5 KB)

Event Timeline