[web] Introduce placeholder `EmojiAvatarSelectionModal`
ClosedPublic
Actions

Authored by atul on Jun 20 2023, 12:54 PM.

Details

Reviewers

ashoat
ginsu
kamil
michal
inka
rohan

Commits

rCOMMcf20a2d29ebf: [web] Introduce placeholder `EmojiAvatarSelectionModal`

Summary

Introduce placeholder EmojiAvatarSelectionModal component. Modal opens when "Select emoji" MenuItem in EditUserAvatarMenu is clicked.

Layout/styling/functionality will be introduced incrementally in subsequent diffs.

Depends on D8264

Test Plan

Opens and looks about as expected:

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

atul created this revision.Jun 20 2023, 12:54 PM

Herald added a subscriber: tomek. · View Herald TranscriptJun 20 2023, 12:54 PM

atul edited the test plan for this revision. (Show Details)Jun 20 2023, 12:54 PM

Harbormaster completed remote builds in B20366: Diff 27911.Jun 20 2023, 1:14 PM

atul requested review of this revision.Jun 20 2023, 1:14 PM

atul added a child revision: D8266: [web] Add `Avatar` preview to `EmojiAvatarSelectionModal`.Jun 20 2023, 1:32 PM

(This really should have been named something like EmojiUserAvatarSelectionModal since it's UserAvatar-specific. Common parts will be factored out when I get to ThreadAvatars, but for now it's pretty user avatar-specific)

atul added reviewers: kamil, michal, inka, rohan.Jun 21 2023, 9:46 AM

Looks good, just left some style preferences inline

web/avatars/edit-user-avatar-menu.react.js
27 ↗	(On Diff #27911)	Would personally prefer directly destructuring `pushModal` here
29–31 ↗	(On Diff #27911)	Could use shorthand here
web/avatars/emoji-avatar-selection-modal.react.js
10 ↗	(On Diff #27911)	Would personally prefer directly destructuring `popModal` here

This revision is now accepted and ready to land.Jun 21 2023, 10:39 AM

rebase before landing

rebase before addressing @rohan's feedback

Harbormaster failed remote builds in B20440: Diff 28022!Jun 22 2023, 2:34 PM

Harbormaster failed remote builds in B20443: Diff 28025!Jun 22 2023, 2:37 PM

rebase

Harbormaster completed remote builds in B20480: Diff 28063.Jun 23 2023, 1:14 PM

address feedback

Harbormaster completed remote builds in B20485: Diff 28071.Jun 23 2023, 1:46 PM

Closed by commit rCOMMcf20a2d29ebf: [web] Introduce placeholder `EmojiAvatarSelectionModal` (authored by atul). · Explain WhyJun 23 2023, 2:07 PM

This revision was automatically updated to reflect the committed changes.

atul added a commit: rCOMMcf20a2d29ebf: [web] Introduce placeholder `EmojiAvatarSelectionModal`.

Revision Contents
Changeset List

Path

Size

web/

avatars/

edit-user-avatar-menu.react.js

19 lines

emoji-avatar-selection-modal.react.js

20 lines

Diff 28063

View Options

web/avatars/edit-user-avatar-menu.react.js

Show All 20 Lines
import {		import {
useServerCall,		useServerCall,
useDispatchActionPromise,		useDispatchActionPromise,
} from 'lib/utils/action-utils';		} from 'lib/utils/action-utils';

import MenuItem from '../components/menu-item.react';		import MenuItem from '../components/menu-item.react';
import Menu from '../components/menu.react';		import Menu from '../components/menu.react';
import SidebarListModal from '../modals/chat/sidebar-list-modal.react';		import SidebarListModal from '../modals/chat/sidebar-list-modal.react';
		import SidebarPromoteModal from '../modals/chat/sidebar-promote-modal.react';
import { useModalContext } from '../modals/modal-provider.react';		import { useModalContext } from '../modals/modal-provider.react';
import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react';		import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react';
import ThreadMembersModal from '../modals/threads/members/members-modal.react';		import ThreadMembersModal from '../modals/threads/members/members-modal.react';
import SubchannelsModal from '../modals/threads/subchannels/subchannels-modal.react';		import SubchannelsModal from '../modals/threads/subchannels/subchannels-modal.react';
import ThreadSettingsModal from '../modals/threads/thread-settings-modal.react';		import ThreadSettingsModal from '../modals/threads/thread-settings-modal.react';
import { useSelector } from '../redux/redux-utils';		import { useSelector } from '../redux/redux-utils';
import SWMansionIcon from '../SWMansionIcon.react';		import SWMansionIcon from '../SWMansionIcon.react';
import css from './thread-menu.css';		import css from './thread-menu.css';
▲ Show 20 Lines • Show All 154 Lines • ▼ Show 20 Lines	return (
text="Leave Thread"		text="Leave Thread"
icon="logout"		icon="logout"
dangerous		dangerous
onClick={onClickLeaveThread}		onClick={onClickLeaveThread}
/>		/>
);		);
}, [onClickLeaveThread, threadInfo]);		}, [onClickLeaveThread, threadInfo]);

		const onClickPromoteSidebarToThread = React.useCallback(
		() =>
		pushModal(
		<SidebarPromoteModal
		threadInfo={threadInfo}
		onClose={popModal}
		onConfirm={onPromoteSidebar}
		/>,
		),
		[pushModal, threadInfo, popModal, onPromoteSidebar],
		);

const promoteSidebar = React.useMemo(() => {		const promoteSidebar = React.useMemo(() => {
return (		return (
<MenuItem		<MenuItem
key="promote"		key="promote"
text="Promote Thread"		text="Promote Thread"
icon="message-square-lines"		icon="message-square-lines"
onClick={onPromoteSidebar}		onClick={onClickPromoteSidebarToThread}
/>		/>
);		);
}, [onPromoteSidebar]);		}, [onClickPromoteSidebarToThread]);

const menuItems = React.useMemo(() => {		const menuItems = React.useMemo(() => {
const notificationsItem = (		const notificationsItem = (
<MenuItem key="notifications" text="Notifications" icon="bell" />		<MenuItem key="notifications" text="Notifications" icon="bell" />
);		);
const separator = <hr key="separator" className={css.separator} />;		const separator = <hr key="separator" className={css.separator} />;

// TODO: Enable menu items when the modals are implemented		// TODO: Enable menu items when the modals are implemented
Show All 33 Lines