diff --git a/landing/investors.react.js b/landing/investors.react.js
index 299ec0104..a20bdee3a 100644
--- a/landing/investors.react.js
+++ b/landing/investors.react.js
@@ -1,54 +1,56 @@
 // @flow
 
 import * as React from 'react';
 
 import { useModalContext } from 'lib/components/modal-provider.react';
 
 import { shuffledInvestorsData } from './investor-data';
 import InvestorProfileModal from './investor-profile-modal.react';
 import InvestorProfile from './investor-profile.react';
 import css from './investors.css';
 
 function Investors(): React.Node {
   const { pushModal } = useModalContext();
 
   const onClickInvestorProfileCard = React.useCallback(
-    (id: string) => pushModal(<InvestorProfileModal investorID={id} />),
+    (id: string) => {
+      pushModal(<InvestorProfileModal investorID={id} />);
+    },
     [pushModal],
   );
 
   const investors = React.useMemo(() => {
     return shuffledInvestorsData.map(investor => (
       <InvestorProfile
         key={investor.id}
         name={investor.name}
         description={investor.description}
         involvement={investor.involvement}
         imageURL={investor.imageURL}
         onClick={() => onClickInvestorProfileCard(investor.id)}
         website={investor.website}
         twitterHandle={investor.twitter}
         linkedinHandle={investor.linkedin}
       />
     ));
   }, [onClickInvestorProfileCard]);
 
   return (
     <div className={css.wrapper}>
       <h2 className={css.header}>Investors</h2>
 
       <section>
         <div className={css.headingContainer}>
           <p className={css.subtitle}>
             Comm is proud to count over 80 individuals &amp; organizations from
             our community as investors.
           </p>
         </div>
 
         <div className={css.investorContainer}>{investors}</div>
       </section>
     </div>
   );
 }
 
 export default Investors;
diff --git a/lib/components/modal-provider.react.js b/lib/components/modal-provider.react.js
index bffa4c1cf..f1445c053 100644
--- a/lib/components/modal-provider.react.js
+++ b/lib/components/modal-provider.react.js
@@ -1,65 +1,68 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { getUUID } from '../utils/uuid';
 
+export type PushModal = React.Node => string;
+
 type Props = {
   +children: React.Node,
 };
 type ModalContextType = {
   +modals: $ReadOnlyArray<[React.Node, string]>,
-  +pushModal: React.Node => void,
+  +pushModal: PushModal,
   +popModal: () => void,
   +clearModals: () => void,
 };
 
 const ModalContext: React.Context<?ModalContextType> = React.createContext<?ModalContextType>(
   {
     modals: [],
-    pushModal: () => {},
+    pushModal: () => '',
     popModal: () => {},
     clearModals: () => {},
   },
 );
 
 function ModalProvider(props: Props): React.Node {
   const { children } = props;
   const [modals, setModals] = React.useState<
     $ReadOnlyArray<[React.Node, string]>,
   >([]);
   const popModal = React.useCallback(
     () => setModals(oldModals => oldModals.slice(0, -1)),
     [],
   );
   const pushModal = React.useCallback(newModal => {
     const key = getUUID();
     setModals(oldModals => [...oldModals, [newModal, key]]);
+    return key;
   }, []);
 
   const clearModals = React.useCallback(() => setModals([]), []);
 
   const value = React.useMemo(
     () => ({
       modals,
       pushModal,
       popModal,
       clearModals,
     }),
     [modals, pushModal, popModal, clearModals],
   );
 
   return (
     <ModalContext.Provider value={value}>{children}</ModalContext.Provider>
   );
 }
 
 function useModalContext(): ModalContextType {
   const context = React.useContext(ModalContext);
   invariant(context, 'ModalContext not found');
 
   return context;
 }
 
 export { ModalProvider, useModalContext };
diff --git a/web/calendar/day.react.js b/web/calendar/day.react.js
index fc718179e..ccfed31d1 100644
--- a/web/calendar/day.react.js
+++ b/web/calendar/day.react.js
@@ -1,262 +1,265 @@
 // @flow
 
 import classNames from 'classnames';
 import invariant from 'invariant';
 import _some from 'lodash/fp/some';
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 
 import {
   createLocalEntry,
   createLocalEntryActionType,
 } from 'lib/actions/entry-actions';
-import { useModalContext } from 'lib/components/modal-provider.react';
+import {
+  useModalContext,
+  type PushModal,
+} from 'lib/components/modal-provider.react';
 import { onScreenThreadInfos as onScreenThreadInfosSelector } from 'lib/selectors/thread-selectors';
 import { entryKey } from 'lib/shared/entry-utils';
 import type { EntryInfo } from 'lib/types/entry-types';
 import type { Dispatch } from 'lib/types/redux-types';
 import type { ThreadInfo } from 'lib/types/thread-types';
 import {
   dateString,
   dateFromString,
   currentDateInTimeZone,
 } from 'lib/utils/date-utils';
 
 import LogInFirstModal from '../modals/account/log-in-first-modal.react';
 import HistoryModal from '../modals/history/history-modal.react';
 import ThreadPickerModal from '../modals/threads/thread-picker-modal.react';
 import { useSelector } from '../redux/redux-utils';
 import { htmlTargetFromEvent } from '../vector-utils';
 import { AddVector, HistoryVector } from '../vectors.react';
 import css from './calendar.css';
 import type { InnerEntry } from './entry.react';
 import Entry from './entry.react';
 
 type BaseProps = {
   +dayString: string,
   +entryInfos: $ReadOnlyArray<EntryInfo>,
   +startingTabIndex: number,
 };
 type Props = {
   ...BaseProps,
   +onScreenThreadInfos: $ReadOnlyArray<ThreadInfo>,
   +viewerID: ?string,
   +loggedIn: boolean,
   +nextLocalID: number,
   +timeZone: ?string,
   +dispatch: Dispatch,
-  +pushModal: (modal: React.Node) => void,
+  +pushModal: PushModal,
   +popModal: () => void,
 };
 type State = {
   +hovered: boolean,
 };
 class Day extends React.PureComponent<Props, State> {
   state: State = {
     hovered: false,
   };
   entryContainer: ?HTMLDivElement;
   entryContainerSpacer: ?HTMLDivElement;
   actionLinks: ?HTMLDivElement;
   entries: Map<string, InnerEntry> = new Map();
 
   componentDidUpdate(prevProps: Props) {
     if (this.props.entryInfos.length > prevProps.entryInfos.length) {
       invariant(this.entryContainer, 'entryContainer ref not set');
       this.entryContainer.scrollTop = this.entryContainer.scrollHeight;
     }
   }
 
   render() {
     const now = currentDateInTimeZone(this.props.timeZone);
     const isToday = dateString(now) === this.props.dayString;
     const tdClasses = classNames(css.day, { [css.currentDay]: isToday });
 
     let actionLinks = null;
     const hovered = this.state.hovered;
     if (hovered) {
       const actionLinksClassName = `${css.actionLinks} ${css.dayActionLinks}`;
       actionLinks = (
         <div className={actionLinksClassName} ref={this.actionLinksRef}>
           <a href="#" onClick={this.onAddEntry}>
             <AddVector />
             <span className={css.actionLinksText}>Add</span>
           </a>
           <a href="#" onClick={this.onHistory}>
             <HistoryVector className={css.history} />
             <span className={css.actionLinksText}>History</span>
           </a>
         </div>
       );
     }
 
     const entries = this.props.entryInfos
       .filter(entryInfo =>
         _some(['id', entryInfo.threadID])(this.props.onScreenThreadInfos),
       )
       .map((entryInfo, i) => {
         const key = entryKey(entryInfo);
         return (
           <Entry
             entryInfo={entryInfo}
             focusOnFirstEntryNewerThan={this.focusOnFirstEntryNewerThan}
             tabIndex={this.props.startingTabIndex + i}
             key={key}
             innerRef={this.entryRef}
           />
         );
       });
 
     const entryContainerClasses = classNames(css.entryContainer, {
       [css.focusedEntryContainer]: hovered,
     });
     const date = dateFromString(this.props.dayString);
     return (
       <td
         className={tdClasses}
         onClick={this.onClick}
         onMouseEnter={this.onMouseEnter}
         onMouseLeave={this.onMouseLeave}
       >
         <h2>{date.getDate()}</h2>
         <div className={entryContainerClasses} ref={this.entryContainerRef}>
           {entries}
           <div
             className={css.entryContainerSpacer}
             ref={this.entryContainerSpacerRef}
           />
         </div>
         {actionLinks}
       </td>
     );
   }
 
   actionLinksRef = (actionLinks: ?HTMLDivElement) => {
     this.actionLinks = actionLinks;
   };
 
   entryContainerRef = (entryContainer: ?HTMLDivElement) => {
     this.entryContainer = entryContainer;
   };
 
   entryContainerSpacerRef = (entryContainerSpacer: ?HTMLDivElement) => {
     this.entryContainerSpacer = entryContainerSpacer;
   };
 
   entryRef = (key: string, entry: InnerEntry) => {
     this.entries.set(key, entry);
   };
 
   onMouseEnter = () => {
     this.setState({ hovered: true });
   };
 
   onMouseLeave = () => {
     this.setState({ hovered: false });
   };
 
   onClick = (event: SyntheticEvent<HTMLTableCellElement>) => {
     const target = htmlTargetFromEvent(event);
     invariant(
       this.entryContainer instanceof HTMLDivElement,
       "entryContainer isn't div",
     );
     invariant(
       this.entryContainerSpacer instanceof HTMLDivElement,
       "entryContainerSpacer isn't div",
     );
     if (
       target === this.entryContainer ||
       target === this.entryContainerSpacer ||
       (this.actionLinks && target === this.actionLinks)
     ) {
       this.onAddEntry(event);
     }
   };
 
   onAddEntry = (event: SyntheticEvent<*>) => {
     event.preventDefault();
     invariant(
       this.props.onScreenThreadInfos.length > 0,
       "onAddEntry shouldn't be clicked if no onScreenThreadInfos",
     );
     if (this.props.onScreenThreadInfos.length === 1) {
       this.createNewEntry(this.props.onScreenThreadInfos[0].id);
     } else if (this.props.onScreenThreadInfos.length > 1) {
       this.props.pushModal(
         <ThreadPickerModal
           name="Chats"
           onClose={this.props.popModal}
           createNewEntry={this.createNewEntry}
         />,
       );
     }
   };
 
   createNewEntry = (threadID: string) => {
     if (!this.props.loggedIn) {
       this.props.pushModal(<LogInFirstModal inOrderTo="edit this calendar" />);
       return;
     }
     const viewerID = this.props.viewerID;
     invariant(viewerID, 'should have viewerID in order to create thread');
     this.props.dispatch({
       type: createLocalEntryActionType,
       payload: createLocalEntry(
         threadID,
         this.props.nextLocalID,
         this.props.dayString,
         viewerID,
       ),
     });
   };
 
   onHistory = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     this.props.pushModal(
       <HistoryModal mode="day" dayString={this.props.dayString} />,
     );
   };
 
   focusOnFirstEntryNewerThan = (time: number) => {
     const entryInfo = this.props.entryInfos.find(
       candidate => candidate.creationTime > time,
     );
     if (entryInfo) {
       const entry = this.entries.get(entryKey(entryInfo));
       invariant(entry, 'entry for entryinfo should be defined');
       entry.focus();
     }
   };
 }
 
 const ConnectedDay: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedDay(props) {
     const onScreenThreadInfos = useSelector(onScreenThreadInfosSelector);
     const viewerID = useSelector(state => state.currentUserInfo?.id);
     const loggedIn = useSelector(
       state =>
         !!(state.currentUserInfo && !state.currentUserInfo.anonymous && true),
     );
     const nextLocalID = useSelector(state => state.nextLocalID);
     const timeZone = useSelector(state => state.timeZone);
     const dispatch = useDispatch();
     const { pushModal, popModal } = useModalContext();
 
     return (
       <Day
         {...props}
         onScreenThreadInfos={onScreenThreadInfos}
         viewerID={viewerID}
         loggedIn={loggedIn}
         nextLocalID={nextLocalID}
         timeZone={timeZone}
         dispatch={dispatch}
         pushModal={pushModal}
         popModal={popModal}
       />
     );
   },
 );
 
 export default ConnectedDay;
diff --git a/web/calendar/entry.react.js b/web/calendar/entry.react.js
index 677bd22a2..67586fed2 100644
--- a/web/calendar/entry.react.js
+++ b/web/calendar/entry.react.js
@@ -1,500 +1,503 @@
 // @flow
 
 import classNames from 'classnames';
 import invariant from 'invariant';
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 
 import {
   createEntryActionTypes,
   createEntry,
   saveEntryActionTypes,
   saveEntry,
   deleteEntryActionTypes,
   deleteEntry,
   concurrentModificationResetActionType,
 } from 'lib/actions/entry-actions';
-import { useModalContext } from 'lib/components/modal-provider.react';
+import {
+  useModalContext,
+  type PushModal,
+} from 'lib/components/modal-provider.react';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors';
 import { entryKey } from 'lib/shared/entry-utils';
 import { colorIsDark, threadHasPermission } from 'lib/shared/thread-utils';
 import type { Shape } from 'lib/types/core';
 import {
   type EntryInfo,
   type CreateEntryInfo,
   type SaveEntryInfo,
   type SaveEntryResult,
   type SaveEntryPayload,
   type CreateEntryPayload,
   type DeleteEntryInfo,
   type DeleteEntryResult,
   type CalendarQuery,
 } from 'lib/types/entry-types';
 import type { LoadingStatus } from 'lib/types/loading-types';
 import type { Dispatch } from 'lib/types/redux-types';
 import { threadPermissions } from 'lib/types/thread-types';
 import type { ThreadInfo } from 'lib/types/thread-types';
 import {
   type DispatchActionPromise,
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils';
 import { dateString } from 'lib/utils/date-utils';
 import { ServerError } from 'lib/utils/errors';
 
 import LoadingIndicator from '../loading-indicator.react';
 import LogInFirstModal from '../modals/account/log-in-first-modal.react';
 import ConcurrentModificationModal from '../modals/concurrent-modification-modal.react';
 import HistoryModal from '../modals/history/history-modal.react';
 import { useSelector } from '../redux/redux-utils';
 import { nonThreadCalendarQuery } from '../selectors/nav-selectors';
 import { HistoryVector, DeleteVector } from '../vectors.react';
 import css from './calendar.css';
 
 type BaseProps = {
   +innerRef: (key: string, me: Entry) => void,
   +entryInfo: EntryInfo,
   +focusOnFirstEntryNewerThan: (time: number) => void,
   +tabIndex: number,
 };
 type Props = {
   ...BaseProps,
   +threadInfo: ThreadInfo,
   +loggedIn: boolean,
   +calendarQuery: () => CalendarQuery,
   +online: boolean,
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
   +createEntry: (info: CreateEntryInfo) => Promise<CreateEntryPayload>,
   +saveEntry: (info: SaveEntryInfo) => Promise<SaveEntryResult>,
   +deleteEntry: (info: DeleteEntryInfo) => Promise<DeleteEntryResult>,
-  +pushModal: (modal: React.Node) => void,
+  +pushModal: PushModal,
   +popModal: () => void,
 };
 type State = {
   +focused: boolean,
   +loadingStatus: LoadingStatus,
   +text: string,
 };
 class Entry extends React.PureComponent<Props, State> {
   textarea: ?HTMLTextAreaElement;
   creating: boolean;
   needsUpdateAfterCreation: boolean;
   needsDeleteAfterCreation: boolean;
   nextSaveAttemptIndex: number;
   mounted: boolean;
   currentlySaving: ?string;
 
   constructor(props: Props) {
     super(props);
     this.state = {
       focused: false,
       loadingStatus: 'inactive',
       text: props.entryInfo.text,
     };
     this.creating = false;
     this.needsUpdateAfterCreation = false;
     this.needsDeleteAfterCreation = false;
     this.nextSaveAttemptIndex = 0;
   }
 
   guardedSetState(input: Shape<State>) {
     if (this.mounted) {
       this.setState(input);
     }
   }
 
   componentDidMount() {
     this.mounted = true;
     this.props.innerRef(entryKey(this.props.entryInfo), this);
     this.updateHeight();
     // Whenever a new Entry is created, focus on it
     if (!this.props.entryInfo.id) {
       this.focus();
     }
   }
 
   componentDidUpdate(prevProps: Props) {
     if (
       !this.state.focused &&
       this.props.entryInfo.text !== this.state.text &&
       this.props.entryInfo.text !== prevProps.entryInfo.text
     ) {
       this.setState({ text: this.props.entryInfo.text });
       this.currentlySaving = null;
     }
 
     if (
       this.props.online &&
       !prevProps.online &&
       this.state.loadingStatus === 'error'
     ) {
       this.save();
     }
   }
 
   focus() {
     invariant(
       this.textarea instanceof HTMLTextAreaElement,
       'textarea ref not set',
     );
     this.textarea.focus();
   }
 
   onMouseDown: (event: SyntheticEvent<HTMLDivElement>) => void = event => {
     if (this.state.focused && event.target !== this.textarea) {
       // Don't lose focus when some non-textarea part is clicked
       event.preventDefault();
     }
   };
 
   componentWillUnmount() {
     this.mounted = false;
   }
 
   updateHeight: () => void = () => {
     invariant(
       this.textarea instanceof HTMLTextAreaElement,
       'textarea ref not set',
     );
     this.textarea.style.height = 'auto';
     this.textarea.style.height = this.textarea.scrollHeight + 'px';
   };
 
   render(): React.Node {
     let actionLinks = null;
     if (this.state.focused) {
       let historyButton = null;
       if (this.props.entryInfo.id) {
         historyButton = (
           <a href="#" onClick={this.onHistory}>
             <HistoryVector className={css.history} />
             <span className={css.actionLinksText}>History</span>
           </a>
         );
       }
       const rightActionLinksClassName = `${css.rightActionLinks} ${css.actionLinksText}`;
       actionLinks = (
         <div className={css.actionLinks}>
           <a href="#" onClick={this.onDelete}>
             <DeleteVector />
             <span className={css.actionLinksText}>Delete</span>
           </a>
           {historyButton}
           <span className={rightActionLinksClassName}>
             {this.props.threadInfo.uiName}
           </span>
           <div className={css.clear}></div>
         </div>
       );
     }
 
     const darkColor = colorIsDark(this.props.threadInfo.color);
     const entryClasses = classNames({
       [css.entry]: true,
       [css.darkEntry]: darkColor,
       [css.focusedEntry]: this.state.focused,
     });
     const style = { backgroundColor: `#${this.props.threadInfo.color}` };
     const loadingIndicatorColor = darkColor ? 'white' : 'black';
     const canEditEntry = threadHasPermission(
       this.props.threadInfo,
       threadPermissions.EDIT_ENTRIES,
     );
     return (
       <div
         className={entryClasses}
         style={style}
         onMouseDown={this.onMouseDown}
       >
         <textarea
           rows="1"
           className={css.entryText}
           onChange={this.onChange}
           onKeyDown={this.onKeyDown}
           value={this.state.text}
           onFocus={this.onFocus}
           onBlur={this.onBlur}
           tabIndex={this.props.tabIndex}
           ref={this.textareaRef}
           disabled={!canEditEntry}
         />
         <LoadingIndicator
           status={this.state.loadingStatus}
           color={loadingIndicatorColor}
           loadingClassName={css.entryLoading}
           errorClassName={css.entryError}
         />
         {actionLinks}
       </div>
     );
   }
 
   textareaRef: (textarea: ?HTMLTextAreaElement) => void = textarea => {
     this.textarea = textarea;
   };
 
   onFocus: () => void = () => {
     if (!this.state.focused) {
       this.setState({ focused: true });
     }
   };
 
   onBlur: () => void = () => {
     this.setState({ focused: false });
     if (this.state.text.trim() === '') {
       this.delete();
     } else if (this.props.entryInfo.text !== this.state.text) {
       this.save();
     }
   };
 
   delete() {
     this.dispatchDelete(this.props.entryInfo.id, false);
   }
 
   save() {
     this.dispatchSave(this.props.entryInfo.id, this.state.text);
   }
 
   onChange: (event: SyntheticEvent<HTMLTextAreaElement>) => void = event => {
     if (!this.props.loggedIn) {
       this.props.pushModal(<LogInFirstModal inOrderTo="edit this calendar" />);
       return;
     }
     const target = event.target;
     invariant(target instanceof HTMLTextAreaElement, 'target not textarea');
     this.setState({ text: target.value }, this.updateHeight);
   };
 
   onKeyDown: (
     event: SyntheticKeyboardEvent<HTMLTextAreaElement>,
   ) => void = event => {
     if (event.key === 'Escape') {
       invariant(
         this.textarea instanceof HTMLTextAreaElement,
         'textarea ref not set',
       );
       this.textarea.blur();
     }
   };
 
   dispatchSave(serverID: ?string, newText: string) {
     if (this.currentlySaving === newText) {
       return;
     }
     this.currentlySaving = newText;
 
     if (newText.trim() === '') {
       // We don't save the empty string, since as soon as the element loses
       // focus it'll get deleted
       return;
     }
 
     if (!serverID) {
       if (this.creating) {
         // We need the first save call to return so we know the ID of the entry
         // we're updating, so we'll need to handle this save later
         this.needsUpdateAfterCreation = true;
         return;
       } else {
         this.creating = true;
       }
     }
 
     if (!serverID) {
       this.props.dispatchActionPromise(
         createEntryActionTypes,
         this.createAction(newText),
       );
     } else {
       this.props.dispatchActionPromise(
         saveEntryActionTypes,
         this.saveAction(serverID, newText),
       );
     }
   }
 
   async createAction(text: string): Promise<CreateEntryPayload> {
     const localID = this.props.entryInfo.localID;
     invariant(localID, "if there's no serverID, there should be a localID");
     const curSaveAttempt = this.nextSaveAttemptIndex++;
     this.guardedSetState({ loadingStatus: 'loading' });
     try {
       const response = await this.props.createEntry({
         text,
         timestamp: this.props.entryInfo.creationTime,
         date: dateString(
           this.props.entryInfo.year,
           this.props.entryInfo.month,
           this.props.entryInfo.day,
         ),
         threadID: this.props.entryInfo.threadID,
         localID,
         calendarQuery: this.props.calendarQuery(),
       });
       if (curSaveAttempt + 1 === this.nextSaveAttemptIndex) {
         this.guardedSetState({ loadingStatus: 'inactive' });
       }
       this.creating = false;
       if (this.needsUpdateAfterCreation) {
         this.needsUpdateAfterCreation = false;
         this.dispatchSave(response.entryID, this.state.text);
       }
       if (this.needsDeleteAfterCreation) {
         this.needsDeleteAfterCreation = false;
         this.dispatchDelete(response.entryID, false);
       }
       return response;
     } catch (e) {
       if (curSaveAttempt + 1 === this.nextSaveAttemptIndex) {
         this.guardedSetState({ loadingStatus: 'error' });
       }
       this.currentlySaving = null;
       this.creating = false;
       throw e;
     }
   }
 
   async saveAction(
     entryID: string,
     newText: string,
   ): Promise<SaveEntryPayload> {
     const curSaveAttempt = this.nextSaveAttemptIndex++;
     this.guardedSetState({ loadingStatus: 'loading' });
     try {
       const response = await this.props.saveEntry({
         entryID,
         text: newText,
         prevText: this.props.entryInfo.text,
         timestamp: Date.now(),
         calendarQuery: this.props.calendarQuery(),
       });
       if (curSaveAttempt + 1 === this.nextSaveAttemptIndex) {
         this.guardedSetState({ loadingStatus: 'inactive' });
       }
       return { ...response, threadID: this.props.entryInfo.threadID };
     } catch (e) {
       if (curSaveAttempt + 1 === this.nextSaveAttemptIndex) {
         this.guardedSetState({ loadingStatus: 'error' });
       }
       this.currentlySaving = null;
       if (e instanceof ServerError && e.message === 'concurrent_modification') {
         const onRefresh = () => {
           this.setState({ loadingStatus: 'inactive' }, this.updateHeight);
           this.props.dispatch({
             type: concurrentModificationResetActionType,
             payload: { id: entryID, dbText: e.payload.db },
           });
           this.props.popModal();
         };
         this.props.pushModal(
           <ConcurrentModificationModal onRefresh={onRefresh} />,
         );
       }
       throw e;
     }
   }
 
   onDelete: (event: SyntheticEvent<HTMLAnchorElement>) => void = event => {
     event.preventDefault();
     if (!this.props.loggedIn) {
       this.props.pushModal(<LogInFirstModal inOrderTo="edit this calendar" />);
       return;
     }
     this.dispatchDelete(this.props.entryInfo.id, true);
   };
 
   dispatchDelete(serverID: ?string, focusOnNextEntry: boolean) {
     const { localID } = this.props.entryInfo;
     this.props.dispatchActionPromise(
       deleteEntryActionTypes,
       this.deleteAction(serverID, focusOnNextEntry),
       undefined,
       { localID, serverID },
     );
   }
 
   async deleteAction(
     serverID: ?string,
     focusOnNextEntry: boolean,
   ): Promise<?DeleteEntryResult> {
     invariant(
       this.props.loggedIn,
       'user should be logged in if delete triggered',
     );
     if (focusOnNextEntry) {
       this.props.focusOnFirstEntryNewerThan(this.props.entryInfo.creationTime);
     }
     if (serverID) {
       return await this.props.deleteEntry({
         entryID: serverID,
         prevText: this.props.entryInfo.text,
         calendarQuery: this.props.calendarQuery(),
       });
     } else if (this.creating) {
       this.needsDeleteAfterCreation = true;
     }
     return null;
   }
 
   onHistory: (event: SyntheticEvent<HTMLAnchorElement>) => void = event => {
     event.preventDefault();
     this.props.pushModal(
       <HistoryModal
         mode="entry"
         dayString={dateString(
           this.props.entryInfo.year,
           this.props.entryInfo.month,
           this.props.entryInfo.day,
         )}
         currentEntryID={this.props.entryInfo.id}
       />,
     );
   };
 }
 
 export type InnerEntry = Entry;
 
 const ConnectedEntry: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedEntry(props) {
     const { threadID } = props.entryInfo;
     const threadInfo = useSelector(
       state => threadInfoSelector(state)[threadID],
     );
     const loggedIn = useSelector(
       state =>
         !!(state.currentUserInfo && !state.currentUserInfo.anonymous && true),
     );
     const calendarQuery = useSelector(nonThreadCalendarQuery);
     const online = useSelector(
       state => state.connection.status === 'connected',
     );
     const callCreateEntry = useServerCall(createEntry);
     const callSaveEntry = useServerCall(saveEntry);
     const callDeleteEntry = useServerCall(deleteEntry);
     const dispatchActionPromise = useDispatchActionPromise();
     const dispatch = useDispatch();
 
     const modalContext = useModalContext();
 
     return (
       <Entry
         {...props}
         threadInfo={threadInfo}
         loggedIn={loggedIn}
         calendarQuery={calendarQuery}
         online={online}
         createEntry={callCreateEntry}
         saveEntry={callSaveEntry}
         deleteEntry={callDeleteEntry}
         dispatchActionPromise={dispatchActionPromise}
         dispatch={dispatch}
         pushModal={modalContext.pushModal}
         popModal={modalContext.popModal}
       />
     );
   },
 );
 
 export default ConnectedEntry;
diff --git a/web/calendar/filter-panel.react.js b/web/calendar/filter-panel.react.js
index db17ead82..74d44af65 100644
--- a/web/calendar/filter-panel.react.js
+++ b/web/calendar/filter-panel.react.js
@@ -1,384 +1,387 @@
 // @flow
 
 import {
   faCog,
   faTimesCircle,
   faChevronUp,
   faChevronDown,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 import Switch from 'react-switch';
 
-import { useModalContext } from 'lib/components/modal-provider.react';
+import {
+  useModalContext,
+  type PushModal,
+} from 'lib/components/modal-provider.react';
 import {
   filteredThreadIDsSelector,
   includeDeletedSelector,
 } from 'lib/selectors/calendar-filter-selectors';
 import SearchIndex from 'lib/shared/search-index';
 import {
   calendarThreadFilterTypes,
   type FilterThreadInfo,
   updateCalendarThreadFilter,
   clearCalendarThreadFilter,
   setCalendarDeletedFilter,
 } from 'lib/types/filter-types';
 import type { Dispatch } from 'lib/types/redux-types';
 
 import ThreadSettingsModal from '../modals/threads/settings/thread-settings-modal.react';
 import { useSelector } from '../redux/redux-utils';
 import {
   webFilterThreadInfos,
   webFilterThreadSearchIndex,
 } from '../selectors/calendar-selectors';
 import { MagnifyingGlass } from '../vectors.react';
 import css from './filter-panel.css';
 
 type Props = {
   +filterThreadInfos: () => $ReadOnlyArray<FilterThreadInfo>,
   +filterThreadSearchIndex: () => SearchIndex,
   +filteredThreadIDs: ?$ReadOnlySet<string>,
   +includeDeleted: boolean,
   +dispatch: Dispatch,
-  +pushModal: (modal: React.Node) => void,
+  +pushModal: PushModal,
 };
 type State = {
   +query: string,
   +searchResults: $ReadOnlyArray<FilterThreadInfo>,
   +collapsed: boolean,
 };
 class FilterPanel extends React.PureComponent<Props, State> {
   state: State = {
     query: '',
     searchResults: [],
     collapsed: false,
   };
 
   currentlySelected(threadID: string): boolean {
     if (!this.props.filteredThreadIDs) {
       return true;
     }
     return this.props.filteredThreadIDs.has(threadID);
   }
 
   render() {
     const filterThreadInfos = this.state.query
       ? this.state.searchResults
       : this.props.filterThreadInfos();
 
     let filters = [];
     if (!this.state.query || filterThreadInfos.length > 0) {
       filters.push(
         <Category
           numThreads={filterThreadInfos.length}
           onToggle={this.onToggleAll}
           collapsed={this.state.collapsed}
           onCollapse={this.onCollapse}
           selected={!this.props.filteredThreadIDs}
           key="all"
         />,
       );
     } else {
       filters.push(
         <div className={css.noResults} key="noResults">
           No results
         </div>,
       );
     }
     if (!this.state.collapsed) {
       const options = filterThreadInfos.map(filterThreadInfo => (
         <Item
           filterThreadInfo={filterThreadInfo}
           onToggle={this.onToggle}
           onClickOnly={this.onClickOnly}
           onClickSettings={this.onClickSettings}
           selected={this.currentlySelected(filterThreadInfo.threadInfo.id)}
           key={filterThreadInfo.threadInfo.id}
         />
       ));
       filters = [...filters, ...options];
     }
 
     let clearQueryButton = null;
     if (this.state.query) {
       clearQueryButton = (
         <a href="#" onClick={this.clearQuery}>
           <FontAwesomeIcon icon={faTimesCircle} className={css.clearQuery} />
         </a>
       );
     }
 
     return (
       <div className={css.container}>
         <div className={css.searchContainer}>
           <div className={css.search}>
             <MagnifyingGlass className={css.searchVector} />
             <input
               type="text"
               placeholder="Search"
               value={this.state.query}
               onChange={this.onChangeQuery}
             />
             {clearQueryButton}
           </div>
         </div>
         <div className={css.filters}>{filters}</div>
         <div className={css.extras}>
           <label htmlFor="include-deleted-switch">
             <Switch
               checked={this.props.includeDeleted}
               onChange={this.onChangeIncludeDeleted}
               checkedIcon={false}
               uncheckedIcon={false}
               height={20}
               width={40}
               id="include-deleted-switch"
             />
             <span>Include deleted entries</span>
           </label>
         </div>
       </div>
     );
   }
 
   onToggle = (threadID: string, value: boolean) => {
     let newThreadIDs;
     const selectedThreadIDs = this.props.filteredThreadIDs;
     if (!selectedThreadIDs && value) {
       // No thread filter exists and thread is being added
       return;
     } else if (!selectedThreadIDs) {
       // No thread filter exists and thread is being removed
       newThreadIDs = this.props
         .filterThreadInfos()
         .map(filterThreadInfo => filterThreadInfo.threadInfo.id)
         .filter(id => id !== threadID);
     } else if (selectedThreadIDs.has(threadID) && value) {
       // Thread filter already includes thread being added
       return;
     } else if (selectedThreadIDs.has(threadID)) {
       // Thread being removed from current thread filter
       newThreadIDs = [...selectedThreadIDs].filter(id => id !== threadID);
     } else if (!value) {
       // Thread filter doesn't include thread being removed
       return;
     } else if (
       selectedThreadIDs.size + 1 ===
       this.props.filterThreadInfos().length
     ) {
       // Thread filter exists and thread being added is the only one missing
       newThreadIDs = null;
     } else {
       // Thread filter exists and thread is being added
       newThreadIDs = [...selectedThreadIDs, threadID];
     }
     this.setFilterThreads(newThreadIDs);
   };
 
   onToggleAll = (value: boolean) => {
     this.setFilterThreads(value ? null : []);
   };
 
   onClickOnly = (threadID: string) => {
     this.setFilterThreads([threadID]);
   };
 
   setFilterThreads(threadIDs: ?$ReadOnlyArray<string>) {
     if (!threadIDs) {
       this.props.dispatch({
         type: clearCalendarThreadFilter,
       });
     } else {
       this.props.dispatch({
         type: updateCalendarThreadFilter,
         payload: {
           type: calendarThreadFilterTypes.THREAD_LIST,
           threadIDs,
         },
       });
     }
   }
 
   onClickSettings = (threadID: string) => {
     this.props.pushModal(<ThreadSettingsModal threadID={threadID} />);
   };
 
   onChangeQuery = (event: SyntheticEvent<HTMLInputElement>) => {
     const query = event.currentTarget.value;
     const searchIndex = this.props.filterThreadSearchIndex();
     const resultIDs = new Set(searchIndex.getSearchResults(query));
     const results = this.props
       .filterThreadInfos()
       .filter(filterThreadInfo =>
         resultIDs.has(filterThreadInfo.threadInfo.id),
       );
     this.setState({ query, searchResults: results, collapsed: false });
   };
 
   clearQuery = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     this.setState({ query: '', searchResults: [], collapsed: false });
   };
 
   onCollapse = (value: boolean) => {
     this.setState({ collapsed: value });
   };
 
   onChangeIncludeDeleted = (includeDeleted: boolean) => {
     this.props.dispatch({
       type: setCalendarDeletedFilter,
       payload: {
         includeDeleted,
       },
     });
   };
 }
 
 type ItemProps = {
   +filterThreadInfo: FilterThreadInfo,
   +onToggle: (threadID: string, value: boolean) => void,
   +onClickOnly: (threadID: string) => void,
   +onClickSettings: (threadID: string) => void,
   +selected: boolean,
 };
 class Item extends React.PureComponent<ItemProps> {
   render() {
     const threadInfo = this.props.filterThreadInfo.threadInfo;
     const beforeCheckStyles = { borderColor: `#${threadInfo.color}` };
     let afterCheck = null;
     if (this.props.selected) {
       const afterCheckStyles = { backgroundColor: `#${threadInfo.color}` };
       afterCheck = (
         <div
           className={classNames(css.optionCheckbox, css.checkboxAfterOption)}
           style={afterCheckStyles}
         />
       );
     }
     const details =
       this.props.filterThreadInfo.numVisibleEntries === 1
         ? '1 entry'
         : `${this.props.filterThreadInfo.numVisibleEntries} entries`;
     return (
       <div className={css.option}>
         <div className={css.optionThread}>
           <input
             type="checkbox"
             checked={this.props.selected}
             onChange={this.onChange}
           />
           <label>
             <div className={css.optionCheckbox} style={beforeCheckStyles} />
             {threadInfo.uiName}
             {afterCheck}
           </label>
           <a onClick={this.onClickOnly} className={css.only}>
             only
           </a>
           <a onClick={this.onClickSettings} className={css.settingsCog}>
             <FontAwesomeIcon icon={faCog} />
           </a>
         </div>
         <div className={css.optionDetails}>{details}</div>
       </div>
     );
   }
 
   onChange = (event: SyntheticEvent<HTMLInputElement>) => {
     this.props.onToggle(
       this.props.filterThreadInfo.threadInfo.id,
       event.currentTarget.checked,
     );
   };
 
   onClickOnly = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     this.props.onClickOnly(this.props.filterThreadInfo.threadInfo.id);
   };
 
   onClickSettings = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     this.props.onClickSettings(this.props.filterThreadInfo.threadInfo.id);
   };
 }
 
 type CategoryProps = {
   +numThreads: number,
   +onToggle: (value: boolean) => void,
   +collapsed: boolean,
   +onCollapse: (value: boolean) => void,
   +selected: boolean,
 };
 class Category extends React.PureComponent<CategoryProps> {
   render() {
     const beforeCheckStyles = { borderColor: 'white' };
     let afterCheck = null;
     if (this.props.selected) {
       const afterCheckStyles = { backgroundColor: 'white' };
       afterCheck = (
         <div
           className={classNames(css.optionCheckbox, css.checkboxAfterOption)}
           style={afterCheckStyles}
         />
       );
     }
     const icon = this.props.collapsed ? faChevronUp : faChevronDown;
     const details =
       this.props.numThreads === 1 ? '1 chat' : `${this.props.numThreads} chats`;
     return (
       <div className={css.category}>
         <div className={css.optionThread}>
           <input
             type="checkbox"
             checked={this.props.selected}
             onChange={this.onChange}
           />
           <label>
             <div className={css.optionCheckbox} style={beforeCheckStyles} />
             Your chats
             {afterCheck}
           </label>
           <a onClick={this.onCollapse} className={css.collapse}>
             <FontAwesomeIcon icon={icon} />
           </a>
         </div>
         <div className={css.optionDetails}>{details}</div>
       </div>
     );
   }
 
   onChange = (event: SyntheticEvent<HTMLInputElement>) => {
     this.props.onToggle(event.currentTarget.checked);
   };
 
   onCollapse = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     this.props.onCollapse(!this.props.collapsed);
   };
 }
 
 const ConnectedFilterPanel: React.ComponentType<{}> = React.memo<{}>(
   function ConnectedFilterPanel(): React.Node {
     const filteredThreadIDs = useSelector(filteredThreadIDsSelector);
     const filterThreadInfos = useSelector(webFilterThreadInfos);
     const filterThreadSearchIndex = useSelector(webFilterThreadSearchIndex);
     const includeDeleted = useSelector(includeDeletedSelector);
     const dispatch = useDispatch();
     const modalContext = useModalContext();
 
     return (
       <FilterPanel
         filteredThreadIDs={filteredThreadIDs}
         filterThreadInfos={filterThreadInfos}
         filterThreadSearchIndex={filterThreadSearchIndex}
         includeDeleted={includeDeleted}
         dispatch={dispatch}
         pushModal={modalContext.pushModal}
       />
     );
   },
 );
 
 export default ConnectedFilterPanel;
diff --git a/web/input/input-state-container.react.js b/web/input/input-state-container.react.js
index 4e54691ac..f9f2b446a 100644
--- a/web/input/input-state-container.react.js
+++ b/web/input/input-state-container.react.js
@@ -1,1327 +1,1330 @@
 // @flow
 
 import { detect as detectBrowser } from 'detect-browser';
 import invariant from 'invariant';
 import _groupBy from 'lodash/fp/groupBy';
 import _keyBy from 'lodash/fp/keyBy';
 import _omit from 'lodash/fp/omit';
 import _partition from 'lodash/fp/partition';
 import _sortBy from 'lodash/fp/sortBy';
 import _memoize from 'lodash/memoize';
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 import { createSelector } from 'reselect';
 
 import {
   createLocalMessageActionType,
   sendMultimediaMessageActionTypes,
   legacySendMultimediaMessage,
   sendTextMessageActionTypes,
   sendTextMessage,
 } from 'lib/actions/message-actions';
 import { queueReportsActionType } from 'lib/actions/report-actions';
 import { newThread } from 'lib/actions/thread-actions';
 import {
   uploadMultimedia,
   updateMultimediaMessageMediaActionType,
   deleteUpload,
   type MultimediaUploadCallbacks,
   type MultimediaUploadExtras,
 } from 'lib/actions/upload-actions';
-import { useModalContext } from 'lib/components/modal-provider.react';
+import {
+  useModalContext,
+  type PushModal,
+} from 'lib/components/modal-provider.react';
 import { getNextLocalUploadID } from 'lib/media/media-utils';
 import { pendingToRealizedThreadIDsSelector } from 'lib/selectors/thread-selectors';
 import {
   createMediaMessageInfo,
   localIDPrefix,
 } from 'lib/shared/message-utils';
 import {
   createRealThreadFromPendingThread,
   draftKeyFromThreadID,
   threadIsPending,
 } from 'lib/shared/thread-utils';
 import type { CalendarQuery } from 'lib/types/entry-types';
 import type {
   UploadMultimediaResult,
   MediaMissionStep,
   MediaMissionFailure,
   MediaMissionResult,
   MediaMission,
 } from 'lib/types/media-types';
 import {
   messageTypes,
   type RawMessageInfo,
   type RawMultimediaMessageInfo,
   type SendMessageResult,
   type SendMessagePayload,
 } from 'lib/types/message-types';
 import type { RawImagesMessageInfo } from 'lib/types/messages/images';
 import type { RawMediaMessageInfo } from 'lib/types/messages/media';
 import type { RawTextMessageInfo } from 'lib/types/messages/text';
 import type { Dispatch } from 'lib/types/redux-types';
 import { reportTypes } from 'lib/types/report-types';
 import type {
   ClientNewThreadRequest,
   NewThreadResult,
   ThreadInfo,
 } from 'lib/types/thread-types';
 import {
   type DispatchActionPromise,
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils';
 import { getConfig } from 'lib/utils/config';
 import { getMessageForException, cloneError } from 'lib/utils/errors';
 
 import { validateFile, preloadImage } from '../media/media-utils';
 import InvalidUploadModal from '../modals/chat/invalid-upload.react';
 import { useSelector } from '../redux/redux-utils';
 import { nonThreadCalendarQuery } from '../selectors/nav-selectors';
 import { type PendingMultimediaUpload, InputStateContext } from './input-state';
 
 type BaseProps = {
   +children: React.Node,
 };
 type Props = {
   ...BaseProps,
   +activeChatThreadID: ?string,
   +drafts: { +[key: string]: string },
   +viewerID: ?string,
   +messageStoreMessages: { +[id: string]: RawMessageInfo },
   +exifRotate: boolean,
   +pendingRealizedThreadIDs: $ReadOnlyMap<string, string>,
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
   +calendarQuery: () => CalendarQuery,
   +uploadMultimedia: (
     multimedia: Object,
     extras: MultimediaUploadExtras,
     callbacks: MultimediaUploadCallbacks,
   ) => Promise<UploadMultimediaResult>,
   +deleteUpload: (id: string) => Promise<void>,
   +sendMultimediaMessage: (
     threadID: string,
     localID: string,
     mediaIDs: $ReadOnlyArray<string>,
   ) => Promise<SendMessageResult>,
   +sendTextMessage: (
     threadID: string,
     localID: string,
     text: string,
   ) => Promise<SendMessageResult>,
   +newThread: (request: ClientNewThreadRequest) => Promise<NewThreadResult>,
-  +pushModal: (modal: React.Node) => void,
+  +pushModal: PushModal,
   +sendCallbacks: $ReadOnlyArray<() => mixed>,
   +registerSendCallback: (() => mixed) => void,
   +unregisterSendCallback: (() => mixed) => void,
 };
 type State = {
   +pendingUploads: {
     [threadID: string]: { [localUploadID: string]: PendingMultimediaUpload },
   },
   +textCursorPositions: { [threadID: string]: number },
 };
 
 type PropsAndState = {
   ...Props,
   ...State,
 };
 class InputStateContainer extends React.PureComponent<Props, State> {
   state: State = {
     pendingUploads: {},
     textCursorPositions: {},
   };
   replyCallbacks: Array<(message: string) => void> = [];
   pendingThreadCreations = new Map<string, Promise<string>>();
 
   static reassignToRealizedThreads<T>(
     state: { +[threadID: string]: T },
     props: Props,
   ): ?{ [threadID: string]: T } {
     const newState = {};
     let updated = false;
     for (const threadID in state) {
       const newThreadID =
         props.pendingRealizedThreadIDs.get(threadID) ?? threadID;
       if (newThreadID !== threadID) {
         updated = true;
       }
       newState[newThreadID] = state[threadID];
     }
     return updated ? newState : null;
   }
 
   static getDerivedStateFromProps(props: Props, state: State) {
     const pendingUploads = InputStateContainer.reassignToRealizedThreads(
       state.pendingUploads,
       props,
     );
     const textCursorPositions = InputStateContainer.reassignToRealizedThreads(
       state.textCursorPositions,
       props,
     );
 
     if (!pendingUploads && !textCursorPositions) {
       return null;
     }
 
     const stateUpdate = {};
     if (pendingUploads) {
       stateUpdate.pendingUploads = pendingUploads;
     }
     if (textCursorPositions) {
       stateUpdate.textCursorPositions = textCursorPositions;
     }
     return stateUpdate;
   }
 
   static completedMessageIDs(state: State) {
     const completed = new Map();
     for (const threadID in state.pendingUploads) {
       const pendingUploads = state.pendingUploads[threadID];
       for (const localUploadID in pendingUploads) {
         const upload = pendingUploads[localUploadID];
         const { messageID, serverID, failed } = upload;
         if (!messageID || !messageID.startsWith(localIDPrefix)) {
           continue;
         }
         if (!serverID || failed) {
           completed.set(messageID, false);
           continue;
         }
         if (completed.get(messageID) === undefined) {
           completed.set(messageID, true);
         }
       }
     }
     const messageIDs = new Set();
     for (const [messageID, isCompleted] of completed) {
       if (isCompleted) {
         messageIDs.add(messageID);
       }
     }
     return messageIDs;
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (this.props.viewerID !== prevProps.viewerID) {
       this.setState({ pendingUploads: {} });
       return;
     }
 
     const previouslyAssignedMessageIDs = new Set();
     for (const threadID in prevState.pendingUploads) {
       const pendingUploads = prevState.pendingUploads[threadID];
       for (const localUploadID in pendingUploads) {
         const { messageID } = pendingUploads[localUploadID];
         if (messageID) {
           previouslyAssignedMessageIDs.add(messageID);
         }
       }
     }
 
     const newlyAssignedUploads = new Map();
     for (const threadID in this.state.pendingUploads) {
       const pendingUploads = this.state.pendingUploads[threadID];
       for (const localUploadID in pendingUploads) {
         const upload = pendingUploads[localUploadID];
         const { messageID } = upload;
         if (
           !messageID ||
           !messageID.startsWith(localIDPrefix) ||
           previouslyAssignedMessageIDs.has(messageID)
         ) {
           continue;
         }
         let assignedUploads = newlyAssignedUploads.get(messageID);
         if (!assignedUploads) {
           assignedUploads = { threadID, uploads: [] };
           newlyAssignedUploads.set(messageID, assignedUploads);
         }
         assignedUploads.uploads.push(upload);
       }
     }
 
     const newMessageInfos = new Map();
     for (const [messageID, assignedUploads] of newlyAssignedUploads) {
       const { uploads, threadID } = assignedUploads;
       const creatorID = this.props.viewerID;
       invariant(creatorID, 'need viewer ID in order to send a message');
       const media = uploads.map(
         ({ localID, serverID, uri, mediaType, dimensions }) => {
           // We can get into this state where dimensions are null if the user is
           // uploading a file type that the browser can't render. In that case
           // we fake the dimensions here while we wait for the server to tell us
           // the true dimensions. We actually don't use the dimensions on the
           // web side currently, but if we ever change that (for instance if we
           // want to render a properly sized loading overlay like we do on
           // native), 0,0 is probably a good default.
           const shimmedDimensions = dimensions ?? { height: 0, width: 0 };
           invariant(
             mediaType === 'photo',
             "web InputStateContainer can't handle video",
           );
           return {
             id: serverID ? serverID : localID,
             uri,
             type: 'photo',
             dimensions: shimmedDimensions,
           };
         },
       );
       const messageInfo = createMediaMessageInfo({
         localID: messageID,
         threadID,
         creatorID,
         media,
       });
       newMessageInfos.set(messageID, messageInfo);
     }
 
     const currentlyCompleted = InputStateContainer.completedMessageIDs(
       this.state,
     );
     const previouslyCompleted = InputStateContainer.completedMessageIDs(
       prevState,
     );
     for (const messageID of currentlyCompleted) {
       if (previouslyCompleted.has(messageID)) {
         continue;
       }
       let rawMessageInfo = newMessageInfos.get(messageID);
       if (rawMessageInfo) {
         newMessageInfos.delete(messageID);
       } else {
         rawMessageInfo = this.getRawMultimediaMessageInfo(messageID);
       }
       this.sendMultimediaMessage(rawMessageInfo);
     }
 
     for (const [, messageInfo] of newMessageInfos) {
       this.props.dispatch({
         type: createLocalMessageActionType,
         payload: messageInfo,
       });
     }
   }
 
   getRawMultimediaMessageInfo(
     localMessageID: string,
   ): RawMultimediaMessageInfo {
     const rawMessageInfo = this.props.messageStoreMessages[localMessageID];
     invariant(rawMessageInfo, `rawMessageInfo ${localMessageID} should exist`);
     invariant(
       rawMessageInfo.type === messageTypes.IMAGES ||
         rawMessageInfo.type === messageTypes.MULTIMEDIA,
       `rawMessageInfo ${localMessageID} should be multimedia`,
     );
     return rawMessageInfo;
   }
 
   async sendMultimediaMessage(messageInfo: RawMultimediaMessageInfo) {
     if (!threadIsPending(messageInfo.threadID)) {
       this.props.dispatchActionPromise(
         sendMultimediaMessageActionTypes,
         this.sendMultimediaMessageAction(messageInfo),
         undefined,
         messageInfo,
       );
       return;
     }
 
     this.props.dispatch({
       type: sendMultimediaMessageActionTypes.started,
       payload: messageInfo,
     });
 
     let newThreadID = null;
     try {
       const threadCreationPromise = this.pendingThreadCreations.get(
         messageInfo.threadID,
       );
       if (!threadCreationPromise) {
         // When we create or retry multimedia message, we add a promise to
         // pendingThreadCreations map. This promise can be removed in
         // sendMultimediaMessage and sendTextMessage methods. When any of these
         // method remove the promise, it has to be settled. If the promise was
         // fulfilled, this method would be called with realized thread, so we
         // can conclude that the promise was rejected. We don't have enough info
         // here to retry the thread creation, but we can mark the message as
         // failed. Then the retry will be possible and promise will be created
         // again.
         throw new Error('Thread creation failed');
       }
       newThreadID = await threadCreationPromise;
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       this.props.dispatch({
         type: sendMultimediaMessageActionTypes.failed,
         payload: copy,
         error: true,
       });
       return;
     } finally {
       this.pendingThreadCreations.delete(messageInfo.threadID);
     }
 
     const newMessageInfo = {
       ...messageInfo,
       threadID: newThreadID,
       time: Date.now(),
     };
     this.props.dispatchActionPromise(
       sendMultimediaMessageActionTypes,
       this.sendMultimediaMessageAction(newMessageInfo),
       undefined,
       newMessageInfo,
     );
   }
 
   async sendMultimediaMessageAction(
     messageInfo: RawMultimediaMessageInfo,
   ): Promise<SendMessagePayload> {
     const { localID, threadID } = messageInfo;
     invariant(
       localID !== null && localID !== undefined,
       'localID should be set',
     );
     const mediaIDs = [];
     for (const { id } of messageInfo.media) {
       mediaIDs.push(id);
     }
     try {
       const result = await this.props.sendMultimediaMessage(
         threadID,
         localID,
         mediaIDs,
       );
       this.setState(prevState => {
         const newThreadID = this.getRealizedOrPendingThreadID(threadID);
         const prevUploads = prevState.pendingUploads[newThreadID];
         const newUploads = {};
         for (const localUploadID in prevUploads) {
           const upload = prevUploads[localUploadID];
           if (upload.messageID !== localID) {
             newUploads[localUploadID] = upload;
           } else if (!upload.uriIsReal) {
             newUploads[localUploadID] = {
               ...upload,
               messageID: result.id,
             };
           }
         }
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [newThreadID]: newUploads,
           },
         };
       });
       return {
         localID,
         serverID: result.id,
         threadID,
         time: result.time,
         interface: result.interface,
       };
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = localID;
       copy.threadID = threadID;
       throw copy;
     }
   }
 
   async startThreadCreation(threadInfo: ThreadInfo): Promise<string> {
     if (!threadIsPending(threadInfo.id)) {
       return threadInfo.id;
     }
     let threadCreationPromise = this.pendingThreadCreations.get(threadInfo.id);
     if (!threadCreationPromise) {
       const calendarQuery = this.props.calendarQuery();
       threadCreationPromise = createRealThreadFromPendingThread({
         threadInfo,
         dispatchActionPromise: this.props.dispatchActionPromise,
         createNewThread: this.props.newThread,
         sourceMessageID: threadInfo.sourceMessageID,
         viewerID: this.props.viewerID,
         calendarQuery,
       });
       this.pendingThreadCreations.set(threadInfo.id, threadCreationPromise);
     }
     return threadCreationPromise;
   }
 
   inputStateSelector = _memoize((threadID: string) =>
     createSelector(
       (propsAndState: PropsAndState) => propsAndState.pendingUploads[threadID],
       (propsAndState: PropsAndState) =>
         propsAndState.drafts[draftKeyFromThreadID(threadID)],
       (propsAndState: PropsAndState) =>
         propsAndState.textCursorPositions[threadID],
       (
         pendingUploads: ?{ [localUploadID: string]: PendingMultimediaUpload },
         draft: ?string,
         textCursorPosition: ?number,
       ) => {
         let threadPendingUploads = [];
         const assignedUploads = {};
         if (pendingUploads) {
           const [uploadsWithMessageIDs, uploadsWithoutMessageIDs] = _partition(
             'messageID',
           )(pendingUploads);
           threadPendingUploads = _sortBy('localID')(uploadsWithoutMessageIDs);
           const threadAssignedUploads = _groupBy('messageID')(
             uploadsWithMessageIDs,
           );
           for (const messageID in threadAssignedUploads) {
             // lodash libdefs don't return $ReadOnlyArray
             assignedUploads[messageID] = [...threadAssignedUploads[messageID]];
           }
         }
         return {
           pendingUploads: threadPendingUploads,
           assignedUploads,
           draft: draft ?? '',
           textCursorPosition: textCursorPosition ?? 0,
           appendFiles: (files: $ReadOnlyArray<File>) =>
             this.appendFiles(threadID, files),
           cancelPendingUpload: (localUploadID: string) =>
             this.cancelPendingUpload(threadID, localUploadID),
           sendTextMessage: (
             messageInfo: RawTextMessageInfo,
             threadInfo: ThreadInfo,
           ) => this.sendTextMessage(messageInfo, threadInfo),
           createMultimediaMessage: (localID: number, threadInfo: ThreadInfo) =>
             this.createMultimediaMessage(localID, threadInfo),
           setDraft: (newDraft: string) => this.setDraft(threadID, newDraft),
           setTextCursorPosition: (newPosition: number) =>
             this.setTextCursorPosition(threadID, newPosition),
           messageHasUploadFailure: (localMessageID: string) =>
             this.messageHasUploadFailure(assignedUploads[localMessageID]),
           retryMultimediaMessage: (
             localMessageID: string,
             threadInfo: ThreadInfo,
           ) =>
             this.retryMultimediaMessage(
               localMessageID,
               threadInfo,
               assignedUploads[localMessageID],
             ),
           addReply: (message: string) => this.addReply(message),
           addReplyListener: this.addReplyListener,
           removeReplyListener: this.removeReplyListener,
           registerSendCallback: this.props.registerSendCallback,
           unregisterSendCallback: this.props.unregisterSendCallback,
         };
       },
     ),
   );
 
   getRealizedOrPendingThreadID(threadID: string): string {
     return this.props.pendingRealizedThreadIDs.get(threadID) ?? threadID;
   }
 
   async appendFiles(
     threadID: string,
     files: $ReadOnlyArray<File>,
   ): Promise<boolean> {
     const selectionTime = Date.now();
     const { pushModal } = this.props;
 
     const appendResults = await Promise.all(
       files.map(file => this.appendFile(file, selectionTime)),
     );
 
     if (appendResults.some(({ result }) => !result.success)) {
       pushModal(<InvalidUploadModal />);
 
       const time = Date.now() - selectionTime;
       const reports = [];
       for (const appendResult of appendResults) {
         const { steps } = appendResult;
         let { result } = appendResult;
         let uploadLocalID;
         if (result.success) {
           uploadLocalID = result.pendingUpload.localID;
           result = { success: false, reason: 'web_sibling_validation_failed' };
         }
         const mediaMission = { steps, result, userTime: time, totalTime: time };
         reports.push({ mediaMission, uploadLocalID });
       }
       this.queueMediaMissionReports(reports);
 
       return false;
     }
 
     const newUploads = appendResults.map(({ result }) => {
       invariant(result.success, 'any failed validation should be caught above');
       return result.pendingUpload;
     });
 
     const newUploadsObject = _keyBy('localID')(newUploads);
     this.setState(
       prevState => {
         const newThreadID = this.getRealizedOrPendingThreadID(threadID);
         const prevUploads = prevState.pendingUploads[newThreadID];
         const mergedUploads = prevUploads
           ? { ...prevUploads, ...newUploadsObject }
           : newUploadsObject;
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [newThreadID]: mergedUploads,
           },
         };
       },
       () => this.uploadFiles(threadID, newUploads),
     );
     return true;
   }
 
   async appendFile(
     file: File,
     selectTime: number,
   ): Promise<{
     steps: $ReadOnlyArray<MediaMissionStep>,
     result:
       | MediaMissionFailure
       | { success: true, pendingUpload: PendingMultimediaUpload },
   }> {
     const steps = [
       {
         step: 'web_selection',
         filename: file.name,
         size: file.size,
         mime: file.type,
         selectTime,
       },
     ];
 
     let response;
     const validationStart = Date.now();
     try {
       response = await validateFile(file, this.props.exifRotate);
     } catch (e) {
       return {
         steps,
         result: {
           success: false,
           reason: 'processing_exception',
           time: Date.now() - validationStart,
           exceptionMessage: getMessageForException(e),
         },
       };
     }
     const { steps: validationSteps, result } = response;
     steps.push(...validationSteps);
     if (!result.success) {
       return { steps, result };
     }
 
     const { uri, file: fixedFile, mediaType, dimensions } = result;
     return {
       steps,
       result: {
         success: true,
         pendingUpload: {
           localID: getNextLocalUploadID(),
           serverID: null,
           messageID: null,
           failed: false,
           file: fixedFile,
           mediaType,
           dimensions,
           uri,
           loop: false,
           uriIsReal: false,
           progressPercent: 0,
           abort: null,
           steps,
           selectTime,
         },
       },
     };
   }
 
   uploadFiles(
     threadID: string,
     uploads: $ReadOnlyArray<PendingMultimediaUpload>,
   ) {
     return Promise.all(
       uploads.map(upload => this.uploadFile(threadID, upload)),
     );
   }
 
   async uploadFile(threadID: string, upload: PendingMultimediaUpload) {
     const { selectTime, localID } = upload;
     const steps = [...upload.steps];
     let userTime;
 
     const sendReport = (missionResult: MediaMissionResult) => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const latestUpload = this.state.pendingUploads[newThreadID][localID];
       invariant(
         latestUpload,
         `pendingUpload ${localID} for ${newThreadID} missing in sendReport`,
       );
       const { serverID, messageID } = latestUpload;
       const totalTime = Date.now() - selectTime;
       userTime = userTime ? userTime : totalTime;
       const mission = { steps, result: missionResult, totalTime, userTime };
       this.queueMediaMissionReports([
         {
           mediaMission: mission,
           uploadLocalID: localID,
           uploadServerID: serverID,
           messageLocalID: messageID,
         },
       ]);
     };
 
     let uploadResult, uploadExceptionMessage;
     const uploadStart = Date.now();
     try {
       uploadResult = await this.props.uploadMultimedia(
         upload.file,
         { ...upload.dimensions, loop: false },
         {
           onProgress: (percent: number) =>
             this.setProgress(threadID, localID, percent),
           abortHandler: (abort: () => void) =>
             this.handleAbortCallback(threadID, localID, abort),
         },
       );
     } catch (e) {
       uploadExceptionMessage = getMessageForException(e);
       this.handleUploadFailure(threadID, localID);
     }
     userTime = Date.now() - selectTime;
     steps.push({
       step: 'upload',
       success: !!uploadResult,
       exceptionMessage: uploadExceptionMessage,
       time: Date.now() - uploadStart,
       inputFilename: upload.file.name,
       outputMediaType: uploadResult && uploadResult.mediaType,
       outputURI: uploadResult && uploadResult.uri,
       outputDimensions: uploadResult && uploadResult.dimensions,
       outputLoop: uploadResult && uploadResult.loop,
     });
     if (!uploadResult) {
       sendReport({
         success: false,
         reason: 'http_upload_failed',
         exceptionMessage: uploadExceptionMessage,
       });
       return;
     }
     const result = uploadResult;
 
     const successThreadID = this.getRealizedOrPendingThreadID(threadID);
     const uploadAfterSuccess = this.state.pendingUploads[successThreadID][
       localID
     ];
     invariant(
       uploadAfterSuccess,
       `pendingUpload ${localID}/${result.id} for ${successThreadID} missing ` +
         `after upload`,
     );
     if (uploadAfterSuccess.messageID) {
       this.props.dispatch({
         type: updateMultimediaMessageMediaActionType,
         payload: {
           messageID: uploadAfterSuccess.messageID,
           currentMediaID: localID,
           mediaUpdate: {
             id: result.id,
           },
         },
       });
     }
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const currentUpload = uploads[localID];
       invariant(
         currentUpload,
         `pendingUpload ${localID}/${result.id} for ${newThreadID} ` +
           `missing while assigning serverID`,
       );
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localID]: {
               ...currentUpload,
               serverID: result.id,
               abort: null,
             },
           },
         },
       };
     });
 
     const { steps: preloadSteps } = await preloadImage(result.uri);
     steps.push(...preloadSteps);
     sendReport({ success: true });
 
     const preloadThreadID = this.getRealizedOrPendingThreadID(threadID);
     const uploadAfterPreload = this.state.pendingUploads[preloadThreadID][
       localID
     ];
     invariant(
       uploadAfterPreload,
       `pendingUpload ${localID}/${result.id} for ${preloadThreadID} missing ` +
         `after preload`,
     );
     if (uploadAfterPreload.messageID) {
       const { mediaType, uri, dimensions, loop } = result;
       this.props.dispatch({
         type: updateMultimediaMessageMediaActionType,
         payload: {
           messageID: uploadAfterPreload.messageID,
           currentMediaID: uploadAfterPreload.serverID
             ? uploadAfterPreload.serverID
             : uploadAfterPreload.localID,
           mediaUpdate: { type: mediaType, uri, dimensions, loop },
         },
       });
     }
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const currentUpload = uploads[localID];
       invariant(
         currentUpload,
         `pendingUpload ${localID}/${result.id} for ${newThreadID} ` +
           `missing while assigning URI`,
       );
       const { messageID } = currentUpload;
       if (messageID && !messageID.startsWith(localIDPrefix)) {
         const newPendingUploads = _omit([localID])(uploads);
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [newThreadID]: newPendingUploads,
           },
         };
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localID]: {
               ...currentUpload,
               uri: result.uri,
               mediaType: result.mediaType,
               dimensions: result.dimensions,
               uriIsReal: true,
               loop: result.loop,
             },
           },
         },
       };
     });
   }
 
   handleAbortCallback(
     threadID: string,
     localUploadID: string,
     abort: () => void,
   ) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const upload = uploads[localUploadID];
       if (!upload) {
         // The upload has been cancelled before we were even handed the
         // abort function. We should immediately abort.
         abort();
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localUploadID]: {
               ...upload,
               abort,
             },
           },
         },
       };
     });
   }
 
   handleUploadFailure(threadID: string, localUploadID: string) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const upload = uploads[localUploadID];
       if (!upload || !upload.abort || upload.serverID) {
         // The upload has been cancelled or completed before it failed
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localUploadID]: {
               ...upload,
               failed: true,
               progressPercent: 0,
               abort: null,
             },
           },
         },
       };
     });
   }
 
   queueMediaMissionReports(
     partials: $ReadOnlyArray<{
       mediaMission: MediaMission,
       uploadLocalID?: ?string,
       uploadServerID?: ?string,
       messageLocalID?: ?string,
     }>,
   ) {
     const reports = partials.map(
       ({ mediaMission, uploadLocalID, uploadServerID, messageLocalID }) => ({
         type: reportTypes.MEDIA_MISSION,
         time: Date.now(),
         platformDetails: getConfig().platformDetails,
         mediaMission,
         uploadServerID,
         uploadLocalID,
         messageLocalID,
       }),
     );
     this.props.dispatch({ type: queueReportsActionType, payload: { reports } });
   }
 
   cancelPendingUpload(threadID: string, localUploadID: string) {
     let revokeURL, abortRequest;
     this.setState(
       prevState => {
         const newThreadID = this.getRealizedOrPendingThreadID(threadID);
         const currentPendingUploads = prevState.pendingUploads[newThreadID];
         if (!currentPendingUploads) {
           return {};
         }
         const pendingUpload = currentPendingUploads[localUploadID];
         if (!pendingUpload) {
           return {};
         }
         if (!pendingUpload.uriIsReal) {
           revokeURL = pendingUpload.uri;
         }
         if (pendingUpload.abort) {
           abortRequest = pendingUpload.abort;
         }
         if (pendingUpload.serverID) {
           this.props.deleteUpload(pendingUpload.serverID);
         }
         const newPendingUploads = _omit([localUploadID])(currentPendingUploads);
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [newThreadID]: newPendingUploads,
           },
         };
       },
       () => {
         if (revokeURL) {
           URL.revokeObjectURL(revokeURL);
         }
         if (abortRequest) {
           abortRequest();
         }
       },
     );
   }
 
   async sendTextMessage(
     messageInfo: RawTextMessageInfo,
     threadInfo: ThreadInfo,
   ) {
     this.props.sendCallbacks.forEach(callback => callback());
 
     if (!threadIsPending(threadInfo.id)) {
       this.props.dispatchActionPromise(
         sendTextMessageActionTypes,
         this.sendTextMessageAction(messageInfo),
         undefined,
         messageInfo,
       );
       return;
     }
 
     this.props.dispatch({
       type: sendTextMessageActionTypes.started,
       payload: messageInfo,
     });
 
     let newThreadID = null;
     try {
       newThreadID = await this.startThreadCreation(threadInfo);
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       this.props.dispatch({
         type: sendTextMessageActionTypes.failed,
         payload: copy,
         error: true,
       });
       return;
     } finally {
       this.pendingThreadCreations.delete(threadInfo.id);
     }
 
     const newMessageInfo = {
       ...messageInfo,
       threadID: newThreadID,
       time: Date.now(),
     };
     this.props.dispatchActionPromise(
       sendTextMessageActionTypes,
       this.sendTextMessageAction(newMessageInfo),
       undefined,
       newMessageInfo,
     );
   }
 
   async sendTextMessageAction(
     messageInfo: RawTextMessageInfo,
   ): Promise<SendMessagePayload> {
     try {
       const { localID } = messageInfo;
       invariant(
         localID !== null && localID !== undefined,
         'localID should be set',
       );
       const result = await this.props.sendTextMessage(
         messageInfo.threadID,
         localID,
         messageInfo.text,
       );
       return {
         localID,
         serverID: result.id,
         threadID: messageInfo.threadID,
         time: result.time,
         interface: result.interface,
       };
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       throw copy;
     }
   }
 
   // Creates a MultimediaMessage from the unassigned pending uploads,
   // if there are any
   createMultimediaMessage(localID: number, threadInfo: ThreadInfo) {
     const localMessageID = `${localIDPrefix}${localID}`;
     this.startThreadCreation(threadInfo);
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadInfo.id);
       const currentPendingUploads = prevState.pendingUploads[newThreadID];
       if (!currentPendingUploads) {
         return {};
       }
       const newPendingUploads = {};
       let uploadAssigned = false;
       for (const localUploadID in currentPendingUploads) {
         const upload = currentPendingUploads[localUploadID];
         if (upload.messageID) {
           newPendingUploads[localUploadID] = upload;
         } else {
           const newUpload = {
             ...upload,
             messageID: localMessageID,
           };
           uploadAssigned = true;
           newPendingUploads[localUploadID] = newUpload;
         }
       }
       if (!uploadAssigned) {
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: newPendingUploads,
         },
       };
     });
   }
 
   setDraft(threadID: string, draft: string) {
     const newThreadID = this.getRealizedOrPendingThreadID(threadID);
     this.props.dispatch({
       type: 'UPDATE_DRAFT',
       payload: {
         key: draftKeyFromThreadID(newThreadID),
         text: draft,
       },
     });
   }
 
   setTextCursorPosition(threadID: string, newPosition: number) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       return {
         textCursorPositions: {
           ...prevState.textCursorPositions,
           [newThreadID]: newPosition,
         },
       };
     });
   }
 
   setProgress(
     threadID: string,
     localUploadID: string,
     progressPercent: number,
   ) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const pendingUploads = prevState.pendingUploads[newThreadID];
       if (!pendingUploads) {
         return {};
       }
       const pendingUpload = pendingUploads[localUploadID];
       if (!pendingUpload) {
         return {};
       }
       const newPendingUploads = {
         ...pendingUploads,
         [localUploadID]: {
           ...pendingUpload,
           progressPercent,
         },
       };
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: newPendingUploads,
         },
       };
     });
   }
 
   messageHasUploadFailure(
     pendingUploads: ?$ReadOnlyArray<PendingMultimediaUpload>,
   ) {
     if (!pendingUploads) {
       return false;
     }
     return pendingUploads.some(upload => upload.failed);
   }
 
   retryMultimediaMessage(
     localMessageID: string,
     threadInfo: ThreadInfo,
     pendingUploads: ?$ReadOnlyArray<PendingMultimediaUpload>,
   ) {
     const rawMessageInfo = this.getRawMultimediaMessageInfo(localMessageID);
     let newRawMessageInfo;
     // This conditional is for Flow
     if (rawMessageInfo.type === messageTypes.MULTIMEDIA) {
       newRawMessageInfo = ({
         ...rawMessageInfo,
         time: Date.now(),
       }: RawMediaMessageInfo);
     } else {
       newRawMessageInfo = ({
         ...rawMessageInfo,
         time: Date.now(),
       }: RawImagesMessageInfo);
     }
 
     this.startThreadCreation(threadInfo);
 
     const completed = InputStateContainer.completedMessageIDs(this.state);
     if (completed.has(localMessageID)) {
       this.sendMultimediaMessage(newRawMessageInfo);
       return;
     }
 
     if (!pendingUploads) {
       return;
     }
 
     // We're not actually starting the send here,
     // we just use this action to update the message's timestamp in Redux
     this.props.dispatch({
       type: sendMultimediaMessageActionTypes.started,
       payload: newRawMessageInfo,
     });
 
     const uploadIDsToRetry = new Set();
     const uploadsToRetry = [];
     for (const pendingUpload of pendingUploads) {
       const { serverID, messageID, localID, abort } = pendingUpload;
       if (serverID || messageID !== localMessageID) {
         continue;
       }
       if (abort) {
         abort();
       }
       uploadIDsToRetry.add(localID);
       uploadsToRetry.push(pendingUpload);
     }
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadInfo.id);
       const prevPendingUploads = prevState.pendingUploads[newThreadID];
       if (!prevPendingUploads) {
         return {};
       }
       const newPendingUploads = {};
       let pendingUploadChanged = false;
       for (const localID in prevPendingUploads) {
         const pendingUpload = prevPendingUploads[localID];
         if (uploadIDsToRetry.has(localID) && !pendingUpload.serverID) {
           newPendingUploads[localID] = {
             ...pendingUpload,
             failed: false,
             progressPercent: 0,
             abort: null,
           };
           pendingUploadChanged = true;
         } else {
           newPendingUploads[localID] = pendingUpload;
         }
       }
       if (!pendingUploadChanged) {
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: newPendingUploads,
         },
       };
     });
 
     this.uploadFiles(threadInfo.id, uploadsToRetry);
   }
 
   addReply = (message: string) => {
     this.replyCallbacks.forEach(addReplyCallback => addReplyCallback(message));
   };
 
   addReplyListener = (callbackReply: (message: string) => void) => {
     this.replyCallbacks.push(callbackReply);
   };
 
   removeReplyListener = (callbackReply: (message: string) => void) => {
     this.replyCallbacks = this.replyCallbacks.filter(
       candidate => candidate !== callbackReply,
     );
   };
 
   render() {
     const { activeChatThreadID } = this.props;
     const inputState = activeChatThreadID
       ? this.inputStateSelector(activeChatThreadID)({
           ...this.state,
           ...this.props,
         })
       : null;
     return (
       <InputStateContext.Provider value={inputState}>
         {this.props.children}
       </InputStateContext.Provider>
     );
   }
 }
 
 const ConnectedInputStateContainer: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedInputStateContainer(props) {
     const exifRotate = useSelector(state => {
       const browser = detectBrowser(state.userAgent);
       return (
         !browser || (browser.name !== 'safari' && browser.name !== 'chrome')
       );
     });
     const activeChatThreadID = useSelector(
       state => state.navInfo.activeChatThreadID,
     );
     const drafts = useSelector(state => state.draftStore.drafts);
     const viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
     const messageStoreMessages = useSelector(
       state => state.messageStore.messages,
     );
     const pendingToRealizedThreadIDs = useSelector(state =>
       pendingToRealizedThreadIDsSelector(state.threadStore.threadInfos),
     );
     const calendarQuery = useSelector(nonThreadCalendarQuery);
     const callUploadMultimedia = useServerCall(uploadMultimedia);
     const callDeleteUpload = useServerCall(deleteUpload);
     const callSendMultimediaMessage = useServerCall(
       legacySendMultimediaMessage,
     );
     const callSendTextMessage = useServerCall(sendTextMessage);
     const callNewThread = useServerCall(newThread);
     const dispatch = useDispatch();
     const dispatchActionPromise = useDispatchActionPromise();
     const modalContext = useModalContext();
 
     const [sendCallbacks, setSendCallbacks] = React.useState<
       $ReadOnlyArray<() => mixed>,
     >([]);
     const registerSendCallback = React.useCallback((callback: () => mixed) => {
       setSendCallbacks(prevCallbacks => [...prevCallbacks, callback]);
     }, []);
     const unregisterSendCallback = React.useCallback(
       (callback: () => mixed) => {
         setSendCallbacks(prevCallbacks =>
           prevCallbacks.filter(candidate => candidate !== callback),
         );
       },
       [],
     );
 
     return (
       <InputStateContainer
         {...props}
         activeChatThreadID={activeChatThreadID}
         drafts={drafts}
         viewerID={viewerID}
         messageStoreMessages={messageStoreMessages}
         exifRotate={exifRotate}
         pendingRealizedThreadIDs={pendingToRealizedThreadIDs}
         calendarQuery={calendarQuery}
         uploadMultimedia={callUploadMultimedia}
         deleteUpload={callDeleteUpload}
         sendMultimediaMessage={callSendMultimediaMessage}
         sendTextMessage={callSendTextMessage}
         newThread={callNewThread}
         dispatch={dispatch}
         dispatchActionPromise={dispatchActionPromise}
         pushModal={modalContext.pushModal}
         sendCallbacks={sendCallbacks}
         registerSendCallback={registerSendCallback}
         unregisterSendCallback={unregisterSendCallback}
       />
     );
   },
 );
 
 export default ConnectedInputStateContainer;
diff --git a/web/media/multimedia.react.js b/web/media/multimedia.react.js
index 14979e0c2..9dd1ceb14 100644
--- a/web/media/multimedia.react.js
+++ b/web/media/multimedia.react.js
@@ -1,151 +1,154 @@
 // @flow
 
 import classNames from 'classnames';
 import invariant from 'invariant';
 import * as React from 'react';
 import { CircularProgressbar } from 'react-circular-progressbar';
 import 'react-circular-progressbar/dist/styles.css';
 import {
   XCircle as XCircleIcon,
   AlertCircle as AlertCircleIcon,
 } from 'react-feather';
 
-import { useModalContext } from 'lib/components/modal-provider.react';
+import {
+  useModalContext,
+  type PushModal,
+} from 'lib/components/modal-provider.react';
 import type { MediaType } from 'lib/types/media-types';
 
 import Button from '../components/button.react';
 import { type PendingMultimediaUpload } from '../input/input-state';
 import css from './media.css';
 import MultimediaModal from './multimedia-modal.react';
 
 type BaseProps = {
   +uri: string,
   +type: MediaType,
   +pendingUpload?: ?PendingMultimediaUpload,
   +remove?: (uploadID: string) => void,
   +multimediaCSSClass: string,
   +multimediaImageCSSClass: string,
 };
 type Props = {
   ...BaseProps,
-  +pushModal: (modal: React.Node) => void,
+  +pushModal: PushModal,
 };
 
 class Multimedia extends React.PureComponent<Props> {
   componentDidUpdate(prevProps: Props) {
     const { uri, pendingUpload } = this.props;
     if (uri === prevProps.uri) {
       return;
     }
     if (
       (!pendingUpload || pendingUpload.uriIsReal) &&
       (!prevProps.pendingUpload || !prevProps.pendingUpload.uriIsReal)
     ) {
       URL.revokeObjectURL(prevProps.uri);
     }
   }
 
   render(): React.Node {
     let progressIndicator, errorIndicator, removeButton;
 
     const {
       pendingUpload,
       remove,
       type,
       uri,
       multimediaImageCSSClass,
       multimediaCSSClass,
     } = this.props;
     if (pendingUpload) {
       const { progressPercent, failed } = pendingUpload;
 
       if (progressPercent !== 0 && progressPercent !== 1) {
         const outOfHundred = Math.floor(progressPercent * 100);
         const text = `${outOfHundred}%`;
         progressIndicator = (
           <CircularProgressbar
             value={outOfHundred}
             text={text}
             background
             backgroundPadding={6}
             className={css.progressIndicator}
           />
         );
       }
 
       if (failed) {
         errorIndicator = (
           <AlertCircleIcon className={css.uploadError} size={36} />
         );
       }
 
       if (remove) {
         removeButton = (
           <Button onClick={this.remove}>
             <XCircleIcon className={css.removeUpload} />
           </Button>
         );
       }
     }
 
     const imageContainerClasses = [
       css.multimediaImage,
       multimediaImageCSSClass,
     ];
     imageContainerClasses.push(css.clickable);
 
     let mediaNode;
     if (type === 'photo') {
       mediaNode = (
         <Button
           className={classNames(imageContainerClasses)}
           onClick={this.onClick}
         >
           <img src={uri} />
           {removeButton}
         </Button>
       );
     } else {
       mediaNode = (
         <div className={classNames(imageContainerClasses)}>
           <video controls>
             <source src={uri} />
           </video>
         </div>
       );
     }
 
     const containerClasses = [css.multimedia, multimediaCSSClass];
     return (
       <span className={classNames(containerClasses)}>
         {mediaNode}
         {progressIndicator}
         {errorIndicator}
       </span>
     );
   }
 
   remove: (event: SyntheticEvent<HTMLElement>) => void = event => {
     event.stopPropagation();
     const { remove, pendingUpload } = this.props;
     invariant(
       remove && pendingUpload,
       'Multimedia cannot be removed as either remove or pendingUpload ' +
         'are unspecified',
     );
     remove(pendingUpload.localID);
   };
 
   onClick: () => void = () => {
     const { pushModal, uri } = this.props;
     pushModal(<MultimediaModal uri={uri} />);
   };
 }
 
 function ConnectedMultimediaContainer(props: BaseProps): React.Node {
   const modalContext = useModalContext();
 
   return <Multimedia {...props} pushModal={modalContext.pushModal} />;
 }
 
 export default ConnectedMultimediaContainer;
diff --git a/web/modals/account/log-in-first-modal.react.js b/web/modals/account/log-in-first-modal.react.js
index ff19568ad..87fcb280c 100644
--- a/web/modals/account/log-in-first-modal.react.js
+++ b/web/modals/account/log-in-first-modal.react.js
@@ -1,60 +1,63 @@
 // @flow
 
 import * as React from 'react';
 
-import { useModalContext } from 'lib/components/modal-provider.react';
+import {
+  useModalContext,
+  type PushModal,
+} from 'lib/components/modal-provider.react';
 
 import css from '../../style.css';
 import Modal from '../modal.react';
 import LogInModal from './log-in-modal.react';
 
 type BaseProps = {
   +inOrderTo: string,
 };
 
 type Props = {
   ...BaseProps,
-  +pushModal: (modal: React.Node) => void,
+  +pushModal: PushModal,
   +popModal: () => void,
 };
 
 class LogInFirstModal extends React.PureComponent<Props> {
   render(): React.Node {
     return (
       <Modal name="Log in" onClose={this.props.popModal}>
         <div className={css['modal-body']}>
           <p>
             {`In order to ${this.props.inOrderTo}, you'll first need to `}
             <a
               href="#"
               className={css['show-login-modal']}
               onClick={this.onClickLogIn}
             >
               log in
             </a>
             {'.'}
           </p>
         </div>
       </Modal>
     );
   }
 
   onClickLogIn: (event: SyntheticEvent<HTMLAnchorElement>) => void = event => {
     event.preventDefault();
     this.props.pushModal(<LogInModal />);
   };
 }
 
 function ConnectedLoginFirstModal(props: BaseProps): React.Node {
   const modalContext = useModalContext();
 
   return (
     <LogInFirstModal
       {...props}
       pushModal={modalContext.pushModal}
       popModal={modalContext.popModal}
     />
   );
 }
 
 export default ConnectedLoginFirstModal;
diff --git a/web/settings/relationship/block-list-modal.react.js b/web/settings/relationship/block-list-modal.react.js
index 5eb0e9eef..dd7a1a237 100644
--- a/web/settings/relationship/block-list-modal.react.js
+++ b/web/settings/relationship/block-list-modal.react.js
@@ -1,50 +1,49 @@
 // @flow
 
 import * as React from 'react';
 
 import { useModalContext } from 'lib/components/modal-provider.react';
 import { userRelationshipStatus } from 'lib/types/relationship-types';
 import type { AccountUserInfo } from 'lib/types/user-types';
 
 import BlockListRow from './block-list-row.react';
 import BlockUsersModal from './block-users-modal.react';
 import UserListModal from './user-list-modal.react';
 
 function filterUser(userInfo: AccountUserInfo) {
   return (
     userInfo.relationshipStatus === userRelationshipStatus.BLOCKED_BY_VIEWER ||
     userInfo.relationshipStatus === userRelationshipStatus.BOTH_BLOCKED
   );
 }
 
 function usersComparator(user1: AccountUserInfo, user2: AccountUserInfo) {
   return user1.username.localeCompare(user2.username);
 }
 
 type Props = {
   +onClose: () => void,
 };
 
 function BlockListModal(props: Props): React.Node {
   const { onClose } = props;
 
   const { pushModal } = useModalContext();
-  const openBlockUsersModal = React.useCallback(
-    () => pushModal(<BlockUsersModal onClose={onClose} />),
-    [onClose, pushModal],
-  );
+  const openBlockUsersModal = React.useCallback(() => {
+    pushModal(<BlockUsersModal onClose={onClose} />);
+  }, [onClose, pushModal]);
 
   return (
     <UserListModal
       onClose={onClose}
       name="Block List"
       userRowComponent={BlockListRow}
       filterUser={filterUser}
       usersComparator={usersComparator}
       buttonLabel="Block Users"
       onAddUsersClick={openBlockUsersModal}
     />
   );
 }
 
 export default BlockListModal;
diff --git a/web/settings/relationship/friend-list-modal.react.js b/web/settings/relationship/friend-list-modal.react.js
index bb8158329..066ac8fa5 100644
--- a/web/settings/relationship/friend-list-modal.react.js
+++ b/web/settings/relationship/friend-list-modal.react.js
@@ -1,59 +1,58 @@
 // @flow
 
 import * as React from 'react';
 
 import { useModalContext } from 'lib/components/modal-provider.react';
 import { userRelationshipStatus } from 'lib/types/relationship-types';
 import type { AccountUserInfo } from 'lib/types/user-types';
 
 import AddFriendsModal from './add-friends-modal.react';
 import FriendListRow from './friend-list-row.react';
 import UserListModal from './user-list-modal.react';
 
 const relationships = [
   userRelationshipStatus.REQUEST_RECEIVED,
   userRelationshipStatus.REQUEST_SENT,
   userRelationshipStatus.FRIEND,
 ];
 
 function filterUser(userInfo: AccountUserInfo) {
   return relationships.includes(userInfo.relationshipStatus);
 }
 
 function usersComparator(user1: AccountUserInfo, user2: AccountUserInfo) {
   if (user1.relationshipStatus === user2.relationshipStatus) {
     return user1.username.localeCompare(user2.username);
   }
   return (
     relationships.indexOf(user1.relationshipStatus) -
     relationships.indexOf(user2.relationshipStatus)
   );
 }
 
 type Props = {
   +onClose: () => void,
 };
 
 function FriendListModal(props: Props): React.Node {
   const { onClose } = props;
 
   const { pushModal } = useModalContext();
-  const openNewFriendsModal = React.useCallback(
-    () => pushModal(<AddFriendsModal onClose={onClose} />),
-    [onClose, pushModal],
-  );
+  const openNewFriendsModal = React.useCallback(() => {
+    pushModal(<AddFriendsModal onClose={onClose} />);
+  }, [onClose, pushModal]);
 
   return (
     <UserListModal
       onClose={onClose}
       name="Friend List"
       userRowComponent={FriendListRow}
       filterUser={filterUser}
       usersComparator={usersComparator}
       buttonLabel="Add New Friends"
       onAddUsersClick={openNewFriendsModal}
     />
   );
 }
 
 export default FriendListModal;