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

Changeset View

Standalone View

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

// @flow		// @flow

import * as React from 'react';		import * as React from 'react';
		import { useCallback, useEffect } 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 12 Lines
};		};

const cancelButtonColor: ButtonColor = {		const cancelButtonColor: ButtonColor = {
backgroundColor: '#00000000',		backgroundColor: '#00000000',
};		};

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(() => {
return {		return {
backgroundColor: `#${threadColor}`,		backgroundColor: `#${threadColor}`,
};		};
}, [threadColor]);		}, [threadColor]);

Show All 21 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]);

		useEffect(() => {
		ashoatUnsubmitted Done Inline Actions Nit: we usually do `React.useEffect` here ashoat: Nit: we usually do `React.useEffect` here
		if (!background) {
		return () => {};
		michalUnsubmitted Done Inline Actions This is needed because of eslint? michal: This is needed because of eslint?
		ashoatUnsubmitted Done Inline Actions Should be possible to `return undefined` ashoat: Should be possible to `return undefined`
		}
		window.addEventListener('resize', updateDimensions);
		return () => {
		window.removeEventListener('resize', updateDimensions);
		};
		}, [background, updateDimensions]);

		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}>
<div className={css.iconContainer}>		<div className={css.iconContainer}>
<XCircleIcon />		<XCircleIcon />
</div>		</div>
<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>
);		);
}		}

return (		return (
<div className={css.editMessage} style={{ width: props.width }}>		<div className={css.editMessage} style={{ width: props.width }} 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