diff --git a/web/app.react.js b/web/app.react.js
index 39d41d185..e72dc8b03 100644
--- a/web/app.react.js
+++ b/web/app.react.js
@@ -1,248 +1,241 @@
 // @flow
 
 import '@fontsource/inter';
 import '@fontsource/inter/500.css';
 import '@fontsource/inter/600.css';
 
 import '@fontsource/ibm-plex-sans';
 import '@fontsource/ibm-plex-sans/500.css';
 import '@fontsource/ibm-plex-sans/600.css';
 
 import 'basscss/css/basscss.min.css';
 import './theme.css';
 import { config as faConfig } from '@fortawesome/fontawesome-svg-core';
 import _isEqual from 'lodash/fp/isEqual';
 import * as React from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useDispatch } from 'react-redux';
 
 import {
   fetchEntriesActionTypes,
   updateCalendarQueryActionTypes,
 } from 'lib/actions/entry-actions';
 import {
   createLoadingStatusSelector,
   combineLoadingStatuses,
 } from 'lib/selectors/loading-selectors';
 import { mostRecentReadThreadSelector } from 'lib/selectors/thread-selectors';
 import { isLoggedIn } from 'lib/selectors/user-selectors';
 import type { LoadingStatus } from 'lib/types/loading-types';
 import type { Dispatch } from 'lib/types/redux-types';
 import { registerConfig } from 'lib/utils/config';
 
 import Calendar from './calendar/calendar.react';
 import Chat from './chat/chat.react';
 import InputStateContainer from './input/input-state-container.react';
 import LoadingIndicator from './loading-indicator.react';
+import { ModalProvider, useModalContext } from './modals/modal-provider.react';
 import DisconnectedBar from './redux/disconnected-bar';
 import DisconnectedBarVisibilityHandler from './redux/disconnected-bar-visibility-handler';
 import FocusHandler from './redux/focus-handler.react';
 import { useSelector } from './redux/redux-utils';
 import VisibilityHandler from './redux/visibility-handler.react';
 import history from './router-history';
 import LeftLayoutAside from './sidebar/left-layout-aside.react';
 import Splash from './splash/splash.react';
 import './typography.css';
 import css from './style.css';
 import { type NavInfo, updateNavInfoActionType } from './types/nav-types';
 import { canonicalURLFromReduxState, navInfoFromURL } from './url-utils';
 
 // We want Webpack's css-loader and style-loader to handle the Fontawesome CSS,
 // so we disable the autoAddCss logic and import the CSS file. Otherwise every
 // icon flashes huge for a second before the CSS is loaded.
 import '@fortawesome/fontawesome-svg-core/styles.css';
 faConfig.autoAddCss = false;
 
 registerConfig({
   // We can't securely cache credentials on web, so we have no way to recover
   // from a cookie invalidation
   resolveInvalidatedCookie: null,
   // We use httponly cookies on web to protect against XSS attacks, so we have
   // no access to the cookies from JavaScript
   setCookieOnRequest: false,
   setSessionIDOnRequest: true,
   // Never reset the calendar range
   calendarRangeInactivityLimit: null,
   platformDetails: { platform: 'web' },
 });
 
 type BaseProps = {
   +location: {
     +pathname: string,
     ...
   },
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +navInfo: NavInfo,
   +entriesLoadingStatus: LoadingStatus,
   +loggedIn: boolean,
   +mostRecentReadThread: ?string,
   +activeThreadCurrentlyUnread: boolean,
   // Redux dispatch functions
   +dispatch: Dispatch,
-};
-type State = {
   +modal: ?React.Node,
 };
-class App extends React.PureComponent<Props, State> {
-  state: State = {
-    modal: null,
-  };
-
+class App extends React.PureComponent<Props> {
   componentDidMount() {
     const {
       navInfo,
       location: { pathname },
       loggedIn,
     } = this.props;
     const newURL = canonicalURLFromReduxState(navInfo, pathname, loggedIn);
     if (pathname !== newURL) {
       history.replace(newURL);
     }
   }
 
   componentDidUpdate(prevProps: Props) {
     const {
       navInfo,
       location: { pathname },
       loggedIn,
     } = this.props;
     if (!_isEqual(navInfo)(prevProps.navInfo)) {
       const newURL = canonicalURLFromReduxState(navInfo, pathname, loggedIn);
       if (newURL !== pathname) {
         history.push(newURL);
       }
     } else if (pathname !== prevProps.location.pathname) {
       const newNavInfo = navInfoFromURL(pathname, { navInfo });
       if (!_isEqual(newNavInfo)(navInfo)) {
         this.props.dispatch({
           type: updateNavInfoActionType,
           payload: newNavInfo,
         });
       }
     } else if (loggedIn !== prevProps.loggedIn) {
       const newURL = canonicalURLFromReduxState(navInfo, pathname, loggedIn);
       if (newURL !== pathname) {
         history.replace(newURL);
       }
     }
   }
 
   render() {
     let content;
     if (this.props.loggedIn) {
       content = this.renderMainContent();
     } else {
-      content = (
-        <Splash setModal={this.setModal} currentModal={this.state.modal} />
-      );
+      content = <Splash />;
     }
     return (
       <DndProvider backend={HTML5Backend}>
         <FocusHandler />
         <VisibilityHandler />
         {content}
-        {this.state.modal}
+        {this.props.modal}
       </DndProvider>
     );
   }
 
   renderMainContent() {
     let mainContent;
     if (this.props.navInfo.tab === 'calendar') {
-      mainContent = (
-        <Calendar setModal={this.setModal} url={this.props.location.pathname} />
-      );
+      mainContent = <Calendar url={this.props.location.pathname} />;
     } else if (this.props.navInfo.tab === 'chat') {
-      mainContent = <Chat setModal={this.setModal} />;
+      mainContent = <Chat />;
     }
 
     return (
       <div className={css.layout}>
         <DisconnectedBarVisibilityHandler />
         <DisconnectedBar />
         <header className={css['header']}>
           <div className={css['main-header']}>
             <h1>Comm</h1>
             <div className={css['upper-right']}>
               <LoadingIndicator
                 status={this.props.entriesLoadingStatus}
                 size="medium"
                 loadingClassName={css['page-loading']}
                 errorClassName={css['page-error']}
               />
             </div>
           </div>
         </header>
-        <InputStateContainer setModal={this.setModal}>
+        <InputStateContainer>
           <div className={css['main-content-container']}>
             <div className={css['main-content']}>{mainContent}</div>
           </div>
         </InputStateContainer>
-        <LeftLayoutAside setModal={this.setModal} />
+        <LeftLayoutAside />
       </div>
     );
   }
-
-  setModal = (modal: ?React.Node) => {
-    this.setState({ modal });
-  };
-
-  clearModal() {
-    this.setModal(null);
-  }
 }
 
 const fetchEntriesLoadingStatusSelector = createLoadingStatusSelector(
   fetchEntriesActionTypes,
 );
 const updateCalendarQueryLoadingStatusSelector = createLoadingStatusSelector(
   updateCalendarQueryActionTypes,
 );
 
 const ConnectedApp: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedApp(props) {
     const activeChatThreadID = useSelector(
       state => state.navInfo.activeChatThreadID,
     );
     const navInfo = useSelector(state => state.navInfo);
 
     const fetchEntriesLoadingStatus = useSelector(
       fetchEntriesLoadingStatusSelector,
     );
     const updateCalendarQueryLoadingStatus = useSelector(
       updateCalendarQueryLoadingStatusSelector,
     );
     const entriesLoadingStatus = combineLoadingStatuses(
       fetchEntriesLoadingStatus,
       updateCalendarQueryLoadingStatus,
     );
 
     const loggedIn = useSelector(isLoggedIn);
     const mostRecentReadThread = useSelector(mostRecentReadThreadSelector);
     const activeThreadCurrentlyUnread = useSelector(
       state =>
         !activeChatThreadID ||
         !!state.threadStore.threadInfos[activeChatThreadID]?.currentUser.unread,
     );
 
     const dispatch = useDispatch();
+    const modalContext = useModalContext();
 
     return (
       <App
         {...props}
         navInfo={navInfo}
         entriesLoadingStatus={entriesLoadingStatus}
         loggedIn={loggedIn}
         mostRecentReadThread={mostRecentReadThread}
         activeThreadCurrentlyUnread={activeThreadCurrentlyUnread}
         dispatch={dispatch}
+        modal={modalContext.modal}
       />
     );
   },
 );
 
-export default ConnectedApp;
+function AppWithProvider(props: BaseProps): React.Node {
+  return (
+    <ModalProvider>
+      <ConnectedApp {...props} />
+    </ModalProvider>
+  );
+}
+
+export default AppWithProvider;
diff --git a/web/calendar/calendar.react.js b/web/calendar/calendar.react.js
index 717e013e5..38343dea8 100644
--- a/web/calendar/calendar.react.js
+++ b/web/calendar/calendar.react.js
@@ -1,290 +1,288 @@
 // @flow
 
 import { faFilter } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import dateFormat from 'dateformat';
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   updateCalendarQueryActionTypes,
   updateCalendarQuery,
 } from 'lib/actions/entry-actions';
 import { currentDaysToEntries } from 'lib/selectors/thread-selectors';
 import { isLoggedIn } from 'lib/selectors/user-selectors';
 import {
   type EntryInfo,
   type CalendarQuery,
   type CalendarQueryUpdateResult,
   type CalendarQueryUpdateStartingPayload,
 } from 'lib/types/entry-types';
 import {
   type DispatchActionPromise,
   useDispatchActionPromise,
   useServerCall,
 } from 'lib/utils/action-utils';
 import {
   getDate,
   dateString,
   startDateForYearAndMonth,
   endDateForYearAndMonth,
 } from 'lib/utils/date-utils';
 
 import { useSelector } from '../redux/redux-utils';
 import {
   yearAssertingSelector,
   monthAssertingSelector,
   webCalendarQuery,
 } from '../selectors/nav-selectors';
 import SWMansionIcon from '../SWMansionIcon.react';
 import type { NavInfo } from '../types/nav-types';
 import { canonicalURLFromReduxState } from '../url-utils';
 import css from './calendar.css';
 import Day from './day.react';
 import FilterPanel from './filter-panel.react';
 
 type BaseProps = {
-  +setModal: (modal: ?React.Node) => void,
   +url: string,
 };
 type Props = {
   ...BaseProps,
   +year: number,
   +month: number,
   +daysToEntries: { +[dayString: string]: EntryInfo[] },
   +navInfo: NavInfo,
   +currentCalendarQuery: () => CalendarQuery,
   +loggedIn: boolean,
   +dispatchActionPromise: DispatchActionPromise,
   +updateCalendarQuery: (
     calendarQuery: CalendarQuery,
     reduxAlreadyUpdated?: boolean,
   ) => Promise<CalendarQueryUpdateResult>,
 };
 type State = {
   filterPanelOpen: boolean,
 };
 class Calendar extends React.PureComponent<Props, State> {
   state: State = {
     filterPanelOpen: false,
   };
 
   getDate(
     dayOfMonth: number,
     monthInput: ?number = undefined,
     yearInput: ?number = undefined,
   ) {
     return getDate(
       yearInput ? yearInput : this.props.year,
       monthInput ? monthInput : this.props.month,
       dayOfMonth,
     );
   }
 
   prevMonthDates() {
     const { year, month } = this.props;
     const lastMonthDate = getDate(year, month - 1, 1);
     const prevYear = lastMonthDate.getFullYear();
     const prevMonth = lastMonthDate.getMonth() + 1;
     return {
       startDate: startDateForYearAndMonth(prevYear, prevMonth),
       endDate: endDateForYearAndMonth(prevYear, prevMonth),
     };
   }
 
   nextMonthDates() {
     const { year, month } = this.props;
     const nextMonthDate = getDate(year, month + 1, 1);
     const nextYear = nextMonthDate.getFullYear();
     const nextMonth = nextMonthDate.getMonth() + 1;
     return {
       startDate: startDateForYearAndMonth(nextYear, nextMonth),
       endDate: endDateForYearAndMonth(nextYear, nextMonth),
     };
   }
 
   render() {
     const { year, month } = this.props;
     const monthName = dateFormat(getDate(year, month, 1), 'mmmm');
     const prevURL = canonicalURLFromReduxState(
       { ...this.props.navInfo, ...this.prevMonthDates() },
       this.props.url,
       this.props.loggedIn,
     );
     const nextURL = canonicalURLFromReduxState(
       { ...this.props.navInfo, ...this.nextMonthDates() },
       this.props.url,
       this.props.loggedIn,
     );
 
     const lastDayOfMonth = this.getDate(0, this.props.month + 1);
     const totalDaysInMonth = lastDayOfMonth.getDate();
     const firstDayToPrint = 1 - this.getDate(1).getDay();
     const lastDayToPrint = totalDaysInMonth + 6 - lastDayOfMonth.getDay();
 
     const rows = [];
     let columns = [];
     let week = 1;
     let tabIndex = 1;
     for (
       let curDayOfMonth = firstDayToPrint;
       curDayOfMonth <= lastDayToPrint;
       curDayOfMonth++
     ) {
       if (curDayOfMonth < 1 || curDayOfMonth > totalDaysInMonth) {
         columns.push(<td key={curDayOfMonth} />);
       } else {
         const dayString = dateString(
           this.props.year,
           this.props.month,
           curDayOfMonth,
         );
         const entries = this.props.daysToEntries[dayString];
         invariant(
           entries,
           'the currentDaysToEntries selector should make sure all dayStrings ' +
             `in the current range have entries, but ${dayString} did not`,
         );
         columns.push(
           <Day
             dayString={dayString}
             entryInfos={entries}
-            setModal={this.props.setModal}
             key={curDayOfMonth}
             startingTabIndex={tabIndex}
           />,
         );
         tabIndex += entries.length;
       }
       if (columns.length === 7) {
         rows.push(<tr key={week++}>{columns}</tr>);
         columns = [];
       }
     }
 
     let filterPanel = null;
     let calendarContentStyle = null;
     let filterButtonStyle = null;
     if (this.state.filterPanelOpen) {
-      filterPanel = <FilterPanel setModal={this.props.setModal} />;
+      filterPanel = <FilterPanel />;
       calendarContentStyle = { marginLeft: '300px' };
       filterButtonStyle = { backgroundColor: 'rgba(0,0,0,0.67)' };
     }
 
     return (
       <div>
         {filterPanel}
         <div className={css.content} style={calendarContentStyle}>
           <div>
             <a
               className={css.filtersButton}
               onClick={this.toggleFilters}
               style={filterButtonStyle}
             >
               <FontAwesomeIcon icon={faFilter} />
               Filters
             </a>
             <nav className={css.nav}>
               <a
                 className={css.monthLink}
                 href={prevURL}
                 onClick={this.onClickPrevURL}
               >
                 <SWMansionIcon icon="chevron-left" size={24} />
               </a>
               <h2 className={css.monthName}>
                 {' '}
                 {monthName} {year}{' '}
               </h2>
               <a
                 className={css.monthLink}
                 href={nextURL}
                 onClick={this.onClickNextURL}
               >
                 <SWMansionIcon icon="chevron-right" size={24} />
               </a>
             </nav>
           </div>
           <table className={css.calendar}>
             <thead>
               <tr>
                 <th>Sunday</th>
                 <th>Monday</th>
                 <th>Tuesday</th>
                 <th>Wednesday</th>
                 <th>Thursday</th>
                 <th>Friday</th>
                 <th>Saturday</th>
               </tr>
             </thead>
             <tbody>{rows}</tbody>
           </table>
         </div>
       </div>
     );
   }
 
   toggleFilters = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     this.setState({ filterPanelOpen: !this.state.filterPanelOpen });
   };
 
   onClickPrevURL = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     const currentCalendarQuery = this.props.currentCalendarQuery();
     const newCalendarQuery = {
       ...currentCalendarQuery,
       ...this.prevMonthDates(),
     };
     this.props.dispatchActionPromise(
       updateCalendarQueryActionTypes,
       this.props.updateCalendarQuery(newCalendarQuery, true),
       undefined,
       ({ calendarQuery: newCalendarQuery }: CalendarQueryUpdateStartingPayload),
     );
   };
 
   onClickNextURL = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     const currentCalendarQuery = this.props.currentCalendarQuery();
     const newCalendarQuery = {
       ...currentCalendarQuery,
       ...this.nextMonthDates(),
     };
     this.props.dispatchActionPromise(
       updateCalendarQueryActionTypes,
       this.props.updateCalendarQuery(newCalendarQuery, true),
       undefined,
       ({ calendarQuery: newCalendarQuery }: CalendarQueryUpdateStartingPayload),
     );
   };
 }
 
 const ConnectedCalendar: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedCalendar(props) {
     const year = useSelector(yearAssertingSelector);
     const month = useSelector(monthAssertingSelector);
     const daysToEntries = useSelector(currentDaysToEntries);
     const navInfo = useSelector(state => state.navInfo);
     const currentCalendarQuery = useSelector(webCalendarQuery);
     const loggedIn = useSelector(isLoggedIn);
     const callUpdateCalendarQuery = useServerCall(updateCalendarQuery);
     const dispatchActionPromise = useDispatchActionPromise();
 
     return (
       <Calendar
         {...props}
         year={year}
         month={month}
         daysToEntries={daysToEntries}
         navInfo={navInfo}
         currentCalendarQuery={currentCalendarQuery}
         loggedIn={loggedIn}
         dispatchActionPromise={dispatchActionPromise}
         updateCalendarQuery={callUpdateCalendarQuery}
       />
     );
   },
 );
 
 export default ConnectedCalendar;
diff --git a/web/calendar/day.react.js b/web/calendar/day.react.js
index 064b01e03..a5da408fc 100644
--- a/web/calendar/day.react.js
+++ b/web/calendar/day.react.js
@@ -1,293 +1,282 @@
 // @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 { 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 { useModalContext } from '../modals/modal-provider.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';
 import ThreadPicker from './thread-picker.react';
 
 type BaseProps = {
   +dayString: string,
   +entryInfos: $ReadOnlyArray<EntryInfo>,
-  +setModal: (modal: ?React.Node) => void,
   +startingTabIndex: number,
 };
 type Props = {
   ...BaseProps,
   +onScreenThreadInfos: $ReadOnlyArray<ThreadInfo>,
   +viewerID: ?string,
   +loggedIn: boolean,
   +nextLocalID: number,
   +timeZone: ?string,
   +dispatch: Dispatch,
+  +setModal: (modal: ?React.Node) => void,
 };
 type State = {
   +pickerOpen: boolean,
   +hovered: boolean,
 };
 class Day extends React.PureComponent<Props, State> {
   state: State = {
     pickerOpen: false,
     hovered: false,
   };
   entryContainer: ?HTMLDivElement;
   entryContainerSpacer: ?HTMLDivElement;
   actionLinks: ?HTMLDivElement;
   entries: Map<string, InnerEntry> = new Map();
 
   static getDerivedStateFromProps(props: Props) {
     if (props.onScreenThreadInfos.length === 0) {
       return { pickerOpen: false };
     }
     return null;
   }
 
   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}
-            setModal={this.props.setModal}
             tabIndex={this.props.startingTabIndex + i}
             key={key}
             innerRef={this.entryRef}
           />
         );
       });
 
     let threadPicker = null;
     if (this.state.pickerOpen) {
       invariant(
         this.props.onScreenThreadInfos.length > 0,
         'onScreenThreadInfos should exist if pickerOpen',
       );
       threadPicker = (
         <ThreadPicker
           createNewEntry={this.createNewEntry}
           closePicker={this.closePicker}
         />
       );
     }
 
     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}
         {threadPicker}
       </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);
   };
 
   closePicker = () => {
     this.setState({ pickerOpen: false });
   };
 
   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.setState({ pickerOpen: true });
     }
   };
 
   createNewEntry = (threadID: string) => {
     if (!this.props.loggedIn) {
-      this.props.setModal(
-        <LogInFirstModal
-          inOrderTo="edit this calendar"
-          setModal={this.props.setModal}
-        />,
-      );
+      this.props.setModal(<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.setModal(
-      <HistoryModal
-        mode="day"
-        dayString={this.props.dayString}
-        onClose={this.clearModal}
-      />,
+      <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();
     }
   };
-
-  clearModal = () => {
-    this.props.setModal(null);
-  };
 }
 
 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 modalContext = useModalContext();
 
     return (
       <Day
         {...props}
         onScreenThreadInfos={onScreenThreadInfos}
         viewerID={viewerID}
         loggedIn={loggedIn}
         nextLocalID={nextLocalID}
         timeZone={timeZone}
         dispatch={dispatch}
+        setModal={modalContext.setModal}
       />
     );
   },
 );
 
 export default ConnectedDay;
diff --git a/web/calendar/entry.react.js b/web/calendar/entry.react.js
index 529f09f96..d369b2283 100644
--- a/web/calendar/entry.react.js
+++ b/web/calendar/entry.react.js
@@ -1,512 +1,500 @@
 // @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 { 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 { useModalContext } from '../modals/modal-provider.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,
-  +setModal: (modal: ?React.Node) => 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>,
+  +setModal: (modal: ?React.Node) => void,
+  +clearModal: () => 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.setModal(
-        <LogInFirstModal
-          inOrderTo="edit this calendar"
-          setModal={this.props.setModal}
-        />,
-      );
+      this.props.setModal(<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.keyCode === 27) {
       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.clearModal();
+          this.props.clearModal();
         };
         this.props.setModal(
-          <ConcurrentModificationModal
-            onClose={this.clearModal}
-            onRefresh={onRefresh}
-          />,
+          <ConcurrentModificationModal onRefresh={onRefresh} />,
         );
       }
       throw e;
     }
   }
 
   onDelete: (event: SyntheticEvent<HTMLAnchorElement>) => void = event => {
     event.preventDefault();
     if (!this.props.loggedIn) {
-      this.props.setModal(
-        <LogInFirstModal
-          inOrderTo="edit this calendar"
-          setModal={this.props.setModal}
-        />,
-      );
+      this.props.setModal(<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.setModal(
       <HistoryModal
         mode="entry"
         dayString={dateString(
           this.props.entryInfo.year,
           this.props.entryInfo.month,
           this.props.entryInfo.day,
         )}
-        onClose={this.clearModal}
         currentEntryID={this.props.entryInfo.id}
       />,
     );
   };
-
-  clearModal: () => void = () => {
-    this.props.setModal(null);
-  };
 }
 
 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}
+        setModal={modalContext.setModal}
+        clearModal={modalContext.clearModal}
       />
     );
   },
 );
 
 export default ConnectedEntry;
diff --git a/web/calendar/filter-panel.react.js b/web/calendar/filter-panel.react.js
index f64d32255..f5bfa1bb9 100644
--- a/web/calendar/filter-panel.react.js
+++ b/web/calendar/filter-panel.react.js
@@ -1,393 +1,386 @@
 // @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 {
   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 { useModalContext } from '../modals/modal-provider.react';
 import ThreadSettingsModal from '../modals/threads/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 BaseProps = {
-  +setModal: (modal: ?React.Node) => void,
-};
 type Props = {
-  ...BaseProps,
   +filterThreadInfos: () => $ReadOnlyArray<FilterThreadInfo>,
   +filterThreadSearchIndex: () => SearchIndex,
   +filteredThreadIDs: ?$ReadOnlySet<string>,
   +includeDeleted: boolean,
   +dispatch: Dispatch,
+  +setModal: (modal: ?React.Node) => void,
 };
 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.setModal(
-      <ThreadSettingsModal threadID={threadID} onClose={this.clearModal} />,
-    );
+    this.props.setModal(<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,
       },
     });
   };
-
-  clearModal = () => {
-    this.props.setModal(null);
-  };
 }
 
 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 thread'
         : `${this.props.numThreads} threads`;
     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 threads
             {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<BaseProps> = React.memo<BaseProps>(
-  function ConnectedFilterPanel(props) {
+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
-        {...props}
         filteredThreadIDs={filteredThreadIDs}
         filterThreadInfos={filterThreadInfos}
         filterThreadSearchIndex={filterThreadSearchIndex}
         includeDeleted={includeDeleted}
         dispatch={dispatch}
+        setModal={modalContext.setModal}
       />
     );
   },
 );
 
 export default ConnectedFilterPanel;
diff --git a/web/chat/chat-message-list.react.js b/web/chat/chat-message-list.react.js
index 39a3917bf..db4eae6e7 100644
--- a/web/chat/chat-message-list.react.js
+++ b/web/chat/chat-message-list.react.js
@@ -1,496 +1,489 @@
 // @flow
 
 import classNames from 'classnames';
 import { detect as detectBrowser } from 'detect-browser';
 import invariant from 'invariant';
 import * as React from 'react';
 import { useDrop } from 'react-dnd';
 import { NativeTypes } from 'react-dnd-html5-backend';
 
 import {
   fetchMessagesBeforeCursorActionTypes,
   fetchMessagesBeforeCursor,
   fetchMostRecentMessagesActionTypes,
 } from 'lib/actions/message-actions';
 import { registerFetchKey } from 'lib/reducers/loading-reducer';
 import {
   type ChatMessageItem,
   useMessageListData,
 } from 'lib/selectors/chat-selectors';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors';
 import { messageKey } from 'lib/shared/message-utils';
 import {
   useWatchThread,
   useExistingThreadInfoFinder,
 } from 'lib/shared/thread-utils';
 import type { FetchMessageInfosPayload } from 'lib/types/message-types';
 import { type ThreadInfo } from 'lib/types/thread-types';
 import {
   type DispatchActionPromise,
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils';
 
 import { type InputState, InputStateContext } from '../input/input-state';
 import LoadingIndicator from '../loading-indicator.react';
 import { useTextMessageRulesFunc } from '../markdown/rules.react';
 import { useSelector } from '../redux/redux-utils';
 import ChatInputBar from './chat-input-bar.react';
 import css from './chat-message-list.css';
 import { MessageListContext } from './message-list-types';
 import MessageTimestampTooltip from './message-timestamp-tooltip.react';
 import Message from './message.react';
 import type {
   OnMessagePositionWithContainerInfo,
   MessagePositionInfo,
 } from './position-types';
 import RelationshipPrompt from './relationship-prompt/relationship-prompt';
 import ThreadTopBar from './thread-top-bar.react';
 
-type BaseProps = {
-  +setModal: (modal: ?React.Node) => void,
-};
 type PassedProps = {
-  ...BaseProps,
   // Redux state
   +activeChatThreadID: ?string,
   +threadInfo: ?ThreadInfo,
   +messageListData: ?$ReadOnlyArray<ChatMessageItem>,
   +startReached: boolean,
   +timeZone: ?string,
   +supportsReverseFlex: boolean,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
   +fetchMessagesBeforeCursor: (
     threadID: string,
     beforeMessageID: string,
   ) => Promise<FetchMessageInfosPayload>,
   // withInputState
   +inputState: ?InputState,
 };
 type ReactDnDProps = {
   isActive: boolean,
   connectDropTarget: (node: React.Node) => React.Node,
 };
 type Props = {
   ...PassedProps,
   ...ReactDnDProps,
 };
 type State = {
   +mouseOverMessagePosition: ?OnMessagePositionWithContainerInfo,
 };
 type Snapshot = {
   +scrollTop: number,
   +scrollHeight: number,
 };
 class ChatMessageList extends React.PureComponent<Props, State> {
   state: State = {
     mouseOverMessagePosition: null,
   };
   container: ?HTMLDivElement;
   messageContainer: ?HTMLDivElement;
   loadingFromScroll = false;
 
   componentDidMount() {
     this.scrollToBottom();
   }
 
   getSnapshotBeforeUpdate(prevProps: Props) {
     if (
       ChatMessageList.hasNewMessage(this.props, prevProps) &&
       this.messageContainer
     ) {
       const { scrollTop, scrollHeight } = this.messageContainer;
       return { scrollTop, scrollHeight };
     }
     return null;
   }
 
   static hasNewMessage(props: Props, prevProps: Props) {
     const { messageListData } = props;
     if (!messageListData || messageListData.length === 0) {
       return false;
     }
     const prevMessageListData = prevProps.messageListData;
     if (!prevMessageListData || prevMessageListData.length === 0) {
       return true;
     }
     return (
       ChatMessageList.keyExtractor(prevMessageListData[0]) !==
       ChatMessageList.keyExtractor(messageListData[0])
     );
   }
 
   componentDidUpdate(prevProps: Props, prevState: State, snapshot: ?Snapshot) {
     const { messageListData } = this.props;
     const prevMessageListData = prevProps.messageListData;
 
     if (
       this.loadingFromScroll &&
       messageListData &&
       (!prevMessageListData ||
         messageListData.length > prevMessageListData.length ||
         this.props.startReached)
     ) {
       this.loadingFromScroll = false;
     }
 
     const { messageContainer } = this;
     if (messageContainer && prevMessageListData !== messageListData) {
       this.onScroll();
     }
 
     // We'll scroll to the bottom if the user was already scrolled to the bottom
     // before the new message, or if the new message was composed locally
     const hasNewMessage = ChatMessageList.hasNewMessage(this.props, prevProps);
     if (
       this.props.activeChatThreadID !== prevProps.activeChatThreadID ||
       (hasNewMessage &&
         messageListData &&
         messageListData[0].itemType === 'message' &&
         messageListData[0].messageInfo.localID) ||
       (hasNewMessage && snapshot && Math.abs(snapshot.scrollTop) <= 1)
     ) {
       this.scrollToBottom();
     } else if (hasNewMessage && messageContainer && snapshot) {
       const { scrollTop, scrollHeight } = messageContainer;
       if (
         scrollHeight > snapshot.scrollHeight &&
         scrollTop === snapshot.scrollTop
       ) {
         const newHeight = scrollHeight - snapshot.scrollHeight;
         const newScrollTop = Math.abs(scrollTop) + newHeight;
         if (this.props.supportsReverseFlex) {
           messageContainer.scrollTop = -1 * newScrollTop;
         } else {
           messageContainer.scrollTop = newScrollTop;
         }
       }
     }
   }
 
   scrollToBottom() {
     if (this.messageContainer) {
       this.messageContainer.scrollTop = 0;
     }
   }
 
   static keyExtractor(item: ChatMessageItem) {
     if (item.itemType === 'loader') {
       return 'loader';
     }
     return messageKey(item.messageInfo);
   }
 
   renderItem = item => {
     if (item.itemType === 'loader') {
       return (
         <div key="loader" className={css.loading}>
           <LoadingIndicator status="loading" size="large" color="white" />
         </div>
       );
     }
-    const { threadInfo, setModal } = this.props;
+    const { threadInfo } = this.props;
     invariant(threadInfo, 'ThreadInfo should be set if messageListData is');
     return (
       <Message
         item={item}
         threadInfo={threadInfo}
         setMouseOverMessagePosition={this.setMouseOverMessagePosition}
         mouseOverMessagePosition={this.state.mouseOverMessagePosition}
-        setModal={setModal}
         timeZone={this.props.timeZone}
         key={ChatMessageList.keyExtractor(item)}
       />
     );
   };
 
   setMouseOverMessagePosition = (messagePositionInfo: MessagePositionInfo) => {
     if (!this.messageContainer) {
       return;
     }
     if (messagePositionInfo.type === 'off') {
       this.setState({ mouseOverMessagePosition: null });
       return;
     }
     const {
       top: containerTop,
       bottom: containerBottom,
       left: containerLeft,
       right: containerRight,
       height: containerHeight,
       width: containerWidth,
     } = this.messageContainer.getBoundingClientRect();
     const mouseOverMessagePosition = {
       ...messagePositionInfo,
       messagePosition: {
         ...messagePositionInfo.messagePosition,
         top: messagePositionInfo.messagePosition.top - containerTop,
         bottom: messagePositionInfo.messagePosition.bottom - containerTop,
         left: messagePositionInfo.messagePosition.left - containerLeft,
         right: messagePositionInfo.messagePosition.right - containerLeft,
       },
       containerPosition: {
         top: containerTop,
         bottom: containerBottom,
         left: containerLeft,
         right: containerRight,
         height: containerHeight,
         width: containerWidth,
       },
     };
     this.setState({ mouseOverMessagePosition });
   };
 
   render() {
     const {
       messageListData,
       threadInfo,
       inputState,
       connectDropTarget,
       isActive,
     } = this.props;
     if (!messageListData) {
       return <div className={css.container} />;
     }
     invariant(threadInfo, 'ThreadInfo should be set if messageListData is');
     invariant(inputState, 'InputState should be set');
     const messages = messageListData.map(this.renderItem);
     const containerStyle = classNames({
       [css.container]: true,
       [css.activeContainer]: isActive,
     });
 
     let tooltip;
     if (this.state.mouseOverMessagePosition) {
       const messagePositionInfo = this.state.mouseOverMessagePosition;
       tooltip = (
         <MessageTimestampTooltip
           messagePositionInfo={messagePositionInfo}
           timeZone={this.props.timeZone}
         />
       );
     }
     let relationshipPrompt;
     if (this.props.threadInfo) {
       relationshipPrompt = (
         <RelationshipPrompt threadInfo={this.props.threadInfo} />
       );
     }
 
     const messageContainerStyle = classNames({
       [css.messageContainer]: true,
       [css.mirroredMessageContainer]: !this.props.supportsReverseFlex,
     });
     return connectDropTarget(
       <div className={containerStyle} ref={this.containerRef}>
         <ThreadTopBar threadInfo={threadInfo} />
         <div className={css.outerMessageContainer}>
           {relationshipPrompt}
           <div className={messageContainerStyle} ref={this.messageContainerRef}>
             {messages}
           </div>
           {tooltip}
         </div>
         <ChatInputBar threadInfo={threadInfo} inputState={inputState} />
       </div>,
     );
   }
 
   containerRef = (container: ?HTMLDivElement) => {
     if (container) {
       container.addEventListener('paste', this.onPaste);
     }
     this.container = container;
   };
 
   onPaste = (e: ClipboardEvent) => {
     const { inputState } = this.props;
     if (!inputState) {
       return;
     }
     const { clipboardData } = e;
     if (!clipboardData) {
       return;
     }
     const { files } = clipboardData;
     if (files.length === 0) {
       return;
     }
     e.preventDefault();
     inputState.appendFiles([...files]);
   };
 
   messageContainerRef = (messageContainer: ?HTMLDivElement) => {
     this.messageContainer = messageContainer;
     // In case we already have all the most recent messages,
     // but they're not enough
     this.possiblyLoadMoreMessages();
     if (messageContainer) {
       messageContainer.addEventListener('scroll', this.onScroll);
     }
   };
 
   onScroll = () => {
     if (!this.messageContainer) {
       return;
     }
     if (this.state.mouseOverMessagePosition) {
       this.setState({ mouseOverMessagePosition: null });
     }
     this.possiblyLoadMoreMessages();
   };
 
   possiblyLoadMoreMessages() {
     if (!this.messageContainer) {
       return;
     }
     const { scrollTop, scrollHeight, clientHeight } = this.messageContainer;
     if (
       this.props.startReached ||
       Math.abs(scrollTop) + clientHeight + 55 < scrollHeight
     ) {
       return;
     }
     const oldestMessageServerID = this.oldestMessageServerID();
     if (!oldestMessageServerID) {
       return;
     }
     if (this.loadingFromScroll) {
       return;
     }
     this.loadingFromScroll = true;
     const threadID = this.props.activeChatThreadID;
     invariant(threadID, 'should be set');
     this.props.dispatchActionPromise(
       fetchMessagesBeforeCursorActionTypes,
       this.props.fetchMessagesBeforeCursor(threadID, oldestMessageServerID),
     );
   }
 
   oldestMessageServerID(): ?string {
     const data = this.props.messageListData;
     invariant(data, 'should be set');
     for (let i = data.length - 1; i >= 0; i--) {
       if (data[i].itemType === 'message' && data[i].messageInfo.id) {
         return data[i].messageInfo.id;
       }
     }
     return null;
   }
 }
 
 registerFetchKey(fetchMessagesBeforeCursorActionTypes);
 registerFetchKey(fetchMostRecentMessagesActionTypes);
-
-const ConnectedChatMessageList: React.ComponentType<BaseProps> = React.memo<BaseProps>(
-  function ConnectedChatMessageList(props) {
+const ConnectedChatMessageList: React.ComponentType<{}> = React.memo<{}>(
+  function ConnectedChatMessageList(): React.Node {
     const userAgent = useSelector(state => state.userAgent);
     const supportsReverseFlex = React.useMemo(() => {
       const browser = detectBrowser(userAgent);
       return (
         !browser ||
         browser.name !== 'firefox' ||
         parseInt(browser.version) >= 81
       );
     }, [userAgent]);
 
     const timeZone = useSelector(state => state.timeZone);
 
     const activeChatThreadID = useSelector(
       state => state.navInfo.activeChatThreadID,
     );
     const baseThreadInfo = useSelector(state => {
       const activeID = state.navInfo.activeChatThreadID;
       if (!activeID) {
         return null;
       }
       return threadInfoSelector(state)[activeID] ?? state.navInfo.pendingThread;
     });
     const existingThreadInfoFinder = useExistingThreadInfoFinder(
       baseThreadInfo,
     );
     const threadInfo = React.useMemo(
       () =>
         existingThreadInfoFinder({
           searching: false,
           userInfoInputArray: [],
         }),
       [existingThreadInfoFinder],
     );
 
     const messageListData = useMessageListData({
       threadInfo,
       searching: false,
       userInfoInputArray: [],
     });
 
     const startReached = useSelector(state => {
       const activeID = state.navInfo.activeChatThreadID;
       if (!activeID) {
         return null;
       }
 
       if (state.navInfo.pendingThread) {
         return true;
       }
 
       const threadMessageInfo = state.messageStore.threads[activeID];
       if (!threadMessageInfo) {
         return null;
       }
       return threadMessageInfo.startReached;
     });
 
     const dispatchActionPromise = useDispatchActionPromise();
     const callFetchMessagesBeforeCursor = useServerCall(
       fetchMessagesBeforeCursor,
     );
 
     const inputState = React.useContext(InputStateContext);
     const [dndProps, connectDropTarget] = useDrop({
       accept: NativeTypes.FILE,
       drop: item => {
         const { files } = item;
         if (inputState && files.length > 0) {
           inputState.appendFiles(files);
         }
       },
       collect: monitor => ({
         isActive: monitor.isOver() && monitor.canDrop(),
       }),
     });
 
     const getTextMessageMarkdownRules = useTextMessageRulesFunc(threadInfo?.id);
     const messageListContext = React.useMemo(() => {
       if (!getTextMessageMarkdownRules) {
         return undefined;
       }
       return { getTextMessageMarkdownRules };
     }, [getTextMessageMarkdownRules]);
 
     useWatchThread(threadInfo);
 
     return (
       <MessageListContext.Provider value={messageListContext}>
         <ChatMessageList
-          {...props}
           activeChatThreadID={activeChatThreadID}
           threadInfo={threadInfo}
           messageListData={messageListData}
           startReached={startReached}
           timeZone={timeZone}
           supportsReverseFlex={supportsReverseFlex}
           inputState={inputState}
           dispatchActionPromise={dispatchActionPromise}
           fetchMessagesBeforeCursor={callFetchMessagesBeforeCursor}
           {...dndProps}
           connectDropTarget={connectDropTarget}
         />
       </MessageListContext.Provider>
     );
   },
 );
 
 export default ConnectedChatMessageList;
diff --git a/web/chat/chat-tabs.react.js b/web/chat/chat-tabs.react.js
index 69b9d5f43..99e01ce89 100644
--- a/web/chat/chat-tabs.react.js
+++ b/web/chat/chat-tabs.react.js
@@ -1,61 +1,58 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { unreadBackgroundCount } from 'lib/selectors/thread-selectors';
 
 import { useSelector } from '../redux/redux-utils';
 import css from './chat-tabs.css';
 import ChatThreadList from './chat-thread-list.react';
 import ChatThreadTab from './chat-thread-tab.react';
 import { ThreadListContext } from './thread-list-provider';
 
-type Props = {
-  +setModal: (modal: ?React.Node) => void,
-};
-function ChatTabs(props: Props): React.Node {
+function ChatTabs(): React.Node {
   let backgroundTitle = 'Background';
   const unreadBackgroundCountVal = useSelector(unreadBackgroundCount);
   if (unreadBackgroundCountVal) {
     backgroundTitle += ` (${unreadBackgroundCountVal})`;
   }
   const threadListContext = React.useContext(ThreadListContext);
   invariant(
     threadListContext,
     'threadListContext should be set in ChatThreadList',
   );
   const { activeTab, setActiveTab } = threadListContext;
 
   const onClickHome = React.useCallback(() => setActiveTab('Focus'), [
     setActiveTab,
   ]);
   const onClickBackground = React.useCallback(
     () => setActiveTab('Background'),
     [setActiveTab],
   );
 
   return (
     <div className={css.container}>
       <div className={css.tabs}>
         <ChatThreadTab
           title="Focus"
           tabIsActive={activeTab === 'Focus'}
           onClick={onClickHome}
           icon="Filled"
         />
         <ChatThreadTab
           title={backgroundTitle}
           tabIsActive={activeTab === 'Background'}
           onClick={onClickBackground}
           icon="bell-disabled"
         />
       </div>
       <div className={css.threadList}>
-        <ChatThreadList setModal={props.setModal} />
+        <ChatThreadList />
       </div>
     </div>
   );
 }
 
 export default ChatTabs;
diff --git a/web/chat/chat-thread-list-item.react.js b/web/chat/chat-thread-list-item.react.js
index 262440e9c..e27e3856c 100644
--- a/web/chat/chat-thread-list-item.react.js
+++ b/web/chat/chat-thread-list-item.react.js
@@ -1,166 +1,164 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 
 import type { ChatThreadItem } from 'lib/selectors/chat-selectors';
 import { useAncestorThreads } from 'lib/shared/ancestor-threads';
 import { shortAbsoluteDate } from 'lib/utils/date-utils';
 
 import { useSelector } from '../redux/redux-utils';
 import {
   useOnClickThread,
   useThreadIsActive,
 } from '../selectors/nav-selectors';
 import SWMansionIcon from '../SWMansionIcon.react';
 import ChatThreadListItemMenu from './chat-thread-list-item-menu.react';
 import ChatThreadListSeeMoreSidebars from './chat-thread-list-see-more-sidebars.react';
 import ChatThreadListSidebar from './chat-thread-list-sidebar.react';
 import css from './chat-thread-list.css';
 import MessagePreview from './message-preview.react';
 
 type Props = {
   +item: ChatThreadItem,
-  +setModal: (modal: ?React.Node) => void,
 };
 function ChatThreadListItem(props: Props): React.Node {
-  const { item, setModal } = props;
+  const { item } = props;
   const {
     threadInfo,
     lastUpdatedTimeIncludingSidebars,
     mostRecentNonLocalMessage,
     mostRecentMessageInfo,
   } = item;
   const { id: threadID, currentUser } = threadInfo;
 
   const ancestorThreads = useAncestorThreads(threadInfo);
   const onClick = useOnClickThread(item.threadInfo);
 
   const timeZone = useSelector(state => state.timeZone);
   const lastActivity = shortAbsoluteDate(
     lastUpdatedTimeIncludingSidebars,
     timeZone,
   );
 
   const active = useThreadIsActive(threadID);
   const containerClassName = React.useMemo(
     () =>
       classNames({
         [css.thread]: true,
         [css.activeThread]: active,
       }),
     [active],
   );
 
   const { unread } = currentUser;
   const titleClassName = React.useMemo(
     () =>
       classNames({
         [css.title]: true,
         [css.unread]: unread,
       }),
     [unread],
   );
   const lastActivityClassName = React.useMemo(
     () =>
       classNames({
         [css.lastActivity]: true,
         [css.unread]: unread,
         [css.dark]: !unread,
       }),
     [unread],
   );
 
   const breadCrumbsClassName = React.useMemo(
     () =>
       classNames(css.breadCrumbs, {
         [css.unread]: unread,
       }),
     [unread],
   );
 
   let unreadDot;
   if (unread) {
     unreadDot = <div className={css.unreadDot} />;
   }
 
   const { color } = item.threadInfo;
   const colorSplotchStyle = React.useMemo(
     () => ({ backgroundColor: `#${color}` }),
     [color],
   );
 
   const sidebars = item.sidebars.map(sidebarItem => {
     if (sidebarItem.type === 'sidebar') {
       const { type, ...sidebarInfo } = sidebarItem;
       return (
         <ChatThreadListSidebar
           sidebarInfo={sidebarInfo}
           key={sidebarInfo.threadInfo.id}
         />
       );
     } else if (sidebarItem.type === 'seeMore') {
       return (
         <ChatThreadListSeeMoreSidebars
           threadInfo={item.threadInfo}
           unread={sidebarItem.unread}
           showingSidebarsInline={sidebarItem.showingSidebarsInline}
-          setModal={setModal}
           key="seeMore"
         />
       );
     } else {
       return <div className={css.spacer} key="spacer" />;
     }
   });
 
   const ancestorPath = ancestorThreads.map((thread, idx) => {
     const isNotLast = idx !== ancestorThreads.length - 1;
     const chevron = isNotLast && (
       <span className={css.breadCrumb}>
         <SWMansionIcon icon="chevron-right-small" size={16} />
       </span>
     );
 
     return (
       <React.Fragment key={thread.id}>
         <span className={css.breadCrumb}>{thread.uiName}</span>
         {chevron}
       </React.Fragment>
     );
   });
 
   return (
     <>
       <div className={containerClassName}>
         <div className={css.colorContainer}>
           <div className={css.dotContainer}>{unreadDot}</div>
 
           <div className={css.colorSplotch} style={colorSplotchStyle} />
         </div>
         <a className={css.threadButton} onClick={onClick}>
           <p className={breadCrumbsClassName}>{ancestorPath}</p>
           <div className={css.threadRow}>
             <div className={titleClassName}>{threadInfo.uiName}</div>
           </div>
           <div className={css.threadRow}>
             <MessagePreview
               messageInfo={mostRecentMessageInfo}
               threadInfo={threadInfo}
             />
           </div>
         </a>
         <div>
           <ChatThreadListItemMenu
             threadInfo={threadInfo}
             mostRecentNonLocalMessage={mostRecentNonLocalMessage}
           />
           <div className={lastActivityClassName}>{lastActivity}</div>
         </div>
       </div>
       {sidebars}
     </>
   );
 }
 
 export default ChatThreadListItem;
diff --git a/web/chat/chat-thread-list-see-more-sidebars.react.js b/web/chat/chat-thread-list-see-more-sidebars.react.js
index dbabb5f7e..335d353fa 100644
--- a/web/chat/chat-thread-list-see-more-sidebars.react.js
+++ b/web/chat/chat-thread-list-see-more-sidebars.react.js
@@ -1,45 +1,44 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 
 import type { ThreadInfo } from 'lib/types/thread-types';
 
 import SidebarListModal from '../modals/chat/sidebar-list-modal.react';
+import { useModalContext } from '../modals/modal-provider.react';
 import css from './chat-thread-list.css';
 
 type Props = {
   +threadInfo: ThreadInfo,
   +unread: boolean,
   +showingSidebarsInline: boolean,
-  +setModal: (modal: ?React.Node) => void,
 };
 function ChatThreadListSeeMoreSidebars(props: Props): React.Node {
-  const { unread, showingSidebarsInline, setModal, threadInfo } = props;
+  const { unread, showingSidebarsInline, threadInfo } = props;
+  const { setModal } = useModalContext();
+
   const onClick = React.useCallback(
-    () =>
-      setModal(
-        <SidebarListModal setModal={setModal} threadInfo={threadInfo} />,
-      ),
+    () => setModal(<SidebarListModal threadInfo={threadInfo} />),
     [setModal, threadInfo],
   );
   const buttonText = showingSidebarsInline ? 'See more...' : 'See sidebars...';
   return (
     <div className={classNames(css.thread, css.sidebar)} onClick={onClick}>
       <a className={css.threadButton}>
         <div className={css.threadRow}>
           <div
             className={classNames([
               css.sidebarTitle,
               unread ? css.unread : null,
             ])}
           >
             {buttonText}
           </div>
         </div>
       </a>
     </div>
   );
 }
 
 export default ChatThreadListSeeMoreSidebars;
diff --git a/web/chat/chat-thread-list.react.js b/web/chat/chat-thread-list.react.js
index 80fac3215..3d56bea22 100644
--- a/web/chat/chat-thread-list.react.js
+++ b/web/chat/chat-thread-list.react.js
@@ -1,58 +1,49 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { emptyItemText } from 'lib/shared/thread-utils';
 
 import ChatThreadListItem from './chat-thread-list-item.react';
 import css from './chat-thread-list.css';
 import { ThreadListContext } from './thread-list-provider';
 import ThreadListSearch from './thread-list-search.react';
 
-type Props = {
-  +setModal: (modal: ?React.Node) => void,
-};
-
-function ChatThreadList(props: Props): React.Node {
-  const { setModal } = props;
+function ChatThreadList(): React.Node {
   const threadListContext = React.useContext(ThreadListContext);
   invariant(
     threadListContext,
     'threadListContext should be set in ChatThreadList',
   );
   const {
     activeTab,
     threadList,
     setSearchText,
     searchText,
   } = threadListContext;
   const isBackground = activeTab === 'Background';
 
   const threadComponents: React.Node[] = React.useMemo(() => {
     const threads = threadList.map(item => (
-      <ChatThreadListItem
-        item={item}
-        key={item.threadInfo.id}
-        setModal={setModal}
-      />
+      <ChatThreadListItem item={item} key={item.threadInfo.id} />
     ));
     if (threads.length === 0 && isBackground) {
       threads.push(<EmptyItem key="emptyItem" />);
     }
     return threads;
-  }, [threadList, isBackground, setModal]);
+  }, [threadList, isBackground]);
 
   return (
     <div className={css.threadListContainer}>
       <ThreadListSearch onChangeText={setSearchText} searchText={searchText} />
       <div>{threadComponents}</div>
     </div>
   );
 }
 
 function EmptyItem() {
   return <div className={css.emptyItem}>{emptyItemText}</div>;
 }
 
 export default ChatThreadList;
diff --git a/web/chat/chat.react.js b/web/chat/chat.react.js
index 5c1ffbd01..028a12281 100644
--- a/web/chat/chat.react.js
+++ b/web/chat/chat.react.js
@@ -1,23 +1,20 @@
 // @flow
 
 import * as React from 'react';
 
 import ChatMessageList from './chat-message-list.react';
 import ChatTabs from './chat-tabs.react';
 import { ThreadListProvider } from './thread-list-provider';
 
-type Props = {
-  +setModal: (modal: ?React.Node) => void,
-};
-function Chat(props: Props): React.Node {
+function Chat(): React.Node {
   return (
     <>
       <ThreadListProvider>
-        <ChatTabs setModal={props.setModal} />
+        <ChatTabs />
       </ThreadListProvider>
-      <ChatMessageList setModal={props.setModal} />
+      <ChatMessageList />
     </>
   );
 }
 
 export default Chat;
diff --git a/web/chat/message.react.js b/web/chat/message.react.js
index 2ea473aee..d637222c4 100644
--- a/web/chat/message.react.js
+++ b/web/chat/message.react.js
@@ -1,83 +1,81 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { type ChatMessageInfoItem } from 'lib/selectors/chat-selectors';
 import { messageTypes } from 'lib/types/message-types';
 import { type ThreadInfo } from 'lib/types/thread-types';
 import { longAbsoluteDate } from 'lib/utils/date-utils';
 
 import css from './chat-message-list.css';
 import MultimediaMessage from './multimedia-message.react';
 import {
   type OnMessagePositionWithContainerInfo,
   type MessagePositionInfo,
 } from './position-types';
 import RobotextMessage from './robotext-message.react';
 import TextMessage from './text-message.react';
 
 type Props = {
   +item: ChatMessageInfoItem,
   +threadInfo: ThreadInfo,
   +setMouseOverMessagePosition: (
     messagePositionInfo: MessagePositionInfo,
   ) => void,
   +mouseOverMessagePosition: ?OnMessagePositionWithContainerInfo,
-  +setModal: (modal: ?React.Node) => void,
   +timeZone: ?string,
 };
 function Message(props: Props): React.Node {
   const { item, timeZone } = props;
 
   let conversationHeader = null;
   if (item.startsConversation) {
     conversationHeader = (
       <div className={css.conversationHeader}>
         {longAbsoluteDate(item.messageInfo.time, timeZone)}
       </div>
     );
   }
   let message;
   if (item.messageInfo.type === messageTypes.TEXT) {
     message = (
       <TextMessage
         item={item}
         threadInfo={props.threadInfo}
         setMouseOverMessagePosition={props.setMouseOverMessagePosition}
         mouseOverMessagePosition={props.mouseOverMessagePosition}
       />
     );
   } else if (
     item.messageInfo.type === messageTypes.IMAGES ||
     item.messageInfo.type === messageTypes.MULTIMEDIA
   ) {
     message = (
       <MultimediaMessage
         item={item}
         threadInfo={props.threadInfo}
         setMouseOverMessagePosition={props.setMouseOverMessagePosition}
         mouseOverMessagePosition={props.mouseOverMessagePosition}
-        setModal={props.setModal}
       />
     );
   } else {
     invariant(item.robotext, "Flow can't handle our fancy types :(");
     message = (
       <RobotextMessage
         item={item}
         threadInfo={props.threadInfo}
         setMouseOverMessagePosition={props.setMouseOverMessagePosition}
         mouseOverMessagePosition={props.mouseOverMessagePosition}
       />
     );
   }
   return (
     <div className={css.message}>
       {conversationHeader}
       {message}
     </div>
   );
 }
 
 export default Message;
diff --git a/web/chat/multimedia-message.react.js b/web/chat/multimedia-message.react.js
index d329f2fb9..4c2e82020 100644
--- a/web/chat/multimedia-message.react.js
+++ b/web/chat/multimedia-message.react.js
@@ -1,95 +1,93 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { type ChatMessageInfoItem } from 'lib/selectors/chat-selectors';
 import { messageTypes } from 'lib/types/message-types';
 import { type ThreadInfo } from 'lib/types/thread-types';
 
 import { type InputState, InputStateContext } from '../input/input-state';
 import Multimedia from '../media/multimedia.react';
 import css from './chat-message-list.css';
 import ComposedMessage from './composed-message.react';
 import sendFailed from './multimedia-message-send-failed';
 import type {
   MessagePositionInfo,
   OnMessagePositionWithContainerInfo,
 } from './position-types';
 
 type BaseProps = {
   +item: ChatMessageInfoItem,
   +threadInfo: ThreadInfo,
   +setMouseOverMessagePosition: (
     messagePositionInfo: MessagePositionInfo,
   ) => void,
   +mouseOverMessagePosition: ?OnMessagePositionWithContainerInfo,
-  +setModal: (modal: ?React.Node) => void,
 };
 type Props = {
   ...BaseProps,
   // withInputState
   +inputState: ?InputState,
 };
 class MultimediaMessage extends React.PureComponent<Props> {
   render() {
-    const { item, setModal, inputState } = this.props;
+    const { item, inputState } = this.props;
     invariant(
       item.messageInfo.type === messageTypes.IMAGES ||
         item.messageInfo.type === messageTypes.MULTIMEDIA,
       'MultimediaMessage should only be used for multimedia messages',
     );
     const { localID, media } = item.messageInfo;
 
     invariant(inputState, 'inputState should be set in MultimediaMessage');
     const pendingUploads = localID ? inputState.assignedUploads[localID] : null;
     const multimedia = [];
     for (const singleMedia of media) {
       const pendingUpload = pendingUploads
         ? pendingUploads.find(upload => upload.localID === singleMedia.id)
         : null;
       multimedia.push(
         <Multimedia
           uri={singleMedia.uri}
           pendingUpload={pendingUpload}
-          setModal={setModal}
           multimediaCSSClass={css.multimedia}
           multimediaImageCSSClass={css.multimediaImage}
           key={singleMedia.id}
         />,
       );
     }
 
     invariant(multimedia.length > 0, 'should be at least one multimedia...');
     const content =
       multimedia.length > 1 ? (
         <div className={css.imageGrid}>{multimedia}</div>
       ) : (
         multimedia
       );
 
     return (
       <ComposedMessage
         item={item}
         threadInfo={this.props.threadInfo}
         sendFailed={sendFailed(item, inputState)}
         setMouseOverMessagePosition={this.props.setMouseOverMessagePosition}
         mouseOverMessagePosition={this.props.mouseOverMessagePosition}
         canReply={false}
         fixedWidth={multimedia.length > 1}
         borderRadius={16}
       >
         {content}
       </ComposedMessage>
     );
   }
 }
 
 const ConnectedMultimediaMessage: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedMultimediaMessage(props) {
     const inputState = React.useContext(InputStateContext);
     return <MultimediaMessage {...props} inputState={inputState} />;
   },
 );
 
 export default ConnectedMultimediaMessage;
diff --git a/web/input/input-state-container.react.js b/web/input/input-state-container.react.js
index 4b21d3aad..d18bdf7fc 100644
--- a/web/input/input-state-container.react.js
+++ b/web/input/input-state-container.react.js
@@ -1,1270 +1,1273 @@
 // @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,
   sendMultimediaMessage,
   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 { getNextLocalUploadID } from 'lib/media/media-utils';
 import { locallyUniqueToRealizedThreadIDsSelector } from 'lib/selectors/thread-selectors';
 import {
   createMediaMessageInfo,
   localIDPrefix,
 } from 'lib/shared/message-utils';
 import {
   createRealThreadFromPendingThread,
   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 { useModalContext } from '../modals/modal-provider.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,
-  +setModal: (modal: ?React.Node) => void,
 };
 type Props = {
   ...BaseProps,
   +activeChatThreadID: ?string,
   +viewerID: ?string,
   +messageStoreMessages: { +[id: string]: RawMessageInfo },
   +exifRotate: boolean,
   +locallyUniqueRealizedThreadIDs: $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>,
+  +setModal: (modal: ?React.Node) => void,
 };
 type State = {
   +pendingUploads: {
     [threadID: string]: { [localUploadID: string]: PendingMultimediaUpload },
   },
   +drafts: { [threadID: string]: string },
 };
 class InputStateContainer extends React.PureComponent<Props, State> {
   state: State = {
     pendingUploads: {},
     drafts: {},
   };
   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.locallyUniqueRealizedThreadIDs.get(threadID) ?? threadID;
       if (newThreadID !== threadID) {
         updated = true;
       }
       newState[newThreadID] = state[threadID];
     }
     return updated ? newState : null;
   }
 
   static getDerivedStateFromProps(props: Props, state: State) {
     const drafts = InputStateContainer.reassignToRealizedThreads(
       state.drafts,
       props,
     );
     const pendingUploads = InputStateContainer.reassignToRealizedThreads(
       state.pendingUploads,
       props,
     );
 
     if (!drafts && !pendingUploads) {
       return null;
     }
 
     const stateUpdate = {};
     if (drafts) {
       stateUpdate.drafts = drafts;
     }
     if (pendingUploads) {
       stateUpdate.pendingUploads = pendingUploads;
     }
     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
             ? 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(
       (state: State) => state.pendingUploads[threadID],
       (state: State) => state.drafts[threadID],
       (
         pendingUploads: ?{ [localUploadID: string]: PendingMultimediaUpload },
         draft: ?string,
       ) => {
         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 ? draft : '',
           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),
           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,
         };
       },
     ),
   );
 
   getRealizedOrPendingThreadID(threadID: string): string {
     return this.props.locallyUniqueRealizedThreadIDs.get(threadID) ?? threadID;
   }
 
   async appendFiles(
     threadID: string,
     files: $ReadOnlyArray<File>,
   ): Promise<boolean> {
     const selectionTime = Date.now();
     const { setModal } = this.props;
 
     const appendResults = await Promise.all(
       files.map(file => this.appendFile(file, selectionTime)),
     );
 
     if (appendResults.some(({ result }) => !result.success)) {
-      setModal(<InvalidUploadModal setModal={setModal} />);
+      setModal(<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: null,
           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, e);
     }
     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, e: any) {
     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 {};
       }
       const failed = e instanceof Error && e.message ? e.message : 'failed';
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localUploadID]: {
               ...upload,
               failed,
               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,
   ) {
     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) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       return {
         drafts: {
           ...prevState.drafts,
           [newThreadID]: draft,
         },
       };
     });
   }
 
   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: null,
             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)
       : 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 viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
     const messageStoreMessages = useSelector(
       state => state.messageStore.messages,
     );
     const locallyUniqueToRealizedThreadIDs = useSelector(state =>
       locallyUniqueToRealizedThreadIDsSelector(state.threadStore.threadInfos),
     );
     const calendarQuery = useSelector(nonThreadCalendarQuery);
     const callUploadMultimedia = useServerCall(uploadMultimedia);
     const callDeleteUpload = useServerCall(deleteUpload);
     const callSendMultimediaMessage = useServerCall(sendMultimediaMessage);
     const callSendTextMessage = useServerCall(sendTextMessage);
     const callNewThread = useServerCall(newThread);
     const dispatch = useDispatch();
     const dispatchActionPromise = useDispatchActionPromise();
+    const modalContext = useModalContext();
 
     return (
       <InputStateContainer
         {...props}
         activeChatThreadID={activeChatThreadID}
         viewerID={viewerID}
         messageStoreMessages={messageStoreMessages}
         exifRotate={exifRotate}
         locallyUniqueRealizedThreadIDs={locallyUniqueToRealizedThreadIDs}
         calendarQuery={calendarQuery}
         uploadMultimedia={callUploadMultimedia}
         deleteUpload={callDeleteUpload}
         sendMultimediaMessage={callSendMultimediaMessage}
         sendTextMessage={callSendTextMessage}
         newThread={callNewThread}
         dispatch={dispatch}
         dispatchActionPromise={dispatchActionPromise}
+        setModal={modalContext.setModal}
       />
     );
   },
 );
 
 export default ConnectedInputStateContainer;
diff --git a/web/media/multimedia-modal.react.js b/web/media/multimedia-modal.react.js
index e5b3976c2..b3475a3e4 100644
--- a/web/media/multimedia-modal.react.js
+++ b/web/media/multimedia-modal.react.js
@@ -1,64 +1,72 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { XCircle as XCircleIcon } from 'react-feather';
 
+import { useModalContext } from '../modals/modal-provider.react';
 import css from './media.css';
 
-type Props = {
+type BaseProps = {
   +uri: string,
-  +setModal: (modal: ?React.Node) => void,
 };
+
+type Props = {
+  ...BaseProps,
+  +clearModal: (modal: ?React.Node) => void,
+};
+
 class MultimediaModal extends React.PureComponent<Props> {
   overlay: ?HTMLDivElement;
 
   componentDidMount() {
     invariant(this.overlay, 'overlay ref unset');
     this.overlay.focus();
   }
 
   render(): React.Node {
     return (
       <div
         className={css.multimediaModalOverlay}
         ref={this.overlayRef}
         onClick={this.onBackgroundClick}
         tabIndex={0}
         onKeyDown={this.onKeyDown}
       >
         <img src={this.props.uri} />
         <XCircleIcon
-          onClick={this.close}
+          onClick={this.props.clearModal}
           className={css.closeMultimediaModal}
         />
       </div>
     );
   }
 
   overlayRef: (overlay: ?HTMLDivElement) => void = overlay => {
     this.overlay = overlay;
   };
 
   onBackgroundClick: (
     event: SyntheticEvent<HTMLDivElement>,
   ) => void = event => {
     if (event.target === this.overlay) {
-      this.close();
+      this.props.clearModal();
     }
   };
 
   onKeyDown: (
     event: SyntheticKeyboardEvent<HTMLDivElement>,
   ) => void = event => {
     if (event.keyCode === 27) {
-      this.close();
+      this.props.clearModal();
     }
   };
+}
 
-  close: () => void = () => {
-    this.props.setModal(null);
-  };
+function ConnectedMultiMediaModal(props: BaseProps): React.Node {
+  const modalContext = useModalContext();
+
+  return <MultimediaModal {...props} clearModal={modalContext.clearModal} />;
 }
 
-export default MultimediaModal;
+export default ConnectedMultiMediaModal;
diff --git a/web/media/multimedia.react.js b/web/media/multimedia.react.js
index c05ed8c61..d9feb76da 100644
--- a/web/media/multimedia.react.js
+++ b/web/media/multimedia.react.js
@@ -1,115 +1,126 @@
 // @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 { type PendingMultimediaUpload } from '../input/input-state';
+import { useModalContext } from '../modals/modal-provider.react';
 import css from './media.css';
 import MultimediaModal from './multimedia-modal.react';
 
+type BaseProps = {
+  +uri: string,
+  +pendingUpload?: ?PendingMultimediaUpload,
+  +remove?: (uploadID: string) => void,
+  +multimediaCSSClass: string,
+  +multimediaImageCSSClass: string,
+};
 type Props = {
-  uri: string,
-  pendingUpload?: ?PendingMultimediaUpload,
-  remove?: (uploadID: string) => void,
-  setModal?: (modal: ?React.Node) => void,
-  multimediaCSSClass: string,
-  multimediaImageCSSClass: string,
+  ...BaseProps,
+  +setModal: (modal: ?React.Node) => void,
 };
+
 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, setModal } = 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 = (
           <XCircleIcon onClick={this.remove} className={css.removeUpload} />
         );
       }
     }
 
     const imageContainerClasses = [
       css.multimediaImage,
       this.props.multimediaImageCSSClass,
     ];
     let onClick;
     if (setModal) {
       imageContainerClasses.push(css.clickable);
       onClick = this.onClick;
     }
 
     const containerClasses = [css.multimedia, this.props.multimediaCSSClass];
     return (
       <span className={classNames(containerClasses)}>
         <span className={classNames(imageContainerClasses)} onClick={onClick}>
           <img src={this.props.uri} />
           {removeButton}
         </span>
         {progressIndicator}
         {errorIndicator}
       </span>
     );
   }
 
   remove: () => void = () => {
     const { remove, pendingUpload } = this.props;
     invariant(
       remove && pendingUpload,
       'Multimedia cannot be removed as either remove or pendingUpload ' +
         'are unspecified',
     );
     remove(pendingUpload.localID);
   };
 
   onClick: (event: SyntheticEvent<HTMLSpanElement>) => void = event => {
     event.stopPropagation();
 
     const { setModal, uri } = this.props;
     invariant(setModal, 'should be set');
-    setModal(<MultimediaModal uri={uri} setModal={setModal} />);
+    setModal(<MultimediaModal uri={uri} />);
   };
 }
 
-export default Multimedia;
+function ConnectedMultimediaContainer(props: BaseProps): React.Node {
+  const modalContext = useModalContext();
+
+  return <Multimedia {...props} setModal={modalContext.setModal} />;
+}
+
+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 0cca96f42..75aa13336 100644
--- a/web/modals/account/log-in-first-modal.react.js
+++ b/web/modals/account/log-in-first-modal.react.js
@@ -1,44 +1,59 @@
 // @flow
 
 import * as React from 'react';
 
+import { useModalContext } from '../../modals/modal-provider.react';
 import css from '../../style.css';
 import Modal from '../modal.react';
 import LogInModal from './log-in-modal.react';
 
-type Props = {
+type BaseProps = {
   +inOrderTo: string,
+};
+
+type Props = {
+  ...BaseProps,
   +setModal: (modal: ?React.Node) => void,
+  +clearModal: () => void,
 };
+
 class LogInFirstModal extends React.PureComponent<Props> {
   render(): React.Node {
     return (
-      <Modal name="Log in" onClose={this.clearModal}>
+      <Modal name="Log in" onClose={this.props.clearModal}>
         <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>
     );
   }
 
-  clearModal: () => void = () => {
-    this.props.setModal(null);
-  };
-
   onClickLogIn: (event: SyntheticEvent<HTMLAnchorElement>) => void = event => {
     event.preventDefault();
-    this.props.setModal(<LogInModal setModal={this.props.setModal} />);
+    this.props.setModal(<LogInModal />);
   };
 }
 
-export default LogInFirstModal;
+function ConnectedLoginFirstModal(props: BaseProps): React.Node {
+  const modalContext = useModalContext();
+
+  return (
+    <LogInFirstModal
+      {...props}
+      setModal={modalContext.setModal}
+      clearModal={modalContext.clearModal}
+    />
+  );
+}
+
+export default ConnectedLoginFirstModal;
diff --git a/web/modals/account/log-in-modal.react.js b/web/modals/account/log-in-modal.react.js
index 3ce07dbea..fd13b0397 100644
--- a/web/modals/account/log-in-modal.react.js
+++ b/web/modals/account/log-in-modal.react.js
@@ -1,246 +1,240 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { logInActionTypes, logIn } from 'lib/actions/user-actions';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors';
 import {
   validEmailRegex,
   oldValidUsernameRegex,
 } from 'lib/shared/account-utils';
 import type {
   LogInInfo,
   LogInExtraInfo,
   LogInResult,
   LogInStartingPayload,
 } from 'lib/types/account-types';
 import {
   type DispatchActionPromise,
   useDispatchActionPromise,
   useServerCall,
 } from 'lib/utils/action-utils';
 
 import Button from '../../components/button.react';
 import { useSelector } from '../../redux/redux-utils';
 import { webLogInExtraInfoSelector } from '../../selectors/account-selectors';
 import Input from '../input.react';
+import { useModalContext } from '../modal-provider.react';
 import Modal from '../modal.react';
 import css from './user-settings-modal.css';
 
-type BaseProps = {
-  +setModal: (modal: ?React.Node) => void,
-};
 type Props = {
-  ...BaseProps,
   +inputDisabled: boolean,
   +logInExtraInfo: () => LogInExtraInfo,
   +dispatchActionPromise: DispatchActionPromise,
   +logIn: (logInInfo: LogInInfo) => Promise<LogInResult>,
+  +clearModal: () => void,
 };
 type State = {
   +username: string,
   +password: string,
   +errorMessage: string,
 };
 class LogInModal extends React.PureComponent<Props, State> {
   usernameInput: ?HTMLInputElement;
   passwordInput: ?HTMLInputElement;
 
   constructor(props: Props) {
     super(props);
     this.state = {
       username: '',
       password: '',
       errorMessage: '',
     };
   }
 
   componentDidMount() {
     invariant(this.usernameInput, 'username ref unset');
     this.usernameInput.focus();
   }
 
   render() {
     return (
-      <Modal name="Log in" onClose={this.clearModal}>
+      <Modal name="Log in" onClose={this.props.clearModal}>
         <div className={css['modal-body']}>
           <form method="POST">
             <div>
               <div className={css['form-title']}>Username</div>
               <div className={css['form-content']}>
                 <Input
                   type="text"
                   placeholder="Username"
                   value={this.state.username}
                   onChange={this.onChangeUsername}
                   ref={this.usernameInputRef}
                   disabled={this.props.inputDisabled}
                 />
               </div>
             </div>
             <div>
               <div className={css['form-title']}>Password</div>
               <div className={css['form-content']}>
                 <Input
                   type="password"
                   placeholder="Password"
                   value={this.state.password}
                   onChange={this.onChangePassword}
                   ref={this.passwordInputRef}
                   disabled={this.props.inputDisabled}
                 />
               </div>
             </div>
             <div className={css['form-footer']}>
               <Button
                 type="submit"
                 onClick={this.onSubmit}
                 disabled={this.props.inputDisabled}
               >
                 Log in
               </Button>
               <div className={css['modal-form-error']}>
                 {this.state.errorMessage}
               </div>
             </div>
           </form>
         </div>
       </Modal>
     );
   }
 
   usernameInputRef = (usernameInput: ?HTMLInputElement) => {
     this.usernameInput = usernameInput;
   };
 
   passwordInputRef = (passwordInput: ?HTMLInputElement) => {
     this.passwordInput = passwordInput;
   };
 
   onChangeUsername = (event: SyntheticEvent<HTMLInputElement>) => {
     const target = event.target;
     invariant(target instanceof HTMLInputElement, 'target not input');
     this.setState({ username: target.value });
   };
 
   onChangePassword = (event: SyntheticEvent<HTMLInputElement>) => {
     const target = event.target;
     invariant(target instanceof HTMLInputElement, 'target not input');
     this.setState({ password: target.value });
   };
 
   onSubmit = (event: SyntheticEvent<HTMLButtonElement>) => {
     event.preventDefault();
 
     if (this.state.username.search(validEmailRegex) > -1) {
       this.setState(
         {
           username: '',
           errorMessage: 'usernames only, not emails',
         },
         () => {
           invariant(this.usernameInput, 'usernameInput ref unset');
           this.usernameInput.focus();
         },
       );
       return;
     } else if (this.state.username.search(oldValidUsernameRegex) === -1) {
       this.setState(
         {
           username: '',
           errorMessage: 'alphanumeric usernames only',
         },
         () => {
           invariant(this.usernameInput, 'usernameInput ref unset');
           this.usernameInput.focus();
         },
       );
       return;
     }
 
     const extraInfo = this.props.logInExtraInfo();
     this.props.dispatchActionPromise(
       logInActionTypes,
       this.logInAction(extraInfo),
       undefined,
       ({ calendarQuery: extraInfo.calendarQuery }: LogInStartingPayload),
     );
   };
 
   async logInAction(extraInfo: LogInExtraInfo) {
     try {
       const result = await this.props.logIn({
         username: this.state.username,
         password: this.state.password,
         ...extraInfo,
       });
-      this.clearModal();
+      this.props.clearModal();
       return result;
     } catch (e) {
       if (e.message === 'invalid_parameters') {
         this.setState(
           {
             username: '',
             errorMessage: "user doesn't exist",
           },
           () => {
             invariant(this.usernameInput, 'usernameInput ref unset');
             this.usernameInput.focus();
           },
         );
       } else if (e.message === 'invalid_credentials') {
         this.setState(
           {
             password: '',
             errorMessage: 'wrong password',
           },
           () => {
             invariant(this.passwordInput, 'passwordInput ref unset');
             this.passwordInput.focus();
           },
         );
       } else {
         this.setState(
           {
             username: '',
             password: '',
             errorMessage: 'unknown error',
           },
           () => {
             invariant(this.usernameInput, 'usernameInput ref unset');
             this.usernameInput.focus();
           },
         );
       }
       throw e;
     }
   }
-
-  clearModal = () => {
-    this.props.setModal(null);
-  };
 }
 
 const loadingStatusSelector = createLoadingStatusSelector(logInActionTypes);
-
-const ConnectedLoginModal: React.ComponentType<BaseProps> = React.memo<BaseProps>(
-  function ConnectedLoginModal(props) {
+const ConnectedLoginModal: React.ComponentType<{}> = React.memo<{}>(
+  function ConnectedLoginModal(): React.Node {
     const inputDisabled = useSelector(loadingStatusSelector) === 'loading';
     const loginExtraInfo = useSelector(webLogInExtraInfoSelector);
     const callLogIn = useServerCall(logIn);
     const dispatchActionPromise = useDispatchActionPromise();
+    const modalContext = useModalContext();
 
     return (
       <LogInModal
-        {...props}
         inputDisabled={inputDisabled}
         logInExtraInfo={loginExtraInfo}
         logIn={callLogIn}
         dispatchActionPromise={dispatchActionPromise}
+        clearModal={modalContext.clearModal}
       />
     );
   },
 );
 
 export default ConnectedLoginModal;
diff --git a/web/modals/account/user-settings-modal.react.js b/web/modals/account/user-settings-modal.react.js
index 3f73e8754..607e8d01b 100644
--- a/web/modals/account/user-settings-modal.react.js
+++ b/web/modals/account/user-settings-modal.react.js
@@ -1,445 +1,440 @@
 // @flow
 
 import classNames from 'classnames';
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   deleteAccountActionTypes,
   deleteAccount,
   changeUserPasswordActionTypes,
   changeUserPassword,
   logOut,
   logOutActionTypes,
 } from 'lib/actions/user-actions';
 import { preRequestUserStateSelector } from 'lib/selectors/account-selectors';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors';
 import type { LogOutResult } from 'lib/types/account-types';
 import { type PreRequestUserState } from 'lib/types/session-types';
 import {
   type PasswordUpdate,
   type CurrentUserInfo,
 } from 'lib/types/user-types';
 import {
   type DispatchActionPromise,
   useDispatchActionPromise,
   useServerCall,
 } from 'lib/utils/action-utils';
 
 import Button from '../../components/button.react';
 import { useSelector } from '../../redux/redux-utils';
 import Input from '../input.react';
+import { useModalContext } from '../modal-provider.react';
 import Modal from '../modal.react';
 import css from './user-settings-modal.css';
 
 type TabType = 'general' | 'delete';
 type TabProps = {
   +name: string,
   +tabType: TabType,
   +selected: boolean,
   +onClick: (tabType: TabType) => void,
 };
 class Tab extends React.PureComponent<TabProps> {
   render() {
     const { selected, name, tabType } = this.props;
     const classNamesForTab = classNames({
       [css['current-tab']]: selected,
       [css['delete-tab']]: selected && tabType === 'delete',
     });
     return (
       <li className={classNamesForTab} onClick={this.onClick}>
         <a>{name}</a>
       </li>
     );
   }
 
   onClick = () => {
     return this.props.onClick(this.props.tabType);
   };
 }
 
-type BaseProps = {
-  +setModal: (modal: ?React.Node) => void,
-};
 type Props = {
-  ...BaseProps,
   +currentUserInfo: ?CurrentUserInfo,
   +preRequestUserState: PreRequestUserState,
   +inputDisabled: boolean,
   +dispatchActionPromise: DispatchActionPromise,
   +deleteAccount: (
     password: string,
     preRequestUserState: PreRequestUserState,
   ) => Promise<LogOutResult>,
   +changeUserPassword: (passwordUpdate: PasswordUpdate) => Promise<void>,
   +logOut: (preRequestUserState: PreRequestUserState) => Promise<LogOutResult>,
+  +clearModal: () => void,
 };
 type State = {
   +newPassword: string,
   +confirmNewPassword: string,
   +currentPassword: string,
   +errorMessage: string,
   +currentTabType: TabType,
 };
 
 class UserSettingsModal extends React.PureComponent<Props, State> {
   newPasswordInput: ?HTMLInputElement;
   currentPasswordInput: ?HTMLInputElement;
 
   constructor(props: Props) {
     super(props);
     this.state = {
       newPassword: '',
       confirmNewPassword: '',
       currentPassword: '',
       errorMessage: '',
       currentTabType: 'general',
     };
   }
 
   componentDidMount() {
     invariant(this.newPasswordInput, 'newPasswordInput ref unset');
     this.newPasswordInput.focus();
   }
 
   get username() {
     return this.props.currentUserInfo && !this.props.currentUserInfo.anonymous
       ? this.props.currentUserInfo.username
       : undefined;
   }
 
   onLogOut = (event: SyntheticEvent<HTMLButtonElement>) => {
     event.preventDefault();
     this.props.dispatchActionPromise(logOutActionTypes, this.logOut());
   };
 
   logOut = async () => {
     await this.props.logOut(this.props.preRequestUserState);
-    this.clearModal();
+    this.props.clearModal();
   };
 
   render() {
     const { inputDisabled } = this.props;
     let mainContent = null;
     if (this.state.currentTabType === 'general') {
       mainContent = (
         <div>
           <div className={css['form-text']}>
             <div className={css['form-title']}>Username</div>
             <div className={css['form-content']}>{this.username}</div>
           </div>
           <div>
             <div className={css['form-title']}>New password</div>
             <div className={css['form-content']}>
               <div>
                 <Input
                   type="password"
                   placeholder="New password"
                   value={this.state.newPassword}
                   onChange={this.onChangeNewPassword}
                   ref={this.newPasswordInputRef}
                   disabled={inputDisabled}
                 />
               </div>
               <div>
                 <Input
                   type="password"
                   placeholder="Confirm new password"
                   value={this.state.confirmNewPassword}
                   onChange={this.onChangeConfirmNewPassword}
                   disabled={inputDisabled}
                 />
               </div>
             </div>
           </div>
         </div>
       );
     } else if (this.state.currentTabType === 'delete') {
       mainContent = (
         <p className={css['italic']}>
           Your account will be permanently deleted. There is no way to reverse
           this.
         </p>
       );
     }
 
     let buttons = null;
     if (this.state.currentTabType === 'delete') {
       buttons = (
         <Button
           variant="danger"
           type="submit"
           onClick={this.onDelete}
           disabled={inputDisabled}
         >
           Delete account
         </Button>
       );
     } else {
       buttons = (
         <>
           <Button
             type="submit"
             variant="primary"
             onClick={this.onSubmit}
             disabled={inputDisabled}
           >
             Update Account
           </Button>
           <Button
             type="submit"
             variant="secondary"
             onClick={this.onLogOut}
             disabled={inputDisabled}
           >
             Log out
           </Button>
         </>
       );
     }
 
     let errorMsg;
     if (this.state.errorMessage) {
       errorMsg = (
         <div className={css['modal-form-error']}>{this.state.errorMessage}</div>
       );
     }
 
     return (
-      <Modal name="Edit account" onClose={this.clearModal} size="large">
+      <Modal name="Edit account" onClose={this.props.clearModal} size="large">
         <ul className={css['tab-panel']}>
           <Tab
             name="General"
             tabType="general"
             onClick={this.setTab}
             selected={this.state.currentTabType === 'general'}
             key="general"
           />
           <Tab
             name="Delete"
             tabType="delete"
             onClick={this.setTab}
             selected={this.state.currentTabType === 'delete'}
             key="delete"
           />
         </ul>
         <div className={css['modal-body']}>
           <form method="POST">
             {mainContent}
             <div className={css['user-settings-current-password']}>
               <p className={css['confirm-account-password']}>
                 Please enter your current password to confirm your identity
               </p>
               <div className={css['form-title']}>Current password</div>
               <div className={css['form-content']}>
                 <Input
                   type="password"
                   placeholder="Current password"
                   value={this.state.currentPassword}
                   onChange={this.onChangeCurrentPassword}
                   disabled={inputDisabled}
                   ref={this.currentPasswordInputRef}
                 />
               </div>
             </div>
             <div className={css['form-footer']}>
               {buttons}
               {errorMsg}
             </div>
           </form>
         </div>
       </Modal>
     );
   }
 
   newPasswordInputRef = (newPasswordInput: ?HTMLInputElement) => {
     this.newPasswordInput = newPasswordInput;
   };
 
   currentPasswordInputRef = (currentPasswordInput: ?HTMLInputElement) => {
     this.currentPasswordInput = currentPasswordInput;
   };
 
   setTab = (tabType: TabType) => {
     this.setState({ currentTabType: tabType });
   };
 
   onChangeNewPassword = (event: SyntheticEvent<HTMLInputElement>) => {
     const target = event.target;
     invariant(target instanceof HTMLInputElement, 'target not input');
     this.setState({ newPassword: target.value });
   };
 
   onChangeConfirmNewPassword = (event: SyntheticEvent<HTMLInputElement>) => {
     const target = event.target;
     invariant(target instanceof HTMLInputElement, 'target not input');
     this.setState({ confirmNewPassword: target.value });
   };
 
   onChangeCurrentPassword = (event: SyntheticEvent<HTMLInputElement>) => {
     const target = event.target;
     invariant(target instanceof HTMLInputElement, 'target not input');
     this.setState({ currentPassword: target.value });
   };
 
   onSubmit = (event: SyntheticEvent<HTMLButtonElement>) => {
     event.preventDefault();
 
     if (this.state.newPassword === '') {
       this.setState(
         {
           newPassword: '',
           confirmNewPassword: '',
           errorMessage: 'empty password',
           currentTabType: 'general',
         },
         () => {
           invariant(this.newPasswordInput, 'newPasswordInput ref unset');
           this.newPasswordInput.focus();
         },
       );
     } else if (this.state.newPassword !== this.state.confirmNewPassword) {
       this.setState(
         {
           newPassword: '',
           confirmNewPassword: '',
           errorMessage: "passwords don't match",
           currentTabType: 'general',
         },
         () => {
           invariant(this.newPasswordInput, 'newPasswordInput ref unset');
           this.newPasswordInput.focus();
         },
       );
       return;
     }
 
     this.props.dispatchActionPromise(
       changeUserPasswordActionTypes,
       this.changeUserSettingsAction(),
     );
   };
 
   async changeUserSettingsAction() {
     try {
       await this.props.changeUserPassword({
         updatedFields: {
           password: this.state.newPassword,
         },
         currentPassword: this.state.currentPassword,
       });
-      this.clearModal();
+      this.props.clearModal();
     } catch (e) {
       if (e.message === 'invalid_credentials') {
         this.setState(
           {
             currentPassword: '',
             errorMessage: 'wrong current password',
           },
           () => {
             invariant(
               this.currentPasswordInput,
               'currentPasswordInput ref unset',
             );
             this.currentPasswordInput.focus();
           },
         );
       } else {
         this.setState(
           {
             newPassword: '',
             confirmNewPassword: '',
             currentPassword: '',
             errorMessage: 'unknown error',
             currentTabType: 'general',
           },
           () => {
             invariant(this.newPasswordInput, 'newPasswordInput ref unset');
             this.newPasswordInput.focus();
           },
         );
       }
       throw e;
     }
   }
 
   onDelete = (event: SyntheticEvent<HTMLButtonElement>) => {
     event.preventDefault();
     this.props.dispatchActionPromise(
       deleteAccountActionTypes,
       this.deleteAction(),
     );
   };
 
   async deleteAction() {
     try {
       const response = await this.props.deleteAccount(
         this.state.currentPassword,
         this.props.preRequestUserState,
       );
-      this.clearModal();
+      this.props.clearModal();
       return response;
     } catch (e) {
       const errorMessage =
         e.message === 'invalid_credentials'
           ? 'wrong password'
           : 'unknown error';
       this.setState(
         {
           currentPassword: '',
           errorMessage: errorMessage,
         },
         () => {
           invariant(
             this.currentPasswordInput,
             'currentPasswordInput ref unset',
           );
           this.currentPasswordInput.focus();
         },
       );
       throw e;
     }
   }
-
-  clearModal = () => {
-    this.props.setModal(null);
-  };
 }
 
 const deleteAccountLoadingStatusSelector = createLoadingStatusSelector(
   deleteAccountActionTypes,
 );
 const changeUserPasswordLoadingStatusSelector = createLoadingStatusSelector(
   changeUserPasswordActionTypes,
 );
-
-const ConnectedUserSettingsModal: React.ComponentType<BaseProps> = React.memo<BaseProps>(
-  function ConnectedUserSettingsModal(props) {
+const ConnectedUserSettingsModal: React.ComponentType<{}> = React.memo<{}>(
+  function ConnectedUserSettingsModal(): React.Node {
     const currentUserInfo = useSelector(state => state.currentUserInfo);
     const preRequestUserState = useSelector(preRequestUserStateSelector);
     const inputDisabled = useSelector(
       state =>
         deleteAccountLoadingStatusSelector(state) === 'loading' ||
         changeUserPasswordLoadingStatusSelector(state) === 'loading',
     );
     const callDeleteAccount = useServerCall(deleteAccount);
     const callChangeUserPassword = useServerCall(changeUserPassword);
     const dispatchActionPromise = useDispatchActionPromise();
     const boundLogOut = useServerCall(logOut);
 
+    const modalContext = useModalContext();
+
     return (
       <UserSettingsModal
-        {...props}
         currentUserInfo={currentUserInfo}
         preRequestUserState={preRequestUserState}
         inputDisabled={inputDisabled}
         deleteAccount={callDeleteAccount}
         changeUserPassword={callChangeUserPassword}
         dispatchActionPromise={dispatchActionPromise}
         logOut={boundLogOut}
+        clearModal={modalContext.clearModal}
       />
     );
   },
 );
 
 export default ConnectedUserSettingsModal;
diff --git a/web/modals/chat/invalid-upload.react.js b/web/modals/chat/invalid-upload.react.js
index 0eea6a111..bfa214905 100644
--- a/web/modals/chat/invalid-upload.react.js
+++ b/web/modals/chat/invalid-upload.react.js
@@ -1,27 +1,30 @@
 // @flow
 
 import * as React from 'react';
 
+import { useModalContext } from '../../modals/modal-provider.react';
 import css from '../../style.css';
 import Modal from '../modal.react';
 
 type Props = {
-  +setModal: (modal: ?React.Node) => void,
+  +clearModal: () => void,
 };
 class InvalidUploadModal extends React.PureComponent<Props> {
   render(): React.Node {
     return (
-      <Modal name="Invalid upload" onClose={this.clearModal}>
+      <Modal name="Invalid upload" onClose={this.props.clearModal}>
         <div className={css['modal-body']}>
           <p>We don&apos;t support that file type yet :(</p>
         </div>
       </Modal>
     );
   }
+}
+
+function ConnectedInvalidUploadModal(): React.Node {
+  const modalContext = useModalContext();
 
-  clearModal: () => void = () => {
-    this.props.setModal(null);
-  };
+  return <InvalidUploadModal clearModal={modalContext.clearModal} />;
 }
 
-export default InvalidUploadModal;
+export default ConnectedInvalidUploadModal;
diff --git a/web/modals/chat/sidebar-list-modal.react.js b/web/modals/chat/sidebar-list-modal.react.js
index d9a2cc552..a59599959 100644
--- a/web/modals/chat/sidebar-list-modal.react.js
+++ b/web/modals/chat/sidebar-list-modal.react.js
@@ -1,145 +1,143 @@
 // @flow
 
 import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import * as React from 'react';
 
 import { sidebarInfoSelector } from 'lib/selectors/thread-selectors';
 import SearchIndex from 'lib/shared/search-index';
 import { threadSearchText } from 'lib/shared/thread-utils';
 import type { ThreadInfo } from 'lib/types/thread-types';
 
 import chatThreadListCSS from '../../chat/chat-thread-list.css';
 import SidebarItem from '../../chat/sidebar-item.react';
 import { useSelector } from '../../redux/redux-utils';
 import globalCSS from '../../style.css';
 import { MagnifyingGlass } from '../../vectors.react';
+import { useModalContext } from '../modal-provider.react';
 import Modal from '../modal.react';
 
 type Props = {
-  +setModal: (modal: ?React.Node) => void,
   +threadInfo: ThreadInfo,
 };
+
 function SidebarListModal(props: Props): React.Node {
-  const { setModal, threadInfo } = props;
+  const { threadInfo } = props;
   const [searchState, setSearchState] = React.useState({
     text: '',
     results: new Set<string>(),
   });
-
-  const clearModal = React.useCallback(() => {
-    setModal(null);
-  }, [setModal]);
+  const { clearModal } = useModalContext();
 
   const sidebarInfos = useSelector(
     state => sidebarInfoSelector(state)[threadInfo.id] ?? [],
   );
   const userInfos = useSelector(state => state.userStore.userInfos);
 
   const listData = React.useMemo(() => {
     if (!searchState.text) {
       return sidebarInfos;
     }
     return sidebarInfos.filter(sidebarInfo =>
       searchState.results.has(sidebarInfo.threadInfo.id),
     );
   }, [sidebarInfos, searchState]);
 
   const sidebars = React.useMemo(
     () =>
       listData.map(item => (
         <div
           className={classNames(
             chatThreadListCSS.thread,
             chatThreadListCSS.sidebar,
           )}
           key={item.threadInfo.id}
           onClick={clearModal}
         >
           <SidebarItem sidebarInfo={item} />
         </div>
       )),
     [clearModal, listData],
   );
 
   const viewerID = useSelector(
     state => state.currentUserInfo && state.currentUserInfo.id,
   );
   const searchIndex = React.useMemo(() => {
     const index = new SearchIndex();
     for (const sidebarInfo of sidebarInfos) {
       const threadInfoFromSidebarInfo = sidebarInfo.threadInfo;
       index.addEntry(
         threadInfoFromSidebarInfo.id,
         threadSearchText(threadInfoFromSidebarInfo, userInfos, viewerID),
       );
     }
     return index;
   }, [sidebarInfos, userInfos, viewerID]);
 
   React.useEffect(() => {
     setSearchState(curState => ({
       ...curState,
       results: new Set(searchIndex.getSearchResults(curState.text)),
     }));
   }, [searchIndex]);
 
   const onChangeSearchText = React.useCallback(
     (event: SyntheticEvent<HTMLInputElement>) => {
       const searchText = event.currentTarget.value;
       setSearchState({
         text: searchText,
         results: new Set(searchIndex.getSearchResults(searchText)),
       });
     },
     [searchIndex],
   );
 
   const clearQuery = React.useCallback(
     (event: SyntheticEvent<HTMLAnchorElement>) => {
       event.preventDefault();
       setSearchState({ text: '', results: [] });
     },
     [],
   );
 
   let clearQueryButton = null;
   if (searchState.text) {
     clearQueryButton = (
       <a href="#" onClick={clearQuery}>
         <FontAwesomeIcon
           icon={faTimesCircle}
           className={chatThreadListCSS.clearQuery}
         />
       </a>
     );
   }
 
   return (
     <Modal name="Sidebars" onClose={clearModal} fixedHeight={false}>
       <div
         className={classNames(
           globalCSS['modal-body'],
           globalCSS['resized-modal-body'],
         )}
       >
         <div>
           <div className={chatThreadListCSS.search}>
             <MagnifyingGlass className={chatThreadListCSS.searchVector} />
             <input
               type="text"
               placeholder="Search sidebars"
               value={searchState.text}
               onChange={onChangeSearchText}
             />
             {clearQueryButton}
           </div>
         </div>
         <ul className={chatThreadListCSS.list}>{sidebars}</ul>
       </div>
     </Modal>
   );
 }
 
 export default SidebarListModal;
diff --git a/web/modals/concurrent-modification-modal.react.js b/web/modals/concurrent-modification-modal.react.js
index a326a689b..3b3349cdc 100644
--- a/web/modals/concurrent-modification-modal.react.js
+++ b/web/modals/concurrent-modification-modal.react.js
@@ -1,31 +1,33 @@
 // @flow
 
 import * as React from 'react';
 
 import css from '../style.css';
+import { useModalContext } from './modal-provider.react';
 import Modal from './modal.react';
 
 type Props = {
   +onRefresh: () => void,
-  +onClose: () => void,
 };
 
 export default function ConcurrentModificationModal(props: Props): React.Node {
+  const modalContext = useModalContext();
+
   return (
-    <Modal name="Concurrent modification" onClose={props.onClose}>
+    <Modal name="Concurrent modification" onClose={modalContext.clearModal}>
       <div className={css['modal-body']}>
         <p>
           It looks like somebody is attempting to modify that field at the same
           time as you! Please refresh the entry and try again.
         </p>
         <div className={css['form-footer']}>
           <input
             type="submit"
             value="Refresh entry"
             onClick={props.onRefresh}
           />
         </div>
       </div>
     </Modal>
   );
 }
diff --git a/web/modals/history/history-modal.react.js b/web/modals/history/history-modal.react.js
index 6e619b089..f13af6b29 100644
--- a/web/modals/history/history-modal.react.js
+++ b/web/modals/history/history-modal.react.js
@@ -1,281 +1,284 @@
 // @flow
 
 import classNames from 'classnames';
 import dateFormat from 'dateformat';
 import invariant from 'invariant';
 import _filter from 'lodash/fp/filter';
 import _flow from 'lodash/fp/flow';
 import _map from 'lodash/fp/map';
 import _unionBy from 'lodash/fp/unionBy';
 import * as React from 'react';
 
 import {
   fetchEntriesActionTypes,
   fetchEntries,
   fetchRevisionsForEntryActionTypes,
   fetchRevisionsForEntry,
 } from 'lib/actions/entry-actions';
 import { nonExcludeDeletedCalendarFiltersSelector } from 'lib/selectors/calendar-filter-selectors';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors';
 import type {
   EntryInfo,
   CalendarQuery,
   FetchEntryInfosResult,
 } from 'lib/types/entry-types';
 import { type CalendarFilter } from 'lib/types/filter-types';
 import type { HistoryMode, HistoryRevisionInfo } from 'lib/types/history-types';
 import type { LoadingStatus } from 'lib/types/loading-types';
 import {
   type DispatchActionPromise,
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils';
 import { dateFromString } from 'lib/utils/date-utils';
 
 import LoadingIndicator from '../../loading-indicator.react';
+import { useModalContext } from '../../modals/modal-provider.react';
 import { useSelector } from '../../redux/redux-utils';
 import { allDaysToEntries } from '../../selectors/entry-selectors';
 import Modal from '../modal.react';
 import HistoryEntry from './history-entry.react';
 import HistoryRevision from './history-revision.react';
 import css from './history.css';
 
 type BaseProps = {
   +mode: HistoryMode,
   +dayString: string,
-  +onClose: () => void,
   +currentEntryID?: ?string,
 };
 type Props = {
   ...BaseProps,
   +entryInfos: ?(EntryInfo[]),
   +dayLoadingStatus: LoadingStatus,
   +entryLoadingStatus: LoadingStatus,
   +calendarFilters: $ReadOnlyArray<CalendarFilter>,
   +dispatchActionPromise: DispatchActionPromise,
   +fetchEntries: (
     calendarQuery: CalendarQuery,
   ) => Promise<FetchEntryInfosResult>,
   +fetchRevisionsForEntry: (
     entryID: string,
   ) => Promise<$ReadOnlyArray<HistoryRevisionInfo>>,
+  +onClose: () => void,
 };
 type State = {
   +mode: HistoryMode,
   +animateModeChange: boolean,
   +currentEntryID: ?string,
   +revisions: $ReadOnlyArray<HistoryRevisionInfo>,
 };
 class HistoryModal extends React.PureComponent<Props, State> {
   static defaultProps = { currentEntryID: null };
 
   constructor(props: Props) {
     super(props);
     this.state = {
       mode: props.mode,
       animateModeChange: false,
       currentEntryID: props.currentEntryID,
       revisions: [],
     };
   }
 
   componentDidMount() {
     this.loadDay();
     if (this.state.mode === 'entry') {
       invariant(this.state.currentEntryID, 'entry ID should be set');
       this.loadEntry(this.state.currentEntryID);
     }
   }
 
   render() {
     let allHistoryButton = null;
     if (this.state.mode === 'entry') {
       allHistoryButton = (
         <a
           href="#"
           onClick={this.onClickAllEntries}
           className={css.allHistoryButton}
         >
           &lt; all entries
         </a>
       );
     }
     const historyDate = dateFromString(this.props.dayString);
     const prettyDate = dateFormat(historyDate, 'mmmm dS, yyyy');
     const loadingStatus =
       this.state.mode === 'day'
         ? this.props.dayLoadingStatus
         : this.props.entryLoadingStatus;
 
     let entries;
     const entryInfos = this.props.entryInfos;
     if (entryInfos) {
       entries = _flow(
         _filter((entryInfo: EntryInfo) => entryInfo.id),
         _map((entryInfo: EntryInfo) => {
           const serverID = entryInfo.id;
           invariant(serverID, 'serverID should be set');
           return (
             <HistoryEntry
               entryInfo={entryInfo}
               onClick={this.onClickEntry}
               animateAndLoadEntry={this.animateAndLoadEntry}
               key={serverID}
             />
           );
         }),
       )(entryInfos);
     } else {
       entries = [];
     }
 
     const revisionInfos = this.state.revisions.filter(
       revisionInfo => revisionInfo.entryID === this.state.currentEntryID,
     );
     const revisions = [];
     for (let i = 0; i < revisionInfos.length; i++) {
       const revisionInfo = revisionInfos[i];
       const nextRevisionInfo = revisionInfos[i + 1];
       const isDeletionOrRestoration =
         nextRevisionInfo !== undefined &&
         revisionInfo.deleted !== nextRevisionInfo.deleted;
       revisions.push(
         <HistoryRevision
           revisionInfo={revisionInfo}
           isDeletionOrRestoration={isDeletionOrRestoration}
           key={revisionInfo.id}
         />,
       );
     }
 
     const animate = this.state.animateModeChange;
     const dayMode = this.state.mode === 'day';
     const dayClasses = classNames({
       [css.dayHistory]: true,
       [css.dayHistoryVisible]: dayMode && !animate,
       [css.dayHistoryInvisible]: !dayMode && !animate,
       [css.dayHistoryVisibleAnimate]: dayMode && animate,
       [css.dayHistoryInvisibleAnimate]: !dayMode && animate,
     });
     const entryMode = this.state.mode === 'entry';
     const entryClasses = classNames({
       [css.entryHistory]: true,
       [css.entryHistoryVisible]: entryMode && !animate,
       [css.entryHistoryInvisible]: !entryMode && !animate,
       [css.entryHistoryVisibleAnimate]: entryMode && animate,
       [css.entryHistoryInvisibleAnimate]: !entryMode && animate,
     });
 
     return (
       <Modal name="History" onClose={this.props.onClose}>
         <div className={css.modalBody}>
           <div className={css.header}>
             {allHistoryButton}
             <span className={css.date}>{prettyDate}</span>
             <LoadingIndicator
               status={loadingStatus}
               color="black"
               loadingClassName={css.loading}
               errorClassName={css.error}
             />
           </div>
           <div className={dayClasses}>
             <ul>{entries}</ul>
           </div>
           <div className={entryClasses}>
             <ul>{revisions}</ul>
           </div>
         </div>
       </Modal>
     );
   }
 
   loadDay() {
     this.props.dispatchActionPromise(
       fetchEntriesActionTypes,
       this.props.fetchEntries({
         startDate: this.props.dayString,
         endDate: this.props.dayString,
         filters: this.props.calendarFilters,
       }),
     );
   }
 
   loadEntry(entryID: string) {
     this.setState({ mode: 'entry', currentEntryID: entryID });
     this.props.dispatchActionPromise(
       fetchRevisionsForEntryActionTypes,
       this.fetchRevisionsForEntryAction(entryID),
     );
   }
 
   async fetchRevisionsForEntryAction(entryID: string) {
     const result = await this.props.fetchRevisionsForEntry(entryID);
     this.setState(prevState => {
       // This merge here will preserve time ordering correctly
       const revisions = _unionBy('id')(result)(prevState.revisions);
       return { ...prevState, revisions };
     });
     return {
       entryID,
       text: result[0].text,
       deleted: result[0].deleted,
     };
   }
 
   onClickEntry = (entryID: string) => {
     this.setState({ animateModeChange: true });
     this.loadEntry(entryID);
   };
 
   onClickAllEntries = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     this.setState({
       mode: 'day',
       animateModeChange: true,
     });
   };
 
   animateAndLoadEntry = (entryID: string) => {
     this.setState({ animateModeChange: true });
     this.loadEntry(entryID);
   };
 }
 
 const dayLoadingStatusSelector = createLoadingStatusSelector(
   fetchEntriesActionTypes,
 );
 const entryLoadingStatusSelector = createLoadingStatusSelector(
   fetchRevisionsForEntryActionTypes,
 );
 
 const ConnectedHistoryModal: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedHistoryModal(props) {
     const entryInfos = useSelector(
       state => allDaysToEntries(state)[props.dayString],
     );
     const dayLoadingStatus = useSelector(dayLoadingStatusSelector);
     const entryLoadingStatus = useSelector(entryLoadingStatusSelector);
     const calendarFilters = useSelector(
       nonExcludeDeletedCalendarFiltersSelector,
     );
     const callFetchEntries = useServerCall(fetchEntries);
     const callFetchRevisionsForEntry = useServerCall(fetchRevisionsForEntry);
     const dispatchActionPromise = useDispatchActionPromise();
+    const modalContext = useModalContext();
 
     return (
       <HistoryModal
         {...props}
         entryInfos={entryInfos}
         dayLoadingStatus={dayLoadingStatus}
         entryLoadingStatus={entryLoadingStatus}
         calendarFilters={calendarFilters}
         fetchEntries={callFetchEntries}
         fetchRevisionsForEntry={callFetchRevisionsForEntry}
         dispatchActionPromise={dispatchActionPromise}
+        onClose={modalContext.clearModal}
       />
     );
   },
 );
 
 export default ConnectedHistoryModal;
diff --git a/web/modals/threads/thread-settings-modal.react.js b/web/modals/threads/thread-settings-modal.react.js
index a2e2ad038..ccecf8d86 100644
--- a/web/modals/threads/thread-settings-modal.react.js
+++ b/web/modals/threads/thread-settings-modal.react.js
@@ -1,592 +1,596 @@
 // @flow
 
 import classNames from 'classnames';
 import invariant from 'invariant';
 import _pickBy from 'lodash/fp/pickBy';
 import * as React from 'react';
 
 import {
   deleteThreadActionTypes,
   deleteThread,
   changeThreadSettingsActionTypes,
   changeThreadSettings,
 } from 'lib/actions/thread-actions';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors';
 import {
   threadHasPermission,
   threadTypeDescriptions,
   robotextName,
 } from 'lib/shared/thread-utils';
 import {
   type ThreadInfo,
   threadTypes,
   assertThreadType,
   type ChangeThreadSettingsPayload,
   type UpdateThreadRequest,
   type LeaveThreadPayload,
   threadPermissions,
   type ThreadChanges,
 } from 'lib/types/thread-types';
 import type { UserInfos } from 'lib/types/user-types';
 import {
   useDispatchActionPromise,
   useServerCall,
   type DispatchActionPromise,
 } from 'lib/utils/action-utils';
 import { firstLine } from 'lib/utils/string-utils';
 
+import { useModalContext } from '../../modals/modal-provider.react';
 import { useSelector } from '../../redux/redux-utils';
 import css from '../../style.css';
 import Modal from '../modal.react';
 import ColorPicker from './color-picker.react';
 
 const { COMMUNITY_OPEN_SUBTHREAD, COMMUNITY_SECRET_SUBTHREAD } = threadTypes;
 
 type TabType = 'general' | 'privacy' | 'delete';
 type TabProps = {
   +name: string,
   +tabType: TabType,
   +selected: boolean,
   +onClick: (tabType: TabType) => void,
 };
 class Tab extends React.PureComponent<TabProps> {
   render() {
     const classNamesForTab = classNames({
       [css['current-tab']]: this.props.selected,
       [css['delete-tab']]:
         this.props.selected && this.props.tabType === 'delete',
     });
     return (
       <li className={classNamesForTab} onClick={this.onClick}>
         <a>{this.props.name}</a>
       </li>
     );
   }
 
   onClick = () => {
     return this.props.onClick(this.props.tabType);
   };
 }
 
 type BaseProps = {
   +threadID: string,
-  +onClose: () => void,
 };
 type Props = {
   ...BaseProps,
   +threadInfo: ThreadInfo,
   +changeInProgress: boolean,
   +viewerID: ?string,
   +userInfos: UserInfos,
   +dispatchActionPromise: DispatchActionPromise,
   +deleteThread: (
     threadID: string,
     currentAccountPassword: string,
   ) => Promise<LeaveThreadPayload>,
   +changeThreadSettings: (
     update: UpdateThreadRequest,
   ) => Promise<ChangeThreadSettingsPayload>,
+  +onClose: () => void,
 };
 type State = {
   +queuedChanges: ThreadChanges,
   +errorMessage: string,
   +accountPassword: string,
   +currentTabType: TabType,
 };
 class ThreadSettingsModal extends React.PureComponent<Props, State> {
   nameInput: ?HTMLInputElement;
   newThreadPasswordInput: ?HTMLInputElement;
   accountPasswordInput: ?HTMLInputElement;
 
   constructor(props: Props) {
     super(props);
     this.state = {
       queuedChanges: Object.freeze({}),
       errorMessage: '',
       accountPassword: '',
       currentTabType: 'general',
     };
   }
 
   componentDidMount() {
     invariant(this.nameInput, 'nameInput ref unset');
     this.nameInput.focus();
   }
 
   componentDidUpdate(prevProps: Props) {
     if (this.state.currentTabType !== 'delete') {
       return;
     }
 
     const permissionForDeleteTab = this.hasPermissionForTab(
       this.props.threadInfo,
       'delete',
     );
     const prevPermissionForDeleteTab = this.hasPermissionForTab(
       prevProps.threadInfo,
       'delete',
     );
 
     if (!permissionForDeleteTab && prevPermissionForDeleteTab) {
       this.setTab('general');
     }
   }
 
   hasPermissionForTab(threadInfo: ThreadInfo, tab: TabType) {
     if (tab === 'general') {
       return threadHasPermission(
         threadInfo,
         threadPermissions.EDIT_THREAD_NAME,
       );
     } else if (tab === 'privacy') {
       return threadHasPermission(
         threadInfo,
         threadPermissions.EDIT_PERMISSIONS,
       );
     } else if (tab === 'delete') {
       return threadHasPermission(threadInfo, threadPermissions.DELETE_THREAD);
     }
     invariant(false, `invalid tab ${tab}`);
   }
 
   possiblyChangedValue(key: string) {
     const valueChanged =
       this.state.queuedChanges[key] !== null &&
       this.state.queuedChanges[key] !== undefined;
     return valueChanged
       ? this.state.queuedChanges[key]
       : this.props.threadInfo[key];
   }
 
   namePlaceholder() {
     return robotextName(
       this.props.threadInfo,
       this.props.viewerID,
       this.props.userInfos,
     );
   }
 
   changeQueued() {
     return (
       Object.keys(
         _pickBy(
           value => value !== null && value !== undefined,
           // the lodash/fp libdef coerces the returned object's properties to the
           // same type, which means it only works for object-as-maps $FlowFixMe
         )(this.state.queuedChanges),
       ).length > 0
     );
   }
 
   render() {
     const { threadInfo } = this.props;
     const inputDisabled =
       this.props.changeInProgress ||
       !this.hasPermissionForTab(threadInfo, this.state.currentTabType);
 
     let mainContent = null;
     if (this.state.currentTabType === 'general') {
       mainContent = (
         <div>
           <div>
             <div className={css['form-title']}>Thread name</div>
             <div className={css['form-content']}>
               <input
                 type="text"
                 value={firstLine(this.possiblyChangedValue('name'))}
                 placeholder={this.namePlaceholder()}
                 onChange={this.onChangeName}
                 disabled={inputDisabled}
                 ref={this.nameInputRef}
               />
             </div>
           </div>
           <div className={css['form-textarea-container']}>
             <div className={css['form-title']}>Description</div>
             <div className={css['form-content']}>
               <textarea
                 value={this.possiblyChangedValue('description')}
                 placeholder="Thread description"
                 onChange={this.onChangeDescription}
                 disabled={inputDisabled}
               ></textarea>
             </div>
           </div>
           <div className={css['edit-thread-color-container']}>
             <div className={`${css['form-title']} ${css['color-title']}`}>
               Color
             </div>
             <div className={css['form-content']}>
               <ColorPicker
                 id="edit-thread-color"
                 value={this.possiblyChangedValue('color')}
                 disabled={inputDisabled}
                 onChange={this.onChangeColor}
               />
             </div>
           </div>
         </div>
       );
     } else if (this.state.currentTabType === 'privacy') {
       mainContent = (
         <div className={css['edit-thread-privacy-container']}>
           <div className={css['modal-radio-selector']}>
             <div className={css['form-title']}>Thread type</div>
             <div className={css['form-enum-selector']}>
               <div className={css['form-enum-container']}>
                 <input
                   type="radio"
                   name="edit-thread-type"
                   id="edit-thread-open"
                   value={COMMUNITY_OPEN_SUBTHREAD}
                   checked={
                     this.possiblyChangedValue('type') ===
                     COMMUNITY_OPEN_SUBTHREAD
                   }
                   onChange={this.onChangeThreadType}
                   disabled={inputDisabled}
                 />
                 <div className={css['form-enum-option']}>
                   <label htmlFor="edit-thread-open">
                     Open
                     <span className={css['form-enum-description']}>
                       {threadTypeDescriptions[COMMUNITY_OPEN_SUBTHREAD]}
                     </span>
                   </label>
                 </div>
               </div>
               <div className={css['form-enum-container']}>
                 <input
                   type="radio"
                   name="edit-thread-type"
                   id="edit-thread-closed"
                   value={COMMUNITY_SECRET_SUBTHREAD}
                   checked={
                     this.possiblyChangedValue('type') ===
                     COMMUNITY_SECRET_SUBTHREAD
                   }
                   onChange={this.onChangeThreadType}
                   disabled={inputDisabled}
                 />
                 <div className={css['form-enum-option']}>
                   <label htmlFor="edit-thread-closed">
                     Secret
                     <span className={css['form-enum-description']}>
                       {threadTypeDescriptions[COMMUNITY_SECRET_SUBTHREAD]}
                     </span>
                   </label>
                 </div>
               </div>
             </div>
           </div>
         </div>
       );
     } else if (this.state.currentTabType === 'delete') {
       mainContent = (
         <>
           <div>
             <p className={css['italic']}>
               Your thread will be permanently deleted. There is no way to
               reverse this.
             </p>
           </div>
           <div className={css['edit-thread-account-password']}>
             <p className={css['confirm-account-password']}>
               Please enter your account password to confirm your identity
             </p>
             <div className={css['form-title']}>Account password</div>
             <div className={css['form-content']}>
               <input
                 type="password"
                 placeholder="Personal account password"
                 value={this.state.accountPassword}
                 onChange={this.onChangeAccountPassword}
                 disabled={inputDisabled}
                 ref={this.accountPasswordInputRef}
               />
             </div>
           </div>
         </>
       );
     }
 
     let buttons = null;
     if (this.state.currentTabType === 'delete') {
       buttons = (
         <input
           type="submit"
           value="Delete"
           onClick={this.onDelete}
           disabled={inputDisabled}
         />
       );
     } else {
       buttons = (
         <input
           type="submit"
           value="Save"
           onClick={this.onSubmit}
           disabled={inputDisabled || !this.changeQueued()}
         />
       );
     }
 
     const tabs = [
       <Tab
         name="General"
         tabType="general"
         onClick={this.setTab}
         selected={this.state.currentTabType === 'general'}
         key="general"
       />,
     ];
 
     // This UI needs to be updated to handle sidebars but we haven't gotten
     // there yet. We'll probably end up ripping it out anyways, so for now we
     // are just hiding the privacy tab for any thread that was created as a
     // sidebar
     const canSeePrivacyTab =
       this.possiblyChangedValue('parentThreadID') &&
       threadInfo.sourceMessageID &&
       (threadInfo.type === threadTypes.COMMUNITY_OPEN_SUBTHREAD ||
         threadInfo.type === threadTypes.COMMUNITY_SECRET_SUBTHREAD);
 
     if (canSeePrivacyTab) {
       tabs.push(
         <Tab
           name="Privacy"
           tabType="privacy"
           onClick={this.setTab}
           selected={this.state.currentTabType === 'privacy'}
           key="privacy"
         />,
       );
     }
     const canDeleteThread = this.hasPermissionForTab(threadInfo, 'delete');
     if (canDeleteThread) {
       tabs.push(
         <Tab
           name="Delete"
           tabType="delete"
           onClick={this.setTab}
           selected={this.state.currentTabType === 'delete'}
           key="delete"
         />,
       );
     }
 
     return (
       <Modal name="Thread settings" onClose={this.props.onClose} size="large">
         <ul className={css['tab-panel']}>{tabs}</ul>
         <div className={css['modal-body']}>
           <form method="POST">
             {mainContent}
             <div className={css['form-footer']}>
               {buttons}
               <div className={css['modal-form-error']}>
                 {this.state.errorMessage}
               </div>
             </div>
           </form>
         </div>
       </Modal>
     );
   }
 
   setTab = (tabType: TabType) => {
     this.setState({ currentTabType: tabType });
   };
 
   nameInputRef = (nameInput: ?HTMLInputElement) => {
     this.nameInput = nameInput;
   };
 
   newThreadPasswordInputRef = (newThreadPasswordInput: ?HTMLInputElement) => {
     this.newThreadPasswordInput = newThreadPasswordInput;
   };
 
   accountPasswordInputRef = (accountPasswordInput: ?HTMLInputElement) => {
     this.accountPasswordInput = accountPasswordInput;
   };
 
   onChangeName = (event: SyntheticEvent<HTMLInputElement>) => {
     const target = event.currentTarget;
     const newValue =
       target.value !== this.props.threadInfo.name ? target.value : undefined;
     this.setState((prevState: State) => ({
       ...prevState,
       queuedChanges: {
         ...prevState.queuedChanges,
         name: firstLine(newValue),
       },
     }));
   };
 
   onChangeDescription = (event: SyntheticEvent<HTMLTextAreaElement>) => {
     const target = event.currentTarget;
     const newValue =
       target.value !== this.props.threadInfo.description
         ? target.value
         : undefined;
     this.setState((prevState: State) => ({
       ...prevState,
       queuedChanges: {
         ...prevState.queuedChanges,
         description: newValue,
       },
     }));
   };
 
   onChangeColor = (color: string) => {
     const newValue = color !== this.props.threadInfo.color ? color : undefined;
     this.setState((prevState: State) => ({
       ...prevState,
       queuedChanges: {
         ...prevState.queuedChanges,
         color: newValue,
       },
     }));
   };
 
   onChangeThreadType = (event: SyntheticEvent<HTMLInputElement>) => {
     const uiValue = assertThreadType(parseInt(event.currentTarget.value, 10));
     const newValue =
       uiValue !== this.props.threadInfo.type ? uiValue : undefined;
     this.setState((prevState: State) => ({
       ...prevState,
       queuedChanges: {
         ...prevState.queuedChanges,
         type: newValue,
       },
     }));
   };
 
   onChangeAccountPassword = (event: SyntheticEvent<HTMLInputElement>) => {
     const target = event.currentTarget;
     this.setState({ accountPassword: target.value });
   };
 
   onSubmit = (event: SyntheticEvent<HTMLInputElement>) => {
     event.preventDefault();
     this.props.dispatchActionPromise(
       changeThreadSettingsActionTypes,
       this.changeThreadSettingsAction(),
     );
   };
 
   async changeThreadSettingsAction() {
     try {
       const response = await this.props.changeThreadSettings({
         threadID: this.props.threadInfo.id,
         changes: this.state.queuedChanges,
       });
       this.props.onClose();
       return response;
     } catch (e) {
       this.setState(
         prevState => ({
           ...prevState,
           queuedChanges: Object.freeze({}),
           accountPassword: '',
           errorMessage: 'unknown error',
           currentTabType: 'general',
         }),
         () => {
           invariant(this.nameInput, 'nameInput ref unset');
           this.nameInput.focus();
         },
       );
       throw e;
     }
   }
 
   onDelete = (event: SyntheticEvent<HTMLInputElement>) => {
     event.preventDefault();
     this.props.dispatchActionPromise(
       deleteThreadActionTypes,
       this.deleteThreadAction(),
     );
   };
 
   async deleteThreadAction() {
     try {
       const response = await this.props.deleteThread(
         this.props.threadInfo.id,
         this.state.accountPassword,
       );
       this.props.onClose();
       return response;
     } catch (e) {
       const errorMessage =
         e.message === 'invalid_credentials'
           ? 'wrong password'
           : 'unknown error';
       this.setState(
         {
           accountPassword: '',
           errorMessage: errorMessage,
         },
         () => {
           invariant(
             this.accountPasswordInput,
             'accountPasswordInput ref unset',
           );
           this.accountPasswordInput.focus();
         },
       );
       throw e;
     }
   }
 }
 
 const deleteThreadLoadingStatusSelector = createLoadingStatusSelector(
   deleteThreadActionTypes,
 );
 const changeThreadSettingsLoadingStatusSelector = createLoadingStatusSelector(
   changeThreadSettingsActionTypes,
 );
 
 const ConnectedThreadSettingsModal: React.ComponentType<BaseProps> = React.memo<BaseProps>(
   function ConnectedThreadSettingsModal(props) {
     const changeInProgress = useSelector(
       state =>
         deleteThreadLoadingStatusSelector(state) === 'loading' ||
         changeThreadSettingsLoadingStatusSelector(state) === 'loading',
     );
     const viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
     const userInfos = useSelector(state => state.userStore.userInfos);
     const callDeleteThread = useServerCall(deleteThread);
     const callChangeThreadSettings = useServerCall(changeThreadSettings);
     const dispatchActionPromise = useDispatchActionPromise();
     const threadInfo: ?ThreadInfo = useSelector(
       state => threadInfoSelector(state)[props.threadID],
     );
+    const modalContext = useModalContext();
+
     if (!threadInfo) {
       return (
-        <Modal onClose={props.onClose} name="Invalid thread">
+        <Modal onClose={modalContext.clearModal} name="Invalid thread">
           <div className={css['modal-body']}>
             <p>You no longer have permission to view this thread</p>
           </div>
         </Modal>
       );
     }
 
     return (
       <ThreadSettingsModal
         {...props}
         threadInfo={threadInfo}
         changeInProgress={changeInProgress}
         viewerID={viewerID}
         userInfos={userInfos}
         deleteThread={callDeleteThread}
         changeThreadSettings={callChangeThreadSettings}
         dispatchActionPromise={dispatchActionPromise}
+        onClose={modalContext.clearModal}
       />
     );
   },
 );
 
 export default ConnectedThreadSettingsModal;
diff --git a/web/sidebar/community-picker.react.js b/web/sidebar/community-picker.react.js
index b911794b1..f9af4792d 100644
--- a/web/sidebar/community-picker.react.js
+++ b/web/sidebar/community-picker.react.js
@@ -1,30 +1,29 @@
 // @flow
 
 import * as React from 'react';
 
 import Button from '../components/button.react';
 import UserSettingsModal from '../modals/account/user-settings-modal.react.js';
+import { useModalContext } from '../modals/modal-provider.react';
 import SWMansionIcon from '../SWMansionIcon.react';
 import css from './community-picker.css';
 
-type Props = { +setModal: (modal: ?React.Node) => void };
-
-function CommunityPicker(props: Props): React.Node {
-  const { setModal } = props;
+function CommunityPicker(): React.Node {
+  const { setModal } = useModalContext();
 
   const setModalToUserSettings = React.useCallback(() => {
-    setModal(<UserSettingsModal setModal={setModal} />);
+    setModal(<UserSettingsModal />);
   }, [setModal]);
 
   return (
     <div className={css.container}>
       <SWMansionIcon icon="inbox" size={28} />
       <div className={css.spacer} />
       <Button variant="round" onClick={setModalToUserSettings}>
         <SWMansionIcon icon="settings" size={16} />
       </Button>
     </div>
   );
 }
 
 export default CommunityPicker;
diff --git a/web/sidebar/left-layout-aside.react.js b/web/sidebar/left-layout-aside.react.js
index 4f347ddf4..790c7ba9c 100644
--- a/web/sidebar/left-layout-aside.react.js
+++ b/web/sidebar/left-layout-aside.react.js
@@ -1,22 +1,18 @@
 // @flow
 
 import * as React from 'react';
 
 import AppSwitcher from './app-switcher.react';
 import CommunityPicker from './community-picker.react';
 import css from './left-layout-aside.css';
-type Props = {
-  +setModal: (modal: ?React.Node) => void,
-};
 
-function LeftLayoutAside(props: Props): React.Node {
-  const { setModal } = props;
+function LeftLayoutAside(): React.Node {
   return (
     <aside className={css.container}>
-      <CommunityPicker setModal={setModal} />
+      <CommunityPicker />
       <AppSwitcher />
     </aside>
   );
 }
 
 export default LeftLayoutAside;
diff --git a/web/splash/splash.react.js b/web/splash/splash.react.js
index 9530390da..548ba6c2d 100644
--- a/web/splash/splash.react.js
+++ b/web/splash/splash.react.js
@@ -1,280 +1,282 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   requestAccessActionTypes,
   requestAccess,
 } from 'lib/actions/user-actions';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors';
 import { validEmailRegex } from 'lib/shared/account-utils';
 import type { AccessRequest } from 'lib/types/account-types';
 import { type DeviceType, assertDeviceType } from 'lib/types/device-types';
 import { type LoadingStatus } from 'lib/types/loading-types';
 import {
   type DispatchActionPromise,
   useDispatchActionPromise,
   useServerCall,
 } from 'lib/utils/action-utils';
 
 import LoadingIndicator from '../loading-indicator.react';
 import LogInModal from '../modals/account/log-in-modal.react';
+import { useModalContext } from '../modals/modal-provider.react';
 import { useSelector } from '../redux/redux-utils';
 import css from './splash.css';
 
 const defaultRequestAccessScrollHeight = 390;
 
-type BaseProps = {
-  +setModal: (modal: ?React.Node) => void,
-  +currentModal: ?React.Node,
-};
 type Props = {
-  ...BaseProps,
   +loadingStatus: LoadingStatus,
   +dispatchActionPromise: DispatchActionPromise,
   +requestAccess: (accessRequest: AccessRequest) => Promise<void>,
+  +setModal: (modal: React.Node) => void,
+  +modal: ?React.Node,
 };
 type State = {
   +platform: DeviceType,
   +email: string,
   +error: ?string,
   +success: ?string,
 };
 class Splash extends React.PureComponent<Props, State> {
   emailInput: ?HTMLInputElement;
   bottomContainer: ?HTMLDivElement;
   state: State = {
     platform: 'ios',
     email: '',
     error: null,
     success: null,
   };
 
   componentDidMount() {
     if ('scrollRestoration' in history) {
       history.scrollRestoration = 'manual';
     }
   }
 
   render() {
     let androidWarning = null;
     if (this.state.platform === 'android') {
       androidWarning = (
         <p className={css.androidWarning}>
           Make sure this is the email you use to log in to the Google Play
           Store!
         </p>
       );
     }
     let error = null;
     if (this.state.error) {
       error = <p className={css.requestAccessError}>{this.state.error}</p>;
     }
     let success = null;
     if (this.state.success) {
       success = (
         <p className={css.requestAccessSuccess}>{this.state.success}</p>
       );
     }
     let submitButtonContent = 'Submit';
     if (this.props.loadingStatus === 'loading') {
       submitButtonContent = (
         <LoadingIndicator status={this.props.loadingStatus} />
       );
     }
     return (
       <React.Fragment>
         <div className={css.headerContainer}>
           <div className={css.top}>
             <header className={css.header}>
               <div className={css.headerContents}>
                 <h1>Comm</h1>
                 <div className={css.actionLinks}>
                   <a href="#" onClick={this.onClickRequestAccess}>
                     <span className={css.requestAccess}>Request access</span>
                   </a>
                   <a href="#" onClick={this.onClickLogIn}>
                     <span>Log in</span>
                   </a>
                 </div>
               </div>
             </header>
           </div>
         </div>
         <div className={css.content}>
           <div className={css.topContainer}>
             <div className={css.top}>
               <div className={css.body}>
                 <div className={css.intro}>
                   <p className={css.introHeader}>
                     Comm is a chat app with an integrated calendar.
                   </p>
                   <p className={css.introDescription}>
                     We make it incredibly easy to plan events with your friends.
                   </p>
                 </div>
                 <div className={css.devices}>
                   <img
                     src="images/ios_screenshot.png"
                     srcSet="images/ios_screenshot@2x.png 526w"
                     width={263}
                     height={527}
                   />
                   <img
                     src="images/android_screenshot.png"
                     srcSet="images/android_screenshot@2x.png 570w"
                     width={285}
                     height={527}
                   />
                 </div>
               </div>
             </div>
           </div>
           <div className={css.bottomContainer} ref={this.bottomContainerRef}>
             <div className={css.bottom}>
               <div className={css.headerRest}>
                 <div className={css.prompt}>
                   <p className={css.promptHeader}>
                     We&apos;re currently alpha testing the first version of our
                     app.
                   </p>
                   <p className={css.promptDescription}>
                     If you&apos;d like to try it out, please let us know!
                   </p>
                   <div className={css.requestAccessContainer}>
                     <div>
                       <form className={css.requestAccessForm}>
                         <input
                           type="text"
                           value={this.state.email}
                           onChange={this.onChangeEmail}
                           placeholder="Email address"
                           className={css.requestAccessEmail}
                           ref={this.emailInputRef}
                         />
                         <div className={css.customSelect}>
                           <select onChange={this.onChangePlatform}>
                             <option value="ios">iOS</option>
                             <option value="android">Android</option>
                           </select>
                         </div>
                         <button
                           type="submit"
                           className={css.requestAccessSubmit}
                           onClick={this.onSubmitRequestAccess}
                         >
                           {submitButtonContent}
                         </button>
                       </form>
                       {androidWarning}
                     </div>
                     {error}
                     {success}
                   </div>
                 </div>
               </div>
               <div className={css.headerOverscroll} />
             </div>
           </div>
         </div>
-        {this.props.currentModal}
+        {this.props.modal}
       </React.Fragment>
     );
   }
 
   bottomContainerRef = (bottomContainer: ?HTMLDivElement) => {
     this.bottomContainer = bottomContainer;
   };
 
   emailInputRef = (emailInput: ?HTMLInputElement) => {
     this.emailInput = emailInput;
   };
 
   onChangeEmail = (event: SyntheticEvent<HTMLInputElement>) => {
     this.setState({ email: event.currentTarget.value });
   };
 
   onChangePlatform = (event: SyntheticEvent<HTMLSelectElement>) => {
     this.setState({ platform: assertDeviceType(event.currentTarget.value) });
   };
 
   onClickLogIn = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
-    this.props.setModal(<LogInModal setModal={this.props.setModal} />);
+    this.props.setModal(<LogInModal />);
   };
 
   onClickRequestAccess = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     const { bottomContainer } = this;
     invariant(bottomContainer, 'bottomContainer should exist');
     const formHeight = 180;
     const contentHeight = 790;
     const guaranteesSpace = contentHeight - window.innerHeight + formHeight;
     if (bottomContainer.scrollTop < guaranteesSpace) {
       bottomContainer.scrollTop = Math.max(
         defaultRequestAccessScrollHeight,
         guaranteesSpace,
       );
     }
     if (this.emailInput) {
       this.emailInput.focus();
     }
   };
 
   onSubmitRequestAccess = (event: SyntheticEvent<HTMLInputElement>) => {
     event.preventDefault();
 
     if (this.state.email.search(validEmailRegex) === -1) {
       this.setState({ success: null, error: 'Please enter a valid email!' });
       invariant(this.emailInput, 'should be set');
       this.emailInput.focus();
       return;
     }
 
     this.props.dispatchActionPromise(
       requestAccessActionTypes,
       this.requestAccessAction(),
     );
   };
 
   async requestAccessAction() {
     try {
       await this.props.requestAccess({
         email: this.state.email,
         platform: this.state.platform,
       });
       this.setState({
         success:
           "Thanks for your interest! We'll let you know as soon as " +
           "we're able to extend an invite.",
         error: null,
       });
     } catch (e) {
       this.setState({ success: null, error: 'Unknown error...' });
       throw e;
     }
   }
 }
 
 const loadingStatusSelector = createLoadingStatusSelector(
   requestAccessActionTypes,
 );
-const ConnectedSplash: React.ComponentType<BaseProps> = React.memo<BaseProps>(
-  function ConnectedSplash(props) {
+
+const ConnectedSplash: React.ComponentType<{}> = React.memo<{}>(
+  function ConnectedSplash(): React.Node {
     const loadingStatus = useSelector(loadingStatusSelector);
     const callRequestAccess = useServerCall(requestAccess);
     const dispatchActionPromise = useDispatchActionPromise();
 
+    const modalContext = useModalContext();
+
     return (
       <Splash
-        {...props}
         loadingStatus={loadingStatus}
         requestAccess={callRequestAccess}
         dispatchActionPromise={dispatchActionPromise}
+        setModal={modalContext.setModal}
+        modal={modalContext.modal}
       />
     );
   },
 );
 
 export default ConnectedSplash;