Differential D7825 Diff 26947 web/chat/edit-message-provider.js

Changeset View

Standalone View

web/chat/edit-message-provider.js

Show All 12 Lines	export type EditState = {
+editedMessageDraft: ?string,		+editedMessageDraft: ?string,
+isError: boolean,		+isError: boolean,
};		};

type EditModalContextType = {		type EditModalContextType = {
+renderEditModal: (params: EditState) => void,		+renderEditModal: (params: EditState) => void,
+clearEditModal: () => void,		+clearEditModal: () => void,
+editState: ?EditState,		+editState: ?EditState,
		+setDraft: string => void,
};		};

const EditModalContext: React.Context<EditModalContextType> =		const EditModalContext: React.Context<EditModalContextType> =
React.createContext<EditModalContextType>({		React.createContext<EditModalContextType>({
renderEditModal: () => {},		renderEditModal: () => {},
clearEditModal: () => {},		clearEditModal: () => {},
editState: null,		editState: null,
		setDraft: () => {},
});		});

type Props = {		type Props = {
+children: React.Node,		+children: React.Node,
};		};
function EditModalProvider(props: Props): React.Node {		function EditModalProvider(props: Props): React.Node {
const { children } = props;		const { children } = props;

const [editState, setEditState] = React.useState<?EditState>(null);		const [editState, setEditState] = React.useState<?EditState>(null);

const clearEditModal = React.useCallback(() => {		const clearEditModal = React.useCallback(() => {
setEditState(null);		setEditState(null);
}, []);		}, []);

const renderEditModal = React.useCallback((newEditState: EditState): void => {		const renderEditModal = React.useCallback((newEditState: EditState): void => {
setEditState(newEditState);		setEditState(newEditState);
}, []);		}, []);

const modal = React.useMemo(() => {		const modal = React.useMemo(() => {
// TODO: Add modal		// TODO: Add modal
return null;		return null;
}, []);		}, []);

		const setDraft = React.useCallback(
		(draft: ?string) => {
		if (!editState) {
		return;
		}
		setEditState({
		...editState,
		editedMessageDraft: draft,
		});
		},
		[editState, setEditState],
		);

const value = React.useMemo(		const value = React.useMemo(
() => ({		() => ({
renderEditModal,		renderEditModal,
clearEditModal: clearEditModal,		clearEditModal: clearEditModal,
editState,		editState,
		setDraft,
}),		}),
[renderEditModal, clearEditModal, editState],		[renderEditModal, clearEditModal, editState, setDraft],
);		);

const modalOverlay = React.useMemo(() => {		const modalOverlay = React.useMemo(() => {
if (!modal) {		if (!modal) {
return null;		return null;
}		}
return <ModalOverlay onClose={clearEditModal}>{modal}</ModalOverlay>;		return <ModalOverlay onClose={clearEditModal}>{modal}</ModalOverlay>;
}, [clearEditModal, modal]);		}, [clearEditModal, modal]);
Show All 16 Lines