Page MenuHomePhabricator
Files F3519617

D9411.id.diff
No OneTemporary
Actions

D9411.id.diff
View Options

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
@@ -5,6 +5,7 @@
import SWMansionIcon from 'lib/components/SWMansionIcon.react.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 css from './user-profile.css';
import UserAvatar from '../../avatars/user-avatar.react.js';
@@ -18,20 +19,41 @@
const usernameText = stringForUserExplicit(userInfo);
+ const [usernameCopied, setUsernameCopied] = React.useState<boolean>(false);
+
+ const onClickCopyUsername = React.useCallback(async () => {
+ if (usernameCopied) {
+ return;
+ }
+
+ await navigator.clipboard.writeText(usernameText);
+ setUsernameCopied(true);
+ await sleep(3000);
+ setUsernameCopied(false);
+ }, [usernameCopied, usernameText]);
+
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}>
- <SWMansionIcon icon="copy" size={16} />
- <p className={css.copyUsernameText}>Copy username</p>
+ <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>
),
- [userInfo?.id, usernameText],
+ [onClickCopyUsername, userInfo?.id, usernameCopied, usernameText],
);
return userProfile;

File Metadata

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

Event Timeline