diff --git a/web/app.react.js b/web/app.react.js
--- a/web/app.react.js
+++ b/web/app.react.js
@@ -31,6 +31,7 @@
import Calendar from './calendar/calendar.react.js';
import Chat from './chat/chat.react.js';
+import { EditModalProvider } from './chat/edit-message-provider.js';
import { TooltipProvider } from './chat/tooltip-provider.js';
import NavigationArrows from './components/navigation-arrows.react.js';
import { initOpaque } from './crypto/opaque-utils.js';
@@ -158,21 +159,23 @@
}
return (
-
-
-
-
-
-
-
-
-
- {content}
- {this.props.modals}
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+ {content}
+ {this.props.modals}
+
+
+
+
+
);
}
diff --git a/web/chat/edit-message-provider.js b/web/chat/edit-message-provider.js
new file mode 100644
--- /dev/null
+++ b/web/chat/edit-message-provider.js
@@ -0,0 +1,81 @@
+// @flow
+
+import invariant from 'invariant';
+import * as React from 'react';
+
+import ModalOverlay from 'lib/components/modal-overlay.react.js';
+import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
+import type { ThreadInfo } from 'lib/types/thread-types';
+
+export type EditState = {
+ +messageInfo: ChatMessageInfoItem,
+ +threadInfo: ThreadInfo,
+ +editedMessageDraft: ?string,
+ +isError: boolean,
+};
+
+type EditModalContextType = {
+ +renderEditModal: (params: EditState) => void,
+ +clearEditModal: () => void,
+ +editState: ?EditState,
+};
+
+const EditModalContext: React.Context =
+ React.createContext({
+ renderEditModal: () => {},
+ clearEditModal: () => {},
+ editState: null,
+ });
+
+type Props = {
+ +children: React.Node,
+};
+function EditModalProvider(props: Props): React.Node {
+ const { children } = props;
+
+ const [editState, setEditState] = React.useState(null);
+
+ const clearEditModal = React.useCallback(() => {
+ setEditState(null);
+ }, []);
+
+ const renderEditModal = React.useCallback((newEditState: EditState): void => {
+ setEditState(newEditState);
+ }, []);
+
+ const modal = React.useMemo(() => {
+ // TODO: Add modal
+ return null;
+ }, []);
+
+ const value = React.useMemo(
+ () => ({
+ renderEditModal,
+ clearEditModal: clearEditModal,
+ editState,
+ }),
+ [renderEditModal, clearEditModal, editState],
+ );
+
+ const modalOverlay = React.useMemo(() => {
+ if (!modal) {
+ return null;
+ }
+ return {modal};
+ }, [clearEditModal, modal]);
+
+ return (
+
+ {children}
+ {modalOverlay}
+
+ );
+}
+
+function useEditModalContext(): EditModalContextType {
+ const context = React.useContext(EditModalContext);
+ invariant(context, 'EditModalContext not found');
+ return context;
+}
+
+export { EditModalProvider, useEditModalContext };