diff --git a/web/crypto/aes-gcm-crypto-utils.js b/web/crypto/aes-gcm-crypto-utils.js
index 1bf280750..d96c194d4 100644
--- a/web/crypto/aes-gcm-crypto-utils.js
+++ b/web/crypto/aes-gcm-crypto-utils.js
@@ -1,92 +1,92 @@
 // @flow
 
 const ENCRYPTION_ALGORITHM = 'AES-GCM';
 const ENCRYPTION_KEY_USAGES: $ReadOnlyArray<CryptoKey$Usages> = [
   'encrypt',
   'decrypt',
 ];
 
-type EncryptedData = {
+export type EncryptedData = {
   +iv: BufferSource,
   +ciphertext: Uint8Array,
 };
 
 function generateCryptoKey({
   extractable,
 }: {
   +extractable: boolean,
 }): Promise<CryptoKey> {
   return crypto.subtle.generateKey(
     {
       name: ENCRYPTION_ALGORITHM,
       length: 256,
     },
     extractable,
     ENCRYPTION_KEY_USAGES,
   );
 }
 
 function generateIV(): BufferSource {
   return crypto.getRandomValues(new Uint8Array(12));
 }
 
 async function encryptData(
   data: Uint8Array,
   key: CryptoKey,
 ): Promise<EncryptedData> {
   const iv = generateIV();
   const ciphertext = await crypto.subtle.encrypt(
     {
       name: ENCRYPTION_ALGORITHM,
       iv: iv,
     },
     key,
     data,
   );
   return {
     ciphertext: new Uint8Array(ciphertext),
     iv,
   };
 }
 
 async function decryptData(
   encryptedData: EncryptedData,
   key: CryptoKey,
 ): Promise<Uint8Array> {
   const { ciphertext, iv } = encryptedData;
   const decrypted = await crypto.subtle.decrypt(
     {
       name: ENCRYPTION_ALGORITHM,
       iv,
     },
     key,
     ciphertext,
   );
   return new Uint8Array(decrypted);
 }
 
 async function exportKeyToJWK(
   key: CryptoKey,
 ): Promise<SubtleCrypto$JsonWebKey> {
   return await crypto.subtle.exportKey('jwk', key);
 }
 
 async function importJWKKey(
   jwkKey: SubtleCrypto$JsonWebKey,
 ): Promise<CryptoKey> {
   return await crypto.subtle.importKey(
     'jwk',
     jwkKey,
     ENCRYPTION_ALGORITHM,
     true,
     ENCRYPTION_KEY_USAGES,
   );
 }
 
 export {
   generateCryptoKey,
   encryptData,
   decryptData,
   exportKeyToJWK,
   importJWKKey,
 };
diff --git a/web/database/database-module-provider.js b/web/database/database-module-provider.js
index 5a32f74cb..8e1fdbdb5 100644
--- a/web/database/database-module-provider.js
+++ b/web/database/database-module-provider.js
@@ -1,156 +1,158 @@
 // @flow
 
 import invariant from 'invariant';
 import localforage from 'localforage';
 
 import {
   DATABASE_WORKER_PATH,
   WORKERS_MODULES_DIR_PATH,
   SQLITE_ENCRYPTION_KEY,
 } from './utils/constants.js';
 import { isDesktopSafari, isSQLiteSupported } from './utils/db-utils.js';
 import WorkerConnectionProxy from './utils/WorkerConnectionProxy.js';
 import {
   exportKeyToJWK,
   generateCryptoKey,
 } from '../crypto/aes-gcm-crypto-utils.js';
 import {
   workerRequestMessageTypes,
   type WorkerRequestMessage,
   type WorkerResponseMessage,
 } from '../types/worker-types.js';
 
 declare var baseURL: string;
 declare var commQueryExecutorFilename: string;
 const databaseStatuses = Object.freeze({
   notRunning: 'NOT_RUNNING',
   initSuccess: 'INIT_SUCCESS',
   initInProgress: 'INIT_IN_PROGRESS',
   initError: 'INIT_ERROR',
 });
 
 type DatabaseStatus =
   | { +type: 'NOT_RUNNING' | 'INIT_SUCCESS' | 'INIT_ERROR' }
   | { +type: 'INIT_IN_PROGRESS', +initPromise: Promise<void> };
 
 type InitOptions = { +clearDatabase: boolean };
 
 class DatabaseModule {
   worker: ?SharedWorker;
   workerProxy: ?WorkerConnectionProxy;
   status: DatabaseStatus = { type: databaseStatuses.notRunning };
 
   async init({ clearDatabase }: InitOptions): Promise<void> {
     if (!isSQLiteSupported()) {
       console.warn('SQLite is not supported');
       this.status = { type: databaseStatuses.initError };
       return;
     }
 
     if (clearDatabase && this.status.type === databaseStatuses.initSuccess) {
       console.info('Clearing sensitive data');
       invariant(this.workerProxy, 'Worker proxy should exist');
       await this.workerProxy.scheduleOnWorker({
         type: workerRequestMessageTypes.CLEAR_SENSITIVE_DATA,
       });
       this.status = { type: databaseStatuses.notRunning };
     }
 
     if (this.status.type === databaseStatuses.initInProgress) {
       await this.status.initPromise;
       return;
     }
 
     if (
       this.status.type === databaseStatuses.initSuccess ||
       this.status.type === databaseStatuses.initError
     ) {
       return;
     }
 
     this.worker = new SharedWorker(DATABASE_WORKER_PATH);
     this.worker.onerror = console.error;
     this.workerProxy = new WorkerConnectionProxy(
       this.worker.port,
       console.error,
     );
 
     const origin = window.location.origin;
 
     const initPromise = (async () => {
       try {
         let encryptionKey = null;
         if (isDesktopSafari) {
           encryptionKey = await getSafariEncryptionKey();
         }
         invariant(this.workerProxy, 'Worker proxy should exist');
         await this.workerProxy.scheduleOnWorker({
           type: workerRequestMessageTypes.INIT,
           databaseModuleFilePath: `${origin}${baseURL}${WORKERS_MODULES_DIR_PATH}`,
           encryptionKey,
           commQueryExecutorFilename,
         });
         this.status = { type: databaseStatuses.initSuccess };
         console.info('Database initialization success');
       } catch (error) {
         this.status = { type: databaseStatuses.initError };
         console.error(`Database initialization failure`, error);
       }
     })();
 
     this.status = { type: databaseStatuses.initInProgress, initPromise };
 
     await initPromise;
   }
 
   async isDatabaseSupported(): Promise<boolean> {
     if (this.status.type === databaseStatuses.initInProgress) {
       await this.status.initPromise;
     }
     return this.status.type === databaseStatuses.initSuccess;
   }
 
   async schedule(
     payload: WorkerRequestMessage,
   ): Promise<?WorkerResponseMessage> {
     if (this.status.type === databaseStatuses.notRunning) {
       throw new Error('Database not running');
     }
 
     if (this.status.type === databaseStatuses.initInProgress) {
       await this.status.initPromise;
     }
 
     if (this.status.type === databaseStatuses.initError) {
       throw new Error('Database could not be initialized');
     }
 
     invariant(this.workerProxy, 'Worker proxy should exist');
     return this.workerProxy.scheduleOnWorker(payload);
   }
 }
 
 async function getSafariEncryptionKey(): Promise<SubtleCrypto$JsonWebKey> {
-  const encryptionKey = await localforage.getItem(SQLITE_ENCRYPTION_KEY);
+  const encryptionKey = await localforage.getItem<CryptoKey>(
+    SQLITE_ENCRYPTION_KEY,
+  );
   if (encryptionKey) {
     return await exportKeyToJWK(encryptionKey);
   }
   const newEncryptionKey = await generateCryptoKey({
     extractable: true,
   });
   await localforage.setItem(SQLITE_ENCRYPTION_KEY, newEncryptionKey);
   return await exportKeyToJWK(newEncryptionKey);
 }
 
 let databaseModule: ?DatabaseModule = null;
 async function getDatabaseModule(): Promise<DatabaseModule> {
   if (!databaseModule) {
     databaseModule = new DatabaseModule();
     await databaseModule.init({ clearDatabase: false });
   }
   return databaseModule;
 }
 // Start initializing the database immediately
 getDatabaseModule();
 
 export { getDatabaseModule };
diff --git a/web/database/worker/db-worker.js b/web/database/worker/db-worker.js
index b80a554f3..58dfb07c4 100644
--- a/web/database/worker/db-worker.js
+++ b/web/database/worker/db-worker.js
@@ -1,252 +1,255 @@
 // @flow
 
 import localforage from 'localforage';
 
 import {
   getClientStore,
   processDBStoreOperations,
 } from './process-operations.js';
 import {
   decryptData,
   encryptData,
   generateCryptoKey,
   importJWKKey,
+  type EncryptedData,
 } from '../../crypto/aes-gcm-crypto-utils.js';
 import {
   type SharedWorkerMessageEvent,
   type WorkerRequestMessage,
   type WorkerResponseMessage,
   workerRequestMessageTypes,
   workerResponseMessageTypes,
   type WorkerRequestProxyMessage,
   workerWriteRequests,
 } from '../../types/worker-types.js';
 import { getDatabaseModule } from '../db-module.js';
 import { type EmscriptenModule } from '../types/module.js';
 import { type SQLiteQueryExecutor } from '../types/sqlite-query-executor.js';
 import {
   COMM_SQLITE_DATABASE_PATH,
   CURRENT_USER_ID_KEY,
   localforageConfig,
   SQLITE_CONTENT,
   SQLITE_ENCRYPTION_KEY,
 } from '../utils/constants.js';
 import {
   clearSensitiveData,
   exportDatabaseContent,
   importDatabaseContent,
 } from '../utils/db-utils.js';
 
 localforage.config(localforageConfig);
 
 let encryptionKey: ?CryptoKey = null;
 
 let sqliteQueryExecutor: ?SQLiteQueryExecutor = null;
 let dbModule: ?EmscriptenModule = null;
 
 let persistNeeded: boolean = false;
 let persistInProgress: boolean = false;
 
 async function initDatabase(
   databaseModuleFilePath: string,
   commQueryExecutorFilename: ?string,
   encryptionKeyJWK?: ?SubtleCrypto$JsonWebKey,
 ) {
   dbModule = getDatabaseModule(
     commQueryExecutorFilename,
     databaseModuleFilePath,
   );
 
   try {
     const result = dbModule.CommQueryExecutor.testDBOperation();
     console.log(result);
   } catch (e) {
     console.error(e);
   }
 
   if (encryptionKeyJWK) {
     encryptionKey = await importJWKKey(encryptionKeyJWK);
   } else {
     encryptionKey = await localforage.getItem(SQLITE_ENCRYPTION_KEY);
     if (!encryptionKey) {
       const cryptoKey = await generateCryptoKey({ extractable: false });
       await localforage.setItem(SQLITE_ENCRYPTION_KEY, cryptoKey);
     }
   }
 
-  const encryptedContent = await localforage.getItem(SQLITE_CONTENT);
+  const encryptedContent = await localforage.getItem<EncryptedData>(
+    SQLITE_CONTENT,
+  );
 
   let dbContent = null;
   try {
     if (encryptionKey && encryptedContent) {
       dbContent = await decryptData(encryptedContent, encryptionKey);
     }
   } catch (e) {
     console.error('Error while decrypting content, clearing database content');
     await localforage.removeItem(SQLITE_CONTENT);
   }
 
   if (dbContent) {
     importDatabaseContent(dbContent, dbModule, COMM_SQLITE_DATABASE_PATH);
 
     console.info(
       'Database exists and is properly encrypted, using persisted data',
     );
   } else {
     console.info('Creating fresh database');
   }
   sqliteQueryExecutor = new dbModule.SQLiteQueryExecutor(
     COMM_SQLITE_DATABASE_PATH,
   );
 }
 
 async function persist() {
   persistInProgress = true;
   if (!sqliteQueryExecutor || !dbModule) {
     persistInProgress = false;
     throw new Error('Database not initialized');
   }
 
   if (!encryptionKey) {
     encryptionKey = await localforage.getItem(SQLITE_ENCRYPTION_KEY);
   }
 
   while (persistNeeded) {
     persistNeeded = false;
     const dbData = exportDatabaseContent(dbModule, COMM_SQLITE_DATABASE_PATH);
     if (!encryptionKey) {
       persistInProgress = false;
       throw new Error('Encryption key is missing');
     }
     const encryptedData = await encryptData(dbData, encryptionKey);
     await localforage.setItem(SQLITE_CONTENT, encryptedData);
   }
   persistInProgress = false;
 }
 
 async function processAppRequest(
   message: WorkerRequestMessage,
 ): Promise<?WorkerResponseMessage> {
   // non-database operations
   if (message.type === workerRequestMessageTypes.PING) {
     return {
       type: workerResponseMessageTypes.PONG,
       text: 'PONG',
     };
   } else if (
     message.type === workerRequestMessageTypes.GENERATE_DATABASE_ENCRYPTION_KEY
   ) {
     const cryptoKey = await generateCryptoKey({ extractable: false });
     await localforage.setItem(SQLITE_ENCRYPTION_KEY, cryptoKey);
     return undefined;
   }
 
   // database operations
   if (message.type === workerRequestMessageTypes.INIT) {
     await initDatabase(
       message.databaseModuleFilePath,
       message.commQueryExecutorFilename,
       message.encryptionKey,
     );
     return undefined;
   } else if (message.type === workerRequestMessageTypes.CLEAR_SENSITIVE_DATA) {
     encryptionKey = null;
     await localforage.clear();
     if (dbModule && sqliteQueryExecutor) {
       clearSensitiveData(
         dbModule,
         COMM_SQLITE_DATABASE_PATH,
         sqliteQueryExecutor,
       );
     }
     sqliteQueryExecutor = null;
     return undefined;
   }
 
   if (!sqliteQueryExecutor) {
     throw new Error('Database not initialized');
   }
 
   // read-only operations
   if (message.type === workerRequestMessageTypes.GET_CLIENT_STORE) {
     return {
       type: workerResponseMessageTypes.CLIENT_STORE,
       store: getClientStore(sqliteQueryExecutor),
     };
   } else if (message.type === workerRequestMessageTypes.GET_CURRENT_USER_ID) {
     return {
       type: workerResponseMessageTypes.GET_CURRENT_USER_ID,
       userID: sqliteQueryExecutor.getMetadata(CURRENT_USER_ID_KEY),
     };
   } else if (
     message.type === workerRequestMessageTypes.GET_PERSIST_STORAGE_ITEM
   ) {
     return {
       type: workerResponseMessageTypes.GET_PERSIST_STORAGE_ITEM,
       item: sqliteQueryExecutor.getPersistStorageItem(message.key),
     };
   }
 
   // write operations
   if (!workerWriteRequests.includes(message.type)) {
     throw new Error('Request type not supported');
   }
   if (!sqliteQueryExecutor) {
     throw new Error('Database not initialized');
   }
 
   if (message.type === workerRequestMessageTypes.PROCESS_STORE_OPERATIONS) {
     processDBStoreOperations(sqliteQueryExecutor, message.storeOperations);
   } else if (message.type === workerRequestMessageTypes.SET_CURRENT_USER_ID) {
     sqliteQueryExecutor.setMetadata(CURRENT_USER_ID_KEY, message.userID);
   } else if (
     message.type === workerRequestMessageTypes.SET_PERSIST_STORAGE_ITEM
   ) {
     sqliteQueryExecutor.setPersistStorageItem(message.key, message.item);
   } else if (
     message.type === workerRequestMessageTypes.REMOVE_PERSIST_STORAGE_ITEM
   ) {
     sqliteQueryExecutor.removePersistStorageItem(message.key);
   }
 
   persistNeeded = true;
   if (!persistInProgress) {
     persist();
   }
 
   return undefined;
 }
 
 function connectHandler(event: SharedWorkerMessageEvent) {
   if (!event.ports.length) {
     return;
   }
   const port: MessagePort = event.ports[0];
   console.log('Web database worker alive!');
 
   port.onmessage = async function (messageEvent: MessageEvent) {
     const data: WorkerRequestProxyMessage = (messageEvent.data: any);
     const { id, message } = data;
 
     if (!id) {
       port.postMessage({
         error: 'Request without identifier',
       });
     }
 
     try {
       const result = await processAppRequest(message);
       port.postMessage({
         id,
         message: result,
       });
     } catch (e) {
       port.postMessage({
         id,
         error: e.message,
       });
     }
   };
 }
 
 self.addEventListener('connect', connectHandler);
diff --git a/web/input/input-state-container.react.js b/web/input/input-state-container.react.js
index c65e00400..5938e096d 100644
--- a/web/input/input-state-container.react.js
+++ b/web/input/input-state-container.react.js
@@ -1,1701 +1,1708 @@
 // @flow
 
 import invariant from 'invariant';
 import _groupBy from 'lodash/fp/groupBy.js';
 import _keyBy from 'lodash/fp/keyBy.js';
 import _omit from 'lodash/fp/omit.js';
 import _partition from 'lodash/fp/partition.js';
 import _sortBy from 'lodash/fp/sortBy.js';
 import _memoize from 'lodash/memoize.js';
 import * as React from 'react';
 import { createSelector } from 'reselect';
 
 import {
   createLocalMessageActionType,
   sendMultimediaMessageActionTypes,
   useLegacySendMultimediaMessage,
   sendTextMessageActionTypes,
   useSendTextMessage,
 } from 'lib/actions/message-actions.js';
 import type {
   LegacySendMultimediaMessageInput,
   SendTextMessageInput,
 } from 'lib/actions/message-actions.js';
 import { queueReportsActionType } from 'lib/actions/report-actions.js';
 import { useNewThread } from 'lib/actions/thread-actions.js';
 import {
   uploadMultimedia,
   updateMultimediaMessageMediaActionType,
   useDeleteUpload,
   useBlobServiceUpload,
   type MultimediaUploadCallbacks,
   type MultimediaUploadExtras,
   type BlobServiceUploadAction,
   type DeleteUploadInput,
 } from 'lib/actions/upload-actions.js';
 import {
   useModalContext,
   type PushModal,
 } from 'lib/components/modal-provider.react.js';
 import blobService from 'lib/facts/blob-service.js';
 import commStaffCommunity from 'lib/facts/comm-staff-community.js';
 import { getNextLocalUploadID } from 'lib/media/media-utils.js';
 import { pendingToRealizedThreadIDsSelector } from 'lib/selectors/thread-selectors.js';
 import {
   createMediaMessageInfo,
   localIDPrefix,
   useMessageCreationSideEffectsFunc,
 } from 'lib/shared/message-utils.js';
 import type { CreationSideEffectsFunc } from 'lib/shared/messages/message-spec.js';
 import {
   createRealThreadFromPendingThread,
   draftKeyFromThreadID,
   threadIsPending,
   threadIsPendingSidebar,
   patchThreadInfoToIncludeMentionedMembersOfParent,
   threadInfoInsideCommunity,
 } from 'lib/shared/thread-utils.js';
 import type { CalendarQuery } from 'lib/types/entry-types.js';
 import type {
   UploadMultimediaResult,
   MediaMissionStep,
   MediaMissionFailure,
   MediaMissionResult,
   MediaMission,
 } from 'lib/types/media-types.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import {
   type RawMessageInfo,
   type RawMultimediaMessageInfo,
   type SendMessageResult,
   type SendMessagePayload,
 } from 'lib/types/message-types.js';
 import type { RawImagesMessageInfo } from 'lib/types/messages/images.js';
 import type { RawMediaMessageInfo } from 'lib/types/messages/media.js';
 import type { RawTextMessageInfo } from 'lib/types/messages/text.js';
 import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { reportTypes } from 'lib/types/report-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import {
   type ClientNewThreadRequest,
   type NewThreadResult,
   type ThreadInfo,
 } from 'lib/types/thread-types.js';
 import {
   type DispatchActionPromise,
   useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 import {
   makeBlobServiceEndpointURL,
   isBlobServiceURI,
   blobHashFromBlobServiceURI,
 } from 'lib/utils/blob-service.js';
 import { getConfig } from 'lib/utils/config.js';
 import { getMessageForException, cloneError } from 'lib/utils/errors.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 import { generateReportID } from 'lib/utils/report-utils.js';
 
 import {
   type PendingMultimediaUpload,
   type TypeaheadState,
   InputStateContext,
   type BaseInputState,
   type TypeaheadInputState,
   type InputState,
 } from './input-state.js';
 import { encryptFile } from '../media/encryption-utils.js';
 import { generateThumbHash } from '../media/image-utils.js';
 import {
   preloadMediaResource,
   validateFile,
   preloadImage,
 } from '../media/media-utils.js';
 import InvalidUploadModal from '../modals/chat/invalid-upload.react.js';
 import { updateNavInfoActionType } from '../redux/action-types.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { nonThreadCalendarQuery } from '../selectors/nav-selectors.js';
 
 type BaseProps = {
   +children: React.Node,
 };
 type Props = {
   ...BaseProps,
   +activeChatThreadID: ?string,
   +drafts: { +[key: string]: string },
   +viewerID: ?string,
   +messageStoreMessages: { +[id: string]: RawMessageInfo },
   +pendingRealizedThreadIDs: $ReadOnlyMap<string, string>,
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
   +calendarQuery: () => CalendarQuery,
   +uploadMultimedia: (
     multimedia: Object,
     extras: MultimediaUploadExtras,
     callbacks: MultimediaUploadCallbacks,
   ) => Promise<UploadMultimediaResult>,
   +blobServiceUpload: BlobServiceUploadAction,
   +deleteUpload: (input: DeleteUploadInput) => Promise<void>,
   +sendMultimediaMessage: (
     input: LegacySendMultimediaMessageInput,
   ) => Promise<SendMessageResult>,
   +sendTextMessage: (input: SendTextMessageInput) => Promise<SendMessageResult>,
   +newThread: (request: ClientNewThreadRequest) => Promise<NewThreadResult>,
   +pushModal: PushModal,
   +sendCallbacks: $ReadOnlyArray<() => mixed>,
   +registerSendCallback: (() => mixed) => void,
   +unregisterSendCallback: (() => mixed) => void,
   +textMessageCreationSideEffectsFunc: CreationSideEffectsFunc<RawTextMessageInfo>,
 };
 type WritableState = {
   pendingUploads: {
     [threadID: string]: { [localUploadID: string]: PendingMultimediaUpload },
   },
   textCursorPositions: { [threadID: string]: number },
   typeaheadState: TypeaheadState,
 };
 type State = $ReadOnly<WritableState>;
 
 type PropsAndState = {
   ...Props,
   ...State,
 };
 class InputStateContainer extends React.PureComponent<Props, State> {
   state: State = {
     pendingUploads: {},
     textCursorPositions: {},
     typeaheadState: {
       canBeVisible: false,
       keepUpdatingThreadMembers: true,
       frozenUserMentionsCandidates: [],
       frozenChatMentionsCandidates: {},
       moveChoiceUp: null,
       moveChoiceDown: null,
       close: null,
       accept: null,
     },
   };
   replyCallbacks: Array<(message: string) => void> = [];
   pendingThreadCreations: Map<string, Promise<string>> = new Map<
     string,
     Promise<string>,
   >();
   // TODO: flip the switch
   // Note that this enables Blob service for encrypted media only
   useBlobServiceUploads = false;
 
   // When the user sends a multimedia message that triggers the creation of a
   // sidebar, the sidebar gets created right away, but the message needs to wait
   // for the uploads to complete before sending. We use this Set to track the
   // message localIDs that need sidebarCreation: true.
   pendingSidebarCreationMessageLocalIDs: Set<string> = new Set<string>();
 
   static reassignToRealizedThreads<T>(
     state: { +[threadID: string]: T },
     props: Props,
   ): ?{ [threadID: string]: T } {
     const newState: { [string]: T } = {};
     let updated = false;
     for (const threadID in state) {
       const newThreadID =
         props.pendingRealizedThreadIDs.get(threadID) ?? threadID;
       if (newThreadID !== threadID) {
         updated = true;
       }
       newState[newThreadID] = state[threadID];
     }
     return updated ? newState : null;
   }
 
   static getDerivedStateFromProps(props: Props, state: State): ?Partial<State> {
     const pendingUploads = InputStateContainer.reassignToRealizedThreads(
       state.pendingUploads,
       props,
     );
     const textCursorPositions = InputStateContainer.reassignToRealizedThreads(
       state.textCursorPositions,
       props,
     );
 
     if (!pendingUploads && !textCursorPositions) {
       return null;
     }
 
     const stateUpdate: Partial<WritableState> = {};
     if (pendingUploads) {
       stateUpdate.pendingUploads = pendingUploads;
     }
     if (textCursorPositions) {
       stateUpdate.textCursorPositions = textCursorPositions;
     }
     return stateUpdate;
   }
 
   static completedMessageIDs(state: State): Set<string> {
-    const completed = new Map();
+    const completed = new Map<string, boolean>();
     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();
+    const messageIDs = new Set<string>();
     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();
+    const previouslyAssignedMessageIDs = new Set<string>();
     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();
+    const newlyAssignedUploads = new Map<
+      string,
+      {
+        +threadID: string,
+        +shouldEncrypt: boolean,
+        +uploads: PendingMultimediaUpload[],
+      },
+    >();
     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;
         }
         const { shouldEncrypt } = upload;
         let assignedUploads = newlyAssignedUploads.get(messageID);
         if (!assignedUploads) {
           assignedUploads = { threadID, shouldEncrypt, uploads: [] };
           newlyAssignedUploads.set(messageID, assignedUploads);
         }
         if (shouldEncrypt !== assignedUploads.shouldEncrypt) {
           console.warn(
             `skipping upload ${localUploadID} ` +
               "because shouldEncrypt doesn't match",
           );
           continue;
         }
         assignedUploads.uploads.push(upload);
       }
     }
 
-    const newMessageInfos = new Map();
+    const newMessageInfos = new Map<string, RawMultimediaMessageInfo>();
     for (const [messageID, assignedUploads] of newlyAssignedUploads) {
       const { uploads, threadID, shouldEncrypt } = 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,
           encryptionKey,
           thumbHash,
         }) => {
           // 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.
           const shimmedDimensions = dimensions ?? { height: 0, width: 0 };
           invariant(
             mediaType === 'photo' || mediaType === 'encrypted_photo',
             "web InputStateContainer can't handle video",
           );
           if (
             mediaType !== 'encrypted_photo' &&
             mediaType !== 'encrypted_video'
           ) {
             return {
               id: serverID ? serverID : localID,
               uri,
               type: 'photo',
               dimensions: shimmedDimensions,
               thumbHash,
             };
           }
           invariant(
             encryptionKey,
             'encrypted media must have an encryption key',
           );
           return {
             id: serverID ? serverID : localID,
             blobURI: uri,
             type: 'encrypted_photo',
             encryptionKey,
             dimensions: shimmedDimensions,
             thumbHash,
           };
         },
       );
       const messageInfo = createMediaMessageInfo(
         {
           localID: messageID,
           threadID,
           creatorID,
           media,
         },
         { forceMultimediaMessageType: shouldEncrypt },
       );
       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;
   }
 
   shouldEncryptMedia(threadInfo: ThreadInfo): boolean {
     return threadInfoInsideCommunity(threadInfo, commStaffCommunity.id);
   }
 
   async sendMultimediaMessage(
     messageInfo: RawMultimediaMessageInfo,
   ): Promise<void> {
     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);
     }
 
     // While the thread was being created, the image preload may have completed,
     // and we might have a finalized URI now. So we fetch from Redux again
     const { localID } = messageInfo;
     invariant(
       localID !== null && localID !== undefined,
       'localID should exist for locally-created RawMessageInfo',
     );
     const latestMessageInfo = this.getRawMultimediaMessageInfo(localID);
 
     // Conditional is necessary for Flow
     let newMessageInfo;
     if (latestMessageInfo.type === messageTypes.MULTIMEDIA) {
       newMessageInfo = {
         ...latestMessageInfo,
         threadID: newThreadID,
         time: Date.now(),
       };
     } else {
       newMessageInfo = {
         ...latestMessageInfo,
         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 sidebarCreation =
       this.pendingSidebarCreationMessageLocalIDs.has(localID);
     const mediaIDs = [];
     for (const { id } of messageInfo.media) {
       mediaIDs.push(id);
     }
     try {
       const result = await this.props.sendMultimediaMessage({
         threadID,
         localID,
         mediaIDs,
         sidebarCreation,
       });
       this.pendingSidebarCreationMessageLocalIDs.delete(localID);
       this.setState(prevState => {
         const newThreadID = this.getRealizedOrPendingThreadID(threadID);
         const prevUploads = prevState.pendingUploads[newThreadID];
         const newUploads: { [string]: PendingMultimediaUpload } = {};
         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;
     }
   }
 
   startThreadCreation(
     threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   ): Promise<string> {
     if (!threadIsPending(threadInfo.id)) {
       return Promise.resolve(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;
   }
 
   inputBaseStateSelector: (?string) => PropsAndState => BaseInputState =
     _memoize((threadID: ?string) =>
       createSelector(
         (propsAndState: PropsAndState) =>
           threadID ? propsAndState.pendingUploads[threadID] : null,
         (propsAndState: PropsAndState) =>
           threadID
             ? propsAndState.drafts[draftKeyFromThreadID(threadID)]
             : null,
         (propsAndState: PropsAndState) =>
           threadID ? propsAndState.textCursorPositions[threadID] : null,
         (
           pendingUploads: ?{ [localUploadID: string]: PendingMultimediaUpload },
           draft: ?string,
           textCursorPosition: ?number,
         ) => {
           let threadPendingUploads: $ReadOnlyArray<PendingMultimediaUpload> =
             [];
           const assignedUploads: {
             [string]: $ReadOnlyArray<PendingMultimediaUpload>,
           } = {};
           if (pendingUploads) {
             const [uploadsWithMessageIDs, uploadsWithoutMessageIDs] =
               _partition('messageID')(pendingUploads);
             threadPendingUploads = _sortBy('localID')(uploadsWithoutMessageIDs);
             const threadAssignedUploads = _groupBy('messageID')(
               uploadsWithMessageIDs,
             );
             for (const messageID in threadAssignedUploads) {
               // lodash libdefs don't return $ReadOnlyArray
               assignedUploads[messageID] = [
                 ...threadAssignedUploads[messageID],
               ];
             }
           }
           return {
             pendingUploads: threadPendingUploads,
             assignedUploads,
             draft: draft ?? '',
             textCursorPosition: textCursorPosition ?? 0,
             appendFiles: (
               threadInfo: ThreadInfo,
               files: $ReadOnlyArray<File>,
             ) => this.appendFiles(threadInfo, files),
             cancelPendingUpload: (localUploadID: string) =>
               this.cancelPendingUpload(threadID, localUploadID),
             sendTextMessage: (
               messageInfo: RawTextMessageInfo,
               threadInfo: ThreadInfo,
               parentThreadInfo: ?ThreadInfo,
             ) =>
               this.sendTextMessage(messageInfo, threadInfo, parentThreadInfo),
             createMultimediaMessage: (
               localID: number,
               threadInfo: ThreadInfo,
             ) => this.createMultimediaMessage(localID, threadInfo),
             setDraft: (newDraft: string) => this.setDraft(threadID, newDraft),
             setTextCursorPosition: (newPosition: number) =>
               this.setTextCursorPosition(threadID, newPosition),
             messageHasUploadFailure: (localMessageID: string) =>
               this.messageHasUploadFailure(assignedUploads[localMessageID]),
             retryMultimediaMessage: (
               localMessageID: string,
               threadInfo: ThreadInfo,
             ) =>
               this.retryMultimediaMessage(
                 localMessageID,
                 threadInfo,
                 assignedUploads[localMessageID],
               ),
             addReply: (message: string) => this.addReply(message),
             addReplyListener: this.addReplyListener,
             removeReplyListener: this.removeReplyListener,
             registerSendCallback: this.props.registerSendCallback,
             unregisterSendCallback: this.props.unregisterSendCallback,
           };
         },
       ),
     );
 
   typeaheadStateSelector: PropsAndState => TypeaheadInputState = createSelector(
     (propsAndState: PropsAndState) => propsAndState.typeaheadState,
     (typeaheadState: TypeaheadState) => ({
       typeaheadState,
       setTypeaheadState: this.setTypeaheadState,
     }),
   );
 
   inputStateSelector: ({
     +inputBaseState: BaseInputState,
     +typeaheadState: TypeaheadInputState,
   }) => InputState = createSelector(
     state => state.inputBaseState,
     state => state.typeaheadState,
     (inputBaseState, typeaheadState) => ({
       ...inputBaseState,
       ...typeaheadState,
     }),
   );
 
   getRealizedOrPendingThreadID(threadID: string): string {
     return this.props.pendingRealizedThreadIDs.get(threadID) ?? threadID;
   }
 
   async appendFiles(
     threadInfo: ThreadInfo,
     files: $ReadOnlyArray<File>,
   ): Promise<boolean> {
     const selectionTime = Date.now();
     const { pushModal } = this.props;
 
     const appendResults = await Promise.all(
       files.map(file => this.appendFile(threadInfo, file, selectionTime)),
     );
 
     if (appendResults.some(({ result }) => !result.success)) {
       pushModal(<InvalidUploadModal />);
 
       const time = Date.now() - selectionTime;
       const reports = [];
       for (const appendResult of appendResults) {
         const { steps } = appendResult;
         let { result } = appendResult;
         let uploadLocalID;
         if (result.success) {
           uploadLocalID = result.pendingUpload.localID;
           result = { success: false, reason: 'web_sibling_validation_failed' };
         }
         const mediaMission = { steps, result, userTime: time, totalTime: time };
         reports.push({ mediaMission, uploadLocalID });
       }
       this.queueMediaMissionReports(reports);
 
       return false;
     }
 
     const newUploads = appendResults.map(({ result }) => {
       invariant(result.success, 'any failed validation should be caught above');
       return result.pendingUpload;
     });
 
     const newUploadsObject = _keyBy('localID')(newUploads);
     this.setState(
       prevState => {
         const newThreadID = this.getRealizedOrPendingThreadID(threadInfo.id);
         const prevUploads = prevState.pendingUploads[newThreadID];
         const mergedUploads = prevUploads
           ? { ...prevUploads, ...newUploadsObject }
           : newUploadsObject;
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [newThreadID]: mergedUploads,
           },
         };
       },
       () => this.uploadFiles(threadInfo.id, newUploads),
     );
     return true;
   }
 
   async appendFile(
     threadInfo: ThreadInfo,
     file: File,
     selectTime: number,
   ): Promise<{
     steps: $ReadOnlyArray<MediaMissionStep>,
     result:
       | MediaMissionFailure
       | { success: true, pendingUpload: PendingMultimediaUpload },
   }> {
     const steps: MediaMissionStep[] = [
       {
         step: 'web_selection',
         filename: file.name,
         size: file.size,
         mime: file.type,
         selectTime,
       },
     ];
 
     let response;
     const validationStart = Date.now();
     try {
       response = await validateFile(file);
     } 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;
 
     const shouldEncrypt = this.shouldEncryptMedia(threadInfo);
 
     let encryptionResult;
     if (shouldEncrypt) {
       let encryptionResponse;
       const encryptionStart = Date.now();
       try {
         encryptionResponse = await encryptFile(fixedFile);
       } catch (e) {
         return {
           steps,
           result: {
             success: false,
             reason: 'encryption_exception',
             time: Date.now() - encryptionStart,
             exceptionMessage: getMessageForException(e),
           },
         };
       }
       steps.push(...encryptionResponse.steps);
       encryptionResult = encryptionResponse.result;
     }
     if (encryptionResult && !encryptionResult.success) {
       return { steps, result: encryptionResult };
     }
 
     const { steps: thumbHashSteps, result: thumbHashResult } =
       await generateThumbHash(fixedFile, encryptionResult?.encryptionKey);
     const thumbHash = thumbHashResult.success
       ? thumbHashResult.thumbHash
       : null;
     steps.push(...thumbHashSteps);
 
     return {
       steps,
       result: {
         success: true,
         pendingUpload: {
           localID: getNextLocalUploadID(),
           serverID: null,
           messageID: null,
           failed: false,
           file: encryptionResult?.file ?? fixedFile,
           mediaType: encryptionResult ? 'encrypted_photo' : mediaType,
           dimensions,
           uri: encryptionResult?.uri ?? uri,
           loop: false,
           uriIsReal: false,
           blobHolder: null,
           blobHash: encryptionResult?.sha256Hash,
           encryptionKey: encryptionResult?.encryptionKey,
           thumbHash,
           progressPercent: 0,
           abort: null,
           steps,
           selectTime,
           shouldEncrypt,
         },
       },
     };
   }
 
   uploadFiles(
     threadID: string,
     uploads: $ReadOnlyArray<PendingMultimediaUpload>,
   ): Promise<mixed> {
     return Promise.all(
       uploads.map(upload => this.uploadFile(threadID, upload)),
     );
   }
 
   async uploadFile(threadID: string, upload: PendingMultimediaUpload) {
     const { selectTime, localID, encryptionKey } = upload;
     const isEncrypted =
       !!encryptionKey &&
       (upload.mediaType === 'encrypted_photo' ||
         upload.mediaType === 'encrypted_video');
 
     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 {
       const callbacks = {
         onProgress: (percent: number) =>
           this.setProgress(threadID, localID, percent),
         abortHandler: (abort: () => void) =>
           this.handleAbortCallback(threadID, localID, abort),
       };
       if (
         this.useBlobServiceUploads &&
         (upload.mediaType === 'encrypted_photo' ||
           upload.mediaType === 'encrypted_video')
       ) {
         const { blobHash, dimensions, thumbHash } = upload;
         invariant(
           encryptionKey && blobHash && dimensions,
           'incomplete encrypted upload',
         );
         uploadResult = await this.props.blobServiceUpload({
           uploadInput: {
             blobInput: {
               type: 'file',
               file: upload.file,
             },
             blobHash,
             encryptionKey,
             dimensions,
             loop: false,
             thumbHash,
           },
           keyserverOrThreadID: threadID,
           callbacks,
         });
       } else {
         let uploadExtras = {
           ...upload.dimensions,
           loop: false,
           thumbHash: upload.thumbHash,
         };
         if (encryptionKey) {
           uploadExtras = { ...uploadExtras, encryptionKey };
         }
         uploadResult = await this.props.uploadMultimedia(
           upload.file,
           uploadExtras,
           callbacks,
         );
       }
     } catch (e) {
       uploadExceptionMessage = getMessageForException(e);
       this.handleUploadFailure(threadID, localID);
     }
     userTime = Date.now() - selectTime;
     steps.push({
       step: 'upload',
       success: !!uploadResult,
       exceptionMessage: uploadExceptionMessage,
       time: Date.now() - uploadStart,
       inputFilename: upload.file.name,
       outputMediaType: uploadResult && uploadResult.mediaType,
       outputURI: uploadResult && uploadResult.uri,
       outputDimensions: uploadResult && uploadResult.dimensions,
       outputLoop: uploadResult && uploadResult.loop,
     });
     if (!uploadResult) {
       sendReport({
         success: false,
         reason: 'http_upload_failed',
         exceptionMessage: uploadExceptionMessage,
       });
       return;
     }
     const result = uploadResult;
     const outputMediaType = isEncrypted ? 'encrypted_photo' : result.mediaType;
 
     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,
               blobHolder: result.blobHolder,
               abort: null,
             },
           },
         },
       };
     });
 
     if (encryptionKey) {
       const { steps: preloadSteps } = await preloadMediaResource(result.uri);
       steps.push(...preloadSteps);
     } else {
       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;
       const { thumbHash } = upload;
       let mediaUpdate = {
         loop,
         dimensions,
         ...(thumbHash ? { thumbHash } : undefined),
       };
       if (!isEncrypted) {
         mediaUpdate = {
           ...mediaUpdate,
           type: mediaType,
           uri,
         };
       } else {
         mediaUpdate = {
           ...mediaUpdate,
           type: outputMediaType,
           blobURI: uri,
           encryptionKey,
         };
       }
       this.props.dispatch({
         type: updateMultimediaMessageMediaActionType,
         payload: {
           messageID: uploadAfterPreload.messageID,
           currentMediaID: result.id ?? uploadAfterPreload.localID,
           mediaUpdate,
         },
       });
     }
 
     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: outputMediaType,
               dimensions: result.dimensions,
               uriIsReal: true,
               loop: result.loop,
             },
           },
         },
       };
     });
   }
 
   handleAbortCallback(
     threadID: string,
     localUploadID: string,
     abort: () => void,
   ) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const upload = uploads[localUploadID];
       if (!upload) {
         // The upload has been cancelled before we were even handed the
         // abort function. We should immediately abort.
         abort();
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localUploadID]: {
               ...upload,
               abort,
             },
           },
         },
       };
     });
   }
 
   handleUploadFailure(threadID: string, localUploadID: string) {
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       const uploads = prevState.pendingUploads[newThreadID];
       const upload = uploads[localUploadID];
       if (!upload || !upload.abort || upload.serverID) {
         // The upload has been cancelled or completed before it failed
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: {
             ...uploads,
             [localUploadID]: {
               ...upload,
               failed: true,
               progressPercent: 0,
               abort: null,
             },
           },
         },
       };
     });
   }
 
   queueMediaMissionReports(
     partials: $ReadOnlyArray<{
       mediaMission: MediaMission,
       uploadLocalID?: ?string,
       uploadServerID?: ?string,
       messageLocalID?: ?string,
     }>,
   ) {
     const reports = partials.map(
       ({ mediaMission, uploadLocalID, uploadServerID, messageLocalID }) => ({
         type: reportTypes.MEDIA_MISSION,
         time: Date.now(),
         platformDetails: getConfig().platformDetails,
         mediaMission,
         uploadServerID,
         uploadLocalID,
         messageLocalID,
         id: generateReportID(),
       }),
     );
     this.props.dispatch({ type: queueReportsActionType, payload: { reports } });
   }
 
   cancelPendingUpload(threadID: ?string, localUploadID: string) {
     invariant(threadID, 'threadID should be set in cancelPendingUpload');
 
     let revokeURL: ?string, abortRequest: ?() => void;
     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({
             id: pendingUpload.serverID,
             keyserverOrThreadID: threadID,
           });
           if (isBlobServiceURI(pendingUpload.uri)) {
             invariant(
               pendingUpload.blobHolder,
               'blob service upload has no holder',
             );
             const endpoint = blobService.httpEndpoints.DELETE_BLOB;
             const holder = pendingUpload.blobHolder;
             const blobHash = blobHashFromBlobServiceURI(pendingUpload.uri);
             fetch(makeBlobServiceEndpointURL(endpoint), {
               method: endpoint.method,
               body: JSON.stringify({
                 holder,
                 blob_hash: blobHash,
               }),
               headers: {
                 'content-type': 'application/json',
               },
             });
           }
         }
         const newPendingUploads = _omit([localUploadID])(currentPendingUploads);
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [newThreadID]: newPendingUploads,
           },
         };
       },
       () => {
         if (revokeURL) {
           URL.revokeObjectURL(revokeURL);
         }
         if (abortRequest) {
           abortRequest();
         }
       },
     );
   }
 
   async sendTextMessage(
     messageInfo: RawTextMessageInfo,
     inputThreadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
     parentThreadInfo: ?ThreadInfo | ?MinimallyEncodedThreadInfo,
   ) {
     this.props.sendCallbacks.forEach(callback => callback());
 
     const { localID } = messageInfo;
     invariant(
       localID !== null && localID !== undefined,
       'localID should be set',
     );
     if (threadIsPendingSidebar(inputThreadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localID);
     }
 
     if (!threadIsPending(inputThreadInfo.id)) {
       this.props.dispatchActionPromise(
         sendTextMessageActionTypes,
         this.sendTextMessageAction(
           messageInfo,
           inputThreadInfo,
           parentThreadInfo,
         ),
         undefined,
         messageInfo,
       );
       return;
     }
 
     this.props.dispatch({
       type: sendTextMessageActionTypes.started,
       payload: messageInfo,
     });
 
     let threadInfo = inputThreadInfo;
     const { viewerID } = this.props;
     if (viewerID && inputThreadInfo.type === threadTypes.SIDEBAR) {
       invariant(parentThreadInfo, 'sidebar should have parent');
       threadInfo = patchThreadInfoToIncludeMentionedMembersOfParent(
         inputThreadInfo,
         parentThreadInfo,
         messageInfo.text,
         viewerID,
       );
       if (threadInfo !== inputThreadInfo) {
         this.props.dispatch({
           type: updateNavInfoActionType,
           payload: { pendingThread: threadInfo },
         });
       }
     }
 
     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(),
     };
 
     // Branching to appease `flow`.
     const newThreadInfo = threadInfo.minimallyEncoded
       ? {
           ...threadInfo,
           id: newThreadID,
         }
       : {
           ...threadInfo,
           id: newThreadID,
         };
     this.props.dispatchActionPromise(
       sendTextMessageActionTypes,
       this.sendTextMessageAction(
         newMessageInfo,
         newThreadInfo,
         parentThreadInfo,
       ),
       undefined,
       newMessageInfo,
     );
   }
 
   async sendTextMessageAction(
     messageInfo: RawTextMessageInfo,
     threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
     parentThreadInfo: ?ThreadInfo | ?MinimallyEncodedThreadInfo,
   ): Promise<SendMessagePayload> {
     try {
       await this.props.textMessageCreationSideEffectsFunc(
         messageInfo,
         threadInfo,
         parentThreadInfo,
       );
       const { localID } = messageInfo;
       invariant(
         localID !== null && localID !== undefined,
         'localID should be set',
       );
       const sidebarCreation =
         this.pendingSidebarCreationMessageLocalIDs.has(localID);
       const result = await this.props.sendTextMessage({
         threadID: messageInfo.threadID,
         localID,
         text: messageInfo.text,
         sidebarCreation,
       });
       this.pendingSidebarCreationMessageLocalIDs.delete(localID);
       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) {
     this.props.sendCallbacks.forEach(callback => callback());
 
     const localMessageID = `${localIDPrefix}${localID}`;
     this.startThreadCreation(threadInfo);
 
     if (threadIsPendingSidebar(threadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localMessageID);
     }
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadInfo.id);
       const currentPendingUploads = prevState.pendingUploads[newThreadID];
       if (!currentPendingUploads) {
         return {};
       }
       const newPendingUploads: { [string]: PendingMultimediaUpload } = {};
       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) {
     invariant(threadID, 'threadID should be set in setDraft');
 
     const newThreadID = this.getRealizedOrPendingThreadID(threadID);
     this.props.dispatch({
       type: 'UPDATE_DRAFT',
       payload: {
         key: draftKeyFromThreadID(newThreadID),
         text: draft,
       },
     });
   }
 
   setTextCursorPosition(threadID: ?string, newPosition: number) {
     invariant(threadID, 'threadID should be set in setTextCursorPosition');
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadID);
       return {
         textCursorPositions: {
           ...prevState.textCursorPositions,
           [newThreadID]: newPosition,
         },
       };
     });
   }
 
   setTypeaheadState = (newState: $Shape<TypeaheadState>) => {
     this.setState(prevState => ({
       typeaheadState: {
         ...prevState.typeaheadState,
         ...newState,
       },
     }));
   };
 
   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>,
   ): boolean {
     if (!pendingUploads) {
       return false;
     }
     return pendingUploads.some(upload => upload.failed);
   }
 
   retryMultimediaMessage(
     localMessageID: string,
     threadInfo: ThreadInfo,
     pendingUploads: ?$ReadOnlyArray<PendingMultimediaUpload>,
   ) {
     this.props.sendCallbacks.forEach(callback => callback());
 
     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);
 
     if (threadIsPendingSidebar(threadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localMessageID);
     }
 
     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 uploadIDsToRetry = new Set<string>();
     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: { [string]: PendingMultimediaUpload } = {};
       let pendingUploadChanged = false;
       for (const localID in prevPendingUploads) {
         const pendingUpload = prevPendingUploads[localID];
         if (uploadIDsToRetry.has(localID) && !pendingUpload.serverID) {
           newPendingUploads[localID] = {
             ...pendingUpload,
             failed: false,
             progressPercent: 0,
             abort: null,
           };
           pendingUploadChanged = true;
         } else {
           newPendingUploads[localID] = pendingUpload;
         }
       }
       if (!pendingUploadChanged) {
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: newPendingUploads,
         },
       };
     });
 
     this.uploadFiles(threadInfo.id, uploadsToRetry);
   }
 
   addReply = (message: string) => {
     this.replyCallbacks.forEach(addReplyCallback => addReplyCallback(message));
   };
 
   addReplyListener = (callbackReply: (message: string) => void) => {
     this.replyCallbacks.push(callbackReply);
   };
 
   removeReplyListener = (callbackReply: (message: string) => void) => {
     this.replyCallbacks = this.replyCallbacks.filter(
       candidate => candidate !== callbackReply,
     );
   };
 
   render(): React.Node {
     const { activeChatThreadID } = this.props;
 
     // we're going with two selectors as we want to avoid
     // recreation of chat state setter functions on typeahead state updates
     const inputBaseState = this.inputBaseStateSelector(activeChatThreadID)({
       ...this.state,
       ...this.props,
     });
 
     const typeaheadState = this.typeaheadStateSelector({
       ...this.state,
       ...this.props,
     });
 
     const inputState = this.inputStateSelector({
       inputBaseState,
       typeaheadState,
     });
 
     return (
       <InputStateContext.Provider value={inputState}>
         {this.props.children}
       </InputStateContext.Provider>
     );
   }
 }
 
 const ConnectedInputStateContainer: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedInputStateContainer(props) {
     const activeChatThreadID = useSelector(
       state => state.navInfo.activeChatThreadID,
     );
     const drafts = useSelector(state => state.draftStore.drafts);
     const viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
     const messageStoreMessages = useSelector(
       state => state.messageStore.messages,
     );
     const pendingToRealizedThreadIDs = useSelector(state =>
       pendingToRealizedThreadIDsSelector(state.threadStore.threadInfos),
     );
     const calendarQuery = useSelector(nonThreadCalendarQuery);
     const callUploadMultimedia = useServerCall(uploadMultimedia);
     const callBlobServiceUpload = useBlobServiceUpload();
     const callDeleteUpload = useDeleteUpload();
     const callSendMultimediaMessage = useLegacySendMultimediaMessage();
     const callSendTextMessage = useSendTextMessage();
     const callNewThread = useNewThread();
     const dispatch = useDispatch();
     const dispatchActionPromise = useDispatchActionPromise();
     const modalContext = useModalContext();
 
     const [sendCallbacks, setSendCallbacks] = React.useState<
       $ReadOnlyArray<() => mixed>,
     >([]);
     const registerSendCallback = React.useCallback((callback: () => mixed) => {
       setSendCallbacks(prevCallbacks => [...prevCallbacks, callback]);
     }, []);
     const unregisterSendCallback = React.useCallback(
       (callback: () => mixed) => {
         setSendCallbacks(prevCallbacks =>
           prevCallbacks.filter(candidate => candidate !== callback),
         );
       },
       [],
     );
     const textMessageCreationSideEffectsFunc =
-      useMessageCreationSideEffectsFunc(messageTypes.TEXT);
+      useMessageCreationSideEffectsFunc<RawTextMessageInfo>(messageTypes.TEXT);
 
     return (
       <InputStateContainer
         {...props}
         activeChatThreadID={activeChatThreadID}
         drafts={drafts}
         viewerID={viewerID}
         messageStoreMessages={messageStoreMessages}
         pendingRealizedThreadIDs={pendingToRealizedThreadIDs}
         calendarQuery={calendarQuery}
         uploadMultimedia={callUploadMultimedia}
         blobServiceUpload={callBlobServiceUpload}
         deleteUpload={callDeleteUpload}
         sendMultimediaMessage={callSendMultimediaMessage}
         sendTextMessage={callSendTextMessage}
         newThread={callNewThread}
         dispatch={dispatch}
         dispatchActionPromise={dispatchActionPromise}
         pushModal={modalContext.pushModal}
         sendCallbacks={sendCallbacks}
         registerSendCallback={registerSendCallback}
         unregisterSendCallback={unregisterSendCallback}
         textMessageCreationSideEffectsFunc={textMessageCreationSideEffectsFunc}
       />
     );
   });
 
 export default ConnectedInputStateContainer;
diff --git a/web/media/aes-crypto-utils.test.js b/web/media/aes-crypto-utils.test.js
index 48214caaa..fbc27d698 100644
--- a/web/media/aes-crypto-utils.test.js
+++ b/web/media/aes-crypto-utils.test.js
@@ -1,100 +1,100 @@
 // @flow
 
 import {
   generateKeyCommon,
   encryptCommon,
   decryptCommon,
 } from 'lib/media/aes-crypto-utils-common.js';
 
 // some mock data
 const testPlaintext = new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]);
 const testEncryptionKey = new Uint8Array([
   3, 183, 109, 170, 201, 127, 55, 253, 114, 23, 75, 24, 168, 44, 150, 92, 148,
   60, 26, 126, 45, 237, 92, 10, 63, 89, 226, 77, 109, 29, 238, 143,
 ]);
 const testSealedData = new Uint8Array([
   172, 195, 202, 136, 163, 60, 134, 85, 41, 48, 44, 27, 181, 109, 35, 254, 150,
   78, 255, 5, 8, 28, 4, 208, 206, 117, 148, 66, 196, 247, 61, 11, 3, 118, 116,
   5, 112, 185, 142,
 ]);
 
 const randomData = new Uint8Array(
-  new Array(100).fill(0).map(() => Math.floor(Math.random() * 255)),
+  new Array<number>(100).fill(0).map(() => Math.floor(Math.random() * 255)),
 );
 
 describe('generateKey', () => {
   it('generates 32-byte AES key', async () => {
     const key = await generateKeyCommon(crypto);
     expect(key.length).toBe(32);
   });
 });
 
 describe('encrypt', () => {
   it('generates ciphertext with IV and tag included', async () => {
     const encrypted = await encryptCommon(
       crypto,
       testEncryptionKey,
       testPlaintext,
     );
     // IV and tag are randomly generated, so we can't check the exact value
     // IV + plaintext + tag = 12 + 11 + 16 = 39
     expect(encrypted.length).toBe(testPlaintext.length + 12 + 16);
   });
 
   it('is decryptable by decrypt()', async () => {
     const key = await generateKeyCommon(crypto);
     const encrypted = await encryptCommon(crypto, key, randomData);
     const decrypted = await decryptCommon(crypto, key, encrypted);
     expect(decrypted).toEqual(randomData);
   });
 });
 
 describe('decrypt', () => {
   it('decrypts ciphertext', async () => {
     const decrypted = await decryptCommon(
       crypto,
       testEncryptionKey,
       testSealedData,
     );
     expect(decrypted).toEqual(testPlaintext);
   });
 
   it('fails with wrong key', async () => {
     const key = await generateKeyCommon(crypto);
     const encrypted = await encryptCommon(crypto, key, randomData);
 
     const wrongKey = await generateKeyCommon(crypto);
     await expect(decryptCommon(crypto, wrongKey, encrypted)).rejects.toThrow();
   });
 
   it('fails with wrong ciphertext', async () => {
     const key = await generateKeyCommon(crypto);
     const encrypted = await encryptCommon(crypto, key, randomData);
 
     // change the first byte of the ciphertext (it's 13th byte in the buffer)
     // first 12 bytes are IV, so changing the first byte of the ciphertext
     encrypted[12] = encrypted[12] ^ 1;
 
     await expect(decryptCommon(crypto, key, encrypted)).rejects.toThrow();
   });
 
   it('fails with wrong IV', async () => {
     const key = await generateKeyCommon(crypto);
     const encrypted = await encryptCommon(crypto, key, randomData);
 
     // change the first byte of the IV (it's 1st byte in the buffer)
     encrypted[0] = encrypted[0] ^ 1;
 
     await expect(decryptCommon(crypto, key, encrypted)).rejects.toThrow();
   });
 
   it('fails with wrong tag', async () => {
     const key = await generateKeyCommon(crypto);
     const encrypted = await encryptCommon(crypto, key, randomData);
 
     // change the last byte of the tag (tag is the last 16 bytes of the buffer)
     encrypted[encrypted.length - 1] = encrypted[encrypted.length - 1] ^ 1;
 
     await expect(decryptCommon(crypto, key, encrypted)).rejects.toThrow();
   });
 });
diff --git a/web/modals/chat/message-results-modal.react.js b/web/modals/chat/message-results-modal.react.js
index dcd05d17e..b645affa6 100644
--- a/web/modals/chat/message-results-modal.react.js
+++ b/web/modals/chat/message-results-modal.react.js
@@ -1,156 +1,163 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   fetchPinnedMessageActionTypes,
   useFetchPinnedMessages,
 } from 'lib/actions/message-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import {
   messageListData,
   type ChatMessageInfoItem,
 } from 'lib/selectors/chat-selectors.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import {
   createMessageInfo,
   isInvalidPinSourceForThread,
   modifyItemForResultScreen,
 } from 'lib/shared/message-utils.js';
 import type { RawMessageInfo } from 'lib/types/message-types.js';
 import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
 import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 
 import css from './message-results-modal.css';
 import MessageResult from '../../components/message-result.react.js';
 import LoadingIndicator from '../../loading-indicator.react.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import Modal from '../modal.react.js';
 
 type MessageResultsModalProps = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   +modalName: string,
 };
 
 const loadingStatusSelector = createLoadingStatusSelector(
   fetchPinnedMessageActionTypes,
 );
 
 function MessageResultsModal(props: MessageResultsModalProps): React.Node {
   const { threadInfo, modalName } = props;
   const { id: threadID } = threadInfo;
   const { popModal } = useModalContext();
   const [rawMessageResults, setRawMessageResults] = React.useState<
     $ReadOnlyArray<RawMessageInfo>,
   >([]);
 
   const callFetchPinnedMessages = useFetchPinnedMessages();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const userInfos = useSelector(state => state.userStore.userInfos);
   const loadingStatus = useSelector(loadingStatusSelector);
 
   React.useEffect(() => {
     dispatchActionPromise(
       fetchPinnedMessageActionTypes,
       (async () => {
         const result = await callFetchPinnedMessages({ threadID });
         setRawMessageResults(result.pinnedMessages);
       })(),
     );
   }, [dispatchActionPromise, callFetchPinnedMessages, threadID]);
 
   const translatedMessageResults = React.useMemo(() => {
     const threadInfos = { [threadID]: threadInfo };
 
     return rawMessageResults
       .map(messageInfo =>
         createMessageInfo(messageInfo, null, userInfos, threadInfos),
       )
       .filter(Boolean);
   }, [rawMessageResults, userInfos, threadID, threadInfo]);
 
   const chatMessageInfos = useSelector(
     messageListData(threadInfo.id, translatedMessageResults),
   );
 
   const sortedUniqueChatMessageInfoItems = React.useMemo(() => {
     if (!chatMessageInfos) {
       return ([]: ChatMessageInfoItem[]);
     }
 
     const chatMessageInfoItems = chatMessageInfos.filter(
       item =>
         item.itemType === 'message' &&
         item.isPinned &&
         !isInvalidPinSourceForThread(item.messageInfo, threadInfo),
     );
 
     // By the nature of using messageListData and passing in
     // the desired translatedMessageResults as additional
     // messages, we will have duplicate ChatMessageInfoItems.
-    const uniqueChatMessageInfoItemsMap = new Map();
+    const uniqueChatMessageInfoItemsMap = new Map<
+      string,
+      ChatMessageInfoItem,
+    >();
     chatMessageInfoItems.forEach(
       item =>
         item.messageInfo &&
         item.messageInfo.id &&
         uniqueChatMessageInfoItemsMap.set(item.messageInfo.id, item),
     );
 
     // Push the items in the order they appear in the rawMessageResults
     // since the messages fetched from the server are already sorted
     // in the order of pin_time (newest first).
     const sortedChatMessageInfoItems = [];
     for (let i = 0; i < rawMessageResults.length; i++) {
+      const rawMessageID = rawMessageResults[i].id;
+      if (!rawMessageID) {
+        continue;
+      }
       sortedChatMessageInfoItems.push(
-        uniqueChatMessageInfoItemsMap.get(rawMessageResults[i].id),
+        uniqueChatMessageInfoItemsMap.get(rawMessageID),
       );
     }
 
     return sortedChatMessageInfoItems;
   }, [chatMessageInfos, rawMessageResults, threadInfo]);
 
   const modifiedItems = React.useMemo(
     () =>
       sortedUniqueChatMessageInfoItems
         .filter(Boolean)
         .map(item => modifyItemForResultScreen(item)),
     [sortedUniqueChatMessageInfoItems],
   );
 
   const messageResultsToDisplay = React.useMemo(() => {
     const items = modifiedItems.map(item => (
       <MessageResult
         key={item.messageInfo.id}
         item={item}
         threadInfo={threadInfo}
         scrollable={false}
       />
     ));
     return <>{items}</>;
   }, [modifiedItems, threadInfo]);
 
   const loadingIndicator = React.useMemo(() => {
     if (loadingStatus === 'loading') {
       return (
         <div className={css.loadingIndicator}>
           <LoadingIndicator status="loading" size="medium" />
         </div>
       );
     }
     return null;
   }, [loadingStatus]);
 
   return (
     <Modal name={modalName} onClose={popModal} size="large">
       <hr className={css.separator} />
       <div className={css.topSpace}>{loadingIndicator}</div>
       <div className={css.messageResultsContainer}>
         {messageResultsToDisplay}
       </div>
     </Modal>
   );
 }
 
 export default MessageResultsModal;
diff --git a/web/push-notif/notif-crypto-utils.js b/web/push-notif/notif-crypto-utils.js
index 5ed4bb81b..dff71c9e8 100644
--- a/web/push-notif/notif-crypto-utils.js
+++ b/web/push-notif/notif-crypto-utils.js
@@ -1,205 +1,208 @@
 // @flow
 
 import olm from '@commapp/olm';
 import localforage from 'localforage';
 
 import {
   olmEncryptedMessageTypes,
   type NotificationsOlmDataType,
 } from 'lib/types/crypto-types.js';
 import type {
   PlainTextWebNotification,
   PlainTextWebNotificationPayload,
   EncryptedWebNotification,
 } from 'lib/types/notif-types.js';
 
 import {
   decryptData,
   encryptData,
   importJWKKey,
+  type EncryptedData,
 } from '../crypto/aes-gcm-crypto-utils.js';
 import {
   NOTIFICATIONS_OLM_DATA_CONTENT,
   NOTIFICATIONS_OLM_DATA_ENCRYPTION_KEY,
 } from '../database/utils/constants.js';
 import { isDesktopSafari } from '../database/utils/db-utils.js';
 
 export type WebNotifDecryptionError = {
   +id: string,
   +error: string,
   +displayErrorMessage?: boolean,
 };
 
 export type WebNotifsServiceUtilsData = {
   +olmWasmPath: string,
   +staffCanSee: boolean,
 };
 
 type DecryptionResult = {
   +newPendingSessionUpdate: string,
   +newUpdateCreationTimestamp: number,
   +decryptedNotification: PlainTextWebNotificationPayload,
 };
 
 export const WEB_NOTIFS_SERVICE_UTILS_KEY = 'webNotifsServiceUtils';
 
 const SESSION_UPDATE_MAX_PENDING_TIME = 10 * 1000;
 
 async function decryptWebNotification(
   encryptedNotification: EncryptedWebNotification,
 ): Promise<PlainTextWebNotification | WebNotifDecryptionError> {
   const { id, encryptedPayload } = encryptedNotification;
 
   const retrieveEncryptionKeyPromise: Promise<?CryptoKey> = (async () => {
-    const persistedCryptoKey = await localforage.getItem(
+    const persistedCryptoKey = await localforage.getItem<CryptoKey>(
       NOTIFICATIONS_OLM_DATA_ENCRYPTION_KEY,
     );
     if (isDesktopSafari && persistedCryptoKey) {
       // Safari doesn't support structured clone algorithm in service
       // worker context so we have to store CryptoKey as JSON
       return await importJWKKey(persistedCryptoKey);
     }
     return persistedCryptoKey;
   })();
 
   const [encryptedOlmData, encryptionKey, utilsData] = await Promise.all([
-    localforage.getItem(NOTIFICATIONS_OLM_DATA_CONTENT),
+    localforage.getItem<EncryptedData>(NOTIFICATIONS_OLM_DATA_CONTENT),
     retrieveEncryptionKeyPromise,
-    localforage.getItem(WEB_NOTIFS_SERVICE_UTILS_KEY),
+    localforage.getItem<WebNotifsServiceUtilsData>(
+      WEB_NOTIFS_SERVICE_UTILS_KEY,
+    ),
   ]);
 
   if (!utilsData) {
     return { id, error: 'Necessary data not found in IndexedDB' };
   }
 
   const { olmWasmPath, staffCanSee } = (utilsData: WebNotifsServiceUtilsData);
   if (!encryptionKey || !encryptedOlmData) {
     return {
       id,
       error: 'Received encrypted notification but olm session was not created',
       displayErrorMessage: staffCanSee,
     };
   }
 
   try {
     await olm.init({ locateFile: () => olmWasmPath });
 
     const serializedOlmData = await decryptData(
       encryptedOlmData,
       encryptionKey,
     );
     const {
       mainSession,
       picklingKey,
       pendingSessionUpdate,
       updateCreationTimestamp,
     }: NotificationsOlmDataType = JSON.parse(
       new TextDecoder().decode(serializedOlmData),
     );
 
     let updatedOlmData: NotificationsOlmDataType;
     let decryptedNotification: PlainTextWebNotificationPayload;
 
     const shouldUpdateMainSession =
       Date.now() - updateCreationTimestamp > SESSION_UPDATE_MAX_PENDING_TIME;
 
     const decryptionWithPendingSessionResult = decryptWithPendingSession(
       pendingSessionUpdate,
       picklingKey,
       encryptedPayload,
     );
 
     if (decryptionWithPendingSessionResult.decryptedNotification) {
       const {
         decryptedNotification: notifDecryptedWithPendingSession,
         newPendingSessionUpdate,
         newUpdateCreationTimestamp,
       } = decryptionWithPendingSessionResult;
 
       decryptedNotification = notifDecryptedWithPendingSession;
       updatedOlmData = {
         mainSession: shouldUpdateMainSession
           ? pendingSessionUpdate
           : mainSession,
         pendingSessionUpdate: newPendingSessionUpdate,
         updateCreationTimestamp: newUpdateCreationTimestamp,
         picklingKey,
       };
     } else {
       const {
         newUpdateCreationTimestamp,
         decryptedNotification: notifDecryptedWithMainSession,
       } = decryptWithSession(mainSession, picklingKey, encryptedPayload);
 
       decryptedNotification = notifDecryptedWithMainSession;
       updatedOlmData = {
         mainSession: mainSession,
         pendingSessionUpdate,
         updateCreationTimestamp: newUpdateCreationTimestamp,
         picklingKey,
       };
     }
 
     const updatedEncryptedSession = await encryptData(
       new TextEncoder().encode(JSON.stringify(updatedOlmData)),
       encryptionKey,
     );
 
     await localforage.setItem(
       NOTIFICATIONS_OLM_DATA_CONTENT,
       updatedEncryptedSession,
     );
 
     return { id, ...decryptedNotification };
   } catch (e) {
     return {
       id,
       error: e.message,
       displayErrorMessage: staffCanSee,
     };
   }
 }
 
 function decryptWithSession(
   pickledSession: string,
   picklingKey: string,
   encryptedPayload: string,
 ): DecryptionResult {
   const session = new olm.Session();
 
   session.unpickle(picklingKey, pickledSession);
   const decryptedNotification: PlainTextWebNotificationPayload = JSON.parse(
     session.decrypt(olmEncryptedMessageTypes.TEXT, encryptedPayload),
   );
 
   const newPendingSessionUpdate = session.pickle(picklingKey);
   const newUpdateCreationTimestamp = Date.now();
 
   return {
     decryptedNotification,
     newUpdateCreationTimestamp,
     newPendingSessionUpdate,
   };
 }
 
 function decryptWithPendingSession(
   pendingSessionUpdate: string,
   picklingKey: string,
   encryptedPayload: string,
 ): DecryptionResult | { +error: string } {
   try {
     const {
       decryptedNotification,
       newPendingSessionUpdate,
       newUpdateCreationTimestamp,
     } = decryptWithSession(pendingSessionUpdate, picklingKey, encryptedPayload);
     return {
       newPendingSessionUpdate,
       newUpdateCreationTimestamp,
       decryptedNotification,
     };
   } catch (e) {
     return { error: e.message };
   }
 }
 export { decryptWebNotification };
diff --git a/web/roles/community-roles-modal.react.js b/web/roles/community-roles-modal.react.js
index d45513949..9ecd2b393 100644
--- a/web/roles/community-roles-modal.react.js
+++ b/web/roles/community-roles-modal.react.js
@@ -1,97 +1,101 @@
 // @flow
 
 import * as React from 'react';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import { useRoleMemberCountsForCommunity } from 'lib/shared/thread-utils.js';
+import type { UserSurfacedPermission } from 'lib/types/thread-permission-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 
 import css from './community-roles-modal.css';
 import CreateRolesModal from './create-roles-modal.react.js';
 import RolePanelEntry from './role-panel-entry.react.js';
 import Button, { buttonThemes } from '../components/button.react.js';
 import Modal from '../modals/modal.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 type CommunityRolesModalProps = {
   +community: ThreadInfo,
 };
 
 function CommunityRolesModal(props: CommunityRolesModalProps): React.Node {
   const { popModal, pushModal } = useModalContext();
   const { community } = props;
 
   const [threadInfo, setThreadInfo] = React.useState<ThreadInfo>(community);
   const threadID = threadInfo.id;
   const reduxThreadInfo: ?ThreadInfo = useSelector(
     state => threadInfoSelector(state)[threadID],
   );
 
   React.useEffect(() => {
     if (reduxThreadInfo) {
       setThreadInfo(reduxThreadInfo);
     }
   }, [reduxThreadInfo]);
 
   const roleNamesToMembers = useRoleMemberCountsForCommunity(threadInfo);
 
   const rolePanelList = React.useMemo(
     () =>
       Object.keys(roleNamesToMembers).map(roleName => (
         <RolePanelEntry
           key={roleName}
           threadInfo={threadInfo}
           roleName={roleName}
           memberCount={roleNamesToMembers[roleName]}
         />
       )),
     [roleNamesToMembers, threadInfo],
   );
 
-  const rolePermissionsForNewRole = React.useMemo(() => new Set(), []);
+  const rolePermissionsForNewRole = React.useMemo(
+    () => new Set<UserSurfacedPermission>(),
+    [],
+  );
 
   const onClickCreateRole = React.useCallback(
     () =>
       pushModal(
         <CreateRolesModal
           threadInfo={threadInfo}
           action="create_role"
           roleName="New Role"
           rolePermissions={rolePermissionsForNewRole}
         />,
       ),
     [pushModal, threadInfo, rolePermissionsForNewRole],
   );
 
   return (
     <Modal name="Roles" onClose={popModal} size="large">
       <div className={css.modalDescription}>
         Roles help you group community members together and assign them certain
         permissions. When people join the community, they are automatically
         assigned the Members role.
       </div>
       <div className={css.modalDescription}>
         Communities must always have the Admins and Members role.
       </div>
       <div className={css.rolePanelTitleContainer}>
         <div className={css.rolePanelTitle}>Roles</div>
         <div className={css.rolePanelTitle}>Members</div>
       </div>
       <hr className={css.separator} />
       <div className={css.rolePanelList}>{rolePanelList}</div>
       <div className={css.createRoleButtonContainer}>
         <Button
           variant="filled"
           className={css.createRoleButton}
           buttonColor={buttonThemes.standard}
           onClick={onClickCreateRole}
         >
           Create Role
         </Button>
       </div>
     </Modal>
   );
 }
 
 export default CommunityRolesModal;
diff --git a/web/search/message-search-state-provider.react.js b/web/search/message-search-state-provider.react.js
index 737fac328..3d983444e 100644
--- a/web/search/message-search-state-provider.react.js
+++ b/web/search/message-search-state-provider.react.js
@@ -1,207 +1,207 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { useSearchMessages } from 'lib/shared/search-utils.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import type { RawMessageInfo } from 'lib/types/message-types.js';
 
 type MessageSearchState = {
   +getQuery: (threadID: string) => string,
   +setQuery: (query: string, threadID: string) => void,
   +clearQuery: (threadID: string) => void,
   +getSearchResults: (threadID: string) => $ReadOnlyArray<RawMessageInfo>,
   +appendSearchResult: (
     $ReadOnlyArray<RawMessageInfo>,
     threadID: string,
   ) => void,
   +getEndReached: (threadID: string) => boolean,
   +setEndReached: (threadID: string) => void,
   +searchMessages: (threadID: string) => void,
 };
 
 const MessageSearchContext: React.Context<?MessageSearchState> =
   React.createContext<?MessageSearchState>(null);
 
 type Props = {
   +children: React.Node,
 };
 
 function MessageSearchStateProvider(props: Props): React.Node {
   const queries = React.useRef<{
     [threadID: string]: string,
   }>({});
 
   const [results, setResults] = React.useState<{
     [threadID: string]: $ReadOnlyArray<RawMessageInfo>,
   }>({});
 
-  const endsReached = React.useRef(new Set());
+  const endsReached = React.useRef(new Set<string>());
 
   const lastIDs = React.useRef<{
     [threadID: string]: string,
   }>({});
 
   const setEndReached = React.useCallback((threadID: string) => {
     endsReached.current.add(threadID);
   }, []);
 
   const removeEndReached = React.useCallback(
     (threadID: string) => endsReached.current.delete(threadID),
     [],
   );
 
   const getEndReached = React.useCallback(
     (threadID: string) => endsReached.current.has(threadID),
     [],
   );
 
   const appendResult = React.useCallback(
     (result: $ReadOnlyArray<RawMessageInfo>, threadID: string) => {
       const lastMessageID = oldestMessageID(result);
       if (lastMessageID) {
         lastIDs.current[threadID] = lastMessageID;
       }
       setResults(prevResults => {
         const prevThreadResults = prevResults[threadID] ?? [];
         const newThreadResults = [...prevThreadResults, ...result];
         return { ...prevResults, [threadID]: newThreadResults };
       });
     },
     [],
   );
 
   const clearResults = React.useCallback(
     (threadID: string) => {
       loading.current = false;
       delete lastIDs.current[threadID];
       removeEndReached(threadID);
       setResults(prevResults => {
         const { [threadID]: deleted, ...newState } = prevResults;
         return newState;
       });
     },
     [removeEndReached],
   );
 
   const getResults = React.useCallback(
     (threadID: string) => results[threadID] ?? [],
     [results],
   );
 
   const getQuery = React.useCallback(
     (threadID: string) => queries.current[threadID] ?? '',
     [],
   );
 
   const setQuery = React.useCallback(
     (query: string, threadID: string) => {
       clearResults(threadID);
       queries.current[threadID] = query;
     },
     [clearResults],
   );
 
   const clearQuery = React.useCallback(
     (threadID: string) => {
       clearResults(threadID);
       delete queries.current[threadID];
     },
     [clearResults],
   );
 
   const searchMessagesCall = useSearchMessages();
 
   const loading = React.useRef(false);
   const queryIDRef = React.useRef(0);
 
   const appendResults = React.useCallback(
     (
       newMessages: $ReadOnlyArray<RawMessageInfo>,
       end: boolean,
       queryID: number,
       threadID: string,
     ) => {
       if (queryID !== queryIDRef.current) {
         return;
       }
 
       appendResult(newMessages, threadID);
       if (end) {
         setEndReached(threadID);
       }
       loading.current = false;
     },
     [appendResult, setEndReached],
   );
 
   const searchMessages = React.useCallback(
     (threadID: string) => {
       if (loading.current || endsReached.current.has(threadID)) {
         return;
       }
       queryIDRef.current += 1;
       loading.current = true;
       const query = getQuery(threadID);
       searchMessagesCall(
         query,
         threadID,
         appendResults,
         queryIDRef.current,
         lastIDs.current[threadID],
       );
     },
     [appendResults, getQuery, searchMessagesCall],
   );
 
   const state = React.useMemo(
     () => ({
       getQuery,
       setQuery,
       clearQuery,
       getSearchResults: getResults,
       appendSearchResult: appendResult,
       getEndReached,
       setEndReached,
       searchMessages,
     }),
     [
       getQuery,
       setQuery,
       clearQuery,
       getResults,
       appendResult,
       getEndReached,
       setEndReached,
       searchMessages,
     ],
   );
 
   return (
     <MessageSearchContext.Provider value={state}>
       {props.children}
     </MessageSearchContext.Provider>
   );
 }
 
 function oldestMessageID(data: $ReadOnlyArray<RawMessageInfo>) {
   if (!data) {
     return undefined;
   }
   for (let i = data.length - 1; i >= 0; i--) {
     if (data[i].type === messageTypes.TEXT) {
       return data[i].id;
     }
   }
   return undefined;
 }
 
 function useMessageSearchContext(): MessageSearchState {
   const context = React.useContext(MessageSearchContext);
   invariant(context, 'MessageSearchContext not found');
 
   return context;
 }
 
 export { MessageSearchStateProvider, useMessageSearchContext };