Page MenuHomePhabricator
Files F3295998

D8855.diff
No OneTemporary
Actions

D8855.diff
View Options

diff --git a/web/avatars/edit-user-avatar-menu.react.js b/web/avatars/edit-user-avatar-menu.react.js
--- a/web/avatars/edit-user-avatar-menu.react.js
+++ b/web/avatars/edit-user-avatar-menu.react.js
@@ -11,7 +11,7 @@
import { useUploadAvatarMedia } from './avatar-hooks.react.js';
import css from './edit-avatar-menu.css';
-import EmojiAvatarSelectionModal from './emoji-avatar-selection-modal.react.js';
+import UserEmojiAvatarSelectionModal from './user-emoji-avatar-selection-modal.react.js';
import CommIcon from '../CommIcon.react.js';
import MenuItem from '../components/menu-item.react.js';
import Menu from '../components/menu.react.js';
@@ -45,7 +45,7 @@
const { pushModal } = useModalContext();
const openEmojiSelectionModal = React.useCallback(
- () => pushModal(<EmojiAvatarSelectionModal />),
+ () => pushModal(<UserEmojiAvatarSelectionModal />),
[pushModal],
);
diff --git a/web/avatars/emoji-avatar-selection-modal.react.js b/web/avatars/emoji-avatar-selection-modal.react.js
--- a/web/avatars/emoji-avatar-selection-modal.react.js
+++ b/web/avatars/emoji-avatar-selection-modal.react.js
@@ -2,17 +2,10 @@
import data from '@emoji-mart/data';
import Picker from '@emoji-mart/react';
-import invariant from 'invariant';
import * as React from 'react';
-import { EditUserAvatarContext } from 'lib/components/edit-user-avatar-provider.react.js';
import { useModalContext } from 'lib/components/modal-provider.react.js';
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
-import {
- defaultAnonymousUserEmojiAvatar,
- getAvatarForUser,
- getDefaultAvatar,
-} from 'lib/shared/avatar-utils.js';
import type {
ClientAvatar,
ClientEmojiAvatar,
@@ -25,37 +18,30 @@
import LoadingIndicator from '../loading-indicator.react.js';
import Modal from '../modals/modal.react.js';
import ColorSelector from '../modals/threads/color-selector.react.js';
-import { useSelector } from '../redux/redux-utils.js';
type TabType = 'emoji' | 'color';
-function EmojiAvatarSelectionModal(): React.Node {
+type Props = {
+ +currentAvatar: ClientAvatar,
+ +defaultAvatar: ClientEmojiAvatar,
+ +setEmojiAvatar: (pendingEmojiAvatar: ClientEmojiAvatar) => Promise<void>,
+ +avatarSaveInProgress: boolean,
+};
+function EmojiAvatarSelectionModal(props: Props): React.Node {
const { popModal } = useModalContext();
- const editUserAvatarContext = React.useContext(EditUserAvatarContext);
- invariant(editUserAvatarContext, 'editUserAvatarContext should be set');
-
- const { baseSetUserAvatar, userAvatarSaveInProgress } = editUserAvatarContext;
+ const { currentAvatar, defaultAvatar, setEmojiAvatar, avatarSaveInProgress } =
+ props;
const [updateAvatarStatus, setUpdateAvatarStatus] =
React.useState<?('success' | 'failure')>();
- const currentUserInfo = useSelector(state => state.currentUserInfo);
- const currentUserAvatar: ClientAvatar = getAvatarForUser(currentUserInfo);
- const defaultUserAvatar: ClientEmojiAvatar = currentUserInfo?.username
- ? getDefaultAvatar(currentUserInfo.username)
- : defaultAnonymousUserEmojiAvatar;
-
const [pendingAvatarEmoji, setPendingAvatarEmoji] = React.useState(
- currentUserAvatar.type === 'emoji'
- ? currentUserAvatar.emoji
- : defaultUserAvatar.emoji,
+ currentAvatar.type === 'emoji' ? currentAvatar.emoji : defaultAvatar.emoji,
);
const [pendingAvatarColor, setPendingAvatarColor] = React.useState(
- currentUserAvatar.type === 'emoji'
- ? currentUserAvatar.color
- : defaultUserAvatar.color,
+ currentAvatar.type === 'emoji' ? currentAvatar.color : defaultAvatar.color,
);
const pendingEmojiAvatar: ClientEmojiAvatar = React.useMemo(
@@ -79,16 +65,16 @@
const onSaveAvatar = React.useCallback(async () => {
try {
- await baseSetUserAvatar(pendingEmojiAvatar);
+ await setEmojiAvatar(pendingEmojiAvatar);
setUpdateAvatarStatus('success');
} catch {
setUpdateAvatarStatus('failure');
}
- }, [pendingEmojiAvatar, baseSetUserAvatar]);
+ }, [setEmojiAvatar, pendingEmojiAvatar]);
let saveButtonContent;
let buttonColor;
- if (userAvatarSaveInProgress) {
+ if (avatarSaveInProgress) {
buttonColor = buttonThemes.standard;
saveButtonContent = <LoadingIndicator status="loading" size="medium" />;
} else if (updateAvatarStatus === 'success') {
@@ -121,7 +107,7 @@
<Avatar
avatarInfo={pendingEmojiAvatar}
size="profile"
- showSpinner={userAvatarSaveInProgress}
+ showSpinner={avatarSaveInProgress}
/>
</div>
<Tabs.Container activeTab={currentTabType} setTab={setCurrentTabType}>
@@ -153,7 +139,7 @@
variant="filled"
buttonColor={buttonColor}
onClick={onSaveAvatar}
- disabled={userAvatarSaveInProgress}
+ disabled={avatarSaveInProgress}
>
<div className={css.saveAvatarButtonContent}>
{saveButtonContent}
diff --git a/web/avatars/user-emoji-avatar-selection-modal.react.js b/web/avatars/user-emoji-avatar-selection-modal.react.js
new file mode 100644
--- /dev/null
+++ b/web/avatars/user-emoji-avatar-selection-modal.react.js
@@ -0,0 +1,43 @@
+// @flow
+
+import invariant from 'invariant';
+import * as React from 'react';
+
+import { EditUserAvatarContext } from 'lib/components/edit-user-avatar-provider.react.js';
+import {
+ defaultAnonymousUserEmojiAvatar,
+ getAvatarForUser,
+ getDefaultAvatar,
+} from 'lib/shared/avatar-utils.js';
+import type {
+ ClientAvatar,
+ ClientEmojiAvatar,
+} from 'lib/types/avatar-types.js';
+
+import EmojiAvatarSelectionModal from './emoji-avatar-selection-modal.react.js';
+import { useSelector } from '../redux/redux-utils.js';
+
+function UserEmojiAvatarSelectionModal(): React.Node {
+ const editUserAvatarContext = React.useContext(EditUserAvatarContext);
+ invariant(editUserAvatarContext, 'editUserAvatarContext should be set');
+
+ const { baseSetUserAvatar, userAvatarSaveInProgress } = editUserAvatarContext;
+
+ const currentUserInfo = useSelector(state => state.currentUserInfo);
+ const currentUserAvatar: ClientAvatar = getAvatarForUser(currentUserInfo);
+
+ const defaultUserAvatar: ClientEmojiAvatar = currentUserInfo?.username
+ ? getDefaultAvatar(currentUserInfo.username)
+ : defaultAnonymousUserEmojiAvatar;
+
+ return (
+ <EmojiAvatarSelectionModal
+ currentAvatar={currentUserAvatar}
+ defaultAvatar={defaultUserAvatar}
+ setEmojiAvatar={baseSetUserAvatar}
+ avatarSaveInProgress={userAvatarSaveInProgress}
+ />
+ );
+}
+
+export default UserEmojiAvatarSelectionModal;

File Metadata

Mime Type
text/plain
Expires
Mon, Nov 18, 12:22 AM (21 h, 25 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2532411
Default Alt Text
D8855.diff (6 KB)

Event Timeline