[web] Display edit state (in the background)
ClosedPublic
Actions

Authored by • kuba on May 16 2023, 3:51 AM.

Details

Reviewers

michal
inka

Commits

rCOMMd1b21f04c071: [web] Display edit state (in the background)

Summary

Display the edit message component.

Later I will add a modal, which covers the screen, to prevent the user from navigating outside the thread. This one is to move other messages in chats accordingly to the height of this component.

Test Plan

Run the app. Press the edit button. It shows the new component. Pressed cancel in the new component. It left edit state.

Screenshot:

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

• kuba created this revision.May 16 2023, 3:51 AM

Herald added subscribers: atul, tomek, ashoat. · View Herald TranscriptMay 16 2023, 3:51 AM

• kuba added a parent revision: D7825: [web] Store edited message draft in the state.May 16 2023, 3:52 AM

• kuba edited the test plan for this revision. (Show Details)

• kuba edited the summary of this revision. (Show Details)

• kuba added a child revision: D7828: [web] Added message editing.May 16 2023, 3:58 AM

• kuba added inline comments.

web/chat/message.react.js
46	It tells the component that this copy of it is a "background" one. It will be used later, to determine which component (modal or background one) should be focused.

Harbormaster completed remote builds in B19373: Diff 26506.May 16 2023, 4:09 AM

• kuba requested review of this revision.May 16 2023, 4:09 AM

michal accepted this revision.May 18 2023, 4:16 AM

michal added inline comments.

web/chat/message.react.js
47	Where is this number from?

This revision is now accepted and ready to land.May 18 2023, 4:16 AM

Rebase

Harbormaster completed remote builds in B19476: Diff 26641.May 18 2023, 8:30 AM

Removed width from the EditTextMessage

• kuba added inline comments.May 23 2023, 1:25 AM

web/chat/message.react.js
47	It is removed after changes.

Harbormaster completed remote builds in B19633: Diff 26841.May 23 2023, 1:41 AM

ashoat added inline comments.May 23 2023, 5:41 AM

web/chat/message.react.js
43–47 ↗	(On Diff #26841)

Review

Harbormaster completed remote builds in B19667: Diff 26875.May 23 2023, 6:23 AM

Closed by commit rCOMMd1b21f04c071: [web] Display edit state (in the background) (authored by kosmydel <kukubaczek@gmail.com>). · Explain WhyMay 24 2023, 3:47 AM

This revision was automatically updated to reflect the committed changes.

kosmydel <kukubaczek@gmail.com> added a commit: rCOMMd1b21f04c071: [web] Display edit state (in the background).

Revision Contents
Changeset List

Path

Size

web/

chat/

message.react.js

19 lines

Diff 26506

View Options

web/chat/message.react.js

// @flow		// @flow

import data from '@emoji-mart/data';		import data from '@emoji-mart/data';
import Picker from '@emoji-mart/react';		import Picker from '@emoji-mart/react';
import invariant from 'invariant';		import invariant from 'invariant';
import * as React from 'react';		import * as React from 'react';

import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js';		import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js';
import { useModalContext } from 'lib/components/modal-provider.react.js';		import { useModalContext } from 'lib/components/modal-provider.react.js';
		import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import {		import {
defaultAnonymousUserEmojiAvatar,		defaultAnonymousUserEmojiAvatar,
getAvatarForUser,		getAvatarForUser,
getDefaultAvatar,		getDefaultAvatar,
} from 'lib/shared/avatar-utils.js';		} from 'lib/shared/avatar-utils.js';
import type {		import type {
ClientAvatar,		ClientAvatar,
ClientEmojiAvatar,		ClientEmojiAvatar,
Show All 10 Lines
function EmojiAvatarSelectionModal(): React.Node {		function EmojiAvatarSelectionModal(): React.Node {
const { popModal } = useModalContext();		const { popModal } = useModalContext();

const editUserAvatarContext = React.useContext(EditUserAvatarContext);		const editUserAvatarContext = React.useContext(EditUserAvatarContext);
invariant(editUserAvatarContext, 'editUserAvatarContext should be set');		invariant(editUserAvatarContext, 'editUserAvatarContext should be set');

const { setUserAvatar, userAvatarSaveInProgress } = editUserAvatarContext;		const { setUserAvatar, userAvatarSaveInProgress } = editUserAvatarContext;

		const [errorMessage, setErrorMessage] = React.useState<?string>();

const currentUserInfo = useSelector(state => state.currentUserInfo);		const currentUserInfo = useSelector(state => state.currentUserInfo);
const currentUserAvatar: ClientAvatar = getAvatarForUser(currentUserInfo);		const currentUserAvatar: ClientAvatar = getAvatarForUser(currentUserInfo);
const defaultUserAvatar: ClientEmojiAvatar = currentUserInfo?.username		const defaultUserAvatar: ClientEmojiAvatar = currentUserInfo?.username
? getDefaultAvatar(currentUserInfo.username)		? getDefaultAvatar(currentUserInfo.username)
: defaultAnonymousUserEmojiAvatar;		: defaultAnonymousUserEmojiAvatar;

// eslint-disable-next-line no-unused-vars		// eslint-disable-next-line no-unused-vars
const [pendingAvatarEmoji, setPendingAvatarEmoji] = React.useState(		const [pendingAvatarEmoji, setPendingAvatarEmoji] = React.useState(
Show All 13 Lines	() => ({
type: 'emoji',		type: 'emoji',
emoji: pendingAvatarEmoji,		emoji: pendingAvatarEmoji,
color: pendingAvatarColor,		color: pendingAvatarColor,
}),		}),
[pendingAvatarColor, pendingAvatarEmoji],		[pendingAvatarColor, pendingAvatarEmoji],
);		);

const onEmojiSelect = React.useCallback(selection => {		const onEmojiSelect = React.useCallback(selection => {
		setErrorMessage();
setPendingAvatarEmoji(selection.native);		setPendingAvatarEmoji(selection.native);
}, []);		}, []);

const onSaveAvatar = React.useCallback(		const onColorSelection = React.useCallback((hex: string) => {
() => setUserAvatar(pendingEmojiAvatar),		setErrorMessage();
[pendingEmojiAvatar, setUserAvatar],		setPendingAvatarColor(hex);
);		}, []);

		const onSaveAvatar = React.useCallback(async () => {
		try {
		await setUserAvatar(pendingEmojiAvatar);
		} catch {
		setErrorMessage('Avatar update failed. Please try again.');
		}
		}, [pendingEmojiAvatar, setUserAvatar]);

let saveButtonContent;		let saveButtonContent;
if (userAvatarSaveInProgress) {		if (userAvatarSaveInProgress) {
saveButtonContent = <LoadingIndicator status="loading" size="medium" />;		saveButtonContent = <LoadingIndicator status="loading" size="medium" />;
		} else if (errorMessage) {
		saveButtonContent = (
		<>
		<SWMansionIcon icon="warning-circle" size={24} />
		{errorMessage}
		</>
		);
} else {		} else {
saveButtonContent = 'Save Avatar';		saveButtonContent = 'Save Avatar';
}		}

return (		return (
<Modal name="Emoji avatar selection" size="large" onClose={popModal}>		<Modal name="Emoji avatar selection" size="large" onClose={popModal}>
<div className={css.modalBody}>		<div className={css.modalBody}>
<div className={css.avatarContainer}>		<div className={css.avatarContainer}>
<Avatar avatarInfo={pendingEmojiAvatar} size="profile" />		<Avatar avatarInfo={pendingEmojiAvatar} size="profile" />
</div>		</div>
<div className={css.emojiPickerContainer}>		<div className={css.emojiPickerContainer}>
<Picker data={data} theme="dark" onEmojiSelect={onEmojiSelect} />		<Picker data={data} theme="dark" onEmojiSelect={onEmojiSelect} />
</div>		</div>
<div className={css.colorSelectorContainer}>		<div className={css.colorSelectorContainer}>
<ColorSelector		<ColorSelector
currentColor={pendingAvatarColor}		currentColor={pendingAvatarColor}
onColorSelection={setPendingAvatarColor}		onColorSelection={onColorSelection}
/>		/>
</div>		</div>
<div className={css.saveButtonContainer}>		<div className={css.saveButtonContainer}>
<Button		<Button
variant="filled"		variant="filled"
buttonColor={buttonThemes.standard}		buttonColor={
		errorMessage ? buttonThemes.danger : buttonThemes.standard
		}
onClick={onSaveAvatar}		onClick={onSaveAvatar}
disabled={userAvatarSaveInProgress}		disabled={userAvatarSaveInProgress}
>		>
<div className={css.saveAvatarButtonContent}>		<div className={css.saveAvatarButtonContent}>
{saveButtonContent}		{saveButtonContent}
</div>		</div>
</Button>		</Button>
</div>		</div>
</div>		</div>
</Modal>		</Modal>
);		);
}		}

export default EmojiAvatarSelectionModal;		export default EmojiAvatarSelectionModal;

[web] Display edit state (in the background)ClosedPublicActions