Differential D7833 Diff 26951 web/chat/edit-text-message.react.js

Changeset View

Standalone View

web/chat/edit-text-message.react.js

// @flow		// @flow

import classNames from 'classnames';		import classNames from 'classnames';
import * as React from 'react';		import * as React from 'react';
		import { useCallback } from 'react';
import { XCircle as XCircleIcon } from 'react-feather';		import { XCircle as XCircleIcon } from 'react-feather';

import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';		import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
import { useEditMessage } from 'lib/shared/edit-messages-utils.js';		import { useEditMessage } from 'lib/shared/edit-messages-utils.js';
import { trimMessage } from 'lib/shared/message-utils.js';		import { trimMessage } from 'lib/shared/message-utils.js';
import { type ThreadInfo } from 'lib/types/thread-types.js';		import { type ThreadInfo } from 'lib/types/thread-types.js';

import cssInputBar from './chat-input-bar.css';		import cssInputBar from './chat-input-bar.css';
Show All 11 Lines
};		};

const cancelButtonColor: ButtonColor = {		const cancelButtonColor: ButtonColor = {
backgroundColor: 'transparent',		backgroundColor: 'transparent',
};		};

function EditTextMessage(props: Props): React.Node {		function EditTextMessage(props: Props): React.Node {
const { background, threadInfo, item } = props;		const { background, threadInfo, item } = props;
const { editState, clearEditModal, setDraft, setError } =		const { editState, clearEditModal, setDraft, setError, updatePosition } =
useEditModalContext();		useEditModalContext();
const editMessage = useEditMessage();		const editMessage = useEditMessage();

		const myRef = React.useRef(null);

const editedMessageDraft = editState?.editedMessageDraft ?? '';		const editedMessageDraft = editState?.editedMessageDraft ?? '';
const threadColor = threadInfo.color;		const threadColor = threadInfo.color;
const saveButtonColor: ButtonColor = React.useMemo(		const saveButtonColor: ButtonColor = React.useMemo(
() => ({		() => ({
backgroundColor: `#${threadColor}`,		backgroundColor: `#${threadColor}`,
}),		}),
[threadColor],		[threadColor],
);		);
Show All 22 Lines	const checkAndEdit = async () => {
try {		try {
await editMessage(messageInfoID, editState.editedMessageDraft);		await editMessage(messageInfoID, editState.editedMessageDraft);
clearEditModal();		clearEditModal();
} catch (e) {		} catch (e) {
setError(true);		setError(true);
}		}
};		};

		const updateDimensions = useCallback(() => {
		if (!myRef.current \|\| !background) {
		return;
		}
		const { left, top, width, height } = myRef.current.getBoundingClientRect();
		updatePosition({
		left,
		top,
		width,
		height,
		});
		}, [background, updatePosition]);

		React.useEffect(() => {
		if (!background) {
		return undefined;
		}
		window.addEventListener('resize', updateDimensions);
		return () => {
		window.removeEventListener('resize', updateDimensions);
		};
		}, [background, updateDimensions]);

		React.useEffect(() => {
		updateDimensions();
		// eslint-disable-next-line react-hooks/exhaustive-deps
		}, []);

let editFailed;		let editFailed;
if (editState?.isError) {		if (editState?.isError) {
editFailed = (		editFailed = (
<div className={css.failedText}>		<div className={css.failedText}>
<XCircleIcon className={css.icon} />		<XCircleIcon className={css.icon} />
<div className={css.errorColor}>Edit failed.</div>		<div className={css.errorColor}>Edit failed.</div>
<div className={css.whiteColor}>Please try again.</div>		<div className={css.whiteColor}>Please try again.</div>
</div>		</div>
);		);
}		}

const containerStyle = classNames(css.editMessage, {		const containerStyle = classNames(css.editMessage, {
[css.backgroundEditMessage]: background,		[css.backgroundEditMessage]: background,
});		});

return (		return (
<div className={containerStyle}>		<div className={containerStyle} ref={myRef}>
<div className={cssInputBar.inputBarTextInput}>		<div className={cssInputBar.inputBarTextInput}>
<ChatInputTextArea		<ChatInputTextArea
focus={!background}		focus={!background}
currentText={editedMessageDraft}		currentText={editedMessageDraft}
setCurrentText={setDraft}		setCurrentText={setDraft}
		onChangePosition={updateDimensions}
send={checkAndEdit}		send={checkAndEdit}
/>		/>
</div>		</div>
<div className={css.bottomRow}>		<div className={css.bottomRow}>
{editFailed}		{editFailed}
<div className={css.buttons}>		<div className={css.buttons}>
<Button		<Button
className={[css.saveButton, css.smallButton]}		className={[css.saveButton, css.smallButton]}
Show All 36 Lines