diff --git a/lib/actions/message-actions.js b/lib/actions/message-actions.js
index e6c94efe2..0e3515cd9 100644
--- a/lib/actions/message-actions.js
+++ b/lib/actions/message-actions.js
@@ -1,483 +1,519 @@
 // @flow
 
 import invariant from 'invariant';
 
 import type {
   FetchMessageInfosPayload,
   SendMessageResult,
   SendEditMessageResult,
   SendReactionMessageRequest,
   SimpleMessagesPayload,
   SendEditMessageRequest,
   FetchPinnedMessagesRequest,
   FetchPinnedMessagesResult,
   SearchMessagesRequest,
   SearchMessagesResponse,
 } from '../types/message-types.js';
 import type { MediaMessageServerDBContent } from '../types/messages/media.js';
+import type {
+  ToggleMessagePinRequest,
+  ToggleMessagePinResult,
+} from '../types/thread-types.js';
 import {
   extractKeyserverIDFromID,
   sortThreadIDsPerKeyserver,
 } from '../utils/action-utils.js';
 import type { CallServerEndpointResultInfo } from '../utils/call-server-endpoint.js';
 import { useKeyserverCall } from '../utils/keyserver-call.js';
 import type { CallKeyserverEndpoint } from '../utils/keyserver-call.js';
 
 const fetchMessagesBeforeCursorActionTypes = Object.freeze({
   started: 'FETCH_MESSAGES_BEFORE_CURSOR_STARTED',
   success: 'FETCH_MESSAGES_BEFORE_CURSOR_SUCCESS',
   failed: 'FETCH_MESSAGES_BEFORE_CURSOR_FAILED',
 });
 export type FetchMessagesBeforeCursorInput = {
   +threadID: string,
   +beforeMessageID: string,
 };
 const fetchMessagesBeforeCursor =
   (
     callKeyserverEndpoint: CallKeyserverEndpoint,
   ): ((
     input: FetchMessagesBeforeCursorInput,
   ) => Promise<FetchMessageInfosPayload>) =>
   async input => {
     const { threadID, beforeMessageID } = input;
 
     const keyserverID = extractKeyserverIDFromID(input.threadID);
     const requests = {
       [keyserverID]: {
         cursors: {
           [threadID]: beforeMessageID,
         },
       },
     };
 
     const responses = await callKeyserverEndpoint('fetch_messages', requests);
     return {
       threadID,
       rawMessageInfos: responses[keyserverID].rawMessageInfos,
       truncationStatus: responses[keyserverID].truncationStatuses[threadID],
     };
   };
 
 function useFetchMessagesBeforeCursor(): (
   input: FetchMessagesBeforeCursorInput,
 ) => Promise<FetchMessageInfosPayload> {
   return useKeyserverCall(fetchMessagesBeforeCursor);
 }
 
 export type FetchMostRecentMessagesInput = {
   +threadID: string,
 };
 
 const fetchMostRecentMessagesActionTypes = Object.freeze({
   started: 'FETCH_MOST_RECENT_MESSAGES_STARTED',
   success: 'FETCH_MOST_RECENT_MESSAGES_SUCCESS',
   failed: 'FETCH_MOST_RECENT_MESSAGES_FAILED',
 });
 const fetchMostRecentMessages =
   (
     callKeyserverEndpoint: CallKeyserverEndpoint,
   ): ((
     input: FetchMostRecentMessagesInput,
   ) => Promise<FetchMessageInfosPayload>) =>
   async input => {
     const { threadID } = input;
 
     const keyserverID = extractKeyserverIDFromID(input.threadID);
     const requests = {
       [keyserverID]: {
         cursors: {
           [threadID]: null,
         },
       },
     };
 
     const responses = await callKeyserverEndpoint('fetch_messages', requests);
     return {
       threadID,
       rawMessageInfos: responses[keyserverID].rawMessageInfos,
       truncationStatus: responses[keyserverID].truncationStatuses[threadID],
     };
   };
 
 function useFetchMostRecentMessages(): (
   input: FetchMostRecentMessagesInput,
 ) => Promise<FetchMessageInfosPayload> {
   return useKeyserverCall(fetchMostRecentMessages);
 }
 
 const fetchSingleMostRecentMessagesFromThreadsActionTypes = Object.freeze({
   started: 'FETCH_SINGLE_MOST_RECENT_MESSAGES_FROM_THREADS_STARTED',
   success: 'FETCH_SINGLE_MOST_RECENT_MESSAGES_FROM_THREADS_SUCCESS',
   failed: 'FETCH_SINGLE_MOST_RECENT_MESSAGES_FROM_THREADS_FAILED',
 });
 const fetchSingleMostRecentMessagesFromThreads =
   (
     callKeyserverEndpoint: CallKeyserverEndpoint,
   ): ((threadIDs: $ReadOnlyArray<string>) => Promise<SimpleMessagesPayload>) =>
   async threadIDs => {
     const sortedThreadIDs = sortThreadIDsPerKeyserver(threadIDs);
 
     const requests = {};
     for (const keyserverID in sortedThreadIDs) {
       const cursors = Object.fromEntries(
         sortedThreadIDs[keyserverID].map(threadID => [threadID, null]),
       );
       requests[keyserverID] = {
         cursors,
         numberPerThread: 1,
       };
     }
 
     const responses = await callKeyserverEndpoint('fetch_messages', requests);
     let rawMessageInfos = [];
     let truncationStatuses = {};
     for (const keyserverID in responses) {
       rawMessageInfos = rawMessageInfos.concat(
         responses[keyserverID].rawMessageInfos,
       );
       truncationStatuses = {
         ...truncationStatuses,
         ...responses[keyserverID].truncationStatuses,
       };
     }
 
     return {
       rawMessageInfos,
       truncationStatuses,
     };
   };
 
 function useFetchSingleMostRecentMessagesFromThreads(): (
   threadIDs: $ReadOnlyArray<string>,
 ) => Promise<SimpleMessagesPayload> {
   return useKeyserverCall(fetchSingleMostRecentMessagesFromThreads);
 }
 
 export type SendTextMessageInput = {
   +threadID: string,
   +localID: string,
   +text: string,
   +sidebarCreation?: boolean,
 };
 
 const sendTextMessageActionTypes = Object.freeze({
   started: 'SEND_TEXT_MESSAGE_STARTED',
   success: 'SEND_TEXT_MESSAGE_SUCCESS',
   failed: 'SEND_TEXT_MESSAGE_FAILED',
 });
 const sendTextMessage =
   (
     callKeyserverEndpoint: CallKeyserverEndpoint,
   ): ((input: SendTextMessageInput) => Promise<SendMessageResult>) =>
   async input => {
     let resultInfo;
     const getResultInfo = (passedResultInfo: CallServerEndpointResultInfo) => {
       resultInfo = passedResultInfo;
     };
     const { threadID, localID, text, sidebarCreation } = input;
     let payload = { threadID, localID, text };
     if (sidebarCreation) {
       payload = { ...payload, sidebarCreation };
     }
 
     const keyserverID = extractKeyserverIDFromID(input.threadID);
     const requests = { [keyserverID]: payload };
 
     const responses = await callKeyserverEndpoint(
       'create_text_message',
       requests,
       {
         getResultInfo,
       },
     );
     const resultInterface = resultInfo?.interface;
     invariant(
       resultInterface,
       'getResultInfo not called before callKeyserverEndpoint resolves',
     );
     return {
       id: responses[keyserverID].newMessageInfo.id,
       time: responses[keyserverID].newMessageInfo.time,
       interface: resultInterface,
     };
   };
 
 function useSendTextMessage(): (
   input: SendTextMessageInput,
 ) => Promise<SendMessageResult> {
   return useKeyserverCall(sendTextMessage);
 }
 
 const createLocalMessageActionType = 'CREATE_LOCAL_MESSAGE';
 
 export type SendMultimediaMessageInput = {
   +threadID: string,
   +localID: string,
   +mediaMessageContents: $ReadOnlyArray<MediaMessageServerDBContent>,
   +sidebarCreation?: boolean,
 };
 
 const sendMultimediaMessageActionTypes = Object.freeze({
   started: 'SEND_MULTIMEDIA_MESSAGE_STARTED',
   success: 'SEND_MULTIMEDIA_MESSAGE_SUCCESS',
   failed: 'SEND_MULTIMEDIA_MESSAGE_FAILED',
 });
 const sendMultimediaMessage =
   (
     callKeyserverEndpoint: CallKeyserverEndpoint,
   ): ((input: SendMultimediaMessageInput) => Promise<SendMessageResult>) =>
   async input => {
     let resultInfo;
     const getResultInfo = (passedResultInfo: CallServerEndpointResultInfo) => {
       resultInfo = passedResultInfo;
     };
     const { threadID, localID, mediaMessageContents, sidebarCreation } = input;
     let payload = { threadID, localID, mediaMessageContents };
     if (sidebarCreation) {
       payload = { ...payload, sidebarCreation };
     }
 
     const keyserverID = extractKeyserverIDFromID(input.threadID);
     const requests = { [keyserverID]: payload };
 
     const responses = await callKeyserverEndpoint(
       'create_multimedia_message',
       requests,
       { getResultInfo },
     );
     const resultInterface = resultInfo?.interface;
     invariant(
       resultInterface,
       'getResultInfo not called before callKeyserverEndpoint resolves',
     );
     return {
       id: responses[keyserverID].newMessageInfo.id,
       time: responses[keyserverID].newMessageInfo.time,
       interface: resultInterface,
     };
   };
 
 function useSendMultimediaMessage(): (
   input: SendMultimediaMessageInput,
 ) => Promise<SendMessageResult> {
   return useKeyserverCall(sendMultimediaMessage);
 }
 
 export type LegacySendMultimediaMessageInput = {
   +threadID: string,
   +localID: string,
   +mediaIDs: $ReadOnlyArray<string>,
   +sidebarCreation?: boolean,
 };
 
 const legacySendMultimediaMessage =
   (
     callKeyserverEndpoint: CallKeyserverEndpoint,
   ): ((
     input: LegacySendMultimediaMessageInput,
   ) => Promise<SendMessageResult>) =>
   async input => {
     let resultInfo;
     const getResultInfo = (passedResultInfo: CallServerEndpointResultInfo) => {
       resultInfo = passedResultInfo;
     };
     const { threadID, localID, mediaIDs, sidebarCreation } = input;
     let payload = { threadID, localID, mediaIDs };
     if (sidebarCreation) {
       payload = { ...payload, sidebarCreation };
     }
 
     const keyserverID = extractKeyserverIDFromID(input.threadID);
     const requests = { [keyserverID]: payload };
 
     const responses = await callKeyserverEndpoint(
       'create_multimedia_message',
       requests,
       { getResultInfo },
     );
     const resultInterface = resultInfo?.interface;
     invariant(
       resultInterface,
       'getResultInfo not called before callKeyserverEndpoint resolves',
     );
     return {
       id: responses[keyserverID].newMessageInfo.id,
       time: responses[keyserverID].newMessageInfo.time,
       interface: resultInterface,
     };
   };
 
 function useLegacySendMultimediaMessage(): (
   input: LegacySendMultimediaMessageInput,
 ) => Promise<SendMessageResult> {
   return useKeyserverCall(legacySendMultimediaMessage);
 }
 
 const sendReactionMessageActionTypes = Object.freeze({
   started: 'SEND_REACTION_MESSAGE_STARTED',
   success: 'SEND_REACTION_MESSAGE_SUCCESS',
   failed: 'SEND_REACTION_MESSAGE_FAILED',
 });
 const sendReactionMessage =
   (
     callKeyserverEndpoint: CallKeyserverEndpoint,
   ): ((input: SendReactionMessageRequest) => Promise<SendMessageResult>) =>
   async input => {
     let resultInfo;
     const getResultInfo = (passedResultInfo: CallServerEndpointResultInfo) => {
       resultInfo = passedResultInfo;
     };
 
     const keyserverID = extractKeyserverIDFromID(input.threadID);
     const requests = {
       [keyserverID]: {
         threadID: input.threadID,
         localID: input.localID,
         targetMessageID: input.targetMessageID,
         reaction: input.reaction,
         action: input.action,
       },
     };
 
     const responses = await callKeyserverEndpoint(
       'create_reaction_message',
       requests,
       { getResultInfo },
     );
 
     const resultInterface = resultInfo?.interface;
     invariant(
       resultInterface,
       'getResultInfo not called before callKeyserverEndpoint resolves',
     );
 
     return {
       id: responses[keyserverID].newMessageInfo.id,
       time: responses[keyserverID].newMessageInfo.time,
       interface: resultInterface,
     };
   };
 
 function useSendReactionMessage(): (
   input: SendReactionMessageRequest,
 ) => Promise<SendMessageResult> {
   return useKeyserverCall(sendReactionMessage);
 }
 
 const sendEditMessageActionTypes = Object.freeze({
   started: 'SEND_EDIT_MESSAGE_STARTED',
   success: 'SEND_EDIT_MESSAGE_SUCCESS',
   failed: 'SEND_EDIT_MESSAGE_FAILED',
 });
 const sendEditMessage =
   (
     callKeyserverEndpoint: CallKeyserverEndpoint,
   ): ((input: SendEditMessageRequest) => Promise<SendEditMessageResult>) =>
   async input => {
     const keyserverID = extractKeyserverIDFromID(input.targetMessageID);
     const requests = {
       [keyserverID]: {
         targetMessageID: input.targetMessageID,
         text: input.text,
       },
     };
 
     const responses = await callKeyserverEndpoint('edit_message', requests);
 
     return {
       newMessageInfos: responses[keyserverID].newMessageInfos,
     };
   };
 
 function useSendEditMessage(): (
   input: SendEditMessageRequest,
 ) => Promise<SendEditMessageResult> {
   return useKeyserverCall(sendEditMessage);
 }
 
 const saveMessagesActionType = 'SAVE_MESSAGES';
 const processMessagesActionType = 'PROCESS_MESSAGES';
 const messageStorePruneActionType = 'MESSAGE_STORE_PRUNE';
 
 const fetchPinnedMessageActionTypes = Object.freeze({
   started: 'FETCH_PINNED_MESSAGES_STARTED',
   success: 'FETCH_PINNED_MESSAGES_SUCCESS',
   failed: 'FETCH_PINNED_MESSAGES_FAILED',
 });
 const fetchPinnedMessages =
   (
     callKeyserverEndpoint: CallKeyserverEndpoint,
   ): ((
     input: FetchPinnedMessagesRequest,
   ) => Promise<FetchPinnedMessagesResult>) =>
   async input => {
     const keyserverID = extractKeyserverIDFromID(input.threadID);
     const requests = { [keyserverID]: input };
 
     const responses = await callKeyserverEndpoint(
       'fetch_pinned_messages',
       requests,
     );
 
     return { pinnedMessages: responses[keyserverID].pinnedMessages };
   };
 
 function useFetchPinnedMessages(): (
   input: FetchPinnedMessagesRequest,
 ) => Promise<FetchPinnedMessagesResult> {
   return useKeyserverCall(fetchPinnedMessages);
 }
 
 const searchMessagesActionTypes = Object.freeze({
   started: 'SEARCH_MESSAGES_STARTED',
   success: 'SEARCH_MESSAGES_SUCCESS',
   failed: 'SEARCH_MESSAGES_FAILED',
 });
 
 const searchMessages =
   (
     callKeyserverEndpoint: CallKeyserverEndpoint,
   ): ((input: SearchMessagesRequest) => Promise<SearchMessagesResponse>) =>
   async input => {
     const keyserverID = extractKeyserverIDFromID(input.threadID);
     const requests = { [keyserverID]: input };
 
     const responses = await callKeyserverEndpoint('search_messages', requests);
 
     return {
       messages: responses[keyserverID].messages,
       endReached: responses[keyserverID].endReached,
     };
   };
 
 function useSearchMessages(): (
   input: SearchMessagesRequest,
 ) => Promise<SearchMessagesResponse> {
   return useKeyserverCall(searchMessages);
 }
 
+const toggleMessagePinActionTypes = Object.freeze({
+  started: 'TOGGLE_MESSAGE_PIN_STARTED',
+  success: 'TOGGLE_MESSAGE_PIN_SUCCESS',
+  failed: 'TOGGLE_MESSAGE_PIN_FAILED',
+});
+const toggleMessagePin =
+  (
+    callKeyserverEndpoint: CallKeyserverEndpoint,
+  ): ((input: ToggleMessagePinRequest) => Promise<ToggleMessagePinResult>) =>
+  async input => {
+    const keyserverID = extractKeyserverIDFromID(input.messageID);
+    const requests = { [keyserverID]: input };
+
+    const responses = await callKeyserverEndpoint(
+      'toggle_message_pin',
+      requests,
+    );
+    const response = responses[keyserverID];
+    return {
+      newMessageInfos: response.newMessageInfos,
+      threadID: response.threadID,
+    };
+  };
+
+function useToggleMessagePin(): (
+  input: ToggleMessagePinRequest,
+) => Promise<ToggleMessagePinResult> {
+  return useKeyserverCall(toggleMessagePin);
+}
+
 export {
   fetchMessagesBeforeCursorActionTypes,
   useFetchMessagesBeforeCursor,
   fetchMostRecentMessagesActionTypes,
   useFetchMostRecentMessages,
   fetchSingleMostRecentMessagesFromThreadsActionTypes,
   useFetchSingleMostRecentMessagesFromThreads,
   sendTextMessageActionTypes,
   useSendTextMessage,
   createLocalMessageActionType,
   sendMultimediaMessageActionTypes,
   useSendMultimediaMessage,
   useLegacySendMultimediaMessage,
   searchMessagesActionTypes,
   useSearchMessages,
   sendReactionMessageActionTypes,
   useSendReactionMessage,
   saveMessagesActionType,
   processMessagesActionType,
   messageStorePruneActionType,
   sendEditMessageActionTypes,
   useSendEditMessage,
   useFetchPinnedMessages,
   fetchPinnedMessageActionTypes,
+  toggleMessagePinActionTypes,
+  useToggleMessagePin,
 };
diff --git a/lib/actions/thread-actions.js b/lib/actions/thread-actions.js
index d9c3ab1c0..afd9cd8c6 100644
--- a/lib/actions/thread-actions.js
+++ b/lib/actions/thread-actions.js
@@ -1,256 +1,341 @@
 // @flow
 
 import invariant from 'invariant';
 
+import genesis from '../facts/genesis.js';
 import type {
   ChangeThreadSettingsPayload,
   LeaveThreadPayload,
   UpdateThreadRequest,
   ClientNewThreadRequest,
   NewThreadResult,
   ClientThreadJoinRequest,
   ThreadJoinPayload,
   ThreadFetchMediaRequest,
   ThreadFetchMediaResult,
-  ToggleMessagePinRequest,
-  ToggleMessagePinResult,
   RoleModificationRequest,
   RoleModificationPayload,
   RoleDeletionRequest,
   RoleDeletionPayload,
 } from '../types/thread-types.js';
+import { extractKeyserverIDFromID } from '../utils/action-utils.js';
 import type { CallServerEndpoint } from '../utils/call-server-endpoint.js';
+import type { CallKeyserverEndpoint } from '../utils/keyserver-call';
+import { useKeyserverCall } from '../utils/keyserver-call.js';
 import { values } from '../utils/objects.js';
 
 const deleteThreadActionTypes = Object.freeze({
   started: 'DELETE_THREAD_STARTED',
   success: 'DELETE_THREAD_SUCCESS',
   failed: 'DELETE_THREAD_FAILED',
 });
 const deleteThread =
   (
     callServerEndpoint: CallServerEndpoint,
   ): ((
     threadID: string,
     currentAccountPassword: ?string,
   ) => Promise<LeaveThreadPayload>) =>
   async (threadID, currentAccountPassword) => {
     const response = await callServerEndpoint('delete_thread', {
       threadID,
       accountPassword: currentAccountPassword,
     });
     return {
       updatesResult: response.updatesResult,
     };
   };
 
 const changeThreadSettingsActionTypes = Object.freeze({
   started: 'CHANGE_THREAD_SETTINGS_STARTED',
   success: 'CHANGE_THREAD_SETTINGS_SUCCESS',
   failed: 'CHANGE_THREAD_SETTINGS_FAILED',
 });
 const changeThreadSettings =
   (
     callServerEndpoint: CallServerEndpoint,
   ): ((request: UpdateThreadRequest) => Promise<ChangeThreadSettingsPayload>) =>
   async request => {
     invariant(
       Object.keys(request.changes).length > 0,
       'No changes provided to changeThreadSettings!',
     );
     const response = await callServerEndpoint('update_thread', request);
     return {
       threadID: request.threadID,
       updatesResult: response.updatesResult,
       newMessageInfos: response.newMessageInfos,
     };
   };
 
+export type RemoveUsersFromThreadInput = {
+  +threadID: string,
+  +memberIDs: $ReadOnlyArray<string>,
+};
+
 const removeUsersFromThreadActionTypes = Object.freeze({
   started: 'REMOVE_USERS_FROM_THREAD_STARTED',
   success: 'REMOVE_USERS_FROM_THREAD_SUCCESS',
   failed: 'REMOVE_USERS_FROM_THREAD_FAILED',
 });
 const removeUsersFromThread =
   (
-    callServerEndpoint: CallServerEndpoint,
+    callKeyserverEndpoint: CallKeyserverEndpoint,
   ): ((
-    threadID: string,
-    memberIDs: $ReadOnlyArray<string>,
+    input: RemoveUsersFromThreadInput,
   ) => Promise<ChangeThreadSettingsPayload>) =>
-  async (threadID, memberIDs) => {
-    const response = await callServerEndpoint('remove_members', {
-      threadID,
-      memberIDs,
-    });
+  async input => {
+    const keyserverID = extractKeyserverIDFromID(input.threadID);
+    const requests = { [keyserverID]: input };
+
+    const responses = await callKeyserverEndpoint('remove_members', requests);
+    const response = responses[keyserverID];
     return {
-      threadID,
+      threadID: input.threadID,
       updatesResult: response.updatesResult,
       newMessageInfos: response.newMessageInfos,
     };
   };
 
+function useRemoveUsersFromThread(): (
+  input: RemoveUsersFromThreadInput,
+) => Promise<ChangeThreadSettingsPayload> {
+  return useKeyserverCall(removeUsersFromThread);
+}
+
+export type ChangeThreadMemberRolesInput = {
+  +threadID: string,
+  +memberIDs: $ReadOnlyArray<string>,
+  +newRole: string,
+};
+
 const changeThreadMemberRolesActionTypes = Object.freeze({
   started: 'CHANGE_THREAD_MEMBER_ROLES_STARTED',
   success: 'CHANGE_THREAD_MEMBER_ROLES_SUCCESS',
   failed: 'CHANGE_THREAD_MEMBER_ROLES_FAILED',
 });
 const changeThreadMemberRoles =
   (
-    callServerEndpoint: CallServerEndpoint,
+    callKeyserverEndpoint: CallKeyserverEndpoint,
   ): ((
-    threadID: string,
-    memberIDs: $ReadOnlyArray<string>,
-    newRole: string,
+    input: ChangeThreadMemberRolesInput,
   ) => Promise<ChangeThreadSettingsPayload>) =>
-  async (threadID, memberIDs, newRole) => {
-    const response = await callServerEndpoint('update_role', {
-      threadID,
-      memberIDs,
-      role: newRole,
-    });
+  async input => {
+    const { threadID, memberIDs, newRole } = input;
+    const keyserverID = extractKeyserverIDFromID(input.threadID);
+    const requests = {
+      [keyserverID]: {
+        threadID,
+        memberIDs,
+        role: newRole,
+      },
+    };
+
+    const responses = await callKeyserverEndpoint('update_role', requests);
+    const response = responses[keyserverID];
     return {
       threadID,
       updatesResult: response.updatesResult,
       newMessageInfos: response.newMessageInfos,
     };
   };
 
+function useChangeThreadMemberRoles(): (
+  input: ChangeThreadMemberRolesInput,
+) => Promise<ChangeThreadSettingsPayload> {
+  return useKeyserverCall(changeThreadMemberRoles);
+}
+
 const newThreadActionTypes = Object.freeze({
   started: 'NEW_THREAD_STARTED',
   success: 'NEW_THREAD_SUCCESS',
   failed: 'NEW_THREAD_FAILED',
 });
 const newThread =
   (
-    callServerEndpoint: CallServerEndpoint,
-  ): ((request: ClientNewThreadRequest) => Promise<NewThreadResult>) =>
-  async request => {
-    const response = await callServerEndpoint('create_thread', request);
+    callKeyserverEndpoint: CallKeyserverEndpoint,
+  ): ((input: ClientNewThreadRequest) => Promise<NewThreadResult>) =>
+  async input => {
+    const parentThreadID = input.parentThreadID ?? genesis.id;
+    const keyserverID = extractKeyserverIDFromID(parentThreadID);
+    const requests = { [keyserverID]: input };
+
+    const responses = await callKeyserverEndpoint('create_thread', requests);
+    const response = responses[keyserverID];
+
     return {
       newThreadID: response.newThreadID,
       updatesResult: response.updatesResult,
       newMessageInfos: response.newMessageInfos,
       userInfos: response.userInfos,
     };
   };
 
+function useNewThread(): (
+  input: ClientNewThreadRequest,
+) => Promise<NewThreadResult> {
+  return useKeyserverCall(newThread);
+}
+
 const joinThreadActionTypes = Object.freeze({
   started: 'JOIN_THREAD_STARTED',
   success: 'JOIN_THREAD_SUCCESS',
   failed: 'JOIN_THREAD_FAILED',
 });
 const joinThread =
   (
-    callServerEndpoint: CallServerEndpoint,
-  ): ((request: ClientThreadJoinRequest) => Promise<ThreadJoinPayload>) =>
-  async request => {
-    const response = await callServerEndpoint('join_thread', request);
+    callKeyserverEndpoint: CallKeyserverEndpoint,
+  ): ((input: ClientThreadJoinRequest) => Promise<ThreadJoinPayload>) =>
+  async input => {
+    const keyserverID = extractKeyserverIDFromID(input.threadID);
+    const requests = { [keyserverID]: input };
+
+    const responses = await callKeyserverEndpoint('join_thread', requests);
+    const response = responses[keyserverID];
     const userInfos = values(response.userInfos);
     return {
       updatesResult: response.updatesResult,
       rawMessageInfos: response.rawMessageInfos,
       truncationStatuses: response.truncationStatuses,
       userInfos,
     };
   };
 
+function useJoinThread(): (
+  input: ClientThreadJoinRequest,
+) => Promise<ThreadJoinPayload> {
+  return useKeyserverCall(joinThread);
+}
+
+export type LeaveThreadInput = {
+  +threadID: string,
+};
 const leaveThreadActionTypes = Object.freeze({
   started: 'LEAVE_THREAD_STARTED',
   success: 'LEAVE_THREAD_SUCCESS',
   failed: 'LEAVE_THREAD_FAILED',
 });
 const leaveThread =
   (
-    callServerEndpoint: CallServerEndpoint,
-  ): ((threadID: string) => Promise<LeaveThreadPayload>) =>
-  async threadID => {
-    const response = await callServerEndpoint('leave_thread', { threadID });
+    callKeyserverEndpoint: CallKeyserverEndpoint,
+  ): ((input: LeaveThreadInput) => Promise<LeaveThreadPayload>) =>
+  async input => {
+    const keyserverID = extractKeyserverIDFromID(input.threadID);
+    const requests = { [keyserverID]: input };
+
+    const responses = await callKeyserverEndpoint('leave_thread', requests);
+    const response = responses[keyserverID];
     return {
       updatesResult: response.updatesResult,
     };
   };
 
+function useLeaveThread(): (
+  input: LeaveThreadInput,
+) => Promise<LeaveThreadPayload> {
+  return useKeyserverCall(leaveThread);
+}
+
 const fetchThreadMedia =
   (
-    callServerEndpoint: CallServerEndpoint,
-  ): ((request: ThreadFetchMediaRequest) => Promise<ThreadFetchMediaResult>) =>
-  async request => {
-    const response = await callServerEndpoint('fetch_thread_media', request);
-    return response;
-  };
+    callKeyserverEndpoint: CallKeyserverEndpoint,
+  ): ((input: ThreadFetchMediaRequest) => Promise<ThreadFetchMediaResult>) =>
+  async input => {
+    const keyserverID = extractKeyserverIDFromID(input.threadID);
+    const requests = { [keyserverID]: input };
 
-const toggleMessagePinActionTypes = Object.freeze({
-  started: 'TOGGLE_MESSAGE_PIN_STARTED',
-  success: 'TOGGLE_MESSAGE_PIN_SUCCESS',
-  failed: 'TOGGLE_MESSAGE_PIN_FAILED',
-});
-const toggleMessagePin =
-  (
-    callServerEndpoint: CallServerEndpoint,
-  ): ((request: ToggleMessagePinRequest) => Promise<ToggleMessagePinResult>) =>
-  async request => {
-    const response = await callServerEndpoint('toggle_message_pin', request);
-    return {
-      newMessageInfos: response.newMessageInfos,
-      threadID: response.threadID,
-    };
+    const responses = await callKeyserverEndpoint(
+      'fetch_thread_media',
+      requests,
+    );
+    const response = responses[keyserverID];
+    return { media: response.media };
   };
 
+function useFetchThreadMedia(): (
+  input: ThreadFetchMediaRequest,
+) => Promise<ThreadFetchMediaResult> {
+  return useKeyserverCall(fetchThreadMedia);
+}
+
 const modifyCommunityRoleActionTypes = Object.freeze({
   started: 'MODIFY_COMMUNITY_ROLE_STARTED',
   success: 'MODIFY_COMMUNITY_ROLE_SUCCESS',
   failed: 'MODIFY_COMMUNITY_ROLE_FAILED',
 });
 const modifyCommunityRole =
   (
-    callServerEndpoint: CallServerEndpoint,
-  ): ((request: RoleModificationRequest) => Promise<RoleModificationPayload>) =>
-  async request => {
-    const response = await callServerEndpoint('modify_community_role', request);
+    callKeyserverEndpoint: CallKeyserverEndpoint,
+  ): ((input: RoleModificationRequest) => Promise<RoleModificationPayload>) =>
+  async input => {
+    const keyserverID = extractKeyserverIDFromID(input.community);
+    const requests = { [keyserverID]: input };
+
+    const responses = await callKeyserverEndpoint(
+      'modify_community_role',
+      requests,
+    );
+    const response = responses[keyserverID];
     return {
       threadInfo: response.threadInfo,
       updatesResult: response.updatesResult,
     };
   };
 
+function useModifyCommunityRole(): (
+  input: RoleModificationRequest,
+) => Promise<RoleModificationPayload> {
+  return useKeyserverCall(modifyCommunityRole);
+}
+
 const deleteCommunityRoleActionTypes = Object.freeze({
   started: 'DELETE_COMMUNITY_ROLE_STARTED',
   success: 'DELETE_COMMUNITY_ROLE_SUCCESS',
   failed: 'DELETE_COMMUNITY_ROLE_FAILED',
 });
 const deleteCommunityRole =
   (
-    callServerEndpoint: CallServerEndpoint,
-  ): ((request: RoleDeletionRequest) => Promise<RoleDeletionPayload>) =>
-  async request => {
-    const response = await callServerEndpoint('delete_community_role', request);
+    callKeyserverEndpoint: CallKeyserverEndpoint,
+  ): ((input: RoleDeletionRequest) => Promise<RoleDeletionPayload>) =>
+  async input => {
+    const keyserverID = extractKeyserverIDFromID(input.community);
+    const requests = { [keyserverID]: input };
+
+    const responses = await callKeyserverEndpoint(
+      'delete_community_role',
+      requests,
+    );
+    const response = responses[keyserverID];
     return {
       threadInfo: response.threadInfo,
       updatesResult: response.updatesResult,
     };
   };
 
+function useDeleteCommunityRole(): (
+  input: RoleDeletionRequest,
+) => Promise<RoleDeletionPayload> {
+  return useKeyserverCall(deleteCommunityRole);
+}
+
 export {
   deleteThreadActionTypes,
   deleteThread,
   changeThreadSettingsActionTypes,
   changeThreadSettings,
   removeUsersFromThreadActionTypes,
-  removeUsersFromThread,
+  useRemoveUsersFromThread,
   changeThreadMemberRolesActionTypes,
-  changeThreadMemberRoles,
+  useChangeThreadMemberRoles,
   newThreadActionTypes,
-  newThread,
+  useNewThread,
   joinThreadActionTypes,
-  joinThread,
+  useJoinThread,
   leaveThreadActionTypes,
-  leaveThread,
-  fetchThreadMedia,
-  toggleMessagePinActionTypes,
-  toggleMessagePin,
+  useLeaveThread,
+  useFetchThreadMedia,
   modifyCommunityRoleActionTypes,
-  modifyCommunityRole,
+  useModifyCommunityRole,
   deleteCommunityRoleActionTypes,
-  deleteCommunityRole,
+  useDeleteCommunityRole,
 };
diff --git a/lib/reducers/message-reducer.js b/lib/reducers/message-reducer.js
index 5185c8354..fd7d34bee 100644
--- a/lib/reducers/message-reducer.js
+++ b/lib/reducers/message-reducer.js
@@ -1,1761 +1,1761 @@
 // @flow
 
 import invariant from 'invariant';
 import _difference from 'lodash/fp/difference.js';
 import _flow from 'lodash/fp/flow.js';
 import _isEqual from 'lodash/fp/isEqual.js';
 import _keyBy from 'lodash/fp/keyBy.js';
 import _map from 'lodash/fp/map.js';
 import _mapKeys from 'lodash/fp/mapKeys.js';
 import _mapValues from 'lodash/fp/mapValues.js';
 import _omit from 'lodash/fp/omit.js';
 import _omitBy from 'lodash/fp/omitBy.js';
 import _pickBy from 'lodash/fp/pickBy.js';
 import _uniq from 'lodash/fp/uniq.js';
 
 import { setClientDBStoreActionType } from '../actions/client-db-store-actions.js';
 import {
   createEntryActionTypes,
   saveEntryActionTypes,
   deleteEntryActionTypes,
   restoreEntryActionTypes,
 } from '../actions/entry-actions.js';
 import {
+  toggleMessagePinActionTypes,
   fetchMessagesBeforeCursorActionTypes,
   fetchMostRecentMessagesActionTypes,
   sendTextMessageActionTypes,
   sendMultimediaMessageActionTypes,
   sendReactionMessageActionTypes,
   sendEditMessageActionTypes,
   saveMessagesActionType,
   processMessagesActionType,
   messageStorePruneActionType,
   createLocalMessageActionType,
   fetchSingleMostRecentMessagesFromThreadsActionTypes,
 } from '../actions/message-actions.js';
 import { sendMessageReportActionTypes } from '../actions/message-report-actions.js';
 import { siweAuthActionTypes } from '../actions/siwe-actions.js';
 import {
   changeThreadSettingsActionTypes,
   deleteThreadActionTypes,
   leaveThreadActionTypes,
   newThreadActionTypes,
   removeUsersFromThreadActionTypes,
   changeThreadMemberRolesActionTypes,
   joinThreadActionTypes,
-  toggleMessagePinActionTypes,
 } from '../actions/thread-actions.js';
 import { updateMultimediaMessageMediaActionType } from '../actions/upload-actions.js';
 import {
   logOutActionTypes,
   deleteAccountActionTypes,
   logInActionTypes,
   registerActionTypes,
 } from '../actions/user-actions.js';
 import {
   messageStoreOpsHandlers,
   type MessageStoreOperation,
   type ReplaceMessageOperation,
 } from '../ops/message-store-ops.js';
 import { pendingToRealizedThreadIDsSelector } from '../selectors/thread-selectors.js';
 import {
   messageID,
   sortMessageInfoList,
   sortMessageIDs,
   mergeThreadMessageInfos,
 } from '../shared/message-utils.js';
 import {
   threadHasPermission,
   threadInChatList,
   threadIsPending,
 } from '../shared/thread-utils.js';
 import threadWatcher from '../shared/thread-watcher.js';
 import { unshimMessageInfos } from '../shared/unshim-utils.js';
 import { updateSpecs } from '../shared/updates/update-specs.js';
 import type { Media, Image } from '../types/media-types.js';
 import { messageTypes } from '../types/message-types-enum.js';
 import {
   type RawMessageInfo,
   type LocalMessageInfo,
   type MessageStore,
   type MessageTruncationStatus,
   type MessageTruncationStatuses,
   messageTruncationStatus,
   defaultNumberPerThread,
   type ThreadMessageInfo,
 } from '../types/message-types.js';
 import type { RawImagesMessageInfo } from '../types/messages/images.js';
 import type { RawMediaMessageInfo } from '../types/messages/media.js';
 import { type BaseAction } from '../types/redux-types.js';
 import { processServerRequestsActionType } from '../types/request-types.js';
 import {
   fullStateSyncActionType,
   incrementalStateSyncActionType,
 } from '../types/socket-types.js';
 import { threadPermissions } from '../types/thread-permission-types.js';
 import { type RawThreadInfo } from '../types/thread-types.js';
 import {
   type ClientUpdateInfo,
   processUpdatesActionType,
 } from '../types/update-types.js';
 import { setNewSessionActionType } from '../utils/action-utils.js';
 import { isDev } from '../utils/dev-utils.js';
 import { translateClientDBThreadMessageInfos } from '../utils/message-ops-utils.js';
 import { assertObjectsAreEqual } from '../utils/objects.js';
 import { ashoatKeyserverID } from '../utils/validation-utils.js';
 
 const PROCESSED_MSG_STORE_INVARIANTS_DISABLED = !isDev;
 const _mapValuesWithKeys = _mapValues.convert({ cap: false });
 
 // Input must already be ordered!
 function mapThreadsToMessageIDsFromOrderedMessageInfos(
   orderedMessageInfos: $ReadOnlyArray<RawMessageInfo>,
 ): { [threadID: string]: string[] } {
   const threadsToMessageIDs: { [threadID: string]: string[] } = {};
   for (const messageInfo of orderedMessageInfos) {
     const key = messageID(messageInfo);
     if (!threadsToMessageIDs[messageInfo.threadID]) {
       threadsToMessageIDs[messageInfo.threadID] = [key];
     } else {
       threadsToMessageIDs[messageInfo.threadID].push(key);
     }
   }
   return threadsToMessageIDs;
 }
 
 function isThreadWatched(
   threadID: string,
   threadInfo: ?RawThreadInfo,
   watchedIDs: $ReadOnlyArray<string>,
 ) {
   return (
     threadIsPending(threadID) ||
     (threadInfo &&
       threadHasPermission(threadInfo, threadPermissions.VISIBLE) &&
       (threadInChatList(threadInfo) || watchedIDs.includes(threadID)))
   );
 }
 
 function assertMessageStoreThreadsAreEqual(
   processedMessageStore: MessageStore,
   expectedMessageStore: MessageStore,
   location: string,
 ) {
   if (PROCESSED_MSG_STORE_INVARIANTS_DISABLED) {
     return;
   }
 
   assertObjectsAreEqual(
     processedMessageStore.threads,
     expectedMessageStore.threads,
     `MessageStore.threads - ${location}`,
   );
 }
 
 const newThread = () => ({
   messageIDs: [],
   startReached: false,
 });
 
 type FreshMessageStoreResult = {
   +messageStoreOperations: $ReadOnlyArray<MessageStoreOperation>,
   +messageStore: MessageStore,
 };
 function freshMessageStore(
   messageInfos: $ReadOnlyArray<RawMessageInfo>,
   truncationStatus: { [threadID: string]: MessageTruncationStatus },
   currentAsOf: number,
   threadInfos: { +[threadID: string]: RawThreadInfo },
 ): FreshMessageStoreResult {
   const unshimmed = unshimMessageInfos(messageInfos);
   const orderedMessageInfos = sortMessageInfoList(unshimmed);
   const messages = _keyBy(messageID)(orderedMessageInfos);
 
   const messageStoreReplaceOperations = orderedMessageInfos.map(
     messageInfo => ({
       type: 'replace',
       payload: { id: messageID(messageInfo), messageInfo },
     }),
   );
 
   const threadsToMessageIDs =
     mapThreadsToMessageIDsFromOrderedMessageInfos(orderedMessageInfos);
   const threads = _mapValuesWithKeys(
     (messageIDs: string[], threadID: string) => ({
       ...newThread(),
       messageIDs,
       startReached:
         truncationStatus[threadID] === messageTruncationStatus.EXHAUSTIVE,
     }),
   )(threadsToMessageIDs);
   const watchedIDs = threadWatcher.getWatchedIDs();
   for (const threadID in threadInfos) {
     const threadInfo = threadInfos[threadID];
     if (
       threads[threadID] ||
       !isThreadWatched(threadID, threadInfo, watchedIDs)
     ) {
       continue;
     }
     threads[threadID] = newThread();
   }
 
   const messageStoreOperations = [
     { type: 'remove_all' },
     {
       type: 'remove_all_threads',
     },
     {
       type: 'replace_threads',
       payload: { threads },
     },
     ...messageStoreReplaceOperations,
   ];
 
   return {
     messageStoreOperations,
     messageStore: {
       messages,
       threads,
       local: {},
       currentAsOf: { [ashoatKeyserverID]: currentAsOf },
     },
   };
 }
 
 type ReassignmentResult = {
   +messageStoreOperations: MessageStoreOperation[],
   +messageStore: MessageStore,
   +reassignedThreadIDs: string[],
 };
 
 function reassignMessagesToRealizedThreads(
   messageStore: MessageStore,
   threadInfos: { +[threadID: string]: RawThreadInfo },
 ): ReassignmentResult {
   const pendingToRealizedThreadIDs =
     pendingToRealizedThreadIDsSelector(threadInfos);
 
   const messageStoreOperations: MessageStoreOperation[] = [];
   const messages = {};
   for (const storeMessageID in messageStore.messages) {
     const message = messageStore.messages[storeMessageID];
     const newThreadID = pendingToRealizedThreadIDs.get(message.threadID);
 
     messages[storeMessageID] = newThreadID
       ? {
           ...message,
           threadID: newThreadID,
           time: threadInfos[newThreadID]?.creationTime ?? message.time,
         }
       : message;
 
     if (!newThreadID) {
       continue;
     }
 
     const updateMsgOperation: ReplaceMessageOperation = {
       type: 'replace',
       payload: { id: storeMessageID, messageInfo: messages[storeMessageID] },
     };
 
     messageStoreOperations.push(updateMsgOperation);
   }
 
   const threads = {};
   const reassignedThreadIDs = [];
   const updatedThreads = {};
   const threadsToRemove = [];
   for (const threadID in messageStore.threads) {
     const threadMessageInfo = messageStore.threads[threadID];
     const newThreadID = pendingToRealizedThreadIDs.get(threadID);
     if (!newThreadID) {
       threads[threadID] = threadMessageInfo;
       continue;
     }
     const realizedThread = messageStore.threads[newThreadID];
     if (!realizedThread) {
       reassignedThreadIDs.push(newThreadID);
       threads[newThreadID] = threadMessageInfo;
       updatedThreads[newThreadID] = threadMessageInfo;
       threadsToRemove.push(threadID);
       continue;
     }
     threads[newThreadID] = mergeThreadMessageInfos(
       threadMessageInfo,
       realizedThread,
       messages,
     );
     updatedThreads[newThreadID] = threads[newThreadID];
   }
   if (threadsToRemove.length) {
     messageStoreOperations.push({
       type: 'remove_threads',
       payload: {
         ids: threadsToRemove,
       },
     });
   }
   messageStoreOperations.push({
     type: 'replace_threads',
     payload: {
       threads: updatedThreads,
     },
   });
 
   return {
     messageStoreOperations,
     messageStore: {
       ...messageStore,
       threads,
       messages,
     },
     reassignedThreadIDs,
   };
 }
 
 type MergeNewMessagesResult = {
   +messageStoreOperations: $ReadOnlyArray<MessageStoreOperation>,
   +messageStore: MessageStore,
 };
 // oldMessageStore is from the old state
 // newMessageInfos, truncationStatus come from server
 function mergeNewMessages(
   oldMessageStore: MessageStore,
   newMessageInfos: $ReadOnlyArray<RawMessageInfo>,
   truncationStatus: { [threadID: string]: MessageTruncationStatus },
   threadInfos: { +[threadID: string]: RawThreadInfo },
   actionType: string,
 ): MergeNewMessagesResult {
   const {
     messageStoreOperations: updateWithLatestThreadInfosOps,
     messageStore: messageStoreUpdatedWithLatestThreadInfos,
     reassignedThreadIDs,
   } = updateMessageStoreWithLatestThreadInfos(oldMessageStore, threadInfos);
 
   const messageStoreAfterUpdateOps = processMessageStoreOperations(
     oldMessageStore,
     updateWithLatestThreadInfosOps,
   );
 
   assertMessageStoreThreadsAreEqual(
     messageStoreAfterUpdateOps,
     messageStoreUpdatedWithLatestThreadInfos,
     `${actionType} | reassignment and filtering`,
   );
 
   const updatedMessageStore = {
     ...messageStoreUpdatedWithLatestThreadInfos,
     messages: messageStoreAfterUpdateOps.messages,
   };
 
   const localIDsToServerIDs: Map<string, string> = new Map();
 
   const watchedThreadIDs = [
     ...threadWatcher.getWatchedIDs(),
     ...reassignedThreadIDs,
   ];
   const unshimmedNewMessages = unshimMessageInfos(newMessageInfos);
   const unshimmedNewMessagesOfWatchedThreads = unshimmedNewMessages.filter(
     msg =>
       isThreadWatched(
         msg.threadID,
         threadInfos[msg.threadID],
         watchedThreadIDs,
       ),
   );
   const orderedNewMessageInfos = _flow(
     _map((messageInfo: RawMessageInfo) => {
       const { id: inputID } = messageInfo;
       invariant(inputID, 'new messageInfos should have serverID');
       invariant(
         !threadIsPending(messageInfo.threadID),
         'new messageInfos should have realized thread id',
       );
       const currentMessageInfo = updatedMessageStore.messages[inputID];
       if (
         messageInfo.type === messageTypes.TEXT ||
         messageInfo.type === messageTypes.IMAGES ||
         messageInfo.type === messageTypes.MULTIMEDIA
       ) {
         const { localID: inputLocalID } = messageInfo;
         const currentLocalMessageInfo = inputLocalID
           ? updatedMessageStore.messages[inputLocalID]
           : null;
         if (currentMessageInfo && currentMessageInfo.localID) {
           // If the client already has a RawMessageInfo with this serverID, keep
           // any localID associated with the existing one. This is because we
           // use localIDs as React keys and changing React keys leads to loss of
           // component state. (The conditional below is for Flow)
           if (messageInfo.type === messageTypes.TEXT) {
             messageInfo = {
               ...messageInfo,
               localID: currentMessageInfo.localID,
             };
           } else if (messageInfo.type === messageTypes.MULTIMEDIA) {
             messageInfo = ({
               ...messageInfo,
               localID: currentMessageInfo.localID,
             }: RawMediaMessageInfo);
           } else {
             messageInfo = ({
               ...messageInfo,
               localID: currentMessageInfo.localID,
             }: RawImagesMessageInfo);
           }
         } else if (currentLocalMessageInfo && currentLocalMessageInfo.localID) {
           // If the client has a RawMessageInfo with this localID, but not with
           // the serverID, that means the message creation succeeded but the
           // success action never got processed. We set a key in
           // localIDsToServerIDs here to fix the messageIDs for the rest of the
           // MessageStore too. (The conditional below is for Flow)
           invariant(inputLocalID, 'inputLocalID should be set');
           localIDsToServerIDs.set(inputLocalID, inputID);
           if (messageInfo.type === messageTypes.TEXT) {
             messageInfo = {
               ...messageInfo,
               localID: currentLocalMessageInfo.localID,
             };
           } else if (messageInfo.type === messageTypes.MULTIMEDIA) {
             messageInfo = ({
               ...messageInfo,
               localID: currentLocalMessageInfo.localID,
             }: RawMediaMessageInfo);
           } else {
             messageInfo = ({
               ...messageInfo,
               localID: currentLocalMessageInfo.localID,
             }: RawImagesMessageInfo);
           }
         } else {
           // If neither the serverID nor the localID from the delivered
           // RawMessageInfo exists in the client store, then this message is
           // brand new to us. Ignore any localID provided by the server.
           // (The conditional below is for Flow)
           const { localID, ...rest } = messageInfo;
           if (rest.type === messageTypes.TEXT) {
             messageInfo = { ...rest };
           } else if (rest.type === messageTypes.MULTIMEDIA) {
             messageInfo = ({ ...rest }: RawMediaMessageInfo);
           } else {
             messageInfo = ({ ...rest }: RawImagesMessageInfo);
           }
         }
       } else if (
         currentMessageInfo &&
         messageInfo.time > currentMessageInfo.time
       ) {
         // When thick threads will be introduced it will be possible for two
         // clients to create the same message (e.g. when they create the same
         // sidebar at the same time). We're going to use deterministic ids for
         // messages which should be unique within a thread and we have to find
         // a way for clients to agree which message to keep. We can't rely on
         // always choosing incoming messages nor messages from the store,
         // because a message that is in one user's store, will be send to
         // another user. One way to deal with it is to always choose a message
         // which is older, according to its timestamp. We can use this strategy
         // only for messages that can start a thread, because for other types
         // it might break the "contiguous" property of message ids (we can
         // consider selecting younger messages in that case, but for now we use
         // an invariant).
         invariant(
           messageInfo.type === messageTypes.CREATE_SIDEBAR ||
             messageInfo.type === messageTypes.CREATE_THREAD ||
             messageInfo.type === messageTypes.SIDEBAR_SOURCE,
           `Two different messages of type ${messageInfo.type} with the same ` +
             'id found',
         );
         return currentMessageInfo;
       }
       return _isEqual(messageInfo)(currentMessageInfo)
         ? currentMessageInfo
         : messageInfo;
     }),
     sortMessageInfoList,
   )(unshimmedNewMessagesOfWatchedThreads);
 
   const newMessageOps: MessageStoreOperation[] = [];
   const threadsToMessageIDs = mapThreadsToMessageIDsFromOrderedMessageInfos(
     orderedNewMessageInfos,
   );
   const oldMessageInfosToCombine = [];
   const threadsThatNeedMessageIDsResorted = [];
   const local = {};
   const updatedThreads = {};
   const threads = _flow(
     _mapValuesWithKeys((messageIDs: string[], threadID: string) => {
       const oldThread = updatedMessageStore.threads[threadID];
       const truncate = truncationStatus[threadID];
       if (!oldThread) {
         updatedThreads[threadID] = {
           ...newThread(),
           messageIDs,
           startReached: truncate === messageTruncationStatus.EXHAUSTIVE,
         };
         return updatedThreads[threadID];
       }
       let oldMessageIDsUnchanged = true;
       const oldMessageIDs = oldThread.messageIDs.map(oldID => {
         const newID = localIDsToServerIDs.get(oldID);
         if (newID !== null && newID !== undefined) {
           oldMessageIDsUnchanged = false;
           return newID;
         }
         return oldID;
       });
       if (truncate === messageTruncationStatus.TRUNCATED) {
         // If the result set in the payload isn't contiguous with what we have
         // now, that means we need to dump what we have in the state and replace
         // it with the result set. We do this to achieve our two goals for the
         // messageStore: currentness and contiguousness.
         newMessageOps.push({
           type: 'remove_messages_for_threads',
           payload: { threadIDs: [threadID] },
         });
         updatedThreads[threadID] = {
           messageIDs,
           startReached: false,
         };
         return updatedThreads[threadID];
       }
       const oldNotInNew = _difference(oldMessageIDs)(messageIDs);
       for (const id of oldNotInNew) {
         const oldMessageInfo = updatedMessageStore.messages[id];
         invariant(oldMessageInfo, `could not find ${id} in messageStore`);
         oldMessageInfosToCombine.push(oldMessageInfo);
         const localInfo = updatedMessageStore.local[id];
         if (localInfo) {
           local[id] = localInfo;
         }
       }
       const startReached =
         oldThread.startReached ||
         truncate === messageTruncationStatus.EXHAUSTIVE;
       if (_difference(messageIDs)(oldMessageIDs).length === 0) {
         if (startReached === oldThread.startReached && oldMessageIDsUnchanged) {
           return oldThread;
         }
         updatedThreads[threadID] = {
           messageIDs: oldMessageIDs,
           startReached,
         };
         return updatedThreads[threadID];
       }
       const mergedMessageIDs = [...messageIDs, ...oldNotInNew];
       threadsThatNeedMessageIDsResorted.push(threadID);
       return {
         messageIDs: mergedMessageIDs,
         startReached,
       };
     }),
     _pickBy(thread => !!thread),
   )(threadsToMessageIDs);
 
   for (const threadID in updatedMessageStore.threads) {
     if (threads[threadID]) {
       continue;
     }
     let thread = updatedMessageStore.threads[threadID];
     const truncate = truncationStatus[threadID];
     if (truncate === messageTruncationStatus.EXHAUSTIVE) {
       thread = {
         ...thread,
         startReached: true,
       };
     }
     threads[threadID] = thread;
     updatedThreads[threadID] = thread;
 
     for (const id of thread.messageIDs) {
       const messageInfo = updatedMessageStore.messages[id];
       if (messageInfo) {
         oldMessageInfosToCombine.push(messageInfo);
       }
       const localInfo = updatedMessageStore.local[id];
       if (localInfo) {
         local[id] = localInfo;
       }
     }
   }
 
   const messages = _flow(
     sortMessageInfoList,
     _keyBy(messageID),
   )([...orderedNewMessageInfos, ...oldMessageInfosToCombine]);
 
   const newMessages = _keyBy(messageID)(orderedNewMessageInfos);
   for (const id in newMessages) {
     newMessageOps.push({
       type: 'replace',
       payload: { id, messageInfo: newMessages[id] },
     });
   }
 
   if (localIDsToServerIDs.size > 0) {
     newMessageOps.push({
       type: 'remove',
       payload: { ids: [...localIDsToServerIDs.keys()] },
     });
   }
 
   for (const threadID of threadsThatNeedMessageIDsResorted) {
     threads[threadID].messageIDs = sortMessageIDs(messages)(
       threads[threadID].messageIDs,
     );
     updatedThreads[threadID] = threads[threadID];
   }
 
   const currentAsOf = Math.max(
     orderedNewMessageInfos.length > 0 ? orderedNewMessageInfos[0].time : 0,
     updatedMessageStore.currentAsOf[ashoatKeyserverID],
   );
 
   newMessageOps.push({
     type: 'replace_threads',
     payload: {
       threads: updatedThreads,
     },
   });
 
   const processedMessageStore = processMessageStoreOperations(
     updatedMessageStore,
     newMessageOps,
   );
 
   const messageStore = {
     messages: processedMessageStore.messages,
     threads,
     local,
     currentAsOf: {
       ...processedMessageStore.currentAsOf,
       [ashoatKeyserverID]: currentAsOf,
     },
   };
 
   assertMessageStoreThreadsAreEqual(
     processedMessageStore,
     messageStore,
     `${actionType} | processed`,
   );
 
   return {
     messageStoreOperations: [
       ...updateWithLatestThreadInfosOps,
       ...newMessageOps,
     ],
     messageStore,
   };
 }
 
 type UpdateMessageStoreWithLatestThreadInfosResult = {
   +messageStoreOperations: MessageStoreOperation[],
   +messageStore: MessageStore,
   +reassignedThreadIDs: string[],
 };
 function updateMessageStoreWithLatestThreadInfos(
   messageStore: MessageStore,
   threadInfos: { +[id: string]: RawThreadInfo },
 ): UpdateMessageStoreWithLatestThreadInfosResult {
   const messageStoreOperations: MessageStoreOperation[] = [];
   const {
     messageStore: reassignedMessageStore,
     messageStoreOperations: reassignMessagesOps,
     reassignedThreadIDs,
   } = reassignMessagesToRealizedThreads(messageStore, threadInfos);
   messageStoreOperations.push(...reassignMessagesOps);
   const watchedIDs = [...threadWatcher.getWatchedIDs(), ...reassignedThreadIDs];
 
   const filteredThreads = {};
   const threadsToRemoveMessagesFrom = [];
   const messageIDsToRemove = [];
   for (const threadID in reassignedMessageStore.threads) {
     const threadMessageInfo = reassignedMessageStore.threads[threadID];
     const threadInfo = threadInfos[threadID];
     if (isThreadWatched(threadID, threadInfo, watchedIDs)) {
       filteredThreads[threadID] = threadMessageInfo;
     } else {
       threadsToRemoveMessagesFrom.push(threadID);
       messageIDsToRemove.push(...threadMessageInfo.messageIDs);
     }
   }
 
   const updatedThreads = {};
   for (const threadID in threadInfos) {
     const threadInfo = threadInfos[threadID];
     if (
       isThreadWatched(threadID, threadInfo, watchedIDs) &&
       !filteredThreads[threadID]
     ) {
       filteredThreads[threadID] = newThread();
       updatedThreads[threadID] = filteredThreads[threadID];
     }
   }
 
   messageStoreOperations.push({
     type: 'remove_threads',
     payload: { ids: threadsToRemoveMessagesFrom },
   });
 
   messageStoreOperations.push({
     type: 'replace_threads',
     payload: {
       threads: updatedThreads,
     },
   });
 
   messageStoreOperations.push({
     type: 'remove_messages_for_threads',
     payload: { threadIDs: threadsToRemoveMessagesFrom },
   });
 
   return {
     messageStoreOperations,
     messageStore: {
       messages: _omit(messageIDsToRemove)(reassignedMessageStore.messages),
       threads: filteredThreads,
       local: _omit(messageIDsToRemove)(reassignedMessageStore.local),
       currentAsOf: reassignedMessageStore.currentAsOf,
     },
     reassignedThreadIDs,
   };
 }
 
 function ensureRealizedThreadIDIsUsedWhenPossible<T: RawMessageInfo>(
   payload: T,
   threadInfos: { +[id: string]: RawThreadInfo },
 ): T {
   const pendingToRealizedThreadIDs =
     pendingToRealizedThreadIDsSelector(threadInfos);
   const realizedThreadID = pendingToRealizedThreadIDs.get(payload.threadID);
   return realizedThreadID
     ? { ...payload, threadID: realizedThreadID }
     : payload;
 }
 
 const { processStoreOperations: processMessageStoreOperations } =
   messageStoreOpsHandlers;
 
 type ReduceMessageStoreResult = {
   +messageStoreOperations: $ReadOnlyArray<MessageStoreOperation>,
   +messageStore: MessageStore,
 };
 function reduceMessageStore(
   messageStore: MessageStore,
   action: BaseAction,
   newThreadInfos: { +[id: string]: RawThreadInfo },
 ): ReduceMessageStoreResult {
   if (
     action.type === logInActionTypes.success ||
     action.type === siweAuthActionTypes.success
   ) {
     const messagesResult = action.payload.messagesResult;
     const { messageStoreOperations, messageStore: freshStore } =
       freshMessageStore(
         messagesResult.messageInfos,
         messagesResult.truncationStatus,
         messagesResult.currentAsOf,
         newThreadInfos,
       );
 
     const processedMessageStore = processMessageStoreOperations(
       messageStore,
       messageStoreOperations,
     );
 
     assertMessageStoreThreadsAreEqual(
       processedMessageStore,
       freshStore,
       `${action.type} | fresh store`,
     );
 
     return {
       messageStoreOperations,
       messageStore: { ...freshStore, messages: processedMessageStore.messages },
     };
   } else if (action.type === incrementalStateSyncActionType) {
     if (
       action.payload.messagesResult.rawMessageInfos.length === 0 &&
       action.payload.updatesResult.newUpdates.length === 0
     ) {
       return { messageStoreOperations: [], messageStore };
     }
 
     const messagesResult = mergeUpdatesWithMessageInfos(
       action.payload.messagesResult.rawMessageInfos,
       action.payload.updatesResult.newUpdates,
       action.payload.messagesResult.truncationStatuses,
     );
 
     return mergeNewMessages(
       messageStore,
       messagesResult.rawMessageInfos,
       messagesResult.truncationStatuses,
       newThreadInfos,
       action.type,
     );
   } else if (action.type === processUpdatesActionType) {
     if (action.payload.updatesResult.newUpdates.length === 0) {
       return { messageStoreOperations: [], messageStore };
     }
 
     const messagesResult = mergeUpdatesWithMessageInfos(
       [],
       action.payload.updatesResult.newUpdates,
     );
 
     const { messageStoreOperations, messageStore: newMessageStore } =
       mergeNewMessages(
         messageStore,
         messagesResult.rawMessageInfos,
         messagesResult.truncationStatuses,
         newThreadInfos,
         action.type,
       );
     return {
       messageStoreOperations,
       messageStore: {
         messages: newMessageStore.messages,
         threads: newMessageStore.threads,
         local: newMessageStore.local,
         currentAsOf: messageStore.currentAsOf,
       },
     };
   } else if (
     action.type === fullStateSyncActionType ||
     action.type === processMessagesActionType
   ) {
     const { messagesResult } = action.payload;
     return mergeNewMessages(
       messageStore,
       messagesResult.rawMessageInfos,
       messagesResult.truncationStatuses,
       newThreadInfos,
       action.type,
     );
   } else if (
     action.type === fetchSingleMostRecentMessagesFromThreadsActionTypes.success
   ) {
     return mergeNewMessages(
       messageStore,
       action.payload.rawMessageInfos,
       action.payload.truncationStatuses,
       newThreadInfos,
       action.type,
     );
   } else if (
     action.type === fetchMessagesBeforeCursorActionTypes.success ||
     action.type === fetchMostRecentMessagesActionTypes.success
   ) {
     return mergeNewMessages(
       messageStore,
       action.payload.rawMessageInfos,
       { [action.payload.threadID]: action.payload.truncationStatus },
       newThreadInfos,
       action.type,
     );
   } else if (
     action.type === logOutActionTypes.success ||
     action.type === deleteAccountActionTypes.success ||
     action.type === deleteThreadActionTypes.success ||
     action.type === leaveThreadActionTypes.success ||
     action.type === setNewSessionActionType
   ) {
     const { messageStoreOperations, messageStore: filteredMessageStore } =
       updateMessageStoreWithLatestThreadInfos(messageStore, newThreadInfos);
 
     const processedMessageStore = processMessageStoreOperations(
       messageStore,
       messageStoreOperations,
     );
 
     assertMessageStoreThreadsAreEqual(
       processedMessageStore,
       filteredMessageStore,
       action.type,
     );
 
     return {
       messageStoreOperations,
       messageStore: {
         ...filteredMessageStore,
         messages: processedMessageStore.messages,
       },
     };
   } else if (action.type === newThreadActionTypes.success) {
     const messagesResult = mergeUpdatesWithMessageInfos(
       action.payload.newMessageInfos,
       action.payload.updatesResult.newUpdates,
     );
     return mergeNewMessages(
       messageStore,
       messagesResult.rawMessageInfos,
       messagesResult.truncationStatuses,
       newThreadInfos,
       action.type,
     );
   } else if (action.type === sendMessageReportActionTypes.success) {
     return mergeNewMessages(
       messageStore,
       [action.payload.messageInfo],
       {
         [action.payload.messageInfo.threadID]:
           messageTruncationStatus.UNCHANGED,
       },
       newThreadInfos,
       action.type,
     );
   } else if (action.type === registerActionTypes.success) {
     const truncationStatuses = {};
     for (const messageInfo of action.payload.rawMessageInfos) {
       truncationStatuses[messageInfo.threadID] =
         messageTruncationStatus.EXHAUSTIVE;
     }
     return mergeNewMessages(
       messageStore,
       action.payload.rawMessageInfos,
       truncationStatuses,
       newThreadInfos,
       action.type,
     );
   } else if (
     action.type === changeThreadSettingsActionTypes.success ||
     action.type === removeUsersFromThreadActionTypes.success ||
     action.type === changeThreadMemberRolesActionTypes.success ||
     action.type === createEntryActionTypes.success ||
     action.type === saveEntryActionTypes.success ||
     action.type === restoreEntryActionTypes.success ||
     action.type === toggleMessagePinActionTypes.success
   ) {
     return mergeNewMessages(
       messageStore,
       action.payload.newMessageInfos,
       { [action.payload.threadID]: messageTruncationStatus.UNCHANGED },
       newThreadInfos,
       action.type,
     );
   } else if (action.type === deleteEntryActionTypes.success) {
     const payload = action.payload;
     if (payload) {
       return mergeNewMessages(
         messageStore,
         payload.newMessageInfos,
         { [payload.threadID]: messageTruncationStatus.UNCHANGED },
         newThreadInfos,
         action.type,
       );
     }
   } else if (action.type === joinThreadActionTypes.success) {
     const messagesResult = mergeUpdatesWithMessageInfos(
       action.payload.rawMessageInfos,
       action.payload.updatesResult.newUpdates,
     );
     return mergeNewMessages(
       messageStore,
       messagesResult.rawMessageInfos,
       messagesResult.truncationStatuses,
       newThreadInfos,
       action.type,
     );
   } else if (action.type === sendEditMessageActionTypes.success) {
     const { newMessageInfos } = action.payload;
     const truncationStatuses = {};
     for (const messageInfo of newMessageInfos) {
       truncationStatuses[messageInfo.threadID] =
         messageTruncationStatus.UNCHANGED;
     }
     return mergeNewMessages(
       messageStore,
       newMessageInfos,
       truncationStatuses,
       newThreadInfos,
       action.type,
     );
   } else if (
     action.type === sendTextMessageActionTypes.started ||
     action.type === sendMultimediaMessageActionTypes.started ||
     action.type === sendReactionMessageActionTypes.started
   ) {
     const payload = ensureRealizedThreadIDIsUsedWhenPossible(
       action.payload,
       newThreadInfos,
     );
     const { localID, threadID } = payload;
     invariant(localID, `localID should be set on ${action.type}`);
 
     const messageIDs = messageStore.threads[threadID]?.messageIDs ?? [];
     if (!messageStore.messages[localID]) {
       for (const existingMessageID of messageIDs) {
         const existingMessageInfo = messageStore.messages[existingMessageID];
         if (existingMessageInfo && existingMessageInfo.localID === localID) {
           return { messageStoreOperations: [], messageStore };
         }
       }
     }
 
     const messageStoreOperations = [
       {
         type: 'replace',
         payload: { id: localID, messageInfo: payload },
       },
     ];
 
     let updatedThreads;
     let local = { ...messageStore.local };
     if (messageStore.messages[localID]) {
       const messages = { ...messageStore.messages, [localID]: payload };
       local = _pickBy(
         (localInfo: LocalMessageInfo, key: string) => key !== localID,
       )(messageStore.local);
       const thread = messageStore.threads[threadID];
       updatedThreads = {
         [threadID]: {
           messageIDs: sortMessageIDs(messages)(messageIDs),
           startReached: thread?.startReached ?? true,
         },
       };
     } else {
       updatedThreads = {
         [threadID]: messageStore.threads[threadID]
           ? {
               ...messageStore.threads[threadID],
               messageIDs: [localID, ...messageIDs],
             }
           : {
               messageIDs: [localID],
               startReached: true,
             },
       };
     }
 
     const threads = {
       ...messageStore.threads,
       ...updatedThreads,
     };
     messageStoreOperations.push({
       type: 'replace_threads',
       payload: {
         threads: { ...updatedThreads },
       },
     });
 
     const processedMessageStore = processMessageStoreOperations(
       messageStore,
       messageStoreOperations,
     );
 
     const newMessageStore = {
       messages: processedMessageStore.messages,
       threads,
       local,
       currentAsOf: messageStore.currentAsOf,
     };
 
     assertMessageStoreThreadsAreEqual(
       processedMessageStore,
       newMessageStore,
       action.type,
     );
 
     return {
       messageStoreOperations,
       messageStore: newMessageStore,
     };
   } else if (
     action.type === sendTextMessageActionTypes.failed ||
     action.type === sendMultimediaMessageActionTypes.failed
   ) {
     const { localID } = action.payload;
     return {
       messageStoreOperations: [],
       messageStore: {
         messages: messageStore.messages,
         threads: messageStore.threads,
         local: {
           ...messageStore.local,
           [localID]: { sendFailed: true },
         },
         currentAsOf: messageStore.currentAsOf,
       },
     };
   } else if (action.type === sendReactionMessageActionTypes.failed) {
     const { localID, threadID } = action.payload;
     const messageStoreOperations = [];
 
     messageStoreOperations.push({
       type: 'remove',
       payload: { ids: [localID] },
     });
 
     const newMessageIDs = messageStore.threads[threadID].messageIDs.filter(
       id => id !== localID,
     );
     const updatedThreads = {
       [threadID]: {
         ...messageStore.threads[threadID],
         messageIDs: newMessageIDs,
       },
     };
 
     messageStoreOperations.push({
       type: 'replace_threads',
       payload: { threads: updatedThreads },
     });
 
     const processedMessageStore = processMessageStoreOperations(
       messageStore,
       messageStoreOperations,
     );
 
     const newMessageStore = {
       ...processedMessageStore,
       threads: {
         ...messageStore.threads,
         ...updatedThreads,
       },
     };
 
     assertMessageStoreThreadsAreEqual(
       processedMessageStore,
       newMessageStore,
       action.type,
     );
 
     return {
       messageStoreOperations,
       messageStore: newMessageStore,
     };
   } else if (
     action.type === sendTextMessageActionTypes.success ||
     action.type === sendMultimediaMessageActionTypes.success ||
     action.type === sendReactionMessageActionTypes.success
   ) {
     const { payload } = action;
     invariant(
       !threadIsPending(payload.threadID),
       'Successful message action should have realized thread id',
     );
     const replaceMessageKey = (messageKey: string) =>
       messageKey === payload.localID ? payload.serverID : messageKey;
     let newMessages;
     const messageStoreOperations = [];
     if (messageStore.messages[payload.serverID]) {
       // If somehow the serverID got in there already, we'll just update the
       // serverID message and scrub the localID one
       newMessages = _omitBy(
         (messageInfo: RawMessageInfo) =>
           messageInfo.type === messageTypes.TEXT &&
           !messageInfo.id &&
           messageInfo.localID === payload.localID,
       )(messageStore.messages);
       messageStoreOperations.push({
         type: 'remove',
         payload: { ids: [payload.localID] },
       });
     } else if (messageStore.messages[payload.localID]) {
       // The normal case, the localID message gets replaced by the serverID one
       newMessages = _mapKeys(replaceMessageKey)(messageStore.messages);
       messageStoreOperations.push({
         type: 'rekey',
         payload: { from: payload.localID, to: payload.serverID },
       });
     } else {
       // Well this is weird, we probably got deauthorized between when the
       // action was dispatched and when we ran this reducer...
       return { messageStoreOperations, messageStore };
     }
 
     const newMessage = {
       ...newMessages[payload.serverID],
       id: payload.serverID,
       localID: payload.localID,
       time: payload.time,
     };
     newMessages[payload.serverID] = newMessage;
     messageStoreOperations.push({
       type: 'replace',
       payload: { id: payload.serverID, messageInfo: newMessage },
     });
     const threadID = payload.threadID;
     const newMessageIDs = _flow(
       _uniq,
       sortMessageIDs(newMessages),
     )(messageStore.threads[threadID].messageIDs.map(replaceMessageKey));
     const local = _pickBy(
       (localInfo: LocalMessageInfo, key: string) => key !== payload.localID,
     )(messageStore.local);
 
     const updatedThreads = {
       [threadID]: {
         ...messageStore.threads[threadID],
         messageIDs: newMessageIDs,
       },
     };
     messageStoreOperations.push({
       type: 'replace_threads',
       payload: { threads: updatedThreads },
     });
 
     const processedMessageStore = processMessageStoreOperations(
       messageStore,
       messageStoreOperations,
     );
 
     const newMessageStore = {
       ...messageStore,
       messages: processedMessageStore.messages,
       threads: {
         ...messageStore.threads,
         ...updatedThreads,
       },
       local,
     };
 
     assertMessageStoreThreadsAreEqual(
       processedMessageStore,
       newMessageStore,
       action.type,
     );
 
     return {
       messageStoreOperations,
       messageStore: newMessageStore,
     };
   } else if (action.type === saveMessagesActionType) {
     const truncationStatuses = {};
     for (const messageInfo of action.payload.rawMessageInfos) {
       truncationStatuses[messageInfo.threadID] =
         messageTruncationStatus.UNCHANGED;
     }
     const { messageStoreOperations, messageStore: newMessageStore } =
       mergeNewMessages(
         messageStore,
         action.payload.rawMessageInfos,
         truncationStatuses,
         newThreadInfos,
         action.type,
       );
     return {
       messageStoreOperations,
       messageStore: {
         messages: newMessageStore.messages,
         threads: newMessageStore.threads,
         local: newMessageStore.local,
         // We avoid bumping currentAsOf because notifs may include a contracted
         // RawMessageInfo, so we want to make sure we still fetch it
         currentAsOf: messageStore.currentAsOf,
       },
     };
   } else if (action.type === messageStorePruneActionType) {
     const now = Date.now();
     const messageIDsToPrune = [];
 
     const updatedThreads = {};
     for (const threadID of action.payload.threadIDs) {
       let thread = messageStore.threads[threadID];
       if (!thread) {
         continue;
       }
       thread = { ...thread, lastPruned: now };
 
       const newMessageIDs = [...thread.messageIDs];
       const removed = newMessageIDs.splice(defaultNumberPerThread);
       if (removed.length > 0) {
         thread = {
           ...thread,
           messageIDs: newMessageIDs,
           startReached: false,
         };
       }
       for (const id of removed) {
         messageIDsToPrune.push(id);
       }
 
       updatedThreads[threadID] = thread;
     }
 
     const messageStoreOperations = [
       {
         type: 'remove',
         payload: { ids: messageIDsToPrune },
       },
       {
         type: 'replace_threads',
         payload: {
           threads: updatedThreads,
         },
       },
     ];
 
     const processedMessageStore = processMessageStoreOperations(
       messageStore,
       messageStoreOperations,
     );
 
     const newMessageStore = {
       messages: processedMessageStore.messages,
       threads: {
         ...messageStore.threads,
         ...updatedThreads,
       },
       local: _omit(messageIDsToPrune)(messageStore.local),
       currentAsOf: messageStore.currentAsOf,
     };
 
     assertMessageStoreThreadsAreEqual(
       processedMessageStore,
       newMessageStore,
       action.type,
     );
 
     return {
       messageStoreOperations,
       messageStore: newMessageStore,
     };
   } else if (action.type === updateMultimediaMessageMediaActionType) {
     const { messageID: id, currentMediaID, mediaUpdate } = action.payload;
     const message = messageStore.messages[id];
     invariant(message, `message with ID ${id} could not be found`);
     invariant(
       message.type === messageTypes.IMAGES ||
         message.type === messageTypes.MULTIMEDIA,
       `message with ID ${id} is not multimedia`,
     );
 
     let updatedMessage;
     let replaced = false;
     if (message.type === messageTypes.IMAGES) {
       const media: Image[] = [];
       for (const singleMedia of message.media) {
         if (singleMedia.id !== currentMediaID) {
           media.push(singleMedia);
         } else {
           let updatedMedia: Image = {
             id: mediaUpdate.id ?? singleMedia.id,
             type: 'photo',
             uri: mediaUpdate.uri ?? singleMedia.uri,
             dimensions: mediaUpdate.dimensions ?? singleMedia.dimensions,
             thumbHash: mediaUpdate.thumbHash ?? singleMedia.thumbHash,
           };
 
           if (
             'localMediaSelection' in singleMedia &&
             !('localMediaSelection' in mediaUpdate)
           ) {
             updatedMedia = {
               ...updatedMedia,
               localMediaSelection: singleMedia.localMediaSelection,
             };
           } else if (mediaUpdate.localMediaSelection) {
             updatedMedia = {
               ...updatedMedia,
               localMediaSelection: mediaUpdate.localMediaSelection,
             };
           }
 
           media.push(updatedMedia);
           replaced = true;
         }
       }
       updatedMessage = { ...message, media };
     } else {
       const media: Media[] = [];
       for (const singleMedia of message.media) {
         if (singleMedia.id !== currentMediaID) {
           media.push(singleMedia);
         } else if (
           singleMedia.type === 'photo' &&
           mediaUpdate.type === 'photo'
         ) {
           media.push({ ...singleMedia, ...mediaUpdate });
           replaced = true;
         } else if (
           singleMedia.type === 'video' &&
           mediaUpdate.type === 'video'
         ) {
           media.push({ ...singleMedia, ...mediaUpdate });
           replaced = true;
         } else if (
           singleMedia.type === 'encrypted_photo' &&
           mediaUpdate.type === 'encrypted_photo'
         ) {
           // TODO: Remove this $FlowFixMe after updating Flow to 0.202
           // There's no way in Flow to refine both of these types appropriately
           // so they can be spread together.
           // $FlowFixMe
           media.push({ ...singleMedia, ...mediaUpdate });
           replaced = true;
         } else if (
           singleMedia.type === 'encrypted_video' &&
           mediaUpdate.type === 'encrypted_video'
         ) {
           // TODO: Remove this $FlowFixMe after updating Flow to 0.202
           // There's no way in Flow to refine both of these types appropriately
           // so they can be spread together.
           // $FlowFixMe
           media.push({ ...singleMedia, ...mediaUpdate });
           replaced = true;
         } else if (
           singleMedia.type === 'photo' &&
           mediaUpdate.type === 'encrypted_photo'
         ) {
           // extract fields that are absent in encrypted_photo type
           const { uri, localMediaSelection, ...original } = singleMedia;
           const {
             holder: newHolder,
             blobURI: newBlobURI,
             encryptionKey,
             ...update
           } = mediaUpdate;
           const blobURI = newBlobURI ?? newHolder;
           invariant(
             blobURI && encryptionKey,
             'holder and encryptionKey are required for encrypted_photo message',
           );
           media.push({
             ...original,
             ...update,
             type: 'encrypted_photo',
             blobURI,
             encryptionKey,
           });
           replaced = true;
         } else if (
           singleMedia.type === 'video' &&
           mediaUpdate.type === 'encrypted_video'
         ) {
           const { uri, thumbnailURI, localMediaSelection, ...original } =
             singleMedia;
           const {
             holder: newHolder,
             blobURI: newBlobURI,
             encryptionKey,
             thumbnailHolder: newThumbnailHolder,
             thumbnailBlobURI: newThumbnailBlobURI,
             thumbnailEncryptionKey,
             ...update
           } = mediaUpdate;
           const blobURI = newBlobURI ?? newHolder;
           invariant(
             blobURI && encryptionKey,
             'holder and encryptionKey are required for encrypted_video message',
           );
           const thumbnailBlobURI = newThumbnailBlobURI ?? newThumbnailHolder;
           invariant(
             thumbnailBlobURI && thumbnailEncryptionKey,
             'thumbnailHolder and thumbnailEncryptionKey are required for ' +
               'encrypted_video message',
           );
           media.push({
             ...original,
             ...update,
             type: 'encrypted_video',
             blobURI,
             encryptionKey,
             thumbnailBlobURI,
             thumbnailEncryptionKey,
           });
           replaced = true;
         } else if (mediaUpdate.id) {
           const { id: newID } = mediaUpdate;
           // branching for Flow
           if (singleMedia.type === 'photo') {
             media.push({ ...singleMedia, id: newID });
           } else if (singleMedia.type === 'video') {
             media.push({ ...singleMedia, id: newID });
           } else if (singleMedia.type === 'encrypted_photo') {
             // TODO: Try removing this branching after Flow 0.202 update
             if (singleMedia.blobURI) {
               media.push({ ...singleMedia, id: newID });
             } else {
               invariant(
                 singleMedia.holder,
                 'Encrypted media must have holder or blobURI',
               );
               media.push({ ...singleMedia, id: newID });
             }
           } else if (singleMedia.type === 'encrypted_video') {
             // TODO: Try removing this branching after Flow 0.202 update
             if (singleMedia.blobURI) {
               media.push({ ...singleMedia, id: newID });
             } else {
               invariant(
                 singleMedia.holder,
                 'Encrypted media must have holder or blobURI',
               );
               media.push({ ...singleMedia, id: newID });
             }
           }
           replaced = true;
         }
       }
       updatedMessage = { ...message, media };
     }
 
     invariant(
       replaced,
       `message ${id} did not contain media with ID ${currentMediaID}`,
     );
 
     const messageStoreOperations = [
       {
         type: 'replace',
         payload: {
           id,
           messageInfo: updatedMessage,
         },
       },
     ];
 
     const processedMessageStore = processMessageStoreOperations(
       messageStore,
       messageStoreOperations,
     );
 
     return {
       messageStoreOperations,
       messageStore: {
         ...messageStore,
         messages: processedMessageStore.messages,
       },
     };
   } else if (action.type === createLocalMessageActionType) {
     const messageInfo = ensureRealizedThreadIDIsUsedWhenPossible(
       action.payload,
       newThreadInfos,
     );
     const { localID, threadID } = messageInfo;
 
     const messageIDs =
       messageStore.threads[messageInfo.threadID]?.messageIDs ?? [];
     const threadState: ThreadMessageInfo = messageStore.threads[threadID]
       ? {
           ...messageStore.threads[threadID],
           messageIDs: [localID, ...messageIDs],
         }
       : {
           messageIDs: [localID],
           startReached: true,
         };
 
     const messageStoreOperations = [
       {
         type: 'replace',
         payload: { id: localID, messageInfo },
       },
       {
         type: 'replace_threads',
         payload: {
           threads: { [threadID]: threadState },
         },
       },
     ];
 
     const processedMessageStore = processMessageStoreOperations(
       messageStore,
       messageStoreOperations,
     );
 
     const newMessageStore = {
       ...messageStore,
       threads: {
         ...messageStore.threads,
         [threadID]: threadState,
       },
       messages: processedMessageStore.messages,
     };
 
     assertMessageStoreThreadsAreEqual(
       processedMessageStore,
       newMessageStore,
       action.type,
     );
 
     return {
       messageStoreOperations,
       messageStore: newMessageStore,
     };
   } else if (action.type === processServerRequestsActionType) {
     const {
       messageStoreOperations,
       messageStore: messageStoreAfterReassignment,
     } = reassignMessagesToRealizedThreads(messageStore, newThreadInfos);
 
     const processedMessageStore = processMessageStoreOperations(
       messageStore,
       messageStoreOperations,
     );
 
     assertMessageStoreThreadsAreEqual(
       processedMessageStore,
       messageStoreAfterReassignment,
       action.type,
     );
 
     return {
       messageStoreOperations,
       messageStore: {
         ...messageStoreAfterReassignment,
         messages: processedMessageStore.messages,
       },
     };
   } else if (action.type === setClientDBStoreActionType) {
     const payloadMessages = action.payload.messages;
     if (!payloadMessages) {
       return { messageStoreOperations: [], messageStore };
     }
     const actionPayloadMessageStoreThreads =
       translateClientDBThreadMessageInfos(
         action.payload.messageStoreThreads ?? [],
       );
 
     const newThreads = {};
     for (const threadID in actionPayloadMessageStoreThreads) {
       newThreads[threadID] = {
         ...actionPayloadMessageStoreThreads[threadID],
         messageIDs: messageStore.threads[threadID]?.messageIDs ?? [],
       };
     }
 
     assertMessageStoreThreadsAreEqual(
       {
         ...messageStore,
         threads: newThreads,
       },
       messageStore,
       `${action.type} | comparing SQLite with redux-persist`,
     );
 
     const { messageStoreOperations, messageStore: updatedMessageStore } =
       updateMessageStoreWithLatestThreadInfos(messageStore, newThreadInfos);
 
     let threads = { ...updatedMessageStore.threads };
     let local = { ...updatedMessageStore.local };
 
     // Store message IDs already contained within threads so that we
     // do not insert duplicates
     const existingMessageIDs = new Set();
     for (const threadID in threads) {
       threads[threadID].messageIDs.forEach(msgID => {
         existingMessageIDs.add(msgID);
       });
     }
     const threadsNeedMsgIDsResorting = new Set();
     const actionPayloadMessages =
       messageStoreOpsHandlers.translateClientDBData(payloadMessages);
 
     // When starting the app on native, we filter out any local-only multimedia
     // messages because the relevant context is no longer available
     const messageIDsToBeRemoved = [];
     const threadsToAdd = {};
     for (const id in actionPayloadMessages) {
       const message = actionPayloadMessages[id];
       const { threadID } = message;
       let existingThread = threads[threadID];
       if (!existingThread) {
         existingThread = newThread();
         threadsToAdd[threadID] = existingThread;
       }
       if (
         (message.type === messageTypes.IMAGES ||
           message.type === messageTypes.MULTIMEDIA) &&
         !message.id
       ) {
         messageIDsToBeRemoved.push(id);
         threads = {
           ...threads,
           [threadID]: {
             ...existingThread,
             messageIDs: existingThread.messageIDs.filter(
               curMessageID => curMessageID !== id,
             ),
           },
         };
         local = _pickBy(
           (localInfo: LocalMessageInfo, key: string) => key !== id,
         )(local);
       } else if (!existingMessageIDs.has(id)) {
         threads = {
           ...threads,
           [threadID]: {
             ...existingThread,
             messageIDs: [...existingThread.messageIDs, id],
           },
         };
         threadsNeedMsgIDsResorting.add(threadID);
       } else if (!threads[threadID]) {
         threads = { ...threads, [threadID]: existingThread };
       }
     }
 
     for (const threadID of threadsNeedMsgIDsResorting) {
       threads[threadID].messageIDs = sortMessageIDs(actionPayloadMessages)(
         threads[threadID].messageIDs,
       );
     }
 
     const newMessageStore = {
       ...updatedMessageStore,
       messages: actionPayloadMessages,
       threads: threads,
       local: local,
     };
 
     if (messageIDsToBeRemoved.length > 0) {
       messageStoreOperations.push({
         type: 'remove',
         payload: { ids: messageIDsToBeRemoved },
       });
     }
 
     const processedMessageStore = processMessageStoreOperations(
       newMessageStore,
       messageStoreOperations,
     );
 
     messageStoreOperations.push({
       type: 'replace_threads',
       payload: { threads: threadsToAdd },
     });
 
     return {
       messageStoreOperations,
       messageStore: processedMessageStore,
     };
   }
   return { messageStoreOperations: [], messageStore };
 }
 
 type MergedUpdatesWithMessages = {
   +rawMessageInfos: $ReadOnlyArray<RawMessageInfo>,
   +truncationStatuses: MessageTruncationStatuses,
 };
 function mergeUpdatesWithMessageInfos(
   messageInfos: $ReadOnlyArray<RawMessageInfo>,
   newUpdates: $ReadOnlyArray<ClientUpdateInfo>,
   truncationStatuses?: MessageTruncationStatuses,
 ): MergedUpdatesWithMessages {
   const messageIDs = new Set(
     messageInfos.map(messageInfo => messageInfo.id).filter(Boolean),
   );
   const mergedMessageInfos = [...messageInfos];
   const mergedTruncationStatuses = { ...truncationStatuses };
 
   for (const update of newUpdates) {
     const { mergeMessageInfosAndTruncationStatuses } = updateSpecs[update.type];
     if (!mergeMessageInfosAndTruncationStatuses) {
       continue;
     }
     mergeMessageInfosAndTruncationStatuses(
       messageIDs,
       mergedMessageInfos,
       mergedTruncationStatuses,
       update,
     );
   }
   return {
     rawMessageInfos: mergedMessageInfos,
     truncationStatuses: mergedTruncationStatuses,
   };
 }
 
 export { freshMessageStore, reduceMessageStore };
diff --git a/lib/shared/thread-utils.js b/lib/shared/thread-utils.js
index 0ab14b9db..f888ecc04 100644
--- a/lib/shared/thread-utils.js
+++ b/lib/shared/thread-utils.js
@@ -1,1761 +1,1764 @@
 // @flow
 
 import invariant from 'invariant';
 import _find from 'lodash/fp/find.js';
 import _mapValues from 'lodash/fp/mapValues.js';
 import _omitBy from 'lodash/fp/omitBy.js';
 import * as React from 'react';
 
 import { generatePendingThreadColor } from './color-utils.js';
 import { type ParserRules } from './markdown.js';
 import { extractUserMentionsFromText } from './mention-utils.js';
 import { getMessageTitle, isInvalidSidebarSource } from './message-utils.js';
 import { relationshipBlockedInEitherDirection } from './relationship-utils.js';
 import threadWatcher from './thread-watcher.js';
 import {
   fetchMostRecentMessagesActionTypes,
   useFetchMostRecentMessages,
 } from '../actions/message-actions.js';
+import type { RemoveUsersFromThreadInput } from '../actions/thread-actions';
 import {
   changeThreadMemberRolesActionTypes,
   newThreadActionTypes,
   removeUsersFromThreadActionTypes,
 } from '../actions/thread-actions.js';
 import { searchUsers as searchUserCall } from '../actions/user-actions.js';
 import ashoat from '../facts/ashoat.js';
 import genesis from '../facts/genesis.js';
 import { useLoggedInUserInfo } from '../hooks/account-hooks.js';
 import {
   permissionLookup,
   getAllThreadPermissions,
   makePermissionsBlob,
 } from '../permissions/thread-permissions.js';
 import type {
   ChatThreadItem,
   ChatMessageInfoItem,
 } from '../selectors/chat-selectors.js';
 import { useGlobalThreadSearchIndex } from '../selectors/nav-selectors.js';
 import {
   threadInfoSelector,
   pendingToRealizedThreadIDsSelector,
   threadInfosSelectorForThreadType,
 } from '../selectors/thread-selectors.js';
 import {
   getRelativeMemberInfos,
   usersWithPersonalThreadSelector,
 } from '../selectors/user-selectors.js';
 import { getUserAvatarForThread } from '../shared/avatar-utils.js';
 import type { CalendarQuery } from '../types/entry-types.js';
 import { messageTypes } from '../types/message-types-enum.js';
 import {
   type RobotextMessageInfo,
   type ComposableMessageInfo,
 } from '../types/message-types.js';
 import { userRelationshipStatus } from '../types/relationship-types.js';
 import {
   threadPermissionPropagationPrefixes,
   threadPermissions,
   configurableCommunityPermissions,
   type ThreadPermission,
   type ThreadPermissionsInfo,
   type UserSurfacedPermission,
 } from '../types/thread-permission-types.js';
 import {
   type ThreadType,
   threadTypes,
   threadTypeIsCommunityRoot,
   assertThreadType,
 } from '../types/thread-types-enum.js';
 import {
   type RawThreadInfo,
   type ThreadInfo,
   type MemberInfo,
   type ServerThreadInfo,
   type RelativeMemberInfo,
   type ThreadCurrentUserInfo,
   type RoleInfo,
   type ServerMemberInfo,
   type ClientNewThreadRequest,
   type NewThreadResult,
   type ChangeThreadSettingsPayload,
   type UserProfileThreadInfo,
 } from '../types/thread-types.js';
 import { updateTypes } from '../types/update-types-enum.js';
 import { type ClientUpdateInfo } from '../types/update-types.js';
 import type {
   GlobalAccountUserInfo,
   UserInfos,
   AccountUserInfo,
   LoggedInUserInfo,
   UserInfo,
 } from '../types/user-types.js';
 import {
   useDispatchActionPromise,
   useServerCall,
 } from '../utils/action-utils.js';
 import type { DispatchActionPromise } from '../utils/action-utils.js';
 import type { GetENSNames } from '../utils/ens-helpers.js';
 import {
   ET,
   entityTextToRawString,
   getEntityTextAsString,
   type ThreadEntity,
 } from '../utils/entity-text.js';
 import { useSelector } from '../utils/redux-utils.js';
 import { firstLine } from '../utils/string-utils.js';
 import { trimText } from '../utils/text-utils.js';
 import { pendingThreadIDRegex } from '../utils/validation-utils.js';
 
 function threadHasPermission(
   threadInfo: ?(ThreadInfo | RawThreadInfo),
   permission: ThreadPermission,
 ): boolean {
   if (!threadInfo) {
     return false;
   }
   invariant(
     !permissionsDisabledByBlock.has(permission) || threadInfo?.uiName,
     `${permission} can be disabled by a block, but threadHasPermission can't ` +
       'check for a block on RawThreadInfo. Please pass in ThreadInfo instead!',
   );
   if (!threadInfo.currentUser.permissions[permission]) {
     return false;
   }
   return threadInfo.currentUser.permissions[permission].value;
 }
 
 function viewerIsMember(threadInfo: ?(ThreadInfo | RawThreadInfo)): boolean {
   return !!(
     threadInfo &&
     threadInfo.currentUser.role !== null &&
     threadInfo.currentUser.role !== undefined
   );
 }
 
 function threadIsInHome(threadInfo: ?(ThreadInfo | RawThreadInfo)): boolean {
   return !!(threadInfo && threadInfo.currentUser.subscription.home);
 }
 
 // Can have messages
 function threadInChatList(threadInfo: ?(ThreadInfo | RawThreadInfo)): boolean {
   return (
     viewerIsMember(threadInfo) &&
     threadHasPermission(threadInfo, threadPermissions.VISIBLE)
   );
 }
 
 function threadIsTopLevel(threadInfo: ?(ThreadInfo | RawThreadInfo)): boolean {
   return threadInChatList(threadInfo) && threadIsChannel(threadInfo);
 }
 
 function threadIsChannel(threadInfo: ?(ThreadInfo | RawThreadInfo)): boolean {
   return !!(threadInfo && threadInfo.type !== threadTypes.SIDEBAR);
 }
 
 function threadIsSidebar(threadInfo: ?(ThreadInfo | RawThreadInfo)): boolean {
   return threadInfo?.type === threadTypes.SIDEBAR;
 }
 
 function threadInBackgroundChatList(
   threadInfo: ?(ThreadInfo | RawThreadInfo),
 ): boolean {
   return threadInChatList(threadInfo) && !threadIsInHome(threadInfo);
 }
 
 function threadInHomeChatList(
   threadInfo: ?(ThreadInfo | RawThreadInfo),
 ): boolean {
   return threadInChatList(threadInfo) && threadIsInHome(threadInfo);
 }
 
 // Can have Calendar entries,
 // does appear as a top-level entity in the thread list
 function threadInFilterList(
   threadInfo: ?(ThreadInfo | RawThreadInfo),
 ): boolean {
   return (
     threadInChatList(threadInfo) &&
     !!threadInfo &&
     threadInfo.type !== threadTypes.SIDEBAR
   );
 }
 
 function userIsMember(
   threadInfo: ?(ThreadInfo | RawThreadInfo),
   userID: string,
 ): boolean {
   if (!threadInfo) {
     return false;
   }
   if (threadInfo.id === genesis.id) {
     return true;
   }
   return threadInfo.members.some(member => member.id === userID && member.role);
 }
 
 function threadActualMembers(
   memberInfos: $ReadOnlyArray<MemberInfo | RelativeMemberInfo>,
 ): $ReadOnlyArray<string> {
   return memberInfos
     .filter(memberInfo => memberInfo.role)
     .map(memberInfo => memberInfo.id);
 }
 
 function threadOtherMembers<T: MemberInfo | RelativeMemberInfo>(
   memberInfos: $ReadOnlyArray<T>,
   viewerID: ?string,
 ): $ReadOnlyArray<T> {
   return memberInfos.filter(
     memberInfo => memberInfo.role && memberInfo.id !== viewerID,
   );
 }
 
 function threadMembersWithoutAddedAshoat<T: ThreadInfo | RawThreadInfo>(
   threadInfo: T,
 ): $PropertyType<T, 'members'> {
   if (threadInfo.community !== genesis.id) {
     return threadInfo.members;
   }
   return threadInfo.members.filter(
     member => member.id !== ashoat.id || member.role,
   );
 }
 
 function threadIsGroupChat(threadInfo: ThreadInfo): boolean {
   return threadInfo.members.length > 2;
 }
 
 function threadOrParentThreadIsGroupChat(
   threadInfo: RawThreadInfo | ThreadInfo,
 ) {
   return threadMembersWithoutAddedAshoat(threadInfo).length > 2;
 }
 
 function threadIsPending(threadID: ?string): boolean {
   return !!threadID?.startsWith('pending');
 }
 
 function threadIsPendingSidebar(threadID: ?string): boolean {
   return !!threadID?.startsWith('pending/sidebar/');
 }
 
 function getSingleOtherUser(
   threadInfo: ThreadInfo | RawThreadInfo,
   viewerID: ?string,
 ): ?string {
   if (!viewerID) {
     return undefined;
   }
   const otherMembers = threadOtherMembers(threadInfo.members, viewerID);
   if (otherMembers.length !== 1) {
     return undefined;
   }
   return otherMembers[0].id;
 }
 
 function getPendingThreadID(
   threadType: ThreadType,
   memberIDs: $ReadOnlyArray<string>,
   sourceMessageID: ?string,
 ): string {
   const pendingThreadKey = sourceMessageID
     ? `sidebar/${sourceMessageID}`
     : [...memberIDs].sort().join('+');
   const pendingThreadTypeString = sourceMessageID ? '' : `type${threadType}/`;
   return `pending/${pendingThreadTypeString}${pendingThreadKey}`;
 }
 
 type PendingThreadIDContents = {
   +threadType: ThreadType,
   +memberIDs: $ReadOnlyArray<string>,
   +sourceMessageID: ?string,
 };
 
 function parsePendingThreadID(
   pendingThreadID: string,
 ): ?PendingThreadIDContents {
   const pendingRegex = new RegExp(`^${pendingThreadIDRegex}$`);
   const pendingThreadIDMatches = pendingRegex.exec(pendingThreadID);
   if (!pendingThreadIDMatches) {
     return null;
   }
   const [threadTypeString, threadKey] = pendingThreadIDMatches[1].split('/');
   const threadType =
     threadTypeString === 'sidebar'
       ? threadTypes.SIDEBAR
       : assertThreadType(Number(threadTypeString.replace('type', '')));
   const memberIDs = threadTypeString === 'sidebar' ? [] : threadKey.split('+');
   const sourceMessageID = threadTypeString === 'sidebar' ? threadKey : null;
   return {
     threadType,
     memberIDs,
     sourceMessageID,
   };
 }
 
 type UserIDAndUsername = {
   +id: string,
   +username: string,
   ...
 };
 type CreatePendingThreadArgs = {
   +viewerID: string,
   +threadType: ThreadType,
   +members: $ReadOnlyArray<UserIDAndUsername>,
   +parentThreadInfo?: ?ThreadInfo,
   +threadColor?: ?string,
   +name?: ?string,
   +sourceMessageID?: string,
 };
 
 function createPendingThread({
   viewerID,
   threadType,
   members,
   parentThreadInfo,
   threadColor,
   name,
   sourceMessageID,
 }: CreatePendingThreadArgs): ThreadInfo {
   const now = Date.now();
   if (!members.some(member => member.id === viewerID)) {
     throw new Error(
       'createPendingThread should be called with the viewer as a member',
     );
   }
 
   const memberIDs = members.map(member => member.id);
   const threadID = getPendingThreadID(threadType, memberIDs, sourceMessageID);
 
   const permissions = {
     [threadPermissions.KNOW_OF]: true,
     [threadPermissions.VISIBLE]: true,
     [threadPermissions.VOICED]: true,
   };
 
   const membershipPermissions = getAllThreadPermissions(
     makePermissionsBlob(permissions, null, threadID, threadType),
     threadID,
   );
   const role = {
     id: `${threadID}/role`,
     name: 'Members',
     permissions,
     isDefault: true,
   };
 
   const rawThreadInfo = {
     id: threadID,
     type: threadType,
     name: name ?? null,
     description: null,
     color: threadColor ?? generatePendingThreadColor(memberIDs),
     creationTime: now,
     parentThreadID: parentThreadInfo?.id ?? null,
     containingThreadID: getContainingThreadID(parentThreadInfo, threadType),
     community: getCommunity(parentThreadInfo),
     members: members.map(member => ({
       id: member.id,
       role: role.id,
       permissions: membershipPermissions,
       isSender: false,
     })),
     roles: {
       [role.id]: role,
     },
     currentUser: {
       role: role.id,
       permissions: membershipPermissions,
       subscription: {
         pushNotifs: false,
         home: false,
       },
       unread: false,
     },
     repliesCount: 0,
     sourceMessageID,
     pinnedCount: 0,
   };
 
   const userInfos = {};
   for (const member of members) {
     const { id, username } = member;
     userInfos[id] = { id, username };
   }
 
   return threadInfoFromRawThreadInfo(rawThreadInfo, viewerID, userInfos);
 }
 
 type PendingPersonalThread = {
   +threadInfo: ThreadInfo,
   +pendingPersonalThreadUserInfo: UserInfo,
 };
 
 function createPendingPersonalThread(
   loggedInUserInfo: LoggedInUserInfo,
   userID: string,
   username: string,
 ): PendingPersonalThread {
   const pendingPersonalThreadUserInfo = {
     id: userID,
     username: username,
   };
 
   const threadInfo = createPendingThread({
     viewerID: loggedInUserInfo.id,
     threadType: threadTypes.PERSONAL,
     members: [loggedInUserInfo, pendingPersonalThreadUserInfo],
   });
 
   return { threadInfo, pendingPersonalThreadUserInfo };
 }
 
 function createPendingThreadItem(
   loggedInUserInfo: LoggedInUserInfo,
   user: UserIDAndUsername,
 ): ChatThreadItem {
   const { threadInfo, pendingPersonalThreadUserInfo } =
     createPendingPersonalThread(loggedInUserInfo, user.id, user.username);
 
   return {
     type: 'chatThreadItem',
     threadInfo,
     mostRecentMessageInfo: null,
     mostRecentNonLocalMessage: null,
     lastUpdatedTime: threadInfo.creationTime,
     lastUpdatedTimeIncludingSidebars: threadInfo.creationTime,
     sidebars: [],
     pendingPersonalThreadUserInfo,
   };
 }
 
 // Returns map from lowercase username to AccountUserInfo
 function memberLowercaseUsernameMap(
   members: $ReadOnlyArray<RelativeMemberInfo>,
 ): Map<string, AccountUserInfo> {
   const memberMap = new Map();
   for (const member of members) {
     const { id, role, username } = member;
     if (!role || !username) {
       continue;
     }
     memberMap.set(username.toLowerCase(), { id, username });
   }
   return memberMap;
 }
 
 // Returns map from user ID to AccountUserInfo
 function extractMentionedMembers(
   text: string,
   threadInfo: ThreadInfo,
 ): Map<string, AccountUserInfo> {
   const memberMap = memberLowercaseUsernameMap(threadInfo.members);
   const mentions = extractUserMentionsFromText(text);
 
   const mentionedMembers = new Map();
   for (const mention of mentions) {
     const userInfo = memberMap.get(mention.toLowerCase());
     if (userInfo) {
       mentionedMembers.set(userInfo.id, userInfo);
     }
   }
   return mentionedMembers;
 }
 
 // When a member of the parent is mentioned in a sidebar,
 // they will be automatically added to that sidebar
 function extractNewMentionedParentMembers(
   messageText: string,
   threadInfo: ThreadInfo,
   parentThreadInfo: ThreadInfo,
 ): AccountUserInfo[] {
   const mentionedMembersOfParent = extractMentionedMembers(
     messageText,
     parentThreadInfo,
   );
   for (const member of threadInfo.members) {
     if (member.role) {
       mentionedMembersOfParent.delete(member.id);
     }
   }
   return [...mentionedMembersOfParent.values()];
 }
 
 type SharedCreatePendingSidebarInput = {
   +sourceMessageInfo: ComposableMessageInfo | RobotextMessageInfo,
   +parentThreadInfo: ThreadInfo,
   +loggedInUserInfo: LoggedInUserInfo,
 };
 
 type BaseCreatePendingSidebarInput = {
   ...SharedCreatePendingSidebarInput,
   +messageTitle: string,
 };
 function baseCreatePendingSidebar(
   input: BaseCreatePendingSidebarInput,
 ): ThreadInfo {
   const {
     sourceMessageInfo,
     parentThreadInfo,
     loggedInUserInfo,
     messageTitle,
   } = input;
   const { color, type: parentThreadType } = parentThreadInfo;
   const threadName = trimText(messageTitle, 30);
 
   const initialMembers = new Map();
 
   const { id: viewerID, username: viewerUsername } = loggedInUserInfo;
   initialMembers.set(viewerID, { id: viewerID, username: viewerUsername });
 
   if (userIsMember(parentThreadInfo, sourceMessageInfo.creator.id)) {
     const { id: sourceAuthorID, username: sourceAuthorUsername } =
       sourceMessageInfo.creator;
     invariant(
       sourceAuthorUsername,
       'sourceAuthorUsername should be set in createPendingSidebar',
     );
     const initialMemberUserInfo = {
       id: sourceAuthorID,
       username: sourceAuthorUsername,
     };
     initialMembers.set(sourceAuthorID, initialMemberUserInfo);
   }
 
   const singleOtherUser = getSingleOtherUser(parentThreadInfo, viewerID);
   if (parentThreadType === threadTypes.PERSONAL && singleOtherUser) {
     const singleOtherUsername = parentThreadInfo.members.find(
       member => member.id === singleOtherUser,
     )?.username;
     invariant(
       singleOtherUsername,
       'singleOtherUsername should be set in createPendingSidebar',
     );
     const singleOtherUserInfo = {
       id: singleOtherUser,
       username: singleOtherUsername,
     };
     initialMembers.set(singleOtherUser, singleOtherUserInfo);
   }
 
   if (sourceMessageInfo.type === messageTypes.TEXT) {
     const mentionedMembersOfParent = extractMentionedMembers(
       sourceMessageInfo.text,
       parentThreadInfo,
     );
     for (const [memberID, member] of mentionedMembersOfParent) {
       initialMembers.set(memberID, member);
     }
   }
 
   return createPendingThread({
     viewerID,
     threadType: threadTypes.SIDEBAR,
     members: [...initialMembers.values()],
     parentThreadInfo,
     threadColor: color,
     name: threadName,
     sourceMessageID: sourceMessageInfo.id,
   });
 }
 
 // The message title here may have ETH addresses that aren't resolved to ENS
 // names. This function should only be used in cases where we're sure that we
 // don't care about the thread title. We should prefer createPendingSidebar
 // wherever possible
 type CreateUnresolvedPendingSidebarInput = {
   ...SharedCreatePendingSidebarInput,
   +markdownRules: ParserRules,
 };
 function createUnresolvedPendingSidebar(
   input: CreateUnresolvedPendingSidebarInput,
 ): ThreadInfo {
   const {
     sourceMessageInfo,
     parentThreadInfo,
     loggedInUserInfo,
     markdownRules,
   } = input;
 
   const messageTitleEntityText = getMessageTitle(
     sourceMessageInfo,
     parentThreadInfo,
     parentThreadInfo,
     markdownRules,
   );
   const messageTitle = entityTextToRawString(messageTitleEntityText, {
     ignoreViewer: true,
   });
 
   return baseCreatePendingSidebar({
     sourceMessageInfo,
     parentThreadInfo,
     messageTitle,
     loggedInUserInfo,
   });
 }
 
 type CreatePendingSidebarInput = {
   ...SharedCreatePendingSidebarInput,
   +markdownRules: ParserRules,
   +getENSNames: ?GetENSNames,
 };
 async function createPendingSidebar(
   input: CreatePendingSidebarInput,
 ): Promise<ThreadInfo> {
   const {
     sourceMessageInfo,
     parentThreadInfo,
     loggedInUserInfo,
     markdownRules,
     getENSNames,
   } = input;
 
   const messageTitleEntityText = getMessageTitle(
     sourceMessageInfo,
     parentThreadInfo,
     parentThreadInfo,
     markdownRules,
   );
   const messageTitle = await getEntityTextAsString(
     messageTitleEntityText,
     getENSNames,
     { ignoreViewer: true },
   );
   invariant(
     messageTitle !== null && messageTitle !== undefined,
     'getEntityTextAsString only returns falsey when passed falsey',
   );
 
   return baseCreatePendingSidebar({
     sourceMessageInfo,
     parentThreadInfo,
     messageTitle,
     loggedInUserInfo,
   });
 }
 
 function pendingThreadType(numberOfOtherMembers: number): 4 | 6 | 7 {
   if (numberOfOtherMembers === 0) {
     return threadTypes.PRIVATE;
   } else if (numberOfOtherMembers === 1) {
     return threadTypes.PERSONAL;
   } else {
     return threadTypes.LOCAL;
   }
 }
 
 function threadTypeCanBePending(threadType: ThreadType): boolean {
   return (
     threadType === threadTypes.PERSONAL ||
     threadType === threadTypes.LOCAL ||
     threadType === threadTypes.SIDEBAR ||
     threadType === threadTypes.PRIVATE
   );
 }
 
 type CreateRealThreadParameters = {
   +threadInfo: ThreadInfo,
   +dispatchActionPromise: DispatchActionPromise,
   +createNewThread: ClientNewThreadRequest => Promise<NewThreadResult>,
   +sourceMessageID: ?string,
   +viewerID: ?string,
   +handleError?: () => mixed,
   +calendarQuery: CalendarQuery,
 };
 async function createRealThreadFromPendingThread({
   threadInfo,
   dispatchActionPromise,
   createNewThread,
   sourceMessageID,
   viewerID,
   calendarQuery,
 }: CreateRealThreadParameters): Promise<string> {
   if (!threadIsPending(threadInfo.id)) {
     return threadInfo.id;
   }
 
   const otherMemberIDs = threadOtherMembers(threadInfo.members, viewerID).map(
     member => member.id,
   );
   let resultPromise;
   if (threadInfo.type !== threadTypes.SIDEBAR) {
     invariant(
       otherMemberIDs.length > 0,
       'otherMemberIDs should not be empty for threads',
     );
     resultPromise = createNewThread({
       type: pendingThreadType(otherMemberIDs.length),
       initialMemberIDs: otherMemberIDs,
       color: threadInfo.color,
       calendarQuery,
     });
   } else {
     invariant(
       sourceMessageID,
       'sourceMessageID should be set when creating a sidebar',
     );
     resultPromise = createNewThread({
       type: threadTypes.SIDEBAR,
       initialMemberIDs: otherMemberIDs,
       color: threadInfo.color,
       sourceMessageID,
       parentThreadID: threadInfo.parentThreadID,
       name: threadInfo.name,
       calendarQuery,
     });
   }
   dispatchActionPromise(newThreadActionTypes, resultPromise);
   const { newThreadID } = await resultPromise;
   return newThreadID;
 }
 
 type RawThreadInfoOptions = {
   +filterThreadEditAvatarPermission?: boolean,
   +excludePinInfo?: boolean,
   +filterManageInviteLinksPermission?: boolean,
 };
 function rawThreadInfoFromServerThreadInfo(
   serverThreadInfo: ServerThreadInfo,
   viewerID: string,
   options?: RawThreadInfoOptions,
 ): ?RawThreadInfo {
   const filterThreadEditAvatarPermission =
     options?.filterThreadEditAvatarPermission;
   const excludePinInfo = options?.excludePinInfo;
   const filterManageInviteLinksPermission =
     options?.filterManageInviteLinksPermission;
 
   const filterThreadPermissions = _omitBy(
     (v, k) =>
       (filterThreadEditAvatarPermission &&
         [
           threadPermissions.EDIT_THREAD_AVATAR,
           threadPermissionPropagationPrefixes.DESCENDANT +
             threadPermissions.EDIT_THREAD_AVATAR,
         ].includes(k)) ||
       (excludePinInfo &&
         [
           threadPermissions.MANAGE_PINS,
           threadPermissionPropagationPrefixes.DESCENDANT +
             threadPermissions.MANAGE_PINS,
         ].includes(k)) ||
       (filterManageInviteLinksPermission &&
         [threadPermissions.MANAGE_INVITE_LINKS].includes(k)),
   );
 
   const members = [];
   let currentUser;
   for (const serverMember of serverThreadInfo.members) {
     if (
       serverThreadInfo.id === genesis.id &&
       serverMember.id !== viewerID &&
       serverMember.id !== ashoat.id
     ) {
       continue;
     }
 
     const memberPermissions = filterThreadPermissions(serverMember.permissions);
 
     members.push({
       id: serverMember.id,
       role: serverMember.role,
       permissions: memberPermissions,
       isSender: serverMember.isSender,
     });
     if (serverMember.id === viewerID) {
       currentUser = {
         role: serverMember.role,
         permissions: memberPermissions,
         subscription: serverMember.subscription,
         unread: serverMember.unread,
       };
     }
   }
 
   let currentUserPermissions;
   if (currentUser) {
     currentUserPermissions = currentUser.permissions;
   } else {
     currentUserPermissions = filterThreadPermissions(
       getAllThreadPermissions(null, serverThreadInfo.id),
     );
     currentUser = {
       role: null,
       permissions: currentUserPermissions,
       subscription: {
         home: false,
         pushNotifs: false,
       },
       unread: null,
     };
   }
   if (!permissionLookup(currentUserPermissions, threadPermissions.KNOW_OF)) {
     return null;
   }
 
   const rolesWithFilteredThreadPermissions = _mapValues(role => ({
     ...role,
     permissions: filterThreadPermissions(role.permissions),
   }))(serverThreadInfo.roles);
 
   let rawThreadInfo: any = {
     id: serverThreadInfo.id,
     type: serverThreadInfo.type,
     name: serverThreadInfo.name,
     description: serverThreadInfo.description,
     color: serverThreadInfo.color,
     creationTime: serverThreadInfo.creationTime,
     parentThreadID: serverThreadInfo.parentThreadID,
     members,
     roles: rolesWithFilteredThreadPermissions,
     currentUser,
     repliesCount: serverThreadInfo.repliesCount,
     containingThreadID: serverThreadInfo.containingThreadID,
     community: serverThreadInfo.community,
   };
   const sourceMessageID = serverThreadInfo.sourceMessageID;
   if (sourceMessageID) {
     rawThreadInfo = { ...rawThreadInfo, sourceMessageID };
   }
   if (serverThreadInfo.avatar) {
     rawThreadInfo = { ...rawThreadInfo, avatar: serverThreadInfo.avatar };
   }
   if (!excludePinInfo) {
     return {
       ...rawThreadInfo,
       pinnedCount: serverThreadInfo.pinnedCount,
     };
   }
   return rawThreadInfo;
 }
 
 function threadUIName(threadInfo: ThreadInfo): string | ThreadEntity {
   if (threadInfo.name) {
     return firstLine(threadInfo.name);
   }
   const threadMembers = threadInfo.members.filter(
     memberInfo => memberInfo.role,
   );
   const memberEntities = threadMembers.map(member =>
     ET.user({ userInfo: member }),
   );
   return {
     type: 'thread',
     id: threadInfo.id,
     name: threadInfo.name,
     display: 'uiName',
     uiName: memberEntities,
     ifJustViewer:
       threadInfo.type === threadTypes.PRIVATE
         ? 'viewer_username'
         : 'just_you_string',
   };
 }
 
 function threadInfoFromRawThreadInfo(
   rawThreadInfo: RawThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): ThreadInfo {
   let threadInfo: ThreadInfo = {
     id: rawThreadInfo.id,
     type: rawThreadInfo.type,
     name: rawThreadInfo.name,
     uiName: '',
     description: rawThreadInfo.description,
     color: rawThreadInfo.color,
     creationTime: rawThreadInfo.creationTime,
     parentThreadID: rawThreadInfo.parentThreadID,
     containingThreadID: rawThreadInfo.containingThreadID,
     community: rawThreadInfo.community,
     members: getRelativeMemberInfos(rawThreadInfo, viewerID, userInfos),
     roles: rawThreadInfo.roles,
     currentUser: getCurrentUser(rawThreadInfo, viewerID, userInfos),
     repliesCount: rawThreadInfo.repliesCount,
   };
   threadInfo = {
     ...threadInfo,
     uiName: threadUIName(threadInfo),
   };
   const { sourceMessageID, avatar, pinnedCount } = rawThreadInfo;
   if (sourceMessageID) {
     threadInfo = { ...threadInfo, sourceMessageID };
   }
 
   if (avatar) {
     threadInfo = { ...threadInfo, avatar };
   } else if (
     rawThreadInfo.type === threadTypes.PERSONAL ||
     rawThreadInfo.type === threadTypes.PRIVATE
   ) {
     threadInfo = {
       ...threadInfo,
       avatar: getUserAvatarForThread(rawThreadInfo, viewerID, userInfos),
     };
   }
 
   if (pinnedCount) {
     threadInfo = { ...threadInfo, pinnedCount };
   }
 
   return threadInfo;
 }
 
 function getCurrentUser(
   threadInfo: RawThreadInfo | ThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): ThreadCurrentUserInfo {
   if (!threadFrozenDueToBlock(threadInfo, viewerID, userInfos)) {
     return threadInfo.currentUser;
   }
 
   return {
     ...threadInfo.currentUser,
     permissions: {
       ...threadInfo.currentUser.permissions,
       ...disabledPermissions,
     },
   };
 }
 
 function threadIsWithBlockedUserOnly(
   threadInfo: RawThreadInfo | ThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
   checkOnlyViewerBlock?: boolean,
 ): boolean {
   if (
     threadOrParentThreadIsGroupChat(threadInfo) ||
     threadOrParentThreadHasAdminRole(threadInfo)
   ) {
     return false;
   }
 
   const otherUserID = getSingleOtherUser(threadInfo, viewerID);
   if (!otherUserID) {
     return false;
   }
   const otherUserRelationshipStatus =
     userInfos[otherUserID]?.relationshipStatus;
 
   if (checkOnlyViewerBlock) {
     return (
       otherUserRelationshipStatus === userRelationshipStatus.BLOCKED_BY_VIEWER
     );
   }
 
   return (
     !!otherUserRelationshipStatus &&
     relationshipBlockedInEitherDirection(otherUserRelationshipStatus)
   );
 }
 
 function threadFrozenDueToBlock(
   threadInfo: RawThreadInfo | ThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): boolean {
   return threadIsWithBlockedUserOnly(threadInfo, viewerID, userInfos);
 }
 
 function threadFrozenDueToViewerBlock(
   threadInfo: RawThreadInfo | ThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): boolean {
   return threadIsWithBlockedUserOnly(threadInfo, viewerID, userInfos, true);
 }
 
 const threadTypeDescriptions: { [ThreadType]: string } = {
   [threadTypes.COMMUNITY_OPEN_SUBTHREAD]:
     'Anybody in the parent channel can see an open subchannel.',
   [threadTypes.COMMUNITY_SECRET_SUBTHREAD]:
     'Only visible to its members and admins of ancestor channels.',
 };
 
 function memberIsAdmin(
   memberInfo: RelativeMemberInfo | MemberInfo,
   threadInfo: ThreadInfo | RawThreadInfo,
 ): boolean {
   return !!(
     memberInfo.role && roleIsAdminRole(threadInfo.roles[memberInfo.role])
   );
 }
 
 // Since we don't have access to all of the ancestor ThreadInfos, we approximate
 // "parent admin" as anybody with CHANGE_ROLE permissions.
 function memberHasAdminPowers(
   memberInfo: RelativeMemberInfo | MemberInfo | ServerMemberInfo,
 ): boolean {
   return !!memberInfo.permissions[threadPermissions.CHANGE_ROLE]?.value;
 }
 
 function roleIsAdminRole(roleInfo: ?RoleInfo): boolean {
   return !!(roleInfo && !roleInfo.isDefault && roleInfo.name === 'Admins');
 }
 
 function threadHasAdminRole(
   threadInfo: ?(RawThreadInfo | ThreadInfo | ServerThreadInfo),
 ): boolean {
   if (!threadInfo) {
     return false;
   }
   return !!_find({ name: 'Admins' })(threadInfo.roles);
 }
 
 function threadOrParentThreadHasAdminRole(
   threadInfo: RawThreadInfo | ThreadInfo,
 ) {
   return (
     threadMembersWithoutAddedAshoat(threadInfo).filter(member =>
       memberHasAdminPowers(member),
     ).length > 0
   );
 }
 
 function identifyInvalidatedThreads(
   updateInfos: $ReadOnlyArray<ClientUpdateInfo>,
 ): Set<string> {
   const invalidated = new Set();
   for (const updateInfo of updateInfos) {
     if (updateInfo.type === updateTypes.DELETE_THREAD) {
       invalidated.add(updateInfo.threadID);
     }
   }
   return invalidated;
 }
 
 const permissionsDisabledByBlockArray = [
   threadPermissions.VOICED,
   threadPermissions.EDIT_ENTRIES,
   threadPermissions.EDIT_THREAD_NAME,
   threadPermissions.EDIT_THREAD_COLOR,
   threadPermissions.EDIT_THREAD_DESCRIPTION,
   threadPermissions.CREATE_SUBCHANNELS,
   threadPermissions.CREATE_SIDEBARS,
   threadPermissions.JOIN_THREAD,
   threadPermissions.EDIT_PERMISSIONS,
   threadPermissions.ADD_MEMBERS,
   threadPermissions.REMOVE_MEMBERS,
 ];
 
 const permissionsDisabledByBlock: Set<ThreadPermission> = new Set(
   permissionsDisabledByBlockArray,
 );
 
 const disabledPermissions: ThreadPermissionsInfo =
   permissionsDisabledByBlockArray.reduce(
     (permissions: ThreadPermissionsInfo, permission: string) => ({
       ...permissions,
       [permission]: { value: false, source: null },
     }),
     {},
   );
 
 // Consider updating itemHeight in native/chat/chat-thread-list.react.js
 // if you change this
 const emptyItemText: string =
   `Background chats are just like normal chats, except they don't ` +
   `contribute to your unread count.\n\n` +
   `To move a chat over here, switch the “Background” option in its settings.`;
 
 function threadNoun(threadType: ThreadType, parentThreadID: ?string): string {
   if (threadType === threadTypes.SIDEBAR) {
     return 'thread';
   } else if (
     threadType === threadTypes.COMMUNITY_SECRET_SUBTHREAD &&
     parentThreadID === genesis.id
   ) {
     return 'chat';
   } else if (
     threadType === threadTypes.COMMUNITY_ROOT ||
     threadType === threadTypes.COMMUNITY_ANNOUNCEMENT_ROOT ||
     threadType === threadTypes.COMMUNITY_OPEN_SUBTHREAD ||
     threadType === threadTypes.COMMUNITY_OPEN_ANNOUNCEMENT_SUBTHREAD ||
     threadType === threadTypes.COMMUNITY_SECRET_SUBTHREAD ||
     threadType === threadTypes.COMMUNITY_SECRET_ANNOUNCEMENT_SUBTHREAD ||
     threadType === threadTypes.GENESIS
   ) {
     return 'channel';
   } else {
     return 'chat';
   }
 }
 
 function threadLabel(threadType: ThreadType): string {
   if (
     threadType === threadTypes.COMMUNITY_OPEN_SUBTHREAD ||
     threadType === threadTypes.COMMUNITY_OPEN_ANNOUNCEMENT_SUBTHREAD
   ) {
     return 'Open';
   } else if (threadType === threadTypes.PERSONAL) {
     return 'Personal';
   } else if (threadType === threadTypes.SIDEBAR) {
     return 'Thread';
   } else if (threadType === threadTypes.PRIVATE) {
     return 'Private';
   } else if (
     threadType === threadTypes.COMMUNITY_ROOT ||
     threadType === threadTypes.COMMUNITY_ANNOUNCEMENT_ROOT ||
     threadType === threadTypes.GENESIS
   ) {
     return 'Community';
   } else {
     return 'Secret';
   }
 }
 
 function useWatchThread(threadInfo: ?ThreadInfo) {
   const dispatchActionPromise = useDispatchActionPromise();
   const callFetchMostRecentMessages = useFetchMostRecentMessages();
 
   const threadID = threadInfo?.id;
   const threadNotInChatList = !threadInChatList(threadInfo);
   React.useEffect(() => {
     if (threadID && threadNotInChatList) {
       threadWatcher.watchID(threadID);
       dispatchActionPromise(
         fetchMostRecentMessagesActionTypes,
         callFetchMostRecentMessages({ threadID }),
       );
     }
     return () => {
       if (threadID && threadNotInChatList) {
         threadWatcher.removeID(threadID);
       }
     };
   }, [
     callFetchMostRecentMessages,
     dispatchActionPromise,
     threadNotInChatList,
     threadID,
   ]);
 }
 
 type ExistingThreadInfoFinderParams = {
   +searching: boolean,
   +userInfoInputArray: $ReadOnlyArray<AccountUserInfo>,
 };
 type ExistingThreadInfoFinder = (
   params: ExistingThreadInfoFinderParams,
 ) => ?ThreadInfo;
 function useExistingThreadInfoFinder(
   baseThreadInfo: ?ThreadInfo,
 ): ExistingThreadInfoFinder {
   const threadInfos = useSelector(threadInfoSelector);
   const loggedInUserInfo = useLoggedInUserInfo();
   const userInfos = useSelector(state => state.userStore.userInfos);
 
   const pendingToRealizedThreadIDs = useSelector(state =>
     pendingToRealizedThreadIDsSelector(state.threadStore.threadInfos),
   );
   return React.useCallback(
     (params: ExistingThreadInfoFinderParams): ?ThreadInfo => {
       if (!baseThreadInfo) {
         return null;
       }
 
       const realizedThreadInfo = threadInfos[baseThreadInfo.id];
       if (realizedThreadInfo) {
         return realizedThreadInfo;
       }
 
       if (!loggedInUserInfo || !threadIsPending(baseThreadInfo.id)) {
         return baseThreadInfo;
       }
       const viewerID = loggedInUserInfo?.id;
 
       invariant(
         threadTypeCanBePending(baseThreadInfo.type),
         `ThreadInfo has pending ID ${baseThreadInfo.id}, but type that ` +
           `should not be pending ${baseThreadInfo.type}`,
       );
 
       const { searching, userInfoInputArray } = params;
 
       const { sourceMessageID } = baseThreadInfo;
       const pendingThreadID = searching
         ? getPendingThreadID(
             pendingThreadType(userInfoInputArray.length),
             [...userInfoInputArray.map(user => user.id), viewerID],
             sourceMessageID,
           )
         : getPendingThreadID(
             baseThreadInfo.type,
             baseThreadInfo.members.map(member => member.id),
             sourceMessageID,
           );
 
       const realizedThreadID = pendingToRealizedThreadIDs.get(pendingThreadID);
       if (realizedThreadID && threadInfos[realizedThreadID]) {
         return threadInfos[realizedThreadID];
       }
 
       const updatedThread = searching
         ? createPendingThread({
             viewerID,
             threadType: pendingThreadType(userInfoInputArray.length),
             members: [loggedInUserInfo, ...userInfoInputArray],
           })
         : baseThreadInfo;
       return {
         ...updatedThread,
         currentUser: getCurrentUser(updatedThread, viewerID, userInfos),
       };
     },
     [
       baseThreadInfo,
       threadInfos,
       loggedInUserInfo,
       pendingToRealizedThreadIDs,
       userInfos,
     ],
   );
 }
 
 type ThreadTypeParentRequirement = 'optional' | 'required' | 'disabled';
 function getThreadTypeParentRequirement(
   threadType: ThreadType,
 ): ThreadTypeParentRequirement {
   if (
     threadType === threadTypes.COMMUNITY_OPEN_SUBTHREAD ||
     threadType === threadTypes.COMMUNITY_OPEN_ANNOUNCEMENT_SUBTHREAD ||
     //threadType === threadTypes.COMMUNITY_SECRET_SUBTHREAD ||
     threadType === threadTypes.COMMUNITY_SECRET_ANNOUNCEMENT_SUBTHREAD ||
     threadType === threadTypes.SIDEBAR
   ) {
     return 'required';
   } else if (
     threadType === threadTypes.COMMUNITY_ROOT ||
     threadType === threadTypes.COMMUNITY_ANNOUNCEMENT_ROOT ||
     threadType === threadTypes.GENESIS ||
     threadType === threadTypes.PERSONAL ||
     threadType === threadTypes.PRIVATE
   ) {
     return 'disabled';
   } else {
     return 'optional';
   }
 }
 
 function threadMemberHasPermission(
   threadInfo: ServerThreadInfo | RawThreadInfo | ThreadInfo,
   memberID: string,
   permission: ThreadPermission,
 ): boolean {
   for (const member of threadInfo.members) {
     if (member.id !== memberID) {
       continue;
     }
     return permissionLookup(member.permissions, permission);
   }
   return false;
 }
 
 function useCanCreateSidebarFromMessage(
   threadInfo: ThreadInfo,
   messageInfo: ComposableMessageInfo | RobotextMessageInfo,
 ): boolean {
   const messageCreatorUserInfo = useSelector(
     state => state.userStore.userInfos[messageInfo.creator.id],
   );
 
   if (
     !messageInfo.id ||
     threadInfo.sourceMessageID === messageInfo.id ||
     isInvalidSidebarSource(messageInfo)
   ) {
     return false;
   }
 
   const messageCreatorRelationship = messageCreatorUserInfo?.relationshipStatus;
   const creatorRelationshipHasBlock =
     messageCreatorRelationship &&
     relationshipBlockedInEitherDirection(messageCreatorRelationship);
 
   const hasPermission = threadHasPermission(
     threadInfo,
     threadPermissions.CREATE_SIDEBARS,
   );
 
   return hasPermission && !creatorRelationshipHasBlock;
 }
 
 function useSidebarExistsOrCanBeCreated(
   threadInfo: ThreadInfo,
   messageItem: ChatMessageInfoItem,
 ): boolean {
   const canCreateSidebarFromMessage = useCanCreateSidebarFromMessage(
     threadInfo,
     messageItem.messageInfo,
   );
   return !!messageItem.threadCreatedFromMessage || canCreateSidebarFromMessage;
 }
 
 function checkIfDefaultMembersAreVoiced(threadInfo: ThreadInfo): boolean {
   const defaultRoleID = Object.keys(threadInfo.roles).find(
     roleID => threadInfo.roles[roleID].isDefault,
   );
   invariant(
     defaultRoleID !== undefined,
     'all threads should have a default role',
   );
   const defaultRole = threadInfo.roles[defaultRoleID];
   return !!defaultRole.permissions[threadPermissions.VOICED];
 }
 
 const draftKeySuffix = '/message_composer';
 
 function draftKeyFromThreadID(threadID: string): string {
   return `${threadID}${draftKeySuffix}`;
 }
 
 function getContainingThreadID(
   parentThreadInfo: ?ServerThreadInfo | RawThreadInfo | ThreadInfo,
   threadType: ThreadType,
 ): ?string {
   if (!parentThreadInfo) {
     return null;
   }
   if (threadType === threadTypes.SIDEBAR) {
     return parentThreadInfo.id;
   }
   if (!parentThreadInfo.containingThreadID) {
     return parentThreadInfo.id;
   }
   return parentThreadInfo.containingThreadID;
 }
 
 function getCommunity(
   parentThreadInfo: ?ServerThreadInfo | RawThreadInfo | ThreadInfo,
 ): ?string {
   if (!parentThreadInfo) {
     return null;
   }
   const { id, community, type } = parentThreadInfo;
   if (community !== null && community !== undefined) {
     return community;
   }
   if (threadTypeIsCommunityRoot(type)) {
     return id;
   }
   return null;
 }
 
 function getThreadListSearchResults(
   chatListData: $ReadOnlyArray<ChatThreadItem>,
   searchText: string,
   threadFilter: ThreadInfo => boolean,
   threadSearchResults: $ReadOnlySet<string>,
   usersSearchResults: $ReadOnlyArray<GlobalAccountUserInfo>,
   loggedInUserInfo: ?LoggedInUserInfo,
 ): $ReadOnlyArray<ChatThreadItem> {
   if (!searchText) {
     return chatListData.filter(
       item =>
         threadIsTopLevel(item.threadInfo) && threadFilter(item.threadInfo),
     );
   }
 
   const privateThreads = [];
   const personalThreads = [];
   const otherThreads = [];
   for (const item of chatListData) {
     if (!threadSearchResults.has(item.threadInfo.id)) {
       continue;
     }
     if (item.threadInfo.type === threadTypes.PRIVATE) {
       privateThreads.push({ ...item, sidebars: [] });
     } else if (item.threadInfo.type === threadTypes.PERSONAL) {
       personalThreads.push({ ...item, sidebars: [] });
     } else {
       otherThreads.push({ ...item, sidebars: [] });
     }
   }
 
   const chatItems = [...privateThreads, ...personalThreads, ...otherThreads];
   if (loggedInUserInfo) {
     chatItems.push(
       ...usersSearchResults.map(user =>
         createPendingThreadItem(loggedInUserInfo, user),
       ),
     );
   }
   return chatItems;
 }
 
 type ThreadListSearchResult = {
   +threadSearchResults: $ReadOnlySet<string>,
   +usersSearchResults: $ReadOnlyArray<GlobalAccountUserInfo>,
 };
 function useThreadListSearch(
   searchText: string,
   viewerID: ?string,
 ): ThreadListSearchResult {
   const callSearchUsers = useServerCall(searchUserCall);
   const usersWithPersonalThread = useSelector(usersWithPersonalThreadSelector);
   const searchUsers = React.useCallback(
     async (usernamePrefix: string) => {
       if (usernamePrefix.length === 0) {
         return [];
       }
 
       const { userInfos } = await callSearchUsers(usernamePrefix);
       return userInfos.filter(
         info => !usersWithPersonalThread.has(info.id) && info.id !== viewerID,
       );
     },
     [callSearchUsers, usersWithPersonalThread, viewerID],
   );
 
   const [threadSearchResults, setThreadSearchResults] = React.useState(
     new Set(),
   );
   const [usersSearchResults, setUsersSearchResults] = React.useState([]);
   const threadSearchIndex = useGlobalThreadSearchIndex();
   React.useEffect(() => {
     (async () => {
       const results = threadSearchIndex.getSearchResults(searchText);
       setThreadSearchResults(new Set(results));
       const usersResults = await searchUsers(searchText);
       setUsersSearchResults(usersResults);
     })();
   }, [searchText, threadSearchIndex, searchUsers]);
 
   return { threadSearchResults, usersSearchResults };
 }
 
 function removeMemberFromThread(
   threadInfo: ThreadInfo,
   memberInfo: RelativeMemberInfo,
   dispatchActionPromise: DispatchActionPromise,
   removeUserFromThreadServerCall: (
-    threadID: string,
-    memberIDs: $ReadOnlyArray<string>,
+    input: RemoveUsersFromThreadInput,
   ) => Promise<ChangeThreadSettingsPayload>,
 ) {
   const customKeyName = `${removeUsersFromThreadActionTypes.started}:${memberInfo.id}`;
   dispatchActionPromise(
     removeUsersFromThreadActionTypes,
-    removeUserFromThreadServerCall(threadInfo.id, [memberInfo.id]),
+    removeUserFromThreadServerCall({
+      threadID: threadInfo.id,
+      memberIDs: [memberInfo.id],
+    }),
     { customKeyName },
   );
 }
 
 function switchMemberAdminRoleInThread(
   threadInfo: ThreadInfo,
   memberInfo: RelativeMemberInfo,
   isCurrentlyAdmin: boolean,
   dispatchActionPromise: DispatchActionPromise,
   changeUserRoleServerCall: (
     threadID: string,
     memberIDs: $ReadOnlyArray<string>,
     newRole: string,
   ) => Promise<ChangeThreadSettingsPayload>,
 ) {
   let newRole = null;
   for (const roleID in threadInfo.roles) {
     const role = threadInfo.roles[roleID];
     if (isCurrentlyAdmin && role.isDefault) {
       newRole = role.id;
       break;
     } else if (!isCurrentlyAdmin && roleIsAdminRole(role)) {
       newRole = role.id;
       break;
     }
   }
   invariant(newRole !== null, 'Could not find new role');
 
   const customKeyName = `${changeThreadMemberRolesActionTypes.started}:${memberInfo.id}`;
   dispatchActionPromise(
     changeThreadMemberRolesActionTypes,
     changeUserRoleServerCall(threadInfo.id, [memberInfo.id], newRole),
     { customKeyName },
   );
 }
 
 function getAvailableThreadMemberActions(
   memberInfo: RelativeMemberInfo,
   threadInfo: ThreadInfo,
   canEdit: ?boolean = true,
 ): $ReadOnlyArray<'change_role' | 'remove_user'> {
   const role = memberInfo.role;
   if (!canEdit || !role) {
     return [];
   }
 
   const canRemoveMembers = threadHasPermission(
     threadInfo,
     threadPermissions.REMOVE_MEMBERS,
   );
   const canChangeRoles = threadHasPermission(
     threadInfo,
     threadPermissions.CHANGE_ROLE,
   );
 
   const result = [];
 
   if (canChangeRoles && memberInfo.username && threadHasAdminRole(threadInfo)) {
     result.push('change_role');
   }
 
   if (
     canRemoveMembers &&
     !memberInfo.isViewer &&
     (canChangeRoles || threadInfo.roles[role]?.isDefault)
   ) {
     result.push('remove_user');
   }
 
   return result;
 }
 
 function patchThreadInfoToIncludeMentionedMembersOfParent(
   threadInfo: ThreadInfo,
   parentThreadInfo: ThreadInfo,
   messageText: string,
   viewerID: string,
 ): ThreadInfo {
   const members: UserIDAndUsername[] = threadInfo.members
     .map(({ id, username }) => (username ? { id, username } : null))
     .filter(Boolean);
   const mentionedNewMembers = extractNewMentionedParentMembers(
     messageText,
     threadInfo,
     parentThreadInfo,
   );
   if (mentionedNewMembers.length === 0) {
     return threadInfo;
   }
   members.push(...mentionedNewMembers);
   return createPendingThread({
     viewerID,
     threadType: threadTypes.SIDEBAR,
     members,
     parentThreadInfo,
     threadColor: threadInfo.color,
     name: threadInfo.name,
     sourceMessageID: threadInfo.sourceMessageID,
   });
 }
 
 function threadInfoInsideCommunity(
   threadInfo: RawThreadInfo | ThreadInfo,
   communityID: string,
 ): boolean {
   return threadInfo.community === communityID || threadInfo.id === communityID;
 }
 
 type RoleAndMemberCount = {
   [roleName: string]: number,
 };
 
 function useRoleMemberCountsForCommunity(
   threadInfo: ThreadInfo,
 ): RoleAndMemberCount {
   return React.useMemo(() => {
     const roleIDsToNames = {};
 
     Object.keys(threadInfo.roles).forEach(roleID => {
       roleIDsToNames[roleID] = threadInfo.roles[roleID].name;
     });
 
     const roleNamesToMemberCount: RoleAndMemberCount = {};
 
     threadInfo.members.forEach(({ role: roleID }) => {
       invariant(roleID, 'Community member should have a role');
       const roleName = roleIDsToNames[roleID];
 
       roleNamesToMemberCount[roleName] =
         (roleNamesToMemberCount[roleName] ?? 0) + 1;
     });
 
     // For all community roles with no members, add them to the list with 0
     Object.keys(roleIDsToNames).forEach(roleName => {
       if (roleNamesToMemberCount[roleIDsToNames[roleName]] === undefined) {
         roleNamesToMemberCount[roleIDsToNames[roleName]] = 0;
       }
     });
 
     return roleNamesToMemberCount;
   }, [threadInfo]);
 }
 
 type RoleUserSurfacedPermissions = {
   +[roleName: string]: $ReadOnlySet<UserSurfacedPermission>,
 };
 // Iterates through the existing roles in the community and 'reverse maps'
 // the set of permission literals for each role to user-facing permission enums
 // to help pre-populate the permission checkboxes when editing roles.
 function useRoleUserSurfacedPermissions(
   threadInfo: ThreadInfo,
 ): RoleUserSurfacedPermissions {
   return React.useMemo(() => {
     const roleNamesToPermissions = {};
 
     Object.keys(threadInfo.roles).forEach(roleID => {
       const roleName = threadInfo.roles[roleID].name;
       const rolePermissions = Object.keys(threadInfo.roles[roleID].permissions);
       const setOfUserSurfacedPermissions = new Set();
 
       rolePermissions.forEach(rolePermission => {
         const userSurfacedPermission = Object.keys(
           configurableCommunityPermissions,
         ).find(key =>
           configurableCommunityPermissions[key].has(rolePermission),
         );
 
         if (userSurfacedPermission) {
           setOfUserSurfacedPermissions.add(userSurfacedPermission);
         }
       });
       roleNamesToPermissions[roleName] = setOfUserSurfacedPermissions;
     });
 
     return roleNamesToPermissions;
   }, [threadInfo]);
 }
 
 function communityOrThreadNoun(threadInfo: RawThreadInfo | ThreadInfo): string {
   return threadTypeIsCommunityRoot(threadInfo.type)
     ? 'community'
     : threadNoun(threadInfo.type, threadInfo.parentThreadID);
 }
 
 function getThreadsToDeleteText(
   threadInfo: RawThreadInfo | ThreadInfo,
 ): string {
   return `${
     threadTypeIsCommunityRoot(threadInfo.type)
       ? 'Subchannels and threads'
       : 'Threads'
   } within this ${communityOrThreadNoun(threadInfo)}`;
 }
 
 function useUserProfileThreadInfo(userInfo: ?UserInfo): ?UserProfileThreadInfo {
   const userID = userInfo?.id;
   const username = userInfo?.username;
 
   const loggedInUserInfo = useLoggedInUserInfo();
   const isViewerProfile = loggedInUserInfo?.id === userID;
 
   const privateThreadInfosSelector = threadInfosSelectorForThreadType(
     threadTypes.PRIVATE,
   );
   const privateThreadInfos = useSelector(privateThreadInfosSelector);
 
   const personalThreadInfosSelector = threadInfosSelectorForThreadType(
     threadTypes.PERSONAL,
   );
 
   const personalThreadInfos = useSelector(personalThreadInfosSelector);
 
   const usersWithPersonalThread = useSelector(usersWithPersonalThreadSelector);
 
   return React.useMemo(() => {
     if (!loggedInUserInfo || !userID || !username) {
       return null;
     }
 
     if (isViewerProfile) {
       const privateThreadInfo: ?ThreadInfo = privateThreadInfos[0];
 
       return privateThreadInfo ? { threadInfo: privateThreadInfo } : null;
     }
 
     if (usersWithPersonalThread.has(userID)) {
       const personalThreadInfo: ?ThreadInfo = personalThreadInfos.find(
         threadInfo =>
           userID === getSingleOtherUser(threadInfo, loggedInUserInfo.id),
       );
 
       return personalThreadInfo ? { threadInfo: personalThreadInfo } : null;
     }
 
     const pendingPersonalThreadInfo = createPendingPersonalThread(
       loggedInUserInfo,
       userID,
       username,
     );
 
     return pendingPersonalThreadInfo;
   }, [
     isViewerProfile,
     loggedInUserInfo,
     personalThreadInfos,
     privateThreadInfos,
     userID,
     username,
     usersWithPersonalThread,
   ]);
 }
 
 export {
   threadHasPermission,
   viewerIsMember,
   threadInChatList,
   threadIsTopLevel,
   threadIsChannel,
   threadIsSidebar,
   threadInBackgroundChatList,
   threadInHomeChatList,
   threadIsInHome,
   threadInFilterList,
   userIsMember,
   threadActualMembers,
   threadOtherMembers,
   threadIsGroupChat,
   threadIsPending,
   threadIsPendingSidebar,
   getSingleOtherUser,
   getPendingThreadID,
   parsePendingThreadID,
   createPendingThread,
   createUnresolvedPendingSidebar,
   extractNewMentionedParentMembers,
   createPendingSidebar,
   pendingThreadType,
   createRealThreadFromPendingThread,
   getCurrentUser,
   threadFrozenDueToBlock,
   threadFrozenDueToViewerBlock,
   rawThreadInfoFromServerThreadInfo,
   threadUIName,
   threadInfoFromRawThreadInfo,
   threadTypeDescriptions,
   memberIsAdmin,
   memberHasAdminPowers,
   roleIsAdminRole,
   threadHasAdminRole,
   identifyInvalidatedThreads,
   permissionsDisabledByBlock,
   emptyItemText,
   threadNoun,
   threadLabel,
   useWatchThread,
   useExistingThreadInfoFinder,
   getThreadTypeParentRequirement,
   threadMemberHasPermission,
   useCanCreateSidebarFromMessage,
   useSidebarExistsOrCanBeCreated,
   checkIfDefaultMembersAreVoiced,
   draftKeySuffix,
   draftKeyFromThreadID,
   threadTypeCanBePending,
   getContainingThreadID,
   getCommunity,
   getThreadListSearchResults,
   useThreadListSearch,
   removeMemberFromThread,
   switchMemberAdminRoleInThread,
   getAvailableThreadMemberActions,
   threadMembersWithoutAddedAshoat,
   patchThreadInfoToIncludeMentionedMembersOfParent,
   threadInfoInsideCommunity,
   useRoleMemberCountsForCommunity,
   useRoleUserSurfacedPermissions,
   getThreadsToDeleteText,
   useUserProfileThreadInfo,
 };
diff --git a/native/chat/chat-input-bar.react.js b/native/chat/chat-input-bar.react.js
index 1bd7242e3..a8a9aa2ba 100644
--- a/native/chat/chat-input-bar.react.js
+++ b/native/chat/chat-input-bar.react.js
@@ -1,1443 +1,1442 @@
 // @flow
 
 import Icon from '@expo/vector-icons/Ionicons.js';
 import invariant from 'invariant';
 import _throttle from 'lodash/throttle.js';
 import * as React from 'react';
 import {
   View,
   TextInput,
   TouchableOpacity,
   Platform,
   Text,
   ActivityIndicator,
   TouchableWithoutFeedback,
   NativeAppEventEmitter,
 } from 'react-native';
 import { TextInputKeyboardMangerIOS } from 'react-native-keyboard-input';
 import Animated, {
   EasingNode,
   FadeInDown,
   FadeOutDown,
 } from 'react-native-reanimated';
 import { useDispatch } from 'react-redux';
 
 import {
   moveDraftActionType,
   updateDraftActionType,
 } from 'lib/actions/draft-actions.js';
 import {
   joinThreadActionTypes,
-  joinThread,
+  useJoinThread,
   newThreadActionTypes,
 } from 'lib/actions/thread-actions.js';
 import {
   useChatMentionContext,
   useThreadChatMentionCandidates,
 } from 'lib/hooks/chat-mention-hooks.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import { userStoreMentionSearchIndex } from 'lib/selectors/user-selectors.js';
 import { colorIsDark } from 'lib/shared/color-utils.js';
 import { useEditMessage } from 'lib/shared/edit-messages-utils.js';
 import {
   getMentionTypeaheadUserSuggestions,
   getMentionTypeaheadChatSuggestions,
   getTypeaheadRegexMatches,
   type Selection,
   getUserMentionsCandidates,
 } from 'lib/shared/mention-utils.js';
 import {
   useNextLocalID,
   trimMessage,
   useMessagePreview,
   messageKey,
   type MessagePreviewResult,
 } from 'lib/shared/message-utils.js';
 import SentencePrefixSearchIndex from 'lib/shared/sentence-prefix-search-index.js';
 import {
   threadHasPermission,
   viewerIsMember,
   threadFrozenDueToViewerBlock,
   threadActualMembers,
   checkIfDefaultMembersAreVoiced,
   draftKeyFromThreadID,
 } from 'lib/shared/thread-utils.js';
 import type { CalendarQuery } from 'lib/types/entry-types.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { PhotoPaste } from 'lib/types/media-types.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import type {
   SendEditMessageResponse,
   MessageInfo,
 } from 'lib/types/message-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import type {
   ThreadInfo,
   ClientThreadJoinRequest,
   ThreadJoinPayload,
   RelativeMemberInfo,
   ChatMentionCandidates,
 } from 'lib/types/thread-types.js';
 import { type UserInfos } from 'lib/types/user-types.js';
 import {
   type DispatchActionPromise,
-  useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 
 import { ChatContext } from './chat-context.js';
 import type { ChatNavigationProp } from './chat.react.js';
 import {
   MessageEditingContext,
   type MessageEditingContextType,
 } from './message-editing-context.react.js';
 import type { RemoveEditMode } from './message-list-types.js';
 import TypeaheadTooltip from './typeahead-tooltip.react.js';
 import MentionTypeaheadTooltipButton from '../chat/mention-typeahead-tooltip-button.react.js';
 import Button from '../components/button.react.js';
 // eslint-disable-next-line import/extensions
 import ClearableTextInput from '../components/clearable-text-input.react';
 import type { SyncedSelectionData } from '../components/selectable-text-input.js';
 // eslint-disable-next-line import/extensions
 import SelectableTextInput from '../components/selectable-text-input.react';
 import SingleLine from '../components/single-line.react.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import {
   type InputState,
   InputStateContext,
   type EditInputBarMessageParameters,
 } from '../input/input-state.js';
 import KeyboardInputHost from '../keyboard/keyboard-input-host.react.js';
 import {
   type KeyboardState,
   KeyboardContext,
 } from '../keyboard/keyboard-state.js';
 import { getKeyboardHeight } from '../keyboard/keyboard.js';
 import { getDefaultTextMessageRules } from '../markdown/rules.react.js';
 import {
   nonThreadCalendarQuery,
   activeThreadSelector,
 } from '../navigation/nav-selectors.js';
 import { NavContext } from '../navigation/navigation-context.js';
 import { OverlayContext } from '../navigation/overlay-context.js';
 import type { OverlayContextType } from '../navigation/overlay-context.js';
 import {
   type NavigationRoute,
   ChatCameraModalRouteName,
   ImagePasteModalRouteName,
 } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { type Colors, useStyles, useColors } from '../themes/colors.js';
 import type { LayoutEvent } from '../types/react-native.js';
 import { type AnimatedViewStyle, AnimatedView } from '../types/styles.js';
 import Alert from '../utils/alert.js';
 import { runTiming } from '../utils/animation-utils.js';
 import { exitEditAlert } from '../utils/edit-messages-utils.js';
 import {
   nativeMentionTypeaheadRegex,
   mentionTypeaheadTooltipActions,
 } from '../utils/typeahead-utils.js';
 
 /* eslint-disable import/no-named-as-default-member */
 const { Value, Clock, block, set, cond, neq, sub, interpolateNode, stopClock } =
   Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 const expandoButtonsAnimationConfig = {
   duration: 150,
   easing: EasingNode.inOut(EasingNode.ease),
 };
 const sendButtonAnimationConfig = {
   duration: 150,
   easing: EasingNode.inOut(EasingNode.ease),
 };
 
 type BaseProps = {
   +threadInfo: ThreadInfo,
 };
 type Props = {
   ...BaseProps,
   +viewerID: ?string,
   +draft: string,
   +joinThreadLoadingStatus: LoadingStatus,
   +threadCreationInProgress: boolean,
   +calendarQuery: () => CalendarQuery,
   +nextLocalID: string,
   +userInfos: UserInfos,
   +colors: Colors,
   +styles: typeof unboundStyles,
   +onInputBarLayout?: (event: LayoutEvent) => mixed,
   +openCamera: () => mixed,
   +isActive: boolean,
   +keyboardState: ?KeyboardState,
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
   +joinThread: (request: ClientThreadJoinRequest) => Promise<ThreadJoinPayload>,
   +inputState: ?InputState,
   +userSearchIndex: SentencePrefixSearchIndex,
   +userMentionsCandidates: $ReadOnlyArray<RelativeMemberInfo>,
   +chatMentionSearchIndex: SentencePrefixSearchIndex,
   +chatMentionCandidates: ChatMentionCandidates,
   +parentThreadInfo: ?ThreadInfo,
   +editedMessagePreview: ?MessagePreviewResult,
   +editedMessageInfo: ?MessageInfo,
   +editMessage: (
     messageID: string,
     text: string,
   ) => Promise<SendEditMessageResponse>,
   +navigation: ?ChatNavigationProp<'MessageList'>,
   +overlayContext: ?OverlayContextType,
   +messageEditingContext: ?MessageEditingContextType,
 };
 type State = {
   +text: string,
   +textEdited: boolean,
   +buttonsExpanded: boolean,
   +selectionState: SyncedSelectionData,
   +isExitingDuringEditMode: boolean,
 };
 class ChatInputBar extends React.PureComponent<Props, State> {
   textInput: ?React.ElementRef<typeof TextInput>;
   clearableTextInput: ?ClearableTextInput;
   selectableTextInput: ?React.ElementRef<typeof SelectableTextInput>;
 
   expandoButtonsOpen: Value;
   targetExpandoButtonsOpen: Value;
   expandoButtonsStyle: AnimatedViewStyle;
   cameraRollIconStyle: AnimatedViewStyle;
   cameraIconStyle: AnimatedViewStyle;
   expandIconStyle: AnimatedViewStyle;
 
   sendButtonContainerOpen: Value;
   targetSendButtonContainerOpen: Value;
   sendButtonContainerStyle: AnimatedViewStyle;
 
   clearBeforeRemoveListener: () => void;
   clearFocusListener: () => void;
   clearBlurListener: () => void;
 
   constructor(props: Props) {
     super(props);
     this.state = {
       text: props.draft,
       textEdited: false,
       buttonsExpanded: true,
       selectionState: { text: props.draft, selection: { start: 0, end: 0 } },
       isExitingDuringEditMode: false,
     };
 
     this.setUpActionIconAnimations();
     this.setUpSendIconAnimations();
   }
 
   setUpActionIconAnimations() {
     this.expandoButtonsOpen = new Value(1);
     this.targetExpandoButtonsOpen = new Value(1);
     const prevTargetExpandoButtonsOpen = new Value(1);
     const expandoButtonClock = new Clock();
     const expandoButtonsOpen = block([
       cond(neq(this.targetExpandoButtonsOpen, prevTargetExpandoButtonsOpen), [
         stopClock(expandoButtonClock),
         set(prevTargetExpandoButtonsOpen, this.targetExpandoButtonsOpen),
       ]),
       cond(
         neq(this.expandoButtonsOpen, this.targetExpandoButtonsOpen),
         set(
           this.expandoButtonsOpen,
           runTiming(
             expandoButtonClock,
             this.expandoButtonsOpen,
             this.targetExpandoButtonsOpen,
             true,
             expandoButtonsAnimationConfig,
           ),
         ),
       ),
       this.expandoButtonsOpen,
     ]);
 
     this.cameraRollIconStyle = {
       ...unboundStyles.cameraRollIcon,
       opacity: expandoButtonsOpen,
     };
     this.cameraIconStyle = {
       ...unboundStyles.cameraIcon,
       opacity: expandoButtonsOpen,
     };
 
     const expandoButtonsWidth = interpolateNode(expandoButtonsOpen, {
       inputRange: [0, 1],
       outputRange: [26, 66],
     });
     this.expandoButtonsStyle = {
       ...unboundStyles.expandoButtons,
       width: expandoButtonsWidth,
     };
 
     const expandOpacity = sub(1, expandoButtonsOpen);
     this.expandIconStyle = {
       ...unboundStyles.expandIcon,
       opacity: expandOpacity,
     };
   }
 
   setUpSendIconAnimations() {
     const initialSendButtonContainerOpen = trimMessage(this.props.draft)
       ? 1
       : 0;
     this.sendButtonContainerOpen = new Value(initialSendButtonContainerOpen);
     this.targetSendButtonContainerOpen = new Value(
       initialSendButtonContainerOpen,
     );
     const prevTargetSendButtonContainerOpen = new Value(
       initialSendButtonContainerOpen,
     );
     const sendButtonClock = new Clock();
     const sendButtonContainerOpen = block([
       cond(
         neq(
           this.targetSendButtonContainerOpen,
           prevTargetSendButtonContainerOpen,
         ),
         [
           stopClock(sendButtonClock),
           set(
             prevTargetSendButtonContainerOpen,
             this.targetSendButtonContainerOpen,
           ),
         ],
       ),
       cond(
         neq(this.sendButtonContainerOpen, this.targetSendButtonContainerOpen),
         set(
           this.sendButtonContainerOpen,
           runTiming(
             sendButtonClock,
             this.sendButtonContainerOpen,
             this.targetSendButtonContainerOpen,
             true,
             sendButtonAnimationConfig,
           ),
         ),
       ),
       this.sendButtonContainerOpen,
     ]);
 
     const sendButtonContainerWidth = interpolateNode(sendButtonContainerOpen, {
       inputRange: [0, 1],
       outputRange: [4, 38],
     });
     this.sendButtonContainerStyle = { width: sendButtonContainerWidth };
   }
 
   static mediaGalleryOpen(props: Props) {
     const { keyboardState } = props;
     return !!(keyboardState && keyboardState.mediaGalleryOpen);
   }
 
   static systemKeyboardShowing(props: Props) {
     const { keyboardState } = props;
     return !!(keyboardState && keyboardState.systemKeyboardShowing);
   }
 
   get systemKeyboardShowing() {
     return ChatInputBar.systemKeyboardShowing(this.props);
   }
 
   immediatelyShowSendButton() {
     this.sendButtonContainerOpen.setValue(1);
     this.targetSendButtonContainerOpen.setValue(1);
   }
 
   updateSendButton(currentText: string) {
     if (this.shouldShowTextInput) {
       this.targetSendButtonContainerOpen.setValue(currentText === '' ? 0 : 1);
     } else {
       this.setUpSendIconAnimations();
     }
   }
 
   componentDidMount() {
     const { isActive, navigation } = this.props;
     if (isActive) {
       this.addEditInputMessageListener();
     }
     if (!navigation) {
       return;
     }
     this.clearBeforeRemoveListener = navigation.addListener(
       'beforeRemove',
       this.onNavigationBeforeRemove,
     );
     this.clearFocusListener = navigation.addListener(
       'focus',
       this.onNavigationFocus,
     );
     this.clearBlurListener = navigation.addListener(
       'blur',
       this.onNavigationBlur,
     );
   }
 
   componentWillUnmount() {
     if (this.props.isActive) {
       this.removeEditInputMessageListener();
     }
     if (this.clearBeforeRemoveListener) {
       this.clearBeforeRemoveListener();
     }
     if (this.clearFocusListener) {
       this.clearFocusListener();
     }
     if (this.clearBlurListener) {
       this.clearBlurListener();
     }
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (
       this.state.textEdited &&
       this.state.text &&
       this.props.threadInfo.id !== prevProps.threadInfo.id
     ) {
       this.props.dispatch({
         type: moveDraftActionType,
         payload: {
           oldKey: draftKeyFromThreadID(prevProps.threadInfo.id),
           newKey: draftKeyFromThreadID(this.props.threadInfo.id),
         },
       });
     } else if (!this.state.textEdited && this.props.draft !== prevProps.draft) {
       this.setState({ text: this.props.draft });
     }
     if (this.props.isActive && !prevProps.isActive) {
       this.addEditInputMessageListener();
     } else if (!this.props.isActive && prevProps.isActive) {
       this.removeEditInputMessageListener();
     }
 
     const currentText = trimMessage(this.state.text);
     const prevText = trimMessage(prevState.text);
 
     if (
       (currentText === '' && prevText !== '') ||
       (currentText !== '' && prevText === '')
     ) {
       this.updateSendButton(currentText);
     }
 
     const systemKeyboardIsShowing = ChatInputBar.systemKeyboardShowing(
       this.props,
     );
     const systemKeyboardWasShowing =
       ChatInputBar.systemKeyboardShowing(prevProps);
     if (systemKeyboardIsShowing && !systemKeyboardWasShowing) {
       this.hideButtons();
     } else if (!systemKeyboardIsShowing && systemKeyboardWasShowing) {
       this.expandButtons();
     }
 
     const imageGalleryIsOpen = ChatInputBar.mediaGalleryOpen(this.props);
     const imageGalleryWasOpen = ChatInputBar.mediaGalleryOpen(prevProps);
     if (!imageGalleryIsOpen && imageGalleryWasOpen) {
       this.hideButtons();
     } else if (imageGalleryIsOpen && !imageGalleryWasOpen) {
       this.expandButtons();
       this.setIOSKeyboardHeight();
     }
 
     if (
       this.props.messageEditingContext?.editState.editedMessage &&
       !prevProps.messageEditingContext?.editState.editedMessage
     ) {
       this.blockNavigation();
     }
   }
 
   addEditInputMessageListener() {
     invariant(
       this.props.inputState,
       'inputState should be set in addEditInputMessageListener',
     );
     this.props.inputState.addEditInputMessageListener(this.focusAndUpdateText);
   }
 
   removeEditInputMessageListener() {
     invariant(
       this.props.inputState,
       'inputState should be set in removeEditInputMessageListener',
     );
     this.props.inputState.removeEditInputMessageListener(
       this.focusAndUpdateText,
     );
   }
 
   setIOSKeyboardHeight() {
     if (Platform.OS !== 'ios') {
       return;
     }
     const { textInput } = this;
     if (!textInput) {
       return;
     }
     const keyboardHeight = getKeyboardHeight();
     if (keyboardHeight === null || keyboardHeight === undefined) {
       return;
     }
     TextInputKeyboardMangerIOS.setKeyboardHeight(textInput, keyboardHeight);
   }
 
   get shouldShowTextInput(): boolean {
     if (threadHasPermission(this.props.threadInfo, threadPermissions.VOICED)) {
       return true;
     }
     // If the thread is created by somebody else while the viewer is attempting
     // to create it, the threadInfo might be modified in-place
     // and won't list the viewer as a member,
     // which will end up hiding the input.
     // In this case, we will assume that our creation action
     // will get translated into a join, and as long
     // as members are voiced, we can show the input.
     if (!this.props.threadCreationInProgress) {
       return false;
     }
     return checkIfDefaultMembersAreVoiced(this.props.threadInfo);
   }
 
   render() {
     const isMember = viewerIsMember(this.props.threadInfo);
     const canJoin = threadHasPermission(
       this.props.threadInfo,
       threadPermissions.JOIN_THREAD,
     );
     let joinButton = null;
     const threadColor = `#${this.props.threadInfo.color}`;
     const isEditMode = this.isEditMode();
     if (!isMember && canJoin && !this.props.threadCreationInProgress) {
       let buttonContent;
       if (this.props.joinThreadLoadingStatus === 'loading') {
         buttonContent = (
           <ActivityIndicator
             size="small"
             color="white"
             style={this.props.styles.joinThreadLoadingIndicator}
           />
         );
       } else {
         const textStyle = colorIsDark(this.props.threadInfo.color)
           ? this.props.styles.joinButtonTextLight
           : this.props.styles.joinButtonTextDark;
         buttonContent = (
           <View style={this.props.styles.joinButtonContent}>
             <SWMansionIcon name="plus" style={textStyle} />
             <Text style={textStyle}>Join Chat</Text>
           </View>
         );
       }
       joinButton = (
         <View style={this.props.styles.joinButtonContainer}>
           <Button
             onPress={this.onPressJoin}
             iosActiveOpacity={0.85}
             style={[
               this.props.styles.joinButton,
               { backgroundColor: threadColor },
             ]}
           >
             {buttonContent}
           </Button>
         </View>
       );
     }
 
     const typeaheadRegexMatches = getTypeaheadRegexMatches(
       this.state.selectionState.text,
       this.state.selectionState.selection,
       nativeMentionTypeaheadRegex,
     );
 
     let typeaheadTooltip = null;
 
     if (typeaheadRegexMatches && !isEditMode) {
       const typeaheadMatchedStrings = {
         textBeforeAtSymbol: typeaheadRegexMatches[1] ?? '',
         query: typeaheadRegexMatches[4] ?? '',
       };
 
       const suggestedUsers = getMentionTypeaheadUserSuggestions(
         this.props.userSearchIndex,
         this.props.userMentionsCandidates,
         this.props.viewerID,
         typeaheadMatchedStrings.query,
       );
       const suggestedChats = getMentionTypeaheadChatSuggestions(
         this.props.chatMentionSearchIndex,
         this.props.chatMentionCandidates,
         typeaheadMatchedStrings.query,
       );
       const suggestions = [...suggestedUsers, ...suggestedChats];
 
       if (suggestions.length > 0) {
         typeaheadTooltip = (
           <TypeaheadTooltip
             text={this.state.text}
             matchedStrings={typeaheadMatchedStrings}
             suggestions={suggestions}
             focusAndUpdateTextAndSelection={this.focusAndUpdateTextAndSelection}
             typeaheadTooltipActionsGetter={mentionTypeaheadTooltipActions}
             TypeaheadTooltipButtonComponent={MentionTypeaheadTooltipButton}
           />
         );
       }
     }
 
     let content;
     const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(
       this.props.threadInfo,
     );
     if (this.shouldShowTextInput) {
       content = this.renderInput();
     } else if (
       threadFrozenDueToViewerBlock(
         this.props.threadInfo,
         this.props.viewerID,
         this.props.userInfos,
       ) &&
       threadActualMembers(this.props.threadInfo.members).length === 2
     ) {
       content = (
         <Text style={this.props.styles.explanation}>
           You can&rsquo;t send messages to a user that you&rsquo;ve blocked.
         </Text>
       );
     } else if (isMember) {
       content = (
         <Text style={this.props.styles.explanation}>
           You don&rsquo;t have permission to send messages.
         </Text>
       );
     } else if (defaultMembersAreVoiced && canJoin) {
       content = null;
     } else {
       content = (
         <Text style={this.props.styles.explanation}>
           You don&rsquo;t have permission to send messages.
         </Text>
       );
     }
 
     const keyboardInputHost =
       Platform.OS === 'android' ? null : (
         <KeyboardInputHost textInputRef={this.textInput} />
       );
 
     let editedMessage;
     if (isEditMode && this.props.editedMessagePreview) {
       const { message } = this.props.editedMessagePreview;
       editedMessage = (
         <AnimatedView
           style={this.props.styles.editView}
           entering={FadeInDown}
           exiting={FadeOutDown}
         >
           <View style={this.props.styles.editViewContent}>
             <TouchableOpacity
               onPress={this.scrollToEditedMessage}
               activeOpacity={0.4}
             >
               <Text
                 style={[{ color: threadColor }, this.props.styles.editingLabel]}
               >
                 Editing message
               </Text>
               <SingleLine style={this.props.styles.editingMessagePreview}>
                 {message.text}
               </SingleLine>
             </TouchableOpacity>
           </View>
           <SWMansionIcon
             style={this.props.styles.exitEditButton}
             name="cross"
             size={22}
             color={threadColor}
             onPress={this.onPressExitEditMode}
           />
         </AnimatedView>
       );
     }
 
     return (
       <AnimatedView
         style={this.props.styles.container}
         onLayout={this.props.onInputBarLayout}
       >
         {typeaheadTooltip}
         {joinButton}
         {editedMessage}
         {content}
         {keyboardInputHost}
       </AnimatedView>
     );
   }
 
   renderInput() {
     const expandoButton = (
       <TouchableOpacity
         onPress={this.expandButtons}
         activeOpacity={0.4}
         style={this.props.styles.expandButton}
       >
         <AnimatedView style={this.expandIconStyle}>
           <SWMansionIcon
             name="chevron-right"
             size={22}
             color={`#${this.props.threadInfo.color}`}
           />
         </AnimatedView>
       </TouchableOpacity>
     );
     const threadColor = `#${this.props.threadInfo.color}`;
     const expandoButtonsViewStyle = [this.props.styles.innerExpandoButtons];
     if (this.isEditMode()) {
       expandoButtonsViewStyle.push({ display: 'none' });
     }
     return (
       <TouchableWithoutFeedback onPress={this.dismissKeyboard}>
         <View style={this.props.styles.inputContainer}>
           <AnimatedView style={this.expandoButtonsStyle}>
             <View style={expandoButtonsViewStyle}>
               {this.state.buttonsExpanded ? expandoButton : null}
               <TouchableOpacity
                 onPress={this.showMediaGallery}
                 activeOpacity={0.4}
               >
                 <AnimatedView style={this.cameraRollIconStyle}>
                   <SWMansionIcon
                     name="image-1"
                     size={28}
                     color={`#${this.props.threadInfo.color}`}
                   />
                 </AnimatedView>
               </TouchableOpacity>
               <TouchableOpacity
                 onPress={this.props.openCamera}
                 activeOpacity={0.4}
                 disabled={!this.state.buttonsExpanded}
               >
                 <AnimatedView style={this.cameraIconStyle}>
                   <SWMansionIcon
                     name="camera"
                     size={28}
                     color={`#${this.props.threadInfo.color}`}
                   />
                 </AnimatedView>
               </TouchableOpacity>
               {this.state.buttonsExpanded ? null : expandoButton}
             </View>
           </AnimatedView>
           <SelectableTextInput
             allowImagePasteForThreadID={this.props.threadInfo.id}
             value={this.state.text}
             onChangeText={this.updateText}
             selection={this.state.selectionState.selection}
             onUpdateSyncedSelectionData={this.updateSelectionState}
             placeholder="Send a message..."
             placeholderTextColor={this.props.colors.listInputButton}
             multiline={true}
             style={this.props.styles.textInput}
             textInputRef={this.textInputRef}
             clearableTextInputRef={this.clearableTextInputRef}
             ref={this.selectableTextInputRef}
             selectionColor={`#${this.props.threadInfo.color}`}
           />
           <AnimatedView style={this.sendButtonContainerStyle}>
             <TouchableOpacity
               onPress={this.onSend}
               activeOpacity={0.4}
               style={this.props.styles.sendButton}
               disabled={trimMessage(this.state.text) === ''}
             >
               <Icon
                 name="md-send"
                 size={25}
                 style={this.props.styles.sendIcon}
                 color={threadColor}
               />
             </TouchableOpacity>
           </AnimatedView>
         </View>
       </TouchableWithoutFeedback>
     );
   }
 
   textInputRef = (textInput: ?React.ElementRef<typeof TextInput>) => {
     this.textInput = textInput;
   };
 
   clearableTextInputRef = (clearableTextInput: ?ClearableTextInput) => {
     this.clearableTextInput = clearableTextInput;
   };
 
   selectableTextInputRef = (
     selectableTextInput: ?React.ElementRef<typeof SelectableTextInput>,
   ) => {
     this.selectableTextInput = selectableTextInput;
   };
 
   updateText = (text: string) => {
     if (this.state.isExitingDuringEditMode) {
       return;
     }
     this.setState({ text, textEdited: true });
     this.props.messageEditingContext?.setEditedMessageChanged(
       this.isMessageEdited(text),
     );
     if (this.isEditMode()) {
       return;
     }
     this.saveDraft(text);
   };
 
   updateSelectionState: (data: SyncedSelectionData) => void = data => {
     this.setState({ selectionState: data });
   };
 
   saveDraft = _throttle(text => {
     this.props.dispatch({
       type: updateDraftActionType,
       payload: {
         key: draftKeyFromThreadID(this.props.threadInfo.id),
         text,
       },
     });
   }, 400);
 
   focusAndUpdateTextAndSelection = (text: string, selection: Selection) => {
     this.selectableTextInput?.prepareForSelectionMutation(text, selection);
     this.setState({
       text,
       textEdited: true,
       selectionState: { text, selection },
     });
     this.saveDraft(text);
 
     this.focusAndUpdateButtonsVisibility();
   };
 
   focusAndUpdateText = (params: EditInputBarMessageParameters) => {
     const { message: text, mode } = params;
     const currentText = this.state.text;
     if (mode === 'replace') {
       this.updateText(text);
     } else if (!currentText.startsWith(text)) {
       const prependedText = text.concat(currentText);
       this.updateText(prependedText);
     }
 
     this.focusAndUpdateButtonsVisibility();
   };
 
   focusAndUpdateButtonsVisibility = () => {
     const { textInput } = this;
     if (!textInput) {
       return;
     }
 
     this.immediatelyShowSendButton();
     this.immediatelyHideButtons();
     textInput.focus();
   };
 
   onSend = async () => {
     if (!trimMessage(this.state.text)) {
       return;
     }
 
     const editedMessage = this.getEditedMessage();
     if (editedMessage && editedMessage.id) {
       this.editMessage(editedMessage.id, this.state.text);
       return;
     }
 
     this.updateSendButton('');
 
     const { clearableTextInput } = this;
     invariant(
       clearableTextInput,
       'clearableTextInput should be sent in onSend',
     );
     let text = await clearableTextInput.getValueAndReset();
     text = trimMessage(text);
     if (!text) {
       return;
     }
 
     const localID = this.props.nextLocalID;
     const creatorID = this.props.viewerID;
     invariant(creatorID, 'should have viewer ID in order to send a message');
     invariant(
       this.props.inputState,
       'inputState should be set in ChatInputBar.onSend',
     );
 
     this.props.inputState.sendTextMessage(
       {
         type: messageTypes.TEXT,
         localID,
         threadID: this.props.threadInfo.id,
         text,
         creatorID,
         time: Date.now(),
       },
       this.props.threadInfo,
       this.props.parentThreadInfo,
     );
   };
 
   isEditMode = () => {
     const editState = this.props.messageEditingContext?.editState;
     const isThisThread =
       editState?.editedMessage?.threadID === this.props.threadInfo.id;
     return editState && editState.editedMessage !== null && isThisThread;
   };
 
   isMessageEdited = newText => {
     let text = newText ?? this.state.text;
     text = trimMessage(text);
     const originalText = this.props.editedMessageInfo?.text;
     return text !== originalText;
   };
 
   unblockNavigation = () => {
     const { navigation } = this.props;
     if (!navigation) {
       return;
     }
     navigation.setParams({ removeEditMode: null });
   };
 
   removeEditMode: RemoveEditMode = action => {
     const { navigation } = this.props;
     if (!navigation || this.state.isExitingDuringEditMode) {
       return 'ignore_action';
     }
     if (!this.isMessageEdited()) {
       this.unblockNavigation();
       return 'reduce_action';
     }
     const unblockAndDispatch = () => {
       this.unblockNavigation();
       navigation.dispatch(action);
     };
     const onContinueEditing = () => {
       this.props.overlayContext?.resetScrollBlockingModalStatus();
     };
     exitEditAlert({
       onDiscard: unblockAndDispatch,
       onContinueEditing,
     });
     return 'ignore_action';
   };
 
   blockNavigation = () => {
     const { navigation } = this.props;
     if (!navigation || !navigation.isFocused()) {
       return;
     }
     navigation.setParams({
       removeEditMode: this.removeEditMode,
     });
   };
 
   editMessage = async (messageID: string, text: string) => {
     if (!this.isMessageEdited()) {
       this.exitEditMode();
       return;
     }
     text = trimMessage(text);
     try {
       await this.props.editMessage(messageID, text);
       this.exitEditMode();
     } catch (error) {
       Alert.alert(
         'Couldn’t edit the message',
         'Please try again later',
         [{ text: 'OK' }],
         {
           cancelable: true,
         },
       );
     }
   };
 
   getEditedMessage = () => {
     const editState = this.props.messageEditingContext?.editState;
     return editState?.editedMessage;
   };
 
   onPressExitEditMode = () => {
     if (!this.isMessageEdited()) {
       this.exitEditMode();
       return;
     }
     exitEditAlert({
       onDiscard: this.exitEditMode,
     });
   };
 
   scrollToEditedMessage = () => {
     const editedMessage = this.getEditedMessage();
     if (!editedMessage) {
       return;
     }
     const editedMessageKey = messageKey(editedMessage);
     this.props.inputState?.scrollToMessage(editedMessageKey);
   };
 
   exitEditMode = () => {
     this.props.messageEditingContext?.setEditedMessage(null, () => {
       this.unblockNavigation();
       this.updateText(this.props.draft);
       this.focusAndUpdateButtonsVisibility();
       this.updateSendButton(this.props.draft);
     });
   };
 
   onNavigationFocus = () => {
     this.setState({ isExitingDuringEditMode: false });
   };
 
   onNavigationBlur = () => {
     if (!this.isEditMode()) {
       return;
     }
     this.setState(
       { text: this.props.draft, isExitingDuringEditMode: true },
       this.exitEditMode,
     );
   };
 
   onNavigationBeforeRemove = e => {
     if (!this.isEditMode()) {
       return;
     }
     const { action } = e.data;
     e.preventDefault();
     const saveExit = () => {
       this.props.messageEditingContext?.setEditedMessage(null, () => {
         this.setState({ isExitingDuringEditMode: true }, () => {
           if (!this.props.navigation) {
             return;
           }
           this.props.navigation.dispatch(action);
         });
       });
     };
     if (!this.isMessageEdited()) {
       saveExit();
       return;
     }
     exitEditAlert({
       onDiscard: saveExit,
     });
   };
 
   onPressJoin = () => {
     this.props.dispatchActionPromise(joinThreadActionTypes, this.joinAction());
   };
 
   async joinAction() {
     const query = this.props.calendarQuery();
     return await this.props.joinThread({
       threadID: this.props.threadInfo.id,
       calendarQuery: {
         startDate: query.startDate,
         endDate: query.endDate,
         filters: [
           ...query.filters,
           { type: 'threads', threadIDs: [this.props.threadInfo.id] },
         ],
       },
     });
   }
 
   expandButtons = () => {
     if (this.state.buttonsExpanded || this.isEditMode()) {
       return;
     }
     this.targetExpandoButtonsOpen.setValue(1);
     this.setState({ buttonsExpanded: true });
   };
 
   hideButtons() {
     if (
       ChatInputBar.mediaGalleryOpen(this.props) ||
       !this.systemKeyboardShowing ||
       !this.state.buttonsExpanded
     ) {
       return;
     }
     this.targetExpandoButtonsOpen.setValue(0);
     this.setState({ buttonsExpanded: false });
   }
 
   immediatelyHideButtons() {
     this.expandoButtonsOpen.setValue(0);
     this.targetExpandoButtonsOpen.setValue(0);
     this.setState({ buttonsExpanded: false });
   }
 
   showMediaGallery = () => {
     const { keyboardState } = this.props;
     invariant(keyboardState, 'keyboardState should be initialized');
     keyboardState.showMediaGallery(this.props.threadInfo);
   };
 
   dismissKeyboard = () => {
     const { keyboardState } = this.props;
     keyboardState && keyboardState.dismissKeyboard();
   };
 }
 
 const unboundStyles = {
   cameraIcon: {
     paddingBottom: Platform.OS === 'android' ? 11 : 8,
     paddingRight: 5,
   },
   cameraRollIcon: {
     paddingBottom: Platform.OS === 'android' ? 11 : 8,
     paddingRight: 5,
   },
   container: {
     backgroundColor: 'listBackground',
     paddingLeft: Platform.OS === 'android' ? 10 : 5,
   },
   expandButton: {
     bottom: 0,
     position: 'absolute',
     right: 0,
   },
   expandIcon: {
     paddingBottom: Platform.OS === 'android' ? 13 : 11,
     paddingRight: 2,
   },
   expandoButtons: {
     alignSelf: 'flex-end',
   },
   explanation: {
     color: 'listBackgroundSecondaryLabel',
     paddingBottom: 4,
     paddingTop: 1,
     textAlign: 'center',
   },
   innerExpandoButtons: {
     alignItems: 'flex-end',
     alignSelf: 'flex-end',
     flexDirection: 'row',
   },
   inputContainer: {
     flexDirection: 'row',
   },
   joinButton: {
     borderRadius: 8,
     flex: 1,
     justifyContent: 'center',
     marginHorizontal: 12,
     marginVertical: 3,
   },
   joinButtonContainer: {
     flexDirection: 'row',
     height: 48,
     marginBottom: 8,
   },
   editView: {
     marginLeft: 20,
     marginRight: 20,
     padding: 10,
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
   editViewContent: {
     flex: 1,
     paddingRight: 6,
   },
   exitEditButton: {
     marginTop: 6,
   },
   editingLabel: {
     paddingBottom: 4,
   },
   editingMessagePreview: {
     color: 'listForegroundLabel',
   },
   joinButtonContent: {
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
   },
   joinButtonTextLight: {
     color: 'white',
     fontSize: 20,
     marginHorizontal: 4,
   },
   joinButtonTextDark: {
     color: 'black',
     fontSize: 20,
     marginHorizontal: 4,
   },
   joinThreadLoadingIndicator: {
     paddingVertical: 2,
   },
   sendButton: {
     position: 'absolute',
     bottom: 4,
     left: 0,
   },
   sendIcon: {
     paddingLeft: 9,
     paddingRight: 8,
     paddingVertical: 6,
   },
   textInput: {
     backgroundColor: 'listInputBackground',
     borderRadius: 8,
     color: 'listForegroundLabel',
     fontSize: 16,
     marginLeft: 4,
     marginRight: 4,
     marginTop: 6,
     marginBottom: 8,
     maxHeight: 110,
     paddingHorizontal: 10,
     paddingVertical: 5,
   },
 };
 
 const joinThreadLoadingStatusSelector = createLoadingStatusSelector(
   joinThreadActionTypes,
 );
 const createThreadLoadingStatusSelector =
   createLoadingStatusSelector(newThreadActionTypes);
 
 type ConnectedChatInputBarBaseProps = {
   ...BaseProps,
   +onInputBarLayout?: (event: LayoutEvent) => mixed,
   +openCamera: () => mixed,
   +navigation?: ChatNavigationProp<'MessageList'>,
 };
 function ConnectedChatInputBarBase(props: ConnectedChatInputBarBaseProps) {
   const navContext = React.useContext(NavContext);
   const keyboardState = React.useContext(KeyboardContext);
   const inputState = React.useContext(InputStateContext);
   const overlayContext = React.useContext(OverlayContext);
 
   const viewerID = useSelector(
     state => state.currentUserInfo && state.currentUserInfo.id,
   );
   const draft = useSelector(
     state =>
       state.draftStore.drafts[draftKeyFromThreadID(props.threadInfo.id)] ?? '',
   );
   const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);
   const createThreadLoadingStatus = useSelector(
     createThreadLoadingStatusSelector,
   );
   const threadCreationInProgress = createThreadLoadingStatus === 'loading';
   const calendarQuery = useSelector(state =>
     nonThreadCalendarQuery({
       redux: state,
       navContext,
     }),
   );
   const nextLocalID = useNextLocalID();
   const userInfos = useSelector(state => state.userStore.userInfos);
 
   const styles = useStyles(unboundStyles);
   const colors = useColors();
 
   const isActive = React.useMemo(
     () => props.threadInfo.id === activeThreadSelector(navContext),
     [props.threadInfo.id, navContext],
   );
 
   const dispatch = useDispatch();
   const dispatchActionPromise = useDispatchActionPromise();
-  const callJoinThread = useServerCall(joinThread);
+  const callJoinThread = useJoinThread();
 
   const userSearchIndex = useSelector(userStoreMentionSearchIndex);
 
   const { getChatMentionSearchIndex } = useChatMentionContext();
   const chatMentionSearchIndex = getChatMentionSearchIndex(props.threadInfo);
 
   const { parentThreadID } = props.threadInfo;
   const parentThreadInfo = useSelector(state =>
     parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
   );
 
   const userMentionsCandidates = getUserMentionsCandidates(
     props.threadInfo,
     parentThreadInfo,
   );
 
   const chatMentionCandidates = useThreadChatMentionCandidates(
     props.threadInfo,
   );
 
   const messageEditingContext = React.useContext(MessageEditingContext);
 
   const editedMessageInfo = messageEditingContext?.editState.editedMessage;
   const editedMessagePreview = useMessagePreview(
     editedMessageInfo,
     props.threadInfo,
     getDefaultTextMessageRules(chatMentionCandidates).simpleMarkdownRules,
   );
   const editMessage = useEditMessage();
 
   return (
     <ChatInputBar
       {...props}
       viewerID={viewerID}
       draft={draft}
       joinThreadLoadingStatus={joinThreadLoadingStatus}
       threadCreationInProgress={threadCreationInProgress}
       calendarQuery={calendarQuery}
       nextLocalID={nextLocalID}
       userInfos={userInfos}
       colors={colors}
       styles={styles}
       isActive={isActive}
       keyboardState={keyboardState}
       dispatch={dispatch}
       dispatchActionPromise={dispatchActionPromise}
       joinThread={callJoinThread}
       inputState={inputState}
       userSearchIndex={userSearchIndex}
       userMentionsCandidates={userMentionsCandidates}
       chatMentionSearchIndex={chatMentionSearchIndex}
       chatMentionCandidates={chatMentionCandidates}
       parentThreadInfo={parentThreadInfo}
       editedMessagePreview={editedMessagePreview}
       editedMessageInfo={editedMessageInfo}
       editMessage={editMessage}
       navigation={props.navigation}
       overlayContext={overlayContext}
       messageEditingContext={messageEditingContext}
     />
   );
 }
 
 type DummyChatInputBarProps = {
   ...BaseProps,
   +onHeightMeasured: (height: number) => mixed,
 };
 const noop = () => {};
 function DummyChatInputBar(props: DummyChatInputBarProps): React.Node {
   const { onHeightMeasured, ...restProps } = props;
   const onInputBarLayout = React.useCallback(
     (event: LayoutEvent) => {
       const { height } = event.nativeEvent.layout;
       onHeightMeasured(height);
     },
     [onHeightMeasured],
   );
   return (
     <View pointerEvents="none">
       <ConnectedChatInputBarBase
         {...restProps}
         onInputBarLayout={onInputBarLayout}
         openCamera={noop}
       />
     </View>
   );
 }
 
 type ChatInputBarProps = {
   ...BaseProps,
   +navigation: ChatNavigationProp<'MessageList'>,
   +route: NavigationRoute<'MessageList'>,
 };
 const ConnectedChatInputBar: React.ComponentType<ChatInputBarProps> =
   React.memo<ChatInputBarProps>(function ConnectedChatInputBar(
     props: ChatInputBarProps,
   ) {
     const { navigation, route, ...restProps } = props;
     const keyboardState = React.useContext(KeyboardContext);
 
     const { threadInfo } = props;
     const imagePastedCallback = React.useCallback(
       imagePastedEvent => {
         if (threadInfo.id !== imagePastedEvent.threadID) {
           return;
         }
         const pastedImage: PhotoPaste = {
           step: 'photo_paste',
           dimensions: {
             height: imagePastedEvent.height,
             width: imagePastedEvent.width,
           },
           filename: imagePastedEvent.fileName,
           uri: 'file://' + imagePastedEvent.filePath,
           selectTime: 0,
           sendTime: 0,
           retries: 0,
         };
         navigation.navigate<'ImagePasteModal'>({
           name: ImagePasteModalRouteName,
           params: {
             imagePasteStagingInfo: pastedImage,
             thread: threadInfo,
           },
         });
       },
       [navigation, threadInfo],
     );
 
     React.useEffect(() => {
       const imagePasteListener = NativeAppEventEmitter.addListener(
         'imagePasted',
         imagePastedCallback,
       );
       return () => imagePasteListener.remove();
     }, [imagePastedCallback]);
 
     const chatContext = React.useContext(ChatContext);
     invariant(chatContext, 'should be set');
     const { setChatInputBarHeight, deleteChatInputBarHeight } = chatContext;
     const onInputBarLayout = React.useCallback(
       (event: LayoutEvent) => {
         const { height } = event.nativeEvent.layout;
         setChatInputBarHeight(threadInfo.id, height);
       },
       [threadInfo.id, setChatInputBarHeight],
     );
 
     React.useEffect(() => {
       return () => {
         deleteChatInputBarHeight(threadInfo.id);
       };
     }, [deleteChatInputBarHeight, threadInfo.id]);
 
     const openCamera = React.useCallback(() => {
       keyboardState?.dismissKeyboard();
       navigation.navigate<'ChatCameraModal'>({
         name: ChatCameraModalRouteName,
         params: {
           presentedFrom: route.key,
           thread: threadInfo,
         },
       });
     }, [keyboardState, navigation, route.key, threadInfo]);
 
     return (
       <ConnectedChatInputBarBase
         {...restProps}
         onInputBarLayout={onInputBarLayout}
         openCamera={openCamera}
         navigation={navigation}
       />
     );
   });
 
 export { ConnectedChatInputBar as ChatInputBar, DummyChatInputBar };
diff --git a/native/chat/compose-subchannel.react.js b/native/chat/compose-subchannel.react.js
index 0e4af96f2..a3b834ce7 100644
--- a/native/chat/compose-subchannel.react.js
+++ b/native/chat/compose-subchannel.react.js
@@ -1,383 +1,383 @@
 // @flow
 
 import invariant from 'invariant';
 import _filter from 'lodash/fp/filter.js';
 import _flow from 'lodash/fp/flow.js';
 import _sortBy from 'lodash/fp/sortBy.js';
 import * as React from 'react';
 import { View, Text } from 'react-native';
 
-import { newThreadActionTypes, newThread } from 'lib/actions/thread-actions.js';
+import {
+  newThreadActionTypes,
+  useNewThread,
+} from 'lib/actions/thread-actions.js';
 import { useENSNames } from 'lib/hooks/ens-cache.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import {
   userInfoSelectorForPotentialMembers,
   userSearchIndexForPotentialMembers,
 } from 'lib/selectors/user-selectors.js';
 import { getPotentialMemberItems } from 'lib/shared/search-utils.js';
 import { threadInFilterList, userIsMember } from 'lib/shared/thread-utils.js';
 import { type ThreadType, threadTypes } from 'lib/types/thread-types-enum.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
 import { type AccountUserInfo } from 'lib/types/user-types.js';
-import {
-  useServerCall,
-  useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 
 import type { ChatNavigationProp } from './chat.react.js';
 import { useNavigateToThread } from './message-list-types.js';
 import ParentThreadHeader from './parent-thread-header.react.js';
 import LinkButton from '../components/link-button.react.js';
 import { createTagInput } from '../components/tag-input.react.js';
 import ThreadList from '../components/thread-list.react.js';
 import UserList from '../components/user-list.react.js';
 import { useCalendarQuery } from '../navigation/nav-selectors.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
 import Alert from '../utils/alert.js';
 
 const TagInput = createTagInput<AccountUserInfo>();
 
 const tagInputProps = {
   placeholder: 'username',
   autoFocus: true,
   returnKeyType: 'go',
 };
 
 const tagDataLabelExtractor = (userInfo: AccountUserInfo) => userInfo.username;
 
 export type ComposeSubchannelParams = {
   +threadType: ThreadType,
   +parentThreadInfo: ThreadInfo,
 };
 
 type Props = {
   +navigation: ChatNavigationProp<'ComposeSubchannel'>,
   +route: NavigationRoute<'ComposeSubchannel'>,
 };
 function ComposeSubchannel(props: Props): React.Node {
   const [usernameInputText, setUsernameInputText] = React.useState<string>('');
   const [userInfoInputArray, setUserInfoInputArray] = React.useState<
     $ReadOnlyArray<AccountUserInfo>,
   >([]);
   const [createButtonEnabled, setCreateButtonEnabled] =
     React.useState<boolean>(true);
 
   const tagInputRef = React.useRef();
   const onUnknownErrorAlertAcknowledged = React.useCallback(() => {
     setUsernameInputText('');
     tagInputRef.current?.focus();
   }, []);
 
   const waitingOnThreadIDRef = React.useRef<?string>();
 
   const { threadType, parentThreadInfo } = props.route.params;
   const userInfoInputIDs = userInfoInputArray.map(userInfo => userInfo.id);
-  const callNewThread = useServerCall(newThread);
+  const callNewThread = useNewThread();
   const calendarQuery = useCalendarQuery();
   const newChatThreadAction = React.useCallback(async () => {
     try {
       const assumedThreadType =
         threadType ?? threadTypes.COMMUNITY_SECRET_SUBTHREAD;
       const query = calendarQuery();
       invariant(
         assumedThreadType === 3 ||
           assumedThreadType === 4 ||
           assumedThreadType === 6 ||
           assumedThreadType === 7,
         "Sidebars and communities can't be created from the thread composer",
       );
       const result = await callNewThread({
         type: assumedThreadType,
         parentThreadID: parentThreadInfo.id,
         initialMemberIDs: userInfoInputIDs,
         color: parentThreadInfo.color,
         calendarQuery: query,
       });
       waitingOnThreadIDRef.current = result.newThreadID;
       return result;
     } catch (e) {
       setCreateButtonEnabled(true);
       Alert.alert(
         'Unknown error',
         'Uhh... try again?',
         [{ text: 'OK', onPress: onUnknownErrorAlertAcknowledged }],
         { cancelable: false },
       );
       throw e;
     }
   }, [
     threadType,
     userInfoInputIDs,
     calendarQuery,
     parentThreadInfo,
     callNewThread,
     onUnknownErrorAlertAcknowledged,
   ]);
 
   const dispatchActionPromise = useDispatchActionPromise();
   const dispatchNewChatThreadAction = React.useCallback(() => {
     setCreateButtonEnabled(false);
     dispatchActionPromise(newThreadActionTypes, newChatThreadAction());
   }, [dispatchActionPromise, newChatThreadAction]);
 
   const userInfoInputArrayEmpty = userInfoInputArray.length === 0;
   const onPressCreateThread = React.useCallback(() => {
     if (!createButtonEnabled) {
       return;
     }
     if (userInfoInputArrayEmpty) {
       Alert.alert(
         'Chatting to yourself?',
         'Are you sure you want to create a channel containing only yourself?',
         [
           { text: 'Cancel', style: 'cancel' },
           { text: 'Confirm', onPress: dispatchNewChatThreadAction },
         ],
         { cancelable: true },
       );
     } else {
       dispatchNewChatThreadAction();
     }
   }, [
     createButtonEnabled,
     userInfoInputArrayEmpty,
     dispatchNewChatThreadAction,
   ]);
 
   const { navigation } = props;
   const { setOptions } = navigation;
   React.useEffect(() => {
     setOptions({
       // eslint-disable-next-line react/display-name
       headerRight: () => (
         <LinkButton
           text="Create"
           onPress={onPressCreateThread}
           disabled={!createButtonEnabled}
         />
       ),
     });
   }, [setOptions, onPressCreateThread, createButtonEnabled]);
 
   const { setParams } = navigation;
   const parentThreadInfoID = parentThreadInfo.id;
   const reduxParentThreadInfo = useSelector(
     state => threadInfoSelector(state)[parentThreadInfoID],
   );
   React.useEffect(() => {
     if (reduxParentThreadInfo) {
       setParams({ parentThreadInfo: reduxParentThreadInfo });
     }
   }, [reduxParentThreadInfo, setParams]);
 
   const threadInfos = useSelector(threadInfoSelector);
   const newlyCreatedThreadInfo = waitingOnThreadIDRef.current
     ? threadInfos[waitingOnThreadIDRef.current]
     : null;
   const { pushNewThread } = navigation;
   React.useEffect(() => {
     if (!newlyCreatedThreadInfo) {
       return;
     }
 
     const waitingOnThreadID = waitingOnThreadIDRef.current;
     if (waitingOnThreadID === null || waitingOnThreadID === undefined) {
       return;
     }
     waitingOnThreadIDRef.current = undefined;
 
     pushNewThread(newlyCreatedThreadInfo);
   }, [newlyCreatedThreadInfo, pushNewThread]);
 
   const otherUserInfos = useSelector(userInfoSelectorForPotentialMembers);
   const userSearchIndex = useSelector(userSearchIndexForPotentialMembers);
   const { community } = parentThreadInfo;
   const communityThreadInfo = useSelector(state =>
     community ? threadInfoSelector(state)[community] : null,
   );
   const userSearchResults = React.useMemo(
     () =>
       getPotentialMemberItems({
         text: usernameInputText,
         userInfos: otherUserInfos,
         searchIndex: userSearchIndex,
         excludeUserIDs: userInfoInputIDs,
         inputParentThreadInfo: parentThreadInfo,
         inputCommunityThreadInfo: communityThreadInfo,
         threadType,
       }),
     [
       usernameInputText,
       otherUserInfos,
       userSearchIndex,
       userInfoInputIDs,
       parentThreadInfo,
       communityThreadInfo,
       threadType,
     ],
   );
 
   const existingThreads = React.useMemo(() => {
     if (userInfoInputIDs.length === 0) {
       return [];
     }
     return _flow(
       _filter(
         (threadInfo: ThreadInfo) =>
           threadInFilterList(threadInfo) &&
           threadInfo.parentThreadID === parentThreadInfo.id &&
           userInfoInputIDs.every(userID => userIsMember(threadInfo, userID)),
       ),
       _sortBy(
         ([
           'members.length',
           (threadInfo: ThreadInfo) => (threadInfo.name ? 1 : 0),
         ]: $ReadOnlyArray<string | ((threadInfo: ThreadInfo) => mixed)>),
       ),
     )(threadInfos);
   }, [userInfoInputIDs, threadInfos, parentThreadInfo]);
 
   const navigateToThread = useNavigateToThread();
   const onSelectExistingThread = React.useCallback(
     (threadID: string) => {
       const threadInfo = threadInfos[threadID];
       navigateToThread({ threadInfo });
     },
     [threadInfos, navigateToThread],
   );
 
   const onUserSelect = React.useCallback(
     ({ id }: AccountUserInfo) => {
       if (userInfoInputIDs.some(existingUserID => id === existingUserID)) {
         return;
       }
       setUserInfoInputArray(oldUserInfoInputArray => [
         ...oldUserInfoInputArray,
         otherUserInfos[id],
       ]);
       setUsernameInputText('');
     },
     [userInfoInputIDs, otherUserInfos],
   );
 
   const styles = useStyles(unboundStyles);
 
   let existingThreadsSection = null;
   if (existingThreads.length > 0) {
     existingThreadsSection = (
       <View style={styles.existingThreads}>
         <View style={styles.existingThreadsRow}>
           <Text style={styles.existingThreadsLabel}>Existing channels</Text>
         </View>
         <View style={styles.existingThreadList}>
           <ThreadList
             threadInfos={existingThreads}
             onSelect={onSelectExistingThread}
             itemTextStyle={styles.listItem}
           />
         </View>
       </View>
     );
   }
 
   const inputProps = React.useMemo(
     () => ({
       ...tagInputProps,
       onSubmitEditing: onPressCreateThread,
     }),
     [onPressCreateThread],
   );
   const userSearchResultWithENSNames = useENSNames(userSearchResults);
   const userInfoInputArrayWithENSNames = useENSNames(userInfoInputArray);
   return (
     <View style={styles.container}>
       <ParentThreadHeader
         parentThreadInfo={parentThreadInfo}
         childThreadType={threadType}
       />
       <View style={styles.userSelectionRow}>
         <Text style={styles.tagInputLabel}>To: </Text>
         <View style={styles.tagInputContainer}>
           <TagInput
             value={userInfoInputArrayWithENSNames}
             onChange={setUserInfoInputArray}
             text={usernameInputText}
             onChangeText={setUsernameInputText}
             labelExtractor={tagDataLabelExtractor}
             inputProps={inputProps}
             ref={tagInputRef}
           />
         </View>
       </View>
       <View style={styles.userList}>
         <UserList
           userInfos={userSearchResultWithENSNames}
           onSelect={onUserSelect}
           itemTextStyle={styles.listItem}
         />
       </View>
       {existingThreadsSection}
     </View>
   );
 }
 
 const unboundStyles = {
   container: {
     flex: 1,
   },
   existingThreadList: {
     backgroundColor: 'modalBackground',
     flex: 1,
     paddingRight: 12,
   },
   existingThreads: {
     flex: 1,
   },
   existingThreadsLabel: {
     color: 'modalForegroundSecondaryLabel',
     fontSize: 16,
     paddingLeft: 12,
     textAlign: 'center',
   },
   existingThreadsRow: {
     backgroundColor: 'modalForeground',
     borderBottomWidth: 1,
     borderColor: 'modalForegroundBorder',
     borderTopWidth: 1,
     paddingVertical: 6,
   },
   listItem: {
     color: 'modalForegroundLabel',
   },
   tagInputContainer: {
     flex: 1,
     marginLeft: 8,
     paddingRight: 12,
   },
   tagInputLabel: {
     color: 'modalForegroundSecondaryLabel',
     fontSize: 16,
     paddingLeft: 12,
   },
   userList: {
     backgroundColor: 'modalBackground',
     flex: 1,
     paddingLeft: 35,
     paddingRight: 12,
   },
   userSelectionRow: {
     alignItems: 'center',
     backgroundColor: 'modalForeground',
     borderBottomWidth: 1,
     borderColor: 'modalForegroundBorder',
     flexDirection: 'row',
     paddingVertical: 6,
   },
 };
 
 const MemoizedComposeSubchannel: React.ComponentType<Props> =
   React.memo<Props>(ComposeSubchannel);
 
 export default MemoizedComposeSubchannel;
diff --git a/native/chat/settings/thread-settings-leave-thread.react.js b/native/chat/settings/thread-settings-leave-thread.react.js
index ac2c95c61..6680d8f84 100644
--- a/native/chat/settings/thread-settings-leave-thread.react.js
+++ b/native/chat/settings/thread-settings-leave-thread.react.js
@@ -1,184 +1,184 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { Text, ActivityIndicator, View } from 'react-native';
 
 import {
   leaveThreadActionTypes,
-  leaveThread,
+  useLeaveThread,
 } from 'lib/actions/thread-actions.js';
+import type { LeaveThreadInput } from 'lib/actions/thread-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { otherUsersButNoOtherAdmins } from 'lib/selectors/thread-selectors.js';
 import { identifyInvalidatedThreads } from 'lib/shared/thread-utils.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { ThreadInfo, LeaveThreadPayload } from 'lib/types/thread-types.js';
 import {
   type DispatchActionPromise,
-  useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 
 import Button from '../../components/button.react.js';
 import { clearThreadsActionType } from '../../navigation/action-types.js';
 import {
   NavContext,
   type NavContextType,
 } from '../../navigation/navigation-context.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { type Colors, useColors, useStyles } from '../../themes/colors.js';
 import type { ViewStyle } from '../../types/styles.js';
 import Alert from '../../utils/alert.js';
 
 type BaseProps = {
   +threadInfo: ThreadInfo,
   +buttonStyle: ViewStyle,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +loadingStatus: LoadingStatus,
   +otherUsersButNoOtherAdmins: boolean,
   +colors: Colors,
   +styles: typeof unboundStyles,
   // Redux dispatch functions
   +dispatchActionPromise: DispatchActionPromise,
   // async functions that hit server APIs
-  +leaveThread: (threadID: string) => Promise<LeaveThreadPayload>,
+  +leaveThread: (input: LeaveThreadInput) => Promise<LeaveThreadPayload>,
   // withNavContext
   +navContext: ?NavContextType,
 };
 class ThreadSettingsLeaveThread extends React.PureComponent<Props> {
   render() {
     const { panelIosHighlightUnderlay, panelForegroundSecondaryLabel } =
       this.props.colors;
     const loadingIndicator =
       this.props.loadingStatus === 'loading' ? (
         <ActivityIndicator size="small" color={panelForegroundSecondaryLabel} />
       ) : null;
     return (
       <View style={this.props.styles.container}>
         <Button
           onPress={this.onPress}
           style={[this.props.styles.button, this.props.buttonStyle]}
           iosFormat="highlight"
           iosHighlightUnderlayColor={panelIosHighlightUnderlay}
         >
           <Text style={this.props.styles.text}>Leave chat...</Text>
           {loadingIndicator}
         </Button>
       </View>
     );
   }
 
   onPress = () => {
     if (this.props.otherUsersButNoOtherAdmins) {
       Alert.alert(
         'Need another admin',
         'Make somebody else an admin before you leave!',
         undefined,
         { cancelable: true },
       );
       return;
     }
 
     Alert.alert(
       'Confirm action',
       'Are you sure you want to leave this chat?',
       [
         { text: 'Cancel', style: 'cancel' },
         { text: 'OK', onPress: this.onConfirmLeaveThread },
       ],
       { cancelable: true },
     );
   };
 
   onConfirmLeaveThread = () => {
     const threadID = this.props.threadInfo.id;
     this.props.dispatchActionPromise(
       leaveThreadActionTypes,
       this.leaveThread(),
       {
         customKeyName: `${leaveThreadActionTypes.started}:${threadID}`,
       },
     );
   };
 
   async leaveThread() {
     const threadID = this.props.threadInfo.id;
     const { navContext } = this.props;
     invariant(navContext, 'navContext should exist in leaveThread');
     navContext.dispatch({
       type: clearThreadsActionType,
       payload: { threadIDs: [threadID] },
     });
     try {
-      const result = await this.props.leaveThread(threadID);
+      const result = await this.props.leaveThread({ threadID });
       const invalidated = identifyInvalidatedThreads(
         result.updatesResult.newUpdates,
       );
       navContext.dispatch({
         type: clearThreadsActionType,
         payload: { threadIDs: [...invalidated] },
       });
       return result;
     } catch (e) {
       Alert.alert('Unknown error', 'Uhh... try again?', undefined, {
         cancelable: true,
       });
       throw e;
     }
   }
 }
 
 const unboundStyles = {
   button: {
     flexDirection: 'row',
     paddingHorizontal: 12,
     paddingVertical: 10,
   },
   container: {
     backgroundColor: 'panelForeground',
     paddingHorizontal: 12,
   },
   text: {
     color: 'redText',
     flex: 1,
     fontSize: 16,
   },
 };
 
 const ConnectedThreadSettingsLeaveThread: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedThreadSettingsLeaveThread(
     props: BaseProps,
   ) {
     const threadID = props.threadInfo.id;
     const loadingStatus = useSelector(
       createLoadingStatusSelector(
         leaveThreadActionTypes,
         `${leaveThreadActionTypes.started}:${threadID}`,
       ),
     );
     const otherUsersButNoOtherAdminsValue = useSelector(
       otherUsersButNoOtherAdmins(props.threadInfo.id),
     );
     const colors = useColors();
     const styles = useStyles(unboundStyles);
     const dispatchActionPromise = useDispatchActionPromise();
-    const callLeaveThread = useServerCall(leaveThread);
+    const callLeaveThread = useLeaveThread();
     const navContext = React.useContext(NavContext);
     return (
       <ThreadSettingsLeaveThread
         {...props}
         loadingStatus={loadingStatus}
         otherUsersButNoOtherAdmins={otherUsersButNoOtherAdminsValue}
         colors={colors}
         styles={styles}
         dispatchActionPromise={dispatchActionPromise}
         leaveThread={callLeaveThread}
         navContext={navContext}
       />
     );
   });
 
 export default ConnectedThreadSettingsLeaveThread;
diff --git a/native/chat/settings/thread-settings-media-gallery.react.js b/native/chat/settings/thread-settings-media-gallery.react.js
index bbb89abf4..e44931dad 100644
--- a/native/chat/settings/thread-settings-media-gallery.react.js
+++ b/native/chat/settings/thread-settings-media-gallery.react.js
@@ -1,226 +1,225 @@
 // @flow
 
 import { useNavigation, useRoute } from '@react-navigation/native';
 import * as React from 'react';
 import { View, useWindowDimensions } from 'react-native';
 import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 import { FlatList } from 'react-native-gesture-handler';
 
-import { fetchThreadMedia } from 'lib/actions/thread-actions.js';
+import { useFetchThreadMedia } from 'lib/actions/thread-actions.js';
 import type { MediaInfo, Media } from 'lib/types/media-types';
-import { useServerCall } from 'lib/utils/action-utils.js';
 
 import GestureTouchableOpacity from '../../components/gesture-touchable-opacity.react.js';
 import Multimedia from '../../media/multimedia.react.js';
 import {
   ImageModalRouteName,
   VideoPlaybackModalRouteName,
 } from '../../navigation/route-names.js';
 import { useStyles } from '../../themes/colors.js';
 import type {
   LayoutCoordinates,
   VerticalBounds,
 } from '../../types/layout-types.js';
 
 const galleryItemGap = 8;
 const numColumns = 3;
 
 type ThreadSettingsMediaGalleryProps = {
   +threadID: string,
   +limit: number,
   +verticalBounds: ?VerticalBounds,
   +offset?: number,
   +activeTab?: string,
 };
 
 function ThreadSettingsMediaGallery(
   props: ThreadSettingsMediaGalleryProps,
 ): React.Node {
   const styles = useStyles(unboundStyles);
   const { width } = useWindowDimensions();
 
   // Explanation of galleryItemWidth:
   // The FlatList has a horizontal padding of 16px on each side,
   // and so the width of the actual FlatList is `width - 32px`.
   // With three columns, there will be two gaps in between the items,
   // so the width of each item (with the gaps) will be
   // (width - 32px - (numColumns-1) * galleryItemGap) / numColumns.
   // E.g. 16px, media, galleryItemGap, media, galleryItemGap, media, 16px
   const galleryItemWidth =
     (width - 32 - (numColumns - 1) * galleryItemGap) / numColumns;
   const { threadID, limit, verticalBounds, offset, activeTab } = props;
   const [mediaInfos, setMediaInfos] = React.useState([]);
-  const callFetchThreadMedia = useServerCall(fetchThreadMedia);
+  const callFetchThreadMedia = useFetchThreadMedia();
 
   React.useEffect(() => {
     const fetchData = async () => {
       const result = await callFetchThreadMedia({
         threadID,
         limit,
         offset: 0,
       });
       setMediaInfos(result.media);
     };
     fetchData();
   }, [callFetchThreadMedia, threadID, limit]);
 
   const memoizedStyles = React.useMemo(() => {
     return {
       mediaContainer: {
         marginTop: galleryItemGap,
         width: galleryItemWidth,
         ...styles.mediaContainer,
       },
       mediaContainerWithMargin: {
         marginTop: galleryItemGap,
         marginLeft: galleryItemGap,
         width: galleryItemWidth,
         ...styles.mediaContainer,
       },
       media: {
         width: galleryItemWidth,
         ...styles.media,
       },
     };
   }, [galleryItemWidth, styles.media, styles.mediaContainer]);
 
   const filteredMediaInfos = React.useMemo(() => {
     if (activeTab === 'ALL') {
       return mediaInfos;
     } else if (activeTab === 'IMAGES') {
       return mediaInfos.filter(
         mediaInfo =>
           mediaInfo.type === 'photo' || mediaInfo.type === 'encrypted_photo',
       );
     } else if (activeTab === 'VIDEOS') {
       return mediaInfos.filter(
         mediaInfo =>
           mediaInfo.type === 'video' || mediaInfo.type === 'encrypted_video',
       );
     }
     return mediaInfos;
   }, [activeTab, mediaInfos]);
 
   const renderItem = React.useCallback(
     ({ item, index }) => (
       <MediaGalleryItem
         item={item}
         index={index}
         memoizedStyles={memoizedStyles}
         threadID={threadID}
         verticalBounds={verticalBounds}
       />
     ),
     [threadID, verticalBounds, memoizedStyles],
   );
 
   const onEndReached = React.useCallback(async () => {
     // As the FlatList fetches more media, we set the offset to be the length
     // of mediaInfos. This will ensure that the next set of media is retrieved
     // from the starting point.
     const result = await callFetchThreadMedia({
       threadID,
       limit,
       offset: mediaInfos.length,
     });
     setMediaInfos([...mediaInfos, ...result.media]);
   }, [callFetchThreadMedia, mediaInfos, threadID, limit]);
 
   return (
     <View style={styles.flatListContainer}>
       <FlatList
         data={filteredMediaInfos}
         numColumns={numColumns}
         renderItem={renderItem}
         onEndReached={offset !== undefined ? onEndReached : null}
         onEndReachedThreshold={1}
       />
     </View>
   );
 }
 
 type MediaGalleryItemProps = {
   +item: Media,
   +index: number,
   +memoizedStyles: {
     +mediaContainer: ViewStyleProp,
     +mediaContainerWithMargin: ViewStyleProp,
     +media: ViewStyleProp,
   },
   +threadID: string,
   +verticalBounds: ?VerticalBounds,
 };
 
 function MediaGalleryItem(props: MediaGalleryItemProps): React.Node {
   const navigation = useNavigation();
   const route = useRoute();
   const ref = React.useRef(null);
   const onLayout = React.useCallback(() => {}, []);
   const { threadID, verticalBounds, memoizedStyles, item, index } = props;
 
   const mediaInfo: MediaInfo = React.useMemo(
     () => ({
       ...(item: Media),
       index,
     }),
     [item, index],
   );
 
   const navigateToMedia = React.useCallback(() => {
     ref.current?.measure((x, y, width, height, pageX, pageY) => {
       const initialCoordinates: LayoutCoordinates = {
         x: pageX,
         y: pageY,
         width,
         height,
       };
 
       navigation.navigate<'VideoPlaybackModal' | 'ImageModal'>({
         name:
           mediaInfo.type === 'video' || mediaInfo.type === 'encrypted_video'
             ? VideoPlaybackModalRouteName
             : ImageModalRouteName,
         key: `multimedia|${threadID}|${mediaInfo.id}`,
         params: {
           presentedFrom: route.key,
           mediaInfo,
           item,
           initialCoordinates,
           verticalBounds,
         },
       });
     });
   }, [navigation, route, threadID, mediaInfo, item, verticalBounds]);
 
   const containerStyle =
     index % numColumns === 0
       ? memoizedStyles.mediaContainer
       : memoizedStyles.mediaContainerWithMargin;
 
   return (
     <View key={item.id} style={containerStyle} onLayout={onLayout} ref={ref}>
       <GestureTouchableOpacity
         onPress={navigateToMedia}
         style={memoizedStyles.media}
       >
         <Multimedia mediaInfo={mediaInfo} spinnerColor="black" />
       </GestureTouchableOpacity>
     </View>
   );
 }
 
 const unboundStyles = {
   flatListContainer: {
     paddingHorizontal: 16,
   },
   mediaContainer: {
     height: 180,
     justifyContent: 'center',
     alignItems: 'center',
   },
   media: {
     height: 180,
   },
 };
 
 export default ThreadSettingsMediaGallery;
diff --git a/native/chat/settings/thread-settings-member-tooltip-modal.react.js b/native/chat/settings/thread-settings-member-tooltip-modal.react.js
index 64f4341f1..5ab148c22 100644
--- a/native/chat/settings/thread-settings-member-tooltip-modal.react.js
+++ b/native/chat/settings/thread-settings-member-tooltip-modal.react.js
@@ -1,114 +1,111 @@
 // @flow
 
 import * as React from 'react';
 
-import { removeUsersFromThread } from 'lib/actions/thread-actions.js';
+import { useRemoveUsersFromThread } from 'lib/actions/thread-actions.js';
 import { removeMemberFromThread } from 'lib/shared/thread-utils.js';
 import { stringForUser } from 'lib/shared/user-utils.js';
 import type { ThreadInfo, RelativeMemberInfo } from 'lib/types/thread-types.js';
-import {
-  useDispatchActionPromise,
-  useServerCall,
-} from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 
 import ThreadSettingsMemberTooltipButton from './thread-settings-member-tooltip-button.react.js';
 import type { AppNavigationProp } from '../../navigation/app-navigator.react';
 import { ChangeRolesScreenRouteName } from '../../navigation/route-names.js';
 import {
   createTooltip,
   type TooltipParams,
   type TooltipRoute,
   type BaseTooltipProps,
   type TooltipMenuProps,
 } from '../../tooltip/tooltip.react.js';
 import Alert from '../../utils/alert.js';
 
 export type ThreadSettingsMemberTooltipModalParams = TooltipParams<{
   +memberInfo: RelativeMemberInfo,
   +threadInfo: ThreadInfo,
 }>;
 
 function useOnRemoveUser(
   route: TooltipRoute<'ThreadSettingsMemberTooltipModal'>,
 ) {
   const { memberInfo, threadInfo } = route.params;
-  const boundRemoveUsersFromThread = useServerCall(removeUsersFromThread);
+  const boundRemoveUsersFromThread = useRemoveUsersFromThread();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const onConfirmRemoveUser = React.useCallback(
     () =>
       removeMemberFromThread(
         threadInfo,
         memberInfo,
         dispatchActionPromise,
         boundRemoveUsersFromThread,
       ),
     [threadInfo, memberInfo, dispatchActionPromise, boundRemoveUsersFromThread],
   );
 
   const userText = stringForUser(memberInfo);
   return React.useCallback(() => {
     Alert.alert(
       'Confirm removal',
       `Are you sure you want to remove ${userText} from this chat?`,
       [
         { text: 'Cancel', style: 'cancel' },
         { text: 'OK', onPress: onConfirmRemoveUser },
       ],
       { cancelable: true },
     );
   }, [onConfirmRemoveUser, userText]);
 }
 
 function useOnChangeRole(
   route: TooltipRoute<'ThreadSettingsMemberTooltipModal'>,
   navigation: AppNavigationProp<'ThreadSettingsMemberTooltipModal'>,
 ) {
   const { threadInfo, memberInfo } = route.params;
   return React.useCallback(() => {
     navigation.navigate<'ChangeRolesScreen'>({
       name: ChangeRolesScreenRouteName,
       params: {
         threadInfo,
         memberInfo,
         role: memberInfo.role,
       },
       key: route.key,
     });
   }, [navigation, route.key, threadInfo, memberInfo]);
 }
 
 function TooltipMenu(
   props: TooltipMenuProps<'ThreadSettingsMemberTooltipModal'>,
 ): React.Node {
   const { route, navigation, tooltipItem: TooltipItem } = props;
 
   const onChangeRole = useOnChangeRole(route, navigation);
   const onRemoveUser = useOnRemoveUser(route);
 
   return (
     <>
       <TooltipItem
         id="change_role"
         text="Change role"
         onPress={onChangeRole}
         key="change_role"
       />
       <TooltipItem
         id="remove_user"
         text="Remove user"
         onPress={onRemoveUser}
         key="remove_user"
       />
     </>
   );
 }
 
 const ThreadSettingsMemberTooltipModal: React.ComponentType<
   BaseTooltipProps<'ThreadSettingsMemberTooltipModal'>,
 > = createTooltip<'ThreadSettingsMemberTooltipModal'>(
   ThreadSettingsMemberTooltipButton,
   TooltipMenu,
 );
 
 export default ThreadSettingsMemberTooltipModal;
diff --git a/native/chat/toggle-pin-modal.react.js b/native/chat/toggle-pin-modal.react.js
index 5c14818c9..84fdbfb3e 100644
--- a/native/chat/toggle-pin-modal.react.js
+++ b/native/chat/toggle-pin-modal.react.js
@@ -1,167 +1,164 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { Text, View } from 'react-native';
 
 import {
-  toggleMessagePin,
+  useToggleMessagePin,
   toggleMessagePinActionTypes,
-} from 'lib/actions/thread-actions.js';
+} from 'lib/actions/message-actions.js';
 import type { RawMessageInfo } from 'lib/types/message-types.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
-import {
-  useServerCall,
-  useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 
 import MessageResult from './message-result.react.js';
 import Button from '../components/button.react.js';
 import Modal from '../components/modal.react.js';
 import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useStyles } from '../themes/colors.js';
 import type { ChatMessageInfoItemWithHeight } from '../types/chat-types';
 
 export type TogglePinModalParams = {
   +item: ChatMessageInfoItemWithHeight,
   +threadInfo: ThreadInfo,
 };
 
 type TogglePinModalProps = {
   +navigation: AppNavigationProp<'TogglePinModal'>,
   +route: NavigationRoute<'TogglePinModal'>,
 };
 
 function TogglePinModal(props: TogglePinModalProps): React.Node {
   const { navigation, route } = props;
   const { item, threadInfo } = route.params;
   const { messageInfo, isPinned } = item;
   const styles = useStyles(unboundStyles);
 
-  const callToggleMessagePin = useServerCall(toggleMessagePin);
+  const callToggleMessagePin = useToggleMessagePin();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const modalInfo = React.useMemo(() => {
     if (isPinned) {
       return {
         name: 'Remove Pinned Message',
         action: 'unpin',
         confirmationText:
           'Are you sure you want to remove this pinned message?',
         buttonText: 'Remove Pinned Message',
         buttonStyle: styles.removePinButton,
       };
     }
 
     return {
       name: 'Pin Message',
       action: 'pin',
       confirmationText:
         'You may pin this message to the channel you are ' +
         'currently viewing. To unpin a message, select the pinned messages ' +
         'icon in the channel.',
       buttonText: 'Pin Message',
       buttonStyle: styles.pinButton,
     };
   }, [isPinned, styles.pinButton, styles.removePinButton]);
 
   const createToggleMessagePinPromise = React.useCallback(async () => {
     invariant(messageInfo.id, 'messageInfo.id should be defined');
     const result = await callToggleMessagePin({
       messageID: messageInfo.id,
       action: modalInfo.action,
     });
     return ({
       newMessageInfos: result.newMessageInfos,
       threadID: result.threadID,
     }: { +newMessageInfos: $ReadOnlyArray<RawMessageInfo>, +threadID: string });
   }, [callToggleMessagePin, messageInfo.id, modalInfo.action]);
 
   const onPress = React.useCallback(() => {
     dispatchActionPromise(
       toggleMessagePinActionTypes,
       createToggleMessagePinPromise(),
     );
 
     navigation.goBack();
   }, [createToggleMessagePinPromise, dispatchActionPromise, navigation]);
 
   const onCancel = React.useCallback(() => {
     navigation.goBack();
   }, [navigation]);
 
   return (
     <Modal modalStyle={styles.modal}>
       <Text style={styles.modalHeader}>{modalInfo.name}</Text>
       <Text style={styles.modalConfirmationText}>
         {modalInfo.confirmationText}
       </Text>
       <MessageResult
         item={item}
         threadInfo={threadInfo}
         navigation={navigation}
         route={route}
         messageVerticalBounds={null}
         scrollable={true}
       />
       <View style={styles.buttonsContainer}>
         <Button style={modalInfo.buttonStyle} onPress={onPress}>
           <Text style={styles.textColor}>{modalInfo.buttonText}</Text>
         </Button>
         <Button style={styles.cancelButton} onPress={onCancel}>
           <Text style={styles.textColor}>Cancel</Text>
         </Button>
       </View>
     </Modal>
   );
 }
 
 const unboundStyles = {
   modal: {
     backgroundColor: 'modalForeground',
     borderColor: 'modalForegroundBorder',
   },
   modalHeader: {
     fontSize: 18,
     color: 'modalForegroundLabel',
   },
   modalConfirmationText: {
     fontSize: 12,
     color: 'modalBackgroundLabel',
     marginTop: 4,
   },
   buttonsContainer: {
     flexDirection: 'column',
     flex: 1,
     justifyContent: 'flex-end',
     marginBottom: 0,
     height: 72,
     paddingHorizontal: 16,
   },
   removePinButton: {
     borderRadius: 5,
     height: 48,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: 'vibrantRedButton',
   },
   pinButton: {
     borderRadius: 5,
     height: 48,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: 'purpleButton',
   },
   cancelButton: {
     borderRadius: 5,
     height: 48,
     justifyContent: 'center',
     alignItems: 'center',
   },
   textColor: {
     color: 'modalButtonLabel',
   },
 };
 
 export default TogglePinModal;
diff --git a/native/community-creation/community-configuration.react.js b/native/community-creation/community-configuration.react.js
index ccdec0008..1470ce0b2 100644
--- a/native/community-creation/community-configuration.react.js
+++ b/native/community-creation/community-configuration.react.js
@@ -1,214 +1,214 @@
 // @flow
 
 import * as React from 'react';
 import { Text, View } from 'react-native';
 
-import { newThread, newThreadActionTypes } from 'lib/actions/thread-actions.js';
+import {
+  useNewThread,
+  newThreadActionTypes,
+} from 'lib/actions/thread-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import type { NewThreadResult } from 'lib/types/thread-types.js';
-import {
-  useDispatchActionPromise,
-  useServerCall,
-} from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 
 import CommunityCreationKeyserverLabel from './community-creation-keyserver-label.react.js';
 import type { CommunityCreationNavigationProp } from './community-creation-navigator.react.js';
 import RegistrationButtonContainer from '../account/registration/registration-button-container.react.js';
 import RegistrationButton from '../account/registration/registration-button.react.js';
 import RegistrationContainer from '../account/registration/registration-container.react.js';
 import RegistrationContentContainer from '../account/registration/registration-content-container.react.js';
 import {
   ThreadSettingsCategoryFooter,
   ThreadSettingsCategoryHeader,
 } from '../chat/settings/thread-settings-category.react.js';
 import EnumSettingsOption from '../components/enum-settings-option.react.js';
 import TextInput from '../components/text-input.react.js';
 import { useCalendarQuery } from '../navigation/nav-selectors.js';
 import {
   CommunityCreationMembersRouteName,
   type NavigationRoute,
 } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useColors, useStyles } from '../themes/colors.js';
 
 type Props = {
   +navigation: CommunityCreationNavigationProp<'CommunityConfiguration'>,
   +route: NavigationRoute<'CommunityConfiguration'>,
 };
 
 const createNewCommunityLoadingStatusSelector =
   createLoadingStatusSelector(newThreadActionTypes);
 
 // eslint-disable-next-line no-unused-vars
 function CommunityConfiguration(props: Props): React.Node {
   const styles = useStyles(unboundStyles);
   const colors = useColors();
 
   const { navigate } = props.navigation;
 
   const dispatchActionPromise = useDispatchActionPromise();
 
-  const callNewThread = useServerCall(newThread);
+  const callNewThread = useNewThread();
   const calendarQueryFunc = useCalendarQuery();
 
   const createNewCommunityLoadingStatus: LoadingStatus = useSelector(
     createNewCommunityLoadingStatusSelector,
   );
 
   const [pendingCommunityName, setPendingCommunityName] = React.useState('');
   const [announcementSetting, setAnnouncementSetting] = React.useState(false);
   const [errorMessage, setErrorMessage] = React.useState<?string>();
 
   const onChangePendingCommunityName = React.useCallback(newValue => {
     setErrorMessage();
     setPendingCommunityName(newValue);
   }, []);
 
   const callCreateNewCommunity = React.useCallback(async () => {
     const calendarQuery = calendarQueryFunc();
     try {
       const newThreadResult: NewThreadResult = await callNewThread({
         name: pendingCommunityName,
         type: announcementSetting
           ? threadTypes.COMMUNITY_ANNOUNCEMENT_ROOT
           : threadTypes.COMMUNITY_ROOT,
         calendarQuery,
       });
       return newThreadResult;
     } catch (e) {
       setErrorMessage('Community creation failed. Please try again.');
       throw e;
     }
   }, [
     announcementSetting,
     calendarQueryFunc,
     callNewThread,
     pendingCommunityName,
   ]);
 
   const createNewCommunity = React.useCallback(async () => {
     setErrorMessage();
     const newThreadResultPromise = callCreateNewCommunity();
     dispatchActionPromise(newThreadActionTypes, newThreadResultPromise);
     const newThreadResult = await newThreadResultPromise;
 
     navigate<'CommunityCreationMembers'>({
       name: CommunityCreationMembersRouteName,
       params: {
         announcement: announcementSetting,
         threadID: newThreadResult.newThreadID,
       },
     });
   }, [
     announcementSetting,
     callCreateNewCommunity,
     dispatchActionPromise,
     navigate,
   ]);
 
   const onCheckBoxPress = React.useCallback(() => {
     setErrorMessage();
     setAnnouncementSetting(!announcementSetting);
   }, [announcementSetting]);
 
   const enumSettingsOptionDescription =
     'Make it so only admins can post to ' +
     'the root channel of the community.';
 
   return (
     <RegistrationContainer>
       <RegistrationContentContainer style={styles.containerPaddingOverride}>
         <CommunityCreationKeyserverLabel />
         <ThreadSettingsCategoryHeader type="full" title="COMMUNITY INFO" />
         <View style={styles.communityNameRow}>
           <Text style={styles.communityNameLabel}>Name</Text>
           <TextInput
             style={styles.communityNamePendingValue}
             placeholder="Community Name"
             placeholderTextColor={colors.panelSecondaryForegroundBorder}
             value={pendingCommunityName}
             onChangeText={onChangePendingCommunityName}
             editable={true}
           />
         </View>
         <ThreadSettingsCategoryFooter type="full" />
 
         <View style={styles.communityNameNoticeContainer}>
           <Text style={styles.communityNameNoticeText}>
             You may edit your community&rsquo;s image and name later.
           </Text>
         </View>
 
         <ThreadSettingsCategoryHeader type="full" title="OPTIONAL SETTINGS" />
         <EnumSettingsOption
           icon="megaphone"
           name="Announcement root"
           description={enumSettingsOptionDescription}
           enumValue={announcementSetting}
           onEnumValuePress={onCheckBoxPress}
         />
         <ThreadSettingsCategoryFooter type="full" />
         <RegistrationButtonContainer>
           <RegistrationButton
             onPress={createNewCommunity}
             label="Create community"
             variant={
               createNewCommunityLoadingStatus === 'loading'
                 ? 'loading'
                 : 'enabled'
             }
           />
         </RegistrationButtonContainer>
         <View style={styles.errorMessageContainer}>
           <Text style={styles.errorMessageText}>{errorMessage}</Text>
         </View>
       </RegistrationContentContainer>
     </RegistrationContainer>
   );
 }
 
 const unboundStyles = {
   containerPaddingOverride: {
     padding: 0,
   },
   communityNameRow: {
     backgroundColor: 'panelForeground',
     flexDirection: 'row',
     paddingHorizontal: 24,
     paddingVertical: 8,
   },
   communityNameLabel: {
     color: 'panelForegroundTertiaryLabel',
     fontSize: 16,
     width: 96,
   },
   communityNamePendingValue: {
     color: 'panelForegroundSecondaryLabel',
     flex: 1,
     fontFamily: 'Arial',
     fontSize: 16,
     margin: 0,
     paddingLeft: 4,
     paddingRight: 0,
     paddingVertical: 0,
     borderBottomColor: 'transparent',
   },
   communityNameNoticeContainer: {
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'center',
   },
   communityNameNoticeText: {
     color: 'panelForegroundTertiaryLabel',
   },
   errorMessageContainer: {
     alignItems: 'center',
   },
   errorMessageText: {
     color: 'redText',
   },
 };
 
 export default CommunityConfiguration;
diff --git a/native/input/input-state-container.react.js b/native/input/input-state-container.react.js
index 9c917da4a..c0e75a6bb 100644
--- a/native/input/input-state-container.react.js
+++ b/native/input/input-state-container.react.js
@@ -1,1732 +1,1732 @@
 // @flow
 
 import * as FileSystem from 'expo-file-system';
 import invariant from 'invariant';
 import * as React from 'react';
 import { Platform } from 'react-native';
 import { useDispatch } from 'react-redux';
 import { createSelector } from 'reselect';
 
 import {
   createLocalMessageActionType,
   sendMultimediaMessageActionTypes,
   useSendMultimediaMessage,
   sendTextMessageActionTypes,
   useSendTextMessage,
 } from 'lib/actions/message-actions.js';
 import type {
   SendMultimediaMessageInput,
   SendTextMessageInput,
 } from 'lib/actions/message-actions.js';
 import { queueReportsActionType } from 'lib/actions/report-actions.js';
-import { newThread } from 'lib/actions/thread-actions.js';
+import { useNewThread } from 'lib/actions/thread-actions.js';
 import {
   uploadMultimedia,
   uploadMediaMetadata,
   updateMultimediaMessageMediaActionType,
   blobServiceUpload,
   type MultimediaUploadCallbacks,
   type MultimediaUploadExtras,
   type BlobServiceUploadAction,
 } from 'lib/actions/upload-actions.js';
 import commStaffCommunity from 'lib/facts/comm-staff-community.js';
 import { pathFromURI, replaceExtension } from 'lib/media/file-utils.js';
 import {
   isLocalUploadID,
   getNextLocalUploadID,
 } from 'lib/media/media-utils.js';
 import { videoDurationLimit } from 'lib/media/video-utils.js';
 import {
   createLoadingStatusSelector,
   combineLoadingStatuses,
 } from 'lib/selectors/loading-selectors.js';
 import {
   createMediaMessageInfo,
   useNextLocalID,
   useMessageCreationSideEffectsFunc,
 } from 'lib/shared/message-utils.js';
 import type { CreationSideEffectsFunc } from 'lib/shared/messages/message-spec.js';
 import {
   createRealThreadFromPendingThread,
   threadIsPending,
   threadIsPendingSidebar,
   patchThreadInfoToIncludeMentionedMembersOfParent,
   threadInfoInsideCommunity,
 } from 'lib/shared/thread-utils.js';
 import type { CalendarQuery } from 'lib/types/entry-types.js';
 import type {
   UploadMultimediaResult,
   Media,
   NativeMediaSelection,
   MediaMissionResult,
   MediaMission,
   UploadMediaMetadataRequest,
 } 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 { getMediaMessageServerDBContentsFromMedia } from 'lib/types/messages/media.js';
 import type { RawTextMessageInfo } from 'lib/types/messages/text.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import {
   type MediaMissionReportCreationRequest,
   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 type {
   CallServerEndpointOptions,
   CallServerEndpointResponse,
 } from 'lib/utils/call-server-endpoint.js';
 import { getConfig } from 'lib/utils/config.js';
 import { getMessageForException, cloneError } from 'lib/utils/errors.js';
 import { values } from 'lib/utils/objects.js';
 import {
   generateReportID,
   useIsReportEnabled,
 } from 'lib/utils/report-utils.js';
 
 import {
   type EditInputBarMessageParameters,
   InputStateContext,
   type PendingMultimediaUploads,
   type MultimediaProcessingStep,
 } from './input-state.js';
 import { encryptMedia } from '../media/encryption-utils.js';
 import { disposeTempFile } from '../media/file-utils.js';
 import { processMedia } from '../media/media-utils.js';
 import { displayActionResultModal } from '../navigation/action-result-modal.js';
 import { useCalendarQuery } from '../navigation/nav-selectors.js';
 import { useSelector } from '../redux/redux-utils.js';
 import blobServiceUploadHandler from '../utils/blob-service-upload.js';
 import { useStaffCanSee } from '../utils/staff-utils.js';
 
 type MediaIDs =
   | { +type: 'photo', +localMediaID: string }
   | { +type: 'video', +localMediaID: string, +localThumbnailID: string };
 type UploadFileInput = {
   +selection: NativeMediaSelection,
   +ids: MediaIDs,
 };
 type CompletedUploads = { +[localMessageID: string]: ?Set<string> };
 
 type BaseProps = {
   +children: React.Node,
 };
 type Props = {
   ...BaseProps,
   +viewerID: ?string,
   +nextLocalID: string,
   +messageStoreMessages: { +[id: string]: RawMessageInfo },
   +ongoingMessageCreation: boolean,
   +hasWiFi: boolean,
   +mediaReportsEnabled: boolean,
   +calendarQuery: () => CalendarQuery,
   +dispatch: Dispatch,
   +staffCanSee: boolean,
   +dispatchActionPromise: DispatchActionPromise,
   +uploadMultimedia: (
     multimedia: Object,
     extras: MultimediaUploadExtras,
     callbacks: MultimediaUploadCallbacks,
   ) => Promise<UploadMultimediaResult>,
   +uploadMediaMetadata: (
     input: UploadMediaMetadataRequest,
   ) => Promise<UploadMultimediaResult>,
   +blobServiceUpload: BlobServiceUploadAction,
   +sendMultimediaMessage: (
     input: SendMultimediaMessageInput,
   ) => Promise<SendMessageResult>,
   +sendTextMessage: (input: SendTextMessageInput) => Promise<SendMessageResult>,
   +newThread: (request: ClientNewThreadRequest) => Promise<NewThreadResult>,
   +textMessageCreationSideEffectsFunc: CreationSideEffectsFunc<RawTextMessageInfo>,
 };
 type State = {
   +pendingUploads: PendingMultimediaUploads,
 };
 class InputStateContainer extends React.PureComponent<Props, State> {
   state: State = {
     pendingUploads: {},
   };
   sendCallbacks: Array<() => void> = [];
   activeURIs = new Map();
   editInputBarCallbacks: Array<
     (params: EditInputBarMessageParameters) => void,
   > = [];
   scrollToMessageCallbacks: Array<(messageID: string) => void> = [];
   pendingThreadCreations = new Map<string, Promise<string>>();
   pendingThreadUpdateHandlers = new Map<string, (ThreadInfo) => mixed>();
   // 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 = new Set<string>();
 
   static getCompletedUploads(props: Props, state: State): CompletedUploads {
     const completedUploads = {};
     for (const localMessageID in state.pendingUploads) {
       const messagePendingUploads = state.pendingUploads[localMessageID];
       const rawMessageInfo = props.messageStoreMessages[localMessageID];
       if (!rawMessageInfo) {
         continue;
       }
       invariant(
         rawMessageInfo.type === messageTypes.IMAGES ||
           rawMessageInfo.type === messageTypes.MULTIMEDIA,
         `rawMessageInfo ${localMessageID} should be multimedia`,
       );
 
       let allUploadsComplete = true;
       const completedUploadIDs = new Set(Object.keys(messagePendingUploads));
       for (const singleMedia of rawMessageInfo.media) {
         if (isLocalUploadID(singleMedia.id)) {
           allUploadsComplete = false;
           completedUploadIDs.delete(singleMedia.id);
         }
       }
 
       if (allUploadsComplete) {
         completedUploads[localMessageID] = null;
       } else if (completedUploadIDs.size > 0) {
         completedUploads[localMessageID] = completedUploadIDs;
       }
     }
     return completedUploads;
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (this.props.viewerID !== prevProps.viewerID) {
       this.setState({ pendingUploads: {} });
       return;
     }
 
     const currentlyComplete = InputStateContainer.getCompletedUploads(
       this.props,
       this.state,
     );
     const previouslyComplete = InputStateContainer.getCompletedUploads(
       prevProps,
       prevState,
     );
 
     const newPendingUploads = {};
     let pendingUploadsChanged = false;
     const readyMessageIDs = [];
     for (const localMessageID in this.state.pendingUploads) {
       const messagePendingUploads = this.state.pendingUploads[localMessageID];
       const prevRawMessageInfo = prevProps.messageStoreMessages[localMessageID];
       const rawMessageInfo = this.props.messageStoreMessages[localMessageID];
       const completedUploadIDs = currentlyComplete[localMessageID];
       const previouslyCompletedUploadIDs = previouslyComplete[localMessageID];
 
       if (!rawMessageInfo && prevRawMessageInfo) {
         pendingUploadsChanged = true;
         continue;
       } else if (completedUploadIDs === null) {
         // All of this message's uploads have been completed
         newPendingUploads[localMessageID] = {};
         if (previouslyCompletedUploadIDs !== null) {
           readyMessageIDs.push(localMessageID);
           pendingUploadsChanged = true;
         }
         continue;
       } else if (!completedUploadIDs) {
         // Nothing has been completed
         newPendingUploads[localMessageID] = messagePendingUploads;
         continue;
       }
 
       const newUploads = {};
       let uploadsChanged = false;
       for (const localUploadID in messagePendingUploads) {
         if (!completedUploadIDs.has(localUploadID)) {
           newUploads[localUploadID] = messagePendingUploads[localUploadID];
         } else if (
           !previouslyCompletedUploadIDs ||
           !previouslyCompletedUploadIDs.has(localUploadID)
         ) {
           uploadsChanged = true;
         }
       }
 
       if (uploadsChanged) {
         pendingUploadsChanged = true;
         newPendingUploads[localMessageID] = newUploads;
       } else {
         newPendingUploads[localMessageID] = messagePendingUploads;
       }
     }
     if (pendingUploadsChanged) {
       this.setState({ pendingUploads: newPendingUploads });
     }
 
     for (const localMessageID of readyMessageIDs) {
       const rawMessageInfo = this.props.messageStoreMessages[localMessageID];
       if (!rawMessageInfo) {
         continue;
       }
       invariant(
         rawMessageInfo.type === messageTypes.IMAGES ||
           rawMessageInfo.type === messageTypes.MULTIMEDIA,
         `rawMessageInfo ${localMessageID} should be multimedia`,
       );
       this.dispatchMultimediaMessageAction(rawMessageInfo);
     }
   }
 
   async dispatchMultimediaMessageAction(messageInfo: RawMultimediaMessageInfo) {
     if (!threadIsPending(messageInfo.threadID)) {
       this.props.dispatchActionPromise(
         sendMultimediaMessageActionTypes,
         this.sendMultimediaMessageAction(messageInfo),
         undefined,
         messageInfo,
       );
       return;
     }
 
     this.props.dispatch({
       type: sendMultimediaMessageActionTypes.started,
       payload: messageInfo,
     });
 
     let newThreadID = null;
     try {
       const threadCreationPromise = this.pendingThreadCreations.get(
         messageInfo.threadID,
       );
       if (!threadCreationPromise) {
         // When we create or retry multimedia message, we add a promise to
         // pendingThreadCreations map. This promise can be removed in
         // sendMultimediaMessage and sendTextMessage methods. When any of these
         // method remove the promise, it has to be settled. If the promise was
         // fulfilled, this method would be called with realized thread, so we
         // can conclude that the promise was rejected. We don't have enough info
         // here to retry the thread creation, but we can mark the message as
         // failed. Then the retry will be possible and promise will be created
         // again.
         throw new Error('Thread creation failed');
       }
       newThreadID = await threadCreationPromise;
     } catch (e) {
       const copy = cloneError(e);
       copy.localID = messageInfo.localID;
       copy.threadID = messageInfo.threadID;
       this.props.dispatch({
         type: sendMultimediaMessageActionTypes.failed,
         payload: copy,
         error: true,
       });
       return;
     } finally {
       this.pendingThreadCreations.delete(messageInfo.threadID);
     }
 
     const newMessageInfo = {
       ...messageInfo,
       threadID: newThreadID,
       time: Date.now(),
     };
     this.props.dispatchActionPromise(
       sendMultimediaMessageActionTypes,
       this.sendMultimediaMessageAction(newMessageInfo),
       undefined,
       newMessageInfo,
     );
   }
 
   async sendMultimediaMessageAction(
     messageInfo: RawMultimediaMessageInfo,
   ): Promise<SendMessagePayload> {
     const { localID, threadID } = messageInfo;
     invariant(
       localID !== null && localID !== undefined,
       'localID should be set',
     );
     const sidebarCreation =
       this.pendingSidebarCreationMessageLocalIDs.has(localID);
     const mediaMessageContents = getMediaMessageServerDBContentsFromMedia(
       messageInfo.media,
     );
     try {
       const result = await this.props.sendMultimediaMessage({
         threadID,
         localID,
         mediaMessageContents,
         sidebarCreation,
       });
       this.pendingSidebarCreationMessageLocalIDs.delete(localID);
       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;
     }
   }
 
   inputStateSelector = createSelector(
     (state: State) => state.pendingUploads,
     (pendingUploads: PendingMultimediaUploads) => ({
       pendingUploads,
       sendTextMessage: this.sendTextMessage,
       sendMultimediaMessage: this.sendMultimediaMessage,
       editInputMessage: this.editInputMessage,
       addEditInputMessageListener: this.addEditInputMessageListener,
       removeEditInputMessageListener: this.removeEditInputMessageListener,
       messageHasUploadFailure: this.messageHasUploadFailure,
       retryMessage: this.retryMessage,
       registerSendCallback: this.registerSendCallback,
       unregisterSendCallback: this.unregisterSendCallback,
       uploadInProgress: this.uploadInProgress,
       reportURIDisplayed: this.reportURIDisplayed,
       setPendingThreadUpdateHandler: this.setPendingThreadUpdateHandler,
       scrollToMessage: this.scrollToMessage,
       addScrollToMessageListener: this.addScrollToMessageListener,
       removeScrollToMessageListener: this.removeScrollToMessageListener,
     }),
   );
 
   scrollToMessage = (messageID: string) => {
     this.scrollToMessageCallbacks.forEach(callback => callback(messageID));
   };
 
   addScrollToMessageListener = (callback: (messageID: string) => void) => {
     this.scrollToMessageCallbacks.push(callback);
   };
 
   removeScrollToMessageListener = (
     callbackScrollToMessage: (messageID: string) => void,
   ) => {
     this.scrollToMessageCallbacks = this.scrollToMessageCallbacks.filter(
       candidate => candidate !== callbackScrollToMessage,
     );
   };
 
   uploadInProgress = () => {
     if (this.props.ongoingMessageCreation) {
       return true;
     }
     const { pendingUploads } = this.state;
     return values(pendingUploads).some(messagePendingUploads =>
       values(messagePendingUploads).some(upload => !upload.failed),
     );
   };
 
   sendTextMessage = async (
     messageInfo: RawTextMessageInfo,
     inputThreadInfo: ThreadInfo,
     parentThreadInfo: ?ThreadInfo,
   ) => {
     this.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) {
         const pendingThreadUpdateHandler = this.pendingThreadUpdateHandlers.get(
           threadInfo.id,
         );
         pendingThreadUpdateHandler?.(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(),
     };
     const newThreadInfo = {
       ...threadInfo,
       id: newThreadID,
     };
     this.props.dispatchActionPromise(
       sendTextMessageActionTypes,
       this.sendTextMessageAction(
         newMessageInfo,
         newThreadInfo,
         parentThreadInfo,
       ),
       undefined,
       newMessageInfo,
     );
   };
 
   startThreadCreation(threadInfo: ThreadInfo): 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;
   }
 
   async sendTextMessageAction(
     messageInfo: RawTextMessageInfo,
     threadInfo: ThreadInfo,
     parentThreadInfo: ?ThreadInfo,
   ): 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;
     }
   }
 
   shouldEncryptMedia(threadInfo: ThreadInfo): boolean {
     return threadInfoInsideCommunity(threadInfo, commStaffCommunity.id);
   }
 
   sendMultimediaMessage = async (
     selections: $ReadOnlyArray<NativeMediaSelection>,
     threadInfo: ThreadInfo,
   ) => {
     this.sendCallbacks.forEach(callback => callback());
     const localMessageID = this.props.nextLocalID;
     this.startThreadCreation(threadInfo);
 
     if (threadIsPendingSidebar(threadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localMessageID);
     }
 
     const uploadFileInputs = [],
       media = [];
     for (const selection of selections) {
       const localMediaID = getNextLocalUploadID();
       let ids;
       if (
         selection.step === 'photo_library' ||
         selection.step === 'photo_capture' ||
         selection.step === 'photo_paste'
       ) {
         media.push({
           id: localMediaID,
           uri: selection.uri,
           type: 'photo',
           dimensions: selection.dimensions,
           localMediaSelection: selection,
           thumbHash: null,
         });
         ids = { type: 'photo', localMediaID };
       }
       const localThumbnailID = getNextLocalUploadID();
       if (selection.step === 'video_library') {
         media.push({
           id: localMediaID,
           uri: selection.uri,
           type: 'video',
           dimensions: selection.dimensions,
           localMediaSelection: selection,
           loop: false,
           thumbnailID: localThumbnailID,
           thumbnailURI: selection.uri,
           thumbnailThumbHash: null,
         });
         ids = { type: 'video', localMediaID, localThumbnailID };
       }
       invariant(ids, `unexpected MediaSelection ${selection.step}`);
       uploadFileInputs.push({ selection, ids });
     }
 
     const pendingUploads = {};
     for (const uploadFileInput of uploadFileInputs) {
       const { localMediaID } = uploadFileInput.ids;
       pendingUploads[localMediaID] = {
         failed: false,
         progressPercent: 0,
         processingStep: null,
       };
       if (uploadFileInput.ids.type === 'video') {
         const { localThumbnailID } = uploadFileInput.ids;
         pendingUploads[localThumbnailID] = {
           failed: false,
           progressPercent: 0,
           processingStep: null,
         };
       }
     }
 
     this.setState(
       prevState => {
         return {
           pendingUploads: {
             ...prevState.pendingUploads,
             [localMessageID]: pendingUploads,
           },
         };
       },
       () => {
         const creatorID = this.props.viewerID;
         invariant(creatorID, 'need viewer ID in order to send a message');
         const messageInfo = createMediaMessageInfo(
           {
             localID: localMessageID,
             threadID: threadInfo.id,
             creatorID,
             media,
           },
           { forceMultimediaMessageType: this.shouldEncryptMedia(threadInfo) },
         );
         this.props.dispatch({
           type: createLocalMessageActionType,
           payload: messageInfo,
         });
       },
     );
 
     await this.uploadFiles(localMessageID, uploadFileInputs, threadInfo);
   };
 
   async uploadFiles(
     localMessageID: string,
     uploadFileInputs: $ReadOnlyArray<UploadFileInput>,
     threadInfo: ThreadInfo,
   ) {
     const results = await Promise.all(
       uploadFileInputs.map(uploadFileInput =>
         this.uploadFile(localMessageID, uploadFileInput, threadInfo),
       ),
     );
     const errors = [...new Set(results.filter(Boolean))];
     if (errors.length > 0) {
       displayActionResultModal(errors.join(', ') + ' :(');
     }
   }
 
   async uploadFile(
     localMessageID: string,
     uploadFileInput: UploadFileInput,
     threadInfo: ThreadInfo,
   ): Promise<?string> {
     const { ids, selection } = uploadFileInput;
     const { localMediaID } = ids;
     const start = selection.sendTime;
     const steps = [selection];
     let encryptionSteps = [];
     let serverID;
     let userTime;
     let errorMessage;
     let reportPromise;
     const filesToDispose = [];
 
     const onUploadFinished = async (result: MediaMissionResult) => {
       if (!this.props.mediaReportsEnabled) {
         return errorMessage;
       }
       if (reportPromise) {
         const finalSteps = await reportPromise;
         steps.push(...finalSteps);
         steps.push(...encryptionSteps);
       }
       const totalTime = Date.now() - start;
       userTime = userTime ? userTime : totalTime;
       this.queueMediaMissionReport(
         { localID: localMediaID, localMessageID, serverID },
         { steps, result, totalTime, userTime },
       );
       return errorMessage;
     };
     const onUploadFailed = (mediaID: string, message: string) => {
       errorMessage = message;
       this.handleUploadFailure(localMessageID, mediaID);
       userTime = Date.now() - start;
     };
 
     const onTranscodingProgress = (percent: number) => {
       this.setProgress(localMessageID, localMediaID, 'transcoding', percent);
     };
 
     let processedMedia;
     const processingStart = Date.now();
     try {
       const processMediaReturn = processMedia(selection, {
         hasWiFi: this.props.hasWiFi,
         finalFileHeaderCheck: this.props.staffCanSee,
         onTranscodingProgress,
       });
       reportPromise = processMediaReturn.reportPromise;
       const processResult = await processMediaReturn.resultPromise;
       if (!processResult.success) {
         const message =
           processResult.reason === 'video_too_long'
             ? `can't do vids longer than ${videoDurationLimit}min`
             : 'processing failed';
         onUploadFailed(localMediaID, message);
         return await onUploadFinished(processResult);
       }
       if (processResult.shouldDisposePath) {
         filesToDispose.push(processResult.shouldDisposePath);
       }
       processedMedia = processResult;
     } catch (e) {
       onUploadFailed(localMediaID, 'processing failed');
       return await onUploadFinished({
         success: false,
         reason: 'processing_exception',
         time: Date.now() - processingStart,
         exceptionMessage: getMessageForException(e),
       });
     }
 
     if (this.shouldEncryptMedia(threadInfo)) {
       const encryptionStart = Date.now();
       try {
         const { result: encryptionResult, ...encryptionReturn } =
           await encryptMedia(processedMedia);
         encryptionSteps = encryptionReturn.steps;
         if (!encryptionResult.success) {
           onUploadFailed(localMediaID, encryptionResult.reason);
           return await onUploadFinished(encryptionResult);
         }
         if (encryptionResult.shouldDisposePath) {
           filesToDispose.push(encryptionResult.shouldDisposePath);
         }
         processedMedia = encryptionResult;
       } catch (e) {
         onUploadFailed(localMediaID, 'encryption failed');
         return await onUploadFinished({
           success: false,
           reason: 'encryption_exception',
           time: Date.now() - encryptionStart,
           exceptionMessage: getMessageForException(e),
         });
       }
     }
 
     const { uploadURI, filename, mime } = processedMedia;
 
     const { hasWiFi } = this.props;
 
     const uploadStart = Date.now();
     let uploadExceptionMessage,
       uploadResult,
       uploadThumbnailResult,
       mediaMissionResult;
     try {
       const uploadPromises = [];
       if (
         this.useBlobServiceUploads &&
         (processedMedia.mediaType === 'encrypted_photo' ||
           processedMedia.mediaType === 'encrypted_video')
       ) {
         uploadPromises.push(
           this.props.blobServiceUpload({
             input: {
               blobInput: {
                 type: 'uri',
                 uri: uploadURI,
                 filename: filename,
                 mimeType: mime,
               },
               blobHash: processedMedia.blobHash,
               encryptionKey: processedMedia.encryptionKey,
               dimensions: processedMedia.dimensions,
               thumbHash:
                 processedMedia.mediaType === 'encrypted_photo'
                   ? processedMedia.thumbHash
                   : null,
             },
             callbacks: {
               blobServiceUploadHandler,
               onProgress: (percent: number) => {
                 this.setProgress(
                   localMessageID,
                   localMediaID,
                   'uploading',
                   percent,
                 );
               },
             },
           }),
         );
 
         if (processedMedia.mediaType === 'encrypted_video') {
           uploadPromises.push(
             this.props.blobServiceUpload({
               input: {
                 blobInput: {
                   type: 'uri',
                   uri: processedMedia.uploadThumbnailURI,
                   filename: replaceExtension(`thumb${filename}`, 'jpg'),
                   mimeType: 'image/jpeg',
                 },
                 blobHash: processedMedia.thumbnailBlobHash,
                 encryptionKey: processedMedia.thumbnailEncryptionKey,
                 loop: false,
                 dimensions: processedMedia.dimensions,
                 thumbHash: processedMedia.thumbHash,
               },
               callbacks: {
                 blobServiceUploadHandler,
               },
             }),
           );
         }
         [uploadResult, uploadThumbnailResult] = await Promise.all(
           uploadPromises,
         );
       } else {
         uploadPromises.push(
           this.props.uploadMultimedia(
             { uri: uploadURI, name: filename, type: mime },
             {
               ...processedMedia.dimensions,
               loop:
                 processedMedia.mediaType === 'video' ||
                 processedMedia.mediaType === 'encrypted_video'
                   ? processedMedia.loop
                   : undefined,
               encryptionKey: processedMedia.encryptionKey,
               thumbHash:
                 processedMedia.mediaType === 'photo' ||
                 processedMedia.mediaType === 'encrypted_photo'
                   ? processedMedia.thumbHash
                   : null,
             },
             {
               onProgress: (percent: number) =>
                 this.setProgress(
                   localMessageID,
                   localMediaID,
                   'uploading',
                   percent,
                 ),
               uploadBlob: this.uploadBlob,
             },
           ),
         );
 
         if (
           processedMedia.mediaType === 'video' ||
           processedMedia.mediaType === 'encrypted_video'
         ) {
           uploadPromises.push(
             this.props.uploadMultimedia(
               {
                 uri: processedMedia.uploadThumbnailURI,
                 name: replaceExtension(`thumb${filename}`, 'jpg'),
                 type: 'image/jpeg',
               },
               {
                 ...processedMedia.dimensions,
                 loop: false,
                 encryptionKey: processedMedia.thumbnailEncryptionKey,
                 thumbHash: processedMedia.thumbHash,
               },
               {
                 uploadBlob: this.uploadBlob,
               },
             ),
           );
         }
         [uploadResult, uploadThumbnailResult] = await Promise.all(
           uploadPromises,
         );
       }
       mediaMissionResult = { success: true };
     } catch (e) {
       uploadExceptionMessage = getMessageForException(e);
       onUploadFailed(localMediaID, 'upload failed');
       mediaMissionResult = {
         success: false,
         reason: 'http_upload_failed',
         exceptionMessage: uploadExceptionMessage,
       };
     }
 
     if (
       ((processedMedia.mediaType === 'photo' ||
         processedMedia.mediaType === 'encrypted_photo') &&
         uploadResult) ||
       ((processedMedia.mediaType === 'video' ||
         processedMedia.mediaType === 'encrypted_video') &&
         uploadResult &&
         uploadThumbnailResult)
     ) {
       const { encryptionKey } = processedMedia;
       const { id, uri, dimensions, loop } = uploadResult;
       serverID = id;
 
       const mediaSourcePayload =
         processedMedia.mediaType === 'encrypted_photo' ||
         processedMedia.mediaType === 'encrypted_video'
           ? {
               type: processedMedia.mediaType,
               blobURI: uri,
               encryptionKey,
             }
           : {
               type: uploadResult.mediaType,
               uri,
             };
       let updateMediaPayload = {
         messageID: localMessageID,
         currentMediaID: localMediaID,
         mediaUpdate: {
           id,
           ...mediaSourcePayload,
           dimensions,
           localMediaSelection: undefined,
           loop: uploadResult.mediaType === 'video' ? loop : undefined,
         },
       };
 
       if (
         processedMedia.mediaType === 'video' ||
         processedMedia.mediaType === 'encrypted_video'
       ) {
         invariant(uploadThumbnailResult, 'uploadThumbnailResult exists');
         const { uri: thumbnailURI, id: thumbnailID } = uploadThumbnailResult;
         const { thumbnailEncryptionKey, thumbHash: thumbnailThumbHash } =
           processedMedia;
 
         if (processedMedia.mediaType === 'encrypted_video') {
           updateMediaPayload = {
             ...updateMediaPayload,
             mediaUpdate: {
               ...updateMediaPayload.mediaUpdate,
               thumbnailID,
               thumbnailBlobURI: thumbnailURI,
               thumbnailEncryptionKey,
               thumbnailThumbHash,
             },
           };
         } else {
           updateMediaPayload = {
             ...updateMediaPayload,
             mediaUpdate: {
               ...updateMediaPayload.mediaUpdate,
               thumbnailID,
               thumbnailURI,
               thumbnailThumbHash,
             },
           };
         }
       } else {
         updateMediaPayload = {
           ...updateMediaPayload,
           mediaUpdate: {
             ...updateMediaPayload.mediaUpdate,
             thumbHash: processedMedia.thumbHash,
           },
         };
       }
 
       // When we dispatch this action, it updates Redux and triggers the
       // componentDidUpdate in this class. componentDidUpdate will handle
       // calling dispatchMultimediaMessageAction once all the uploads are
       // complete, and does not wait until this function concludes.
       this.props.dispatch({
         type: updateMultimediaMessageMediaActionType,
         payload: updateMediaPayload,
       });
       userTime = Date.now() - start;
     }
 
     const processSteps = await reportPromise;
     reportPromise = null;
     steps.push(...processSteps);
     steps.push(...encryptionSteps);
     steps.push({
       step: 'upload',
       success: !!uploadResult,
       exceptionMessage: uploadExceptionMessage,
       time: Date.now() - uploadStart,
       inputFilename: filename,
       outputMediaType: uploadResult && uploadResult.mediaType,
       outputURI: uploadResult && uploadResult.uri,
       outputDimensions: uploadResult && uploadResult.dimensions,
       outputLoop: uploadResult && uploadResult.loop,
       hasWiFi,
     });
 
     const cleanupPromises = [];
 
     if (filesToDispose.length > 0) {
       // If processMedia needed to do any transcoding before upload, we dispose
       // of the resultant temporary file here. Since the transcoded temporary
       // file is only used for upload, we can dispose of it after processMedia
       // (reportPromise) and the upload are complete
       filesToDispose.forEach(shouldDisposePath => {
         cleanupPromises.push(
           (async () => {
             const disposeStep = await disposeTempFile(shouldDisposePath);
             steps.push(disposeStep);
           })(),
         );
       });
     }
 
     // if there's a thumbnail we'll temporarily unlink it here
     // instead of in media-utils, will be changed in later diffs
     if (processedMedia.mediaType === 'video') {
       const { uploadThumbnailURI } = processedMedia;
       cleanupPromises.push(
         (async () => {
           const { steps: clearSteps, result: thumbnailPath } =
             await this.waitForCaptureURIUnload(uploadThumbnailURI);
           steps.push(...clearSteps);
           if (!thumbnailPath) {
             return;
           }
           const disposeStep = await disposeTempFile(thumbnailPath);
           steps.push(disposeStep);
         })(),
       );
     }
 
     if (selection.captureTime || selection.step === 'photo_paste') {
       // If we are uploading a newly captured photo, we dispose of the original
       // file here. Note that we try to save photo captures to the camera roll
       // if we have permission. Even if we fail, this temporary file isn't
       // visible to the user, so there's no point in keeping it around. Since
       // the initial URI is used in rendering paths, we have to wait for it to
       // be replaced with the remote URI before we can dispose. Check out the
       // Multimedia component to see how the URIs get switched out.
       const captureURI = selection.uri;
       cleanupPromises.push(
         (async () => {
           const { steps: clearSteps, result: capturePath } =
             await this.waitForCaptureURIUnload(captureURI);
           steps.push(...clearSteps);
           if (!capturePath) {
             return;
           }
           const disposeStep = await disposeTempFile(capturePath);
           steps.push(disposeStep);
         })(),
       );
     }
 
     await Promise.all(cleanupPromises);
 
     return await onUploadFinished(mediaMissionResult);
   }
 
   setProgress(
     localMessageID: string,
     localUploadID: string,
     processingStep: MultimediaProcessingStep,
     progressPercent: number,
   ) {
     this.setState(prevState => {
       const pendingUploads = prevState.pendingUploads[localMessageID];
       if (!pendingUploads) {
         return {};
       }
       const pendingUpload = pendingUploads[localUploadID];
       if (!pendingUpload) {
         return {};
       }
       const newOutOfHundred = Math.floor(progressPercent * 100);
       const oldOutOfHundred = Math.floor(pendingUpload.progressPercent * 100);
       if (newOutOfHundred === oldOutOfHundred) {
         return {};
       }
       const newPendingUploads = {
         ...pendingUploads,
         [localUploadID]: {
           ...pendingUpload,
           progressPercent,
           processingStep,
         },
       };
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [localMessageID]: newPendingUploads,
         },
       };
     });
   }
 
   uploadBlob = async (
     url: string,
     cookie: ?string,
     sessionID: ?string,
     input: { [key: string]: mixed },
     options?: ?CallServerEndpointOptions,
   ): Promise<CallServerEndpointResponse> => {
     invariant(
       cookie &&
         input.multimedia &&
         Array.isArray(input.multimedia) &&
         input.multimedia.length === 1 &&
         input.multimedia[0] &&
         typeof input.multimedia[0] === 'object',
       'InputStateContainer.uploadBlob sent incorrect input',
     );
     const { uri, name, type } = input.multimedia[0];
     invariant(
       typeof uri === 'string' &&
         typeof name === 'string' &&
         typeof type === 'string',
       'InputStateContainer.uploadBlob sent incorrect input',
     );
 
     const parameters = {};
     parameters.cookie = cookie;
     parameters.filename = name;
 
     for (const key in input) {
       if (
         key === 'multimedia' ||
         key === 'cookie' ||
         key === 'sessionID' ||
         key === 'filename'
       ) {
         continue;
       }
       const value = input[key];
       invariant(
         typeof value === 'string',
         'blobUpload calls can only handle string values for non-multimedia keys',
       );
       parameters[key] = value;
     }
 
     let path = uri;
     if (Platform.OS === 'android') {
       const resolvedPath = pathFromURI(uri);
       if (resolvedPath) {
         path = resolvedPath;
       }
     }
     const uploadTask = FileSystem.createUploadTask(
       url,
       path,
       {
         uploadType: FileSystem.FileSystemUploadType.MULTIPART,
         fieldName: 'multimedia',
         headers: {
           Accept: 'application/json',
         },
         parameters,
       },
       uploadProgress => {
         if (options && options.onProgress) {
           const { totalByteSent, totalBytesExpectedToSend } = uploadProgress;
           options.onProgress(totalByteSent / totalBytesExpectedToSend);
         }
       },
     );
     if (options && options.abortHandler) {
       options.abortHandler(() => uploadTask.cancelAsync());
     }
     try {
       const response = await uploadTask.uploadAsync();
       return JSON.parse(response.body);
     } catch (e) {
       throw new Error(
         `Failed to upload blob: ${
           getMessageForException(e) ?? 'unknown error'
         }`,
       );
     }
   };
 
   handleUploadFailure(localMessageID: string, localUploadID: string) {
     this.setState(prevState => {
       const uploads = prevState.pendingUploads[localMessageID];
       const upload = uploads[localUploadID];
       if (!upload) {
         // The upload has been completed before it failed
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [localMessageID]: {
             ...uploads,
             [localUploadID]: {
               ...upload,
               failed: true,
               progressPercent: 0,
             },
           },
         },
       };
     });
   }
 
   queueMediaMissionReport(
     ids: { localID: string, localMessageID: string, serverID: ?string },
     mediaMission: MediaMission,
   ) {
     const report: MediaMissionReportCreationRequest = {
       type: reportTypes.MEDIA_MISSION,
       time: Date.now(),
       platformDetails: getConfig().platformDetails,
       mediaMission,
       uploadServerID: ids.serverID,
       uploadLocalID: ids.localID,
       messageLocalID: ids.localMessageID,
       id: generateReportID(),
     };
     this.props.dispatch({
       type: queueReportsActionType,
       payload: {
         reports: [report],
       },
     });
   }
 
   messageHasUploadFailure = (localMessageID: string) => {
     const pendingUploads = this.state.pendingUploads[localMessageID];
     if (!pendingUploads) {
       return false;
     }
     return values(pendingUploads).some(upload => upload.failed);
   };
 
   editInputMessage = (params: EditInputBarMessageParameters) => {
     this.editInputBarCallbacks.forEach(addEditInputBarCallback =>
       addEditInputBarCallback(params),
     );
   };
 
   addEditInputMessageListener = (
     callbackEditInputBar: (params: EditInputBarMessageParameters) => void,
   ) => {
     this.editInputBarCallbacks.push(callbackEditInputBar);
   };
 
   removeEditInputMessageListener = (
     callbackEditInputBar: (params: EditInputBarMessageParameters) => void,
   ) => {
     this.editInputBarCallbacks = this.editInputBarCallbacks.filter(
       candidate => candidate !== callbackEditInputBar,
     );
   };
 
   retryTextMessage = async (
     rawMessageInfo: RawTextMessageInfo,
     threadInfo: ThreadInfo,
     parentThreadInfo: ?ThreadInfo,
   ) => {
     await this.sendTextMessage(
       {
         ...rawMessageInfo,
         time: Date.now(),
       },
       threadInfo,
       parentThreadInfo,
     );
   };
 
   retryMultimediaMessage = async (
     rawMessageInfo: RawMultimediaMessageInfo,
     localMessageID: string,
     threadInfo: ThreadInfo,
   ) => {
     const pendingUploads = this.state.pendingUploads[localMessageID] ?? {};
 
     const now = Date.now();
 
     this.startThreadCreation(threadInfo);
 
     if (threadIsPendingSidebar(threadInfo.id)) {
       this.pendingSidebarCreationMessageLocalIDs.add(localMessageID);
     }
 
     const updateMedia = <T: Media>(media: $ReadOnlyArray<T>): T[] =>
       media.map(singleMedia => {
         invariant(
           singleMedia.type === 'photo' || singleMedia.type === 'video',
           'Retry selection must be unencrypted',
         );
 
         let updatedMedia = singleMedia;
 
         const oldMediaID = updatedMedia.id;
         if (
           // not complete
           isLocalUploadID(oldMediaID) &&
           // not still ongoing
           (!pendingUploads[oldMediaID] || pendingUploads[oldMediaID].failed)
         ) {
           // If we have an incomplete upload that isn't in pendingUploads, that
           // indicates the app has restarted. We'll reassign a new localID to
           // avoid collisions. Note that this isn't necessary for the message ID
           // since the localID reducer prevents collisions there
           const mediaID = pendingUploads[oldMediaID]
             ? oldMediaID
             : getNextLocalUploadID();
           if (updatedMedia.type === 'photo') {
             updatedMedia = {
               type: 'photo',
               ...updatedMedia,
               id: mediaID,
             };
           } else {
             updatedMedia = {
               type: 'video',
               ...updatedMedia,
               id: mediaID,
             };
           }
         }
 
         if (updatedMedia.type === 'video') {
           const oldThumbnailID = updatedMedia.thumbnailID;
           invariant(oldThumbnailID, 'oldThumbnailID not null or undefined');
           if (
             // not complete
             isLocalUploadID(oldThumbnailID) &&
             // not still ongoing
             (!pendingUploads[oldThumbnailID] ||
               pendingUploads[oldThumbnailID].failed)
           ) {
             const thumbnailID = pendingUploads[oldThumbnailID]
               ? oldThumbnailID
               : getNextLocalUploadID();
             updatedMedia = {
               ...updatedMedia,
               thumbnailID,
             };
           }
         }
 
         if (updatedMedia === singleMedia) {
           return singleMedia;
         }
 
         const oldSelection = updatedMedia.localMediaSelection;
         invariant(
           oldSelection,
           'localMediaSelection should be set on locally created Media',
         );
         const retries = oldSelection.retries ? oldSelection.retries + 1 : 1;
 
         // We switch for Flow
         let selection;
         if (oldSelection.step === 'photo_capture') {
           selection = { ...oldSelection, sendTime: now, retries };
         } else if (oldSelection.step === 'photo_library') {
           selection = { ...oldSelection, sendTime: now, retries };
         } else if (oldSelection.step === 'photo_paste') {
           selection = { ...oldSelection, sendTime: now, retries };
         } else {
           selection = { ...oldSelection, sendTime: now, retries };
         }
 
         if (updatedMedia.type === 'photo') {
           return {
             type: 'photo',
             ...updatedMedia,
             localMediaSelection: selection,
           };
         }
         return {
           type: 'video',
           ...updatedMedia,
           localMediaSelection: selection,
         };
       });
 
     let newRawMessageInfo;
     // This conditional is for Flow
     if (rawMessageInfo.type === messageTypes.MULTIMEDIA) {
       newRawMessageInfo = ({
         ...rawMessageInfo,
         time: now,
         media: updateMedia(rawMessageInfo.media),
       }: RawMediaMessageInfo);
     } else if (rawMessageInfo.type === messageTypes.IMAGES) {
       newRawMessageInfo = ({
         ...rawMessageInfo,
         time: now,
         media: updateMedia(rawMessageInfo.media),
       }: RawImagesMessageInfo);
     } else {
       invariant(false, `rawMessageInfo ${localMessageID} should be multimedia`);
     }
 
     const incompleteMedia: Media[] = [];
     for (const singleMedia of newRawMessageInfo.media) {
       if (isLocalUploadID(singleMedia.id)) {
         incompleteMedia.push(singleMedia);
       }
     }
     if (incompleteMedia.length === 0) {
       this.dispatchMultimediaMessageAction(newRawMessageInfo);
       this.setState(prevState => ({
         pendingUploads: {
           ...prevState.pendingUploads,
           [localMessageID]: {},
         },
       }));
       return;
     }
 
     const retryMedia = incompleteMedia.filter(
       ({ id }) => !pendingUploads[id] || pendingUploads[id].failed,
     );
     if (retryMedia.length === 0) {
       // All media are already in the process of being uploaded
       return;
     }
 
     // We're not actually starting the send here,
     // we just use this action to update the message in Redux
     this.props.dispatch({
       type: sendMultimediaMessageActionTypes.started,
       payload: newRawMessageInfo,
     });
 
     // We clear out the failed status on individual media here,
     // which makes the UI show pending status instead of error messages
     for (const singleMedia of retryMedia) {
       pendingUploads[singleMedia.id] = {
         failed: false,
         progressPercent: 0,
         processingStep: null,
       };
       if (singleMedia.type === 'video') {
         const { thumbnailID } = singleMedia;
         invariant(thumbnailID, 'thumbnailID not null or undefined');
         pendingUploads[thumbnailID] = {
           failed: false,
           progressPercent: 0,
           processingStep: null,
         };
       }
     }
     this.setState(prevState => ({
       pendingUploads: {
         ...prevState.pendingUploads,
         [localMessageID]: pendingUploads,
       },
     }));
 
     const uploadFileInputs = retryMedia.map(singleMedia => {
       invariant(
         singleMedia.localMediaSelection,
         'localMediaSelection should be set on locally created Media',
       );
 
       let ids;
       if (singleMedia.type === 'photo') {
         ids = { type: 'photo', localMediaID: singleMedia.id };
       } else {
         invariant(
           singleMedia.thumbnailID,
           'singleMedia.thumbnailID should be set for videos',
         );
         ids = {
           type: 'video',
           localMediaID: singleMedia.id,
           localThumbnailID: singleMedia.thumbnailID,
         };
       }
 
       return {
         selection: singleMedia.localMediaSelection,
         ids,
       };
     });
 
     await this.uploadFiles(localMessageID, uploadFileInputs, threadInfo);
   };
 
   retryMessage = async (
     localMessageID: string,
     threadInfo: ThreadInfo,
     parentThreadInfo: ?ThreadInfo,
   ) => {
     this.sendCallbacks.forEach(callback => callback());
 
     const rawMessageInfo = this.props.messageStoreMessages[localMessageID];
     invariant(rawMessageInfo, `rawMessageInfo ${localMessageID} should exist`);
 
     if (rawMessageInfo.type === messageTypes.TEXT) {
       await this.retryTextMessage(rawMessageInfo, threadInfo, parentThreadInfo);
     } else if (
       rawMessageInfo.type === messageTypes.IMAGES ||
       rawMessageInfo.type === messageTypes.MULTIMEDIA
     ) {
       await this.retryMultimediaMessage(
         rawMessageInfo,
         localMessageID,
         threadInfo,
       );
     }
   };
 
   registerSendCallback = (callback: () => void) => {
     this.sendCallbacks.push(callback);
   };
 
   unregisterSendCallback = (callback: () => void) => {
     this.sendCallbacks = this.sendCallbacks.filter(
       candidate => candidate !== callback,
     );
   };
 
   reportURIDisplayed = (uri: string, loaded: boolean) => {
     const prevActiveURI = this.activeURIs.get(uri);
     const curCount = prevActiveURI && prevActiveURI.count;
     const prevCount = curCount ? curCount : 0;
     const count = loaded ? prevCount + 1 : prevCount - 1;
     const prevOnClear = prevActiveURI && prevActiveURI.onClear;
     const onClear = prevOnClear ? prevOnClear : [];
     const activeURI = { count, onClear };
     if (count) {
       this.activeURIs.set(uri, activeURI);
       return;
     }
     this.activeURIs.delete(uri);
     for (const callback of onClear) {
       callback();
     }
   };
 
   waitForCaptureURIUnload(uri: string) {
     const start = Date.now();
     const path = pathFromURI(uri);
     if (!path) {
       return Promise.resolve({
         result: null,
         steps: [
           {
             step: 'wait_for_capture_uri_unload',
             success: false,
             time: Date.now() - start,
             uri,
           },
         ],
       });
     }
 
     const getResult = () => ({
       result: path,
       steps: [
         {
           step: 'wait_for_capture_uri_unload',
           success: true,
           time: Date.now() - start,
           uri,
         },
       ],
     });
 
     const activeURI = this.activeURIs.get(uri);
     if (!activeURI) {
       return Promise.resolve(getResult());
     }
 
     return new Promise(resolve => {
       const finish = () => resolve(getResult());
       const newActiveURI = {
         ...activeURI,
         onClear: [...activeURI.onClear, finish],
       };
       this.activeURIs.set(uri, newActiveURI);
     });
   }
 
   setPendingThreadUpdateHandler = (
     threadID: string,
     pendingThreadUpdateHandler: ?(ThreadInfo) => mixed,
   ) => {
     if (!pendingThreadUpdateHandler) {
       this.pendingThreadUpdateHandlers.delete(threadID);
     } else {
       this.pendingThreadUpdateHandlers.set(
         threadID,
         pendingThreadUpdateHandler,
       );
     }
   };
 
   render() {
     const inputState = this.inputStateSelector(this.state);
     return (
       <InputStateContext.Provider value={inputState}>
         {this.props.children}
       </InputStateContext.Provider>
     );
   }
 }
 
 const mediaCreationLoadingStatusSelector = createLoadingStatusSelector(
   sendMultimediaMessageActionTypes,
 );
 const textCreationLoadingStatusSelector = createLoadingStatusSelector(
   sendTextMessageActionTypes,
 );
 
 const ConnectedInputStateContainer: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedInputStateContainer(
     props: BaseProps,
   ) {
     const viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
     const nextLocalID = useNextLocalID();
     const messageStoreMessages = useSelector(
       state => state.messageStore.messages,
     );
     const ongoingMessageCreation = useSelector(
       state =>
         combineLoadingStatuses(
           mediaCreationLoadingStatusSelector(state),
           textCreationLoadingStatusSelector(state),
         ) === 'loading',
     );
     const hasWiFi = useSelector(state => state.connectivity.hasWiFi);
     const calendarQuery = useCalendarQuery();
     const callUploadMultimedia = useServerCall(uploadMultimedia);
     const callUploadMediaMetadata = useServerCall(uploadMediaMetadata);
     const callBlobServiceUpload = useServerCall(blobServiceUpload);
     const callSendMultimediaMessage = useSendMultimediaMessage();
     const callSendTextMessage = useSendTextMessage();
-    const callNewThread = useServerCall(newThread);
+    const callNewThread = useNewThread();
     const dispatchActionPromise = useDispatchActionPromise();
     const dispatch = useDispatch();
     const mediaReportsEnabled = useIsReportEnabled('mediaReports');
     const staffCanSee = useStaffCanSee();
     const textMessageCreationSideEffectsFunc =
       useMessageCreationSideEffectsFunc(messageTypes.TEXT);
 
     return (
       <InputStateContainer
         {...props}
         uploadMediaMetadata={callUploadMediaMetadata}
         viewerID={viewerID}
         nextLocalID={nextLocalID}
         messageStoreMessages={messageStoreMessages}
         ongoingMessageCreation={ongoingMessageCreation}
         hasWiFi={hasWiFi}
         mediaReportsEnabled={mediaReportsEnabled}
         calendarQuery={calendarQuery}
         uploadMultimedia={callUploadMultimedia}
         blobServiceUpload={callBlobServiceUpload}
         sendMultimediaMessage={callSendMultimediaMessage}
         sendTextMessage={callSendTextMessage}
         newThread={callNewThread}
         dispatchActionPromise={dispatchActionPromise}
         dispatch={dispatch}
         staffCanSee={staffCanSee}
         textMessageCreationSideEffectsFunc={textMessageCreationSideEffectsFunc}
       />
     );
   });
 
 export default ConnectedInputStateContainer;
diff --git a/native/navigation/invite-link-modal.react.js b/native/navigation/invite-link-modal.react.js
index b805a26f4..8e3bc924b 100644
--- a/native/navigation/invite-link-modal.react.js
+++ b/native/navigation/invite-link-modal.react.js
@@ -1,254 +1,251 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import { View, Text, ActivityIndicator } from 'react-native';
 
 import {
-  joinThread,
+  useJoinThread,
   joinThreadActionTypes,
 } from 'lib/actions/thread-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type { InviteLinkVerificationResponse } from 'lib/types/link-types.js';
-import {
-  useDispatchActionPromise,
-  useServerCall,
-} from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 
 import { nonThreadCalendarQuery } from './nav-selectors.js';
 import { NavContext } from './navigation-context.js';
 import type { RootNavigationProp } from './root-navigator.react.js';
 import type { NavigationRoute } from './route-names.js';
 import Button from '../components/button.react.js';
 import Modal from '../components/modal.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
 
 export type InviteLinkModalParams = {
   +invitationDetails: InviteLinkVerificationResponse,
   +secret: string,
 };
 
 type Props = {
   +navigation: RootNavigationProp<'InviteLinkModal'>,
   +route: NavigationRoute<'InviteLinkModal'>,
 };
 
 function InviteLinkModal(props: Props): React.Node {
   const styles = useStyles(unboundStyles);
   const { invitationDetails, secret } = props.route.params;
 
   React.useEffect(() => {
     if (invitationDetails.status === 'already_joined') {
       props.navigation.goBack();
     }
   }, [invitationDetails.status, props.navigation]);
 
   const header = React.useMemo(() => {
     if (invitationDetails.status === 'valid') {
       return (
         <>
           <Text style={styles.invitation}>You have been invited to join</Text>
           <Text style={styles.communityName}>
             {invitationDetails.community.name}
           </Text>
         </>
       );
     }
     return (
       <>
         <Text style={styles.invalidInviteTitle}>Invite invalid</Text>
         <Text style={styles.invalidInviteExplanation}>
           This invite link may be expired. Please try again with another invite
           link.
         </Text>
       </>
     );
   }, [
     invitationDetails,
     styles.communityName,
     styles.invalidInviteExplanation,
     styles.invalidInviteTitle,
     styles.invitation,
   ]);
 
-  const callJoinThread = useServerCall(joinThread);
+  const callJoinThread = useJoinThread();
   const navContext = React.useContext(NavContext);
   const calendarQuery = useSelector(state =>
     nonThreadCalendarQuery({
       redux: state,
       navContext,
     }),
   );
   const communityID = invitationDetails.community?.id;
   const createJoinCommunityAction = React.useCallback(async () => {
     invariant(
       communityID,
       'CommunityID should be present while calling this function',
     );
     const query = calendarQuery();
     try {
       const result = await callJoinThread({
         threadID: communityID,
         calendarQuery: {
           startDate: query.startDate,
           endDate: query.endDate,
           filters: [
             ...query.filters,
             { type: 'threads', threadIDs: [communityID] },
           ],
         },
         inviteLinkSecret: secret,
       });
       props.navigation.goBack();
       return result;
     } catch (e) {
       props.navigation.setParams({
         invitationDetails: {
           status: 'invalid',
         },
         secret,
       });
       throw e;
     }
   }, [calendarQuery, callJoinThread, communityID, props.navigation, secret]);
   const dispatchActionPromise = useDispatchActionPromise();
   const joinCommunity = React.useCallback(() => {
     dispatchActionPromise(joinThreadActionTypes, createJoinCommunityAction());
   }, [createJoinCommunityAction, dispatchActionPromise]);
   const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);
 
   const buttons = React.useMemo(() => {
     if (invitationDetails.status === 'valid') {
       const joinButtonContent =
         joinThreadLoadingStatus === 'loading' ? (
           <ActivityIndicator
             size="small"
             color="white"
             style={styles.activityIndicatorStyle}
           />
         ) : (
           <Text style={styles.buttonText}>Accept invite</Text>
         );
       return (
         <>
           <Button
             style={[styles.button, styles.buttonPrimary, styles.gap]}
             onPress={joinCommunity}
             disabled={joinThreadLoadingStatus === 'loading'}
           >
             {joinButtonContent}
           </Button>
           <Button
             style={[styles.button, styles.buttonSecondary]}
             onPress={props.navigation.goBack}
           >
             <Text style={styles.buttonText}>Cancel</Text>
           </Button>
         </>
       );
     }
     return (
       <Button
         style={[styles.button, styles.buttonPrimary]}
         onPress={props.navigation.goBack}
       >
         <Text style={styles.buttonText}>Return to Comm</Text>
       </Button>
     );
   }, [
     invitationDetails.status,
     joinCommunity,
     joinThreadLoadingStatus,
     props.navigation.goBack,
     styles.activityIndicatorStyle,
     styles.button,
     styles.buttonPrimary,
     styles.buttonSecondary,
     styles.buttonText,
     styles.gap,
   ]);
 
   return (
     <Modal modalStyle={styles.modal}>
       <View>{header}</View>
       <View style={styles.separator} />
       <View>{buttons}</View>
     </Modal>
   );
 }
 
 const joinThreadLoadingStatusSelector = createLoadingStatusSelector(
   joinThreadActionTypes,
 );
 
 const unboundStyles = {
   modal: {
     backgroundColor: 'modalForeground',
     paddingVertical: 24,
     paddingHorizontal: 16,
     flex: 0,
   },
   invitation: {
     color: 'whiteText',
     textAlign: 'center',
     fontSize: 14,
     fontWeight: '400',
     lineHeight: 22,
     marginBottom: 24,
   },
   communityName: {
     color: 'whiteText',
     textAlign: 'center',
     fontSize: 18,
     fontWeight: '500',
     lineHeight: 24,
   },
   invalidInviteTitle: {
     color: 'whiteText',
     textAlign: 'center',
     fontSize: 22,
     fontWeight: '500',
     lineHeight: 28,
     marginBottom: 24,
   },
   invalidInviteExplanation: {
     color: 'whiteText',
     textAlign: 'center',
     fontSize: 14,
     fontWeight: '400',
     lineHeight: 22,
   },
   separator: {
     height: 1,
     backgroundColor: 'modalSeparator',
     marginVertical: 24,
   },
   gap: {
     marginBottom: 16,
   },
   button: {
     borderRadius: 8,
     paddingVertical: 12,
     paddingHorizontal: 24,
   },
   buttonPrimary: {
     backgroundColor: 'purpleButton',
   },
   buttonSecondary: {
     borderColor: 'secondaryButtonBorder',
     borderWidth: 1,
   },
   buttonText: {
     color: 'whiteText',
     textAlign: 'center',
     fontSize: 16,
     fontWeight: '500',
     lineHeight: 24,
   },
   activityIndicatorStyle: {
     paddingVertical: 2,
   },
 };
 
 export default InviteLinkModal;
diff --git a/native/roles/change-roles-header-right-button.react.js b/native/roles/change-roles-header-right-button.react.js
index 0f59d2bc0..d701fa4fc 100644
--- a/native/roles/change-roles-header-right-button.react.js
+++ b/native/roles/change-roles-header-right-button.react.js
@@ -1,87 +1,88 @@
 // @flow
 
 import { useNavigation } from '@react-navigation/native';
 import invariant from 'invariant';
 import * as React from 'react';
 import { Text, View } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
 import {
-  changeThreadMemberRoles,
+  useChangeThreadMemberRoles,
   changeThreadMemberRolesActionTypes,
 } from 'lib/actions/thread-actions.js';
-import {
-  useDispatchActionPromise,
-  useServerCall,
-} from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 
 import type { NavigationRoute } from '../navigation/route-names';
 import { useColors } from '../themes/colors.js';
 
 type Props = {
   +route: NavigationRoute<'ChangeRolesScreen'>,
   +shouldRoleChangeBeDisabled: boolean,
 };
 
 function ChangeRolesHeaderRightButton(props: Props): React.Node {
   const { threadInfo, memberInfo, role: selectedRole } = props.route.params;
   const { shouldRoleChangeBeDisabled } = props;
   const { role: initialRole } = memberInfo;
   invariant(initialRole, 'Expected initial role to be defined');
   invariant(selectedRole, 'Expected selected role to be defined');
   const navigation = useNavigation();
 
-  const callChangeThreadMemberRoles = useServerCall(changeThreadMemberRoles);
+  const callChangeThreadMemberRoles = useChangeThreadMemberRoles();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const { disabledButton, purpleLink } = useColors();
   const textStyle = React.useMemo(
     () => ({
       color: shouldRoleChangeBeDisabled ? disabledButton : purpleLink,
       marginRight: 10,
     }),
     [disabledButton, purpleLink, shouldRoleChangeBeDisabled],
   );
 
   const handleSave = React.useCallback(() => {
     if (selectedRole === initialRole) {
       navigation.goBack();
       return;
     }
 
     dispatchActionPromise(
       changeThreadMemberRolesActionTypes,
-      callChangeThreadMemberRoles(threadInfo.id, [memberInfo.id], selectedRole),
+      callChangeThreadMemberRoles({
+        threadID: threadInfo.id,
+        memberIDs: [memberInfo.id],
+        newRole: selectedRole,
+      }),
     );
 
     navigation.goBack();
   }, [
     callChangeThreadMemberRoles,
     dispatchActionPromise,
     initialRole,
     memberInfo.id,
     navigation,
     selectedRole,
     threadInfo.id,
   ]);
 
   const saveButton = React.useMemo(() => {
     if (shouldRoleChangeBeDisabled) {
       return (
         <View>
           <Text style={textStyle}>Save</Text>
         </View>
       );
     }
 
     return (
       <TouchableOpacity onPress={handleSave}>
         <Text style={textStyle}>Save</Text>
       </TouchableOpacity>
     );
   }, [shouldRoleChangeBeDisabled, textStyle, handleSave]);
 
   return saveButton;
 }
 
 export default ChangeRolesHeaderRightButton;
diff --git a/native/roles/create-roles-header-right-button.react.js b/native/roles/create-roles-header-right-button.react.js
index b02536684..0d4d5db99 100644
--- a/native/roles/create-roles-header-right-button.react.js
+++ b/native/roles/create-roles-header-right-button.react.js
@@ -1,122 +1,119 @@
 // @flow
 
 import { useNavigation } from '@react-navigation/native';
 import invariant from 'invariant';
 import * as React from 'react';
 import { TouchableOpacity, Text } from 'react-native';
 
 import {
-  modifyCommunityRole,
+  useModifyCommunityRole,
   modifyCommunityRoleActionTypes,
 } from 'lib/actions/thread-actions.js';
-import {
-  useServerCall,
-  useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 import { values } from 'lib/utils/objects.js';
 
 import type { NavigationRoute } from '../navigation/route-names';
 import { useStyles } from '../themes/colors.js';
 
 type Props = {
   +route: NavigationRoute<'CreateRolesScreen'>,
   +setRoleCreationFailed: boolean => mixed,
 };
 
 function CreateRolesHeaderRightButton(props: Props): React.Node {
   const { threadInfo, action, existingRoleID, roleName, rolePermissions } =
     props.route.params;
   const { setRoleCreationFailed } = props;
   const navigation = useNavigation();
   const styles = useStyles(unboundStyles);
 
-  const callModifyCommunityRole = useServerCall(modifyCommunityRole);
+  const callModifyCommunityRole = useModifyCommunityRole();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const threadRoleNames = React.useMemo(
     () => values(threadInfo.roles).map(role => role.name),
     [threadInfo.roles],
   );
 
   const onPressCreate = React.useCallback(() => {
     if (threadRoleNames.includes(roleName) && action === 'create_role') {
       setRoleCreationFailed(true);
       return;
     }
 
     let callModifyCommunityRoleParams = {};
     if (action === 'create_role') {
       callModifyCommunityRoleParams = {
         community: threadInfo.id,
         action,
         name: roleName,
         permissions: [...rolePermissions],
       };
     } else {
       invariant(existingRoleID, 'existingRoleID should be set');
       callModifyCommunityRoleParams = {
         community: threadInfo.id,
         action,
         existingRoleID,
         name: roleName,
         permissions: [...rolePermissions],
       };
     }
 
     dispatchActionPromise(
       modifyCommunityRoleActionTypes,
       callModifyCommunityRole(callModifyCommunityRoleParams),
     );
 
     navigation.goBack();
   }, [
     callModifyCommunityRole,
     dispatchActionPromise,
     threadInfo,
     action,
     existingRoleID,
     roleName,
     rolePermissions,
     navigation,
     setRoleCreationFailed,
     threadRoleNames,
   ]);
 
   const headerRightText = action === 'create_role' ? 'Create' : 'Save';
   const shouldHeaderRightBeDisabled = roleName.length === 0;
   const createButton = React.useMemo(() => {
     const textStyle = shouldHeaderRightBeDisabled
       ? styles.createButtonDisabled
       : styles.createButton;
 
     return (
       <TouchableOpacity
         onPress={onPressCreate}
         disabled={shouldHeaderRightBeDisabled}
       >
         <Text style={textStyle}>{headerRightText}</Text>
       </TouchableOpacity>
     );
   }, [
     shouldHeaderRightBeDisabled,
     headerRightText,
     styles.createButtonDisabled,
     styles.createButton,
     onPressCreate,
   ]);
 
   return createButton;
 }
 
 const unboundStyles = {
   createButtonDisabled: {
     color: 'disabledButton',
     marginRight: 10,
   },
   createButton: {
     color: 'purpleLink',
     marginRight: 10,
   },
 };
 
 export default CreateRolesHeaderRightButton;
diff --git a/native/roles/role-utils.react.js b/native/roles/role-utils.react.js
index 4af5c54a8..0b775ef4d 100644
--- a/native/roles/role-utils.react.js
+++ b/native/roles/role-utils.react.js
@@ -1,65 +1,62 @@
 // @flow
 
 import * as React from 'react';
 
 import {
-  deleteCommunityRole,
+  useDeleteCommunityRole,
   deleteCommunityRoleActionTypes,
 } from 'lib/actions/thread-actions.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
-import {
-  useDispatchActionPromise,
-  useServerCall,
-} from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 import { constructRoleDeletionMessagePrompt } from 'lib/utils/role-utils.js';
 
 import Alert from '../utils/alert.js';
 
 function useDisplayDeleteRoleAlert(
   threadInfo: ThreadInfo,
   existingRoleID: string,
   defaultRoleID: string,
   memberCount: number,
 ): () => void {
   const defaultRoleName = threadInfo.roles[defaultRoleID].name;
-  const callDeleteCommunityRole = useServerCall(deleteCommunityRole);
+  const callDeleteCommunityRole = useDeleteCommunityRole();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const onDeleteRole = React.useCallback(() => {
     dispatchActionPromise(
       deleteCommunityRoleActionTypes,
       callDeleteCommunityRole({
         community: threadInfo.id,
         roleID: existingRoleID,
       }),
     );
   }, [
     callDeleteCommunityRole,
     dispatchActionPromise,
     existingRoleID,
     threadInfo.id,
   ]);
 
   const message = constructRoleDeletionMessagePrompt(
     defaultRoleName,
     memberCount,
   );
 
   return React.useCallback(
     () =>
       Alert.alert('Delete role', message, [
         {
           text: 'Yes, delete role',
           style: 'destructive',
           onPress: onDeleteRole,
         },
         {
           text: 'Cancel',
           style: 'cancel',
         },
       ]),
     [message, onDeleteRole],
   );
 }
 
 export { useDisplayDeleteRoleAlert };
diff --git a/web/chat/chat-input-bar.react.js b/web/chat/chat-input-bar.react.js
index 7fd283012..57c0b5f81 100644
--- a/web/chat/chat-input-bar.react.js
+++ b/web/chat/chat-input-bar.react.js
@@ -1,688 +1,687 @@
 // @flow
 
 import invariant from 'invariant';
 import _difference from 'lodash/fp/difference.js';
 import * as React from 'react';
 
 import {
   joinThreadActionTypes,
-  joinThread,
+  useJoinThread,
   newThreadActionTypes,
 } from 'lib/actions/thread-actions.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import {
   useChatMentionContext,
   useThreadChatMentionCandidates,
 } from 'lib/hooks/chat-mention-hooks.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import { userStoreMentionSearchIndex } from 'lib/selectors/user-selectors.js';
 import {
   getMentionTypeaheadUserSuggestions,
   getTypeaheadRegexMatches,
   getUserMentionsCandidates,
   getMentionTypeaheadChatSuggestions,
   type MentionTypeaheadSuggestionItem,
   type TypeaheadMatchedStrings,
 } from 'lib/shared/mention-utils.js';
 import { localIDPrefix, trimMessage } from 'lib/shared/message-utils.js';
 import {
   threadHasPermission,
   viewerIsMember,
   threadFrozenDueToViewerBlock,
   threadActualMembers,
   checkIfDefaultMembersAreVoiced,
 } from 'lib/shared/thread-utils.js';
 import type { CalendarQuery } from 'lib/types/entry-types.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import {
   type ThreadInfo,
   type ClientThreadJoinRequest,
   type ThreadJoinPayload,
 } from 'lib/types/thread-types.js';
 import { type UserInfos } from 'lib/types/user-types.js';
 import {
   type DispatchActionPromise,
-  useServerCall,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 
 import css from './chat-input-bar.css';
 import TypeaheadTooltip from './typeahead-tooltip.react.js';
 import Button from '../components/button.react.js';
 import {
   type InputState,
   type PendingMultimediaUpload,
 } from '../input/input-state.js';
 import LoadingIndicator from '../loading-indicator.react.js';
 import { allowedMimeTypeString } from '../media/file-utils.js';
 import Multimedia from '../media/multimedia.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { nonThreadCalendarQuery } from '../selectors/nav-selectors.js';
 import {
   webMentionTypeaheadRegex,
   getMentionTypeaheadTooltipActions,
   getMentionTypeaheadTooltipButtons,
 } from '../utils/typeahead-utils.js';
 
 type BaseProps = {
   +threadInfo: ThreadInfo,
   +inputState: InputState,
 };
 type Props = {
   ...BaseProps,
   +viewerID: ?string,
   +joinThreadLoadingStatus: LoadingStatus,
   +threadCreationInProgress: boolean,
   +calendarQuery: () => CalendarQuery,
   +nextLocalID: number,
   +isThreadActive: boolean,
   +userInfos: UserInfos,
   +dispatchActionPromise: DispatchActionPromise,
   +joinThread: (request: ClientThreadJoinRequest) => Promise<ThreadJoinPayload>,
   +typeaheadMatchedStrings: ?TypeaheadMatchedStrings,
   +suggestions: $ReadOnlyArray<MentionTypeaheadSuggestionItem>,
   +parentThreadInfo: ?ThreadInfo,
 };
 
 class ChatInputBar extends React.PureComponent<Props> {
   textarea: ?HTMLTextAreaElement;
   multimediaInput: ?HTMLInputElement;
 
   componentDidMount() {
     this.updateHeight();
     if (this.props.isThreadActive) {
       this.addReplyListener();
     }
   }
 
   componentWillUnmount() {
     if (this.props.isThreadActive) {
       this.removeReplyListener();
     }
   }
 
   componentDidUpdate(prevProps: Props) {
     if (this.props.isThreadActive && !prevProps.isThreadActive) {
       this.addReplyListener();
     } else if (!this.props.isThreadActive && prevProps.isThreadActive) {
       this.removeReplyListener();
     }
 
     const { inputState } = this.props;
     const prevInputState = prevProps.inputState;
     if (inputState.draft !== prevInputState.draft) {
       this.updateHeight();
     }
 
     if (
       inputState.draft !== prevInputState.draft ||
       inputState.textCursorPosition !== prevInputState.textCursorPosition
     ) {
       inputState.setTypeaheadState({
         canBeVisible: true,
       });
     }
 
     const curUploadIDs = ChatInputBar.unassignedUploadIDs(
       inputState.pendingUploads,
     );
     const prevUploadIDs = ChatInputBar.unassignedUploadIDs(
       prevInputState.pendingUploads,
     );
     if (
       this.multimediaInput &&
       _difference(prevUploadIDs)(curUploadIDs).length > 0
     ) {
       // Whenever a pending upload is removed, we reset the file
       // HTMLInputElement's value field, so that if the same upload occurs again
       // the onChange call doesn't get filtered
       this.multimediaInput.value = '';
     } else if (
       this.textarea &&
       _difference(curUploadIDs)(prevUploadIDs).length > 0
     ) {
       // Whenever a pending upload is added, we focus the textarea
       this.textarea.focus();
       return;
     }
 
     if (
       (this.props.threadInfo.id !== prevProps.threadInfo.id ||
         (inputState.textCursorPosition !== prevInputState.textCursorPosition &&
           this.textarea?.selectionStart === this.textarea?.selectionEnd)) &&
       this.textarea
     ) {
       this.textarea.focus();
 
       this.textarea?.setSelectionRange(
         inputState.textCursorPosition,
         inputState.textCursorPosition,
         'none',
       );
     }
   }
 
   static unassignedUploadIDs(
     pendingUploads: $ReadOnlyArray<PendingMultimediaUpload>,
   ) {
     return pendingUploads
       .filter(
         (pendingUpload: PendingMultimediaUpload) => !pendingUpload.messageID,
       )
       .map((pendingUpload: PendingMultimediaUpload) => pendingUpload.localID);
   }
 
   updateHeight() {
     const textarea = this.textarea;
     if (textarea) {
       textarea.style.height = 'auto';
       const newHeight = Math.min(textarea.scrollHeight, 150);
       textarea.style.height = `${newHeight}px`;
     }
   }
 
   addReplyListener() {
     invariant(
       this.props.inputState,
       'inputState should be set in addReplyListener',
     );
     this.props.inputState.addReplyListener(this.focusAndUpdateText);
   }
 
   removeReplyListener() {
     invariant(
       this.props.inputState,
       'inputState should be set in removeReplyListener',
     );
     this.props.inputState.removeReplyListener(this.focusAndUpdateText);
   }
 
   render() {
     const isMember = viewerIsMember(this.props.threadInfo);
     const canJoin = threadHasPermission(
       this.props.threadInfo,
       threadPermissions.JOIN_THREAD,
     );
 
     let joinButton = null;
     if (!isMember && canJoin && !this.props.threadCreationInProgress) {
       let buttonContent;
       if (this.props.joinThreadLoadingStatus === 'loading') {
         buttonContent = (
           <LoadingIndicator
             status={this.props.joinThreadLoadingStatus}
             size="medium"
             color="white"
           />
         );
       } else {
         buttonContent = (
           <>
             <SWMansionIcon icon="plus" size={24} />
             <p className={css.joinButtonText}>Join Chat</p>
           </>
         );
       }
       joinButton = (
         <div className={css.joinButtonContainer}>
           <Button
             variant="filled"
             buttonColor={{ backgroundColor: `#${this.props.threadInfo.color}` }}
             onClick={this.onClickJoin}
           >
             {buttonContent}
           </Button>
         </div>
       );
     }
 
     const { pendingUploads, cancelPendingUpload } = this.props.inputState;
     const multimediaPreviews = pendingUploads.map(pendingUpload => {
       const { uri, mediaType, thumbHash, dimensions } = pendingUpload;
       let mediaSource = { thumbHash, dimensions };
       if (mediaType !== 'encrypted_photo' && mediaType !== 'encrypted_video') {
         mediaSource = {
           ...mediaSource,
           type: mediaType,
           uri,
           thumbnailURI: null,
         };
       } else {
         const { encryptionKey } = pendingUpload;
         invariant(
           encryptionKey,
           'encryptionKey should be set for encrypted media',
         );
         mediaSource = {
           ...mediaSource,
           type: mediaType,
           blobURI: uri,
           encryptionKey,
           thumbnailBlobURI: null,
           thumbnailEncryptionKey: null,
         };
       }
       return (
         <Multimedia
           mediaSource={mediaSource}
           pendingUpload={pendingUpload}
           remove={cancelPendingUpload}
           multimediaCSSClass={css.multimedia}
           multimediaImageCSSClass={css.multimediaImage}
           key={pendingUpload.localID}
         />
       );
     });
     const previews =
       multimediaPreviews.length > 0 ? (
         <div className={css.previews}>{multimediaPreviews}</div>
       ) : null;
 
     let content;
     // If the thread is created by somebody else while the viewer is attempting
     // to create it, the threadInfo might be modified in-place and won't
     // list the viewer as a member, which will end up hiding the input. In
     // this case, we will assume that our creation action will get translated,
     // into a join and as long as members are voiced, we can show the input.
     const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(
       this.props.threadInfo,
     );
 
     let sendButton;
     if (this.props.inputState.draft.length) {
       sendButton = (
         <a onClick={this.onSend} className={css.sendButton}>
           <SWMansionIcon
             icon="send-2"
             size={22}
             color={`#${this.props.threadInfo.color}`}
           />
         </a>
       );
     }
 
     if (
       threadHasPermission(this.props.threadInfo, threadPermissions.VOICED) ||
       (this.props.threadCreationInProgress && defaultMembersAreVoiced)
     ) {
       content = (
         <div className={css.inputBarWrapper}>
           <a className={css.multimediaUpload} onClick={this.onMultimediaClick}>
             <input
               type="file"
               onChange={this.onMultimediaFileChange}
               ref={this.multimediaInputRef}
               accept={allowedMimeTypeString}
               multiple
             />
             <SWMansionIcon
               icon="image-1"
               size={22}
               color={`#${this.props.threadInfo.color}`}
               disableFill
             />
           </a>
           <div className={css.inputBarTextInput}>
             <textarea
               rows="1"
               placeholder="Type your message"
               value={this.props.inputState.draft}
               onChange={this.onChangeMessageText}
               onKeyDown={this.onKeyDown}
               onClick={this.onClickTextarea}
               onSelect={this.onSelectTextarea}
               ref={this.textareaRef}
               autoFocus
             />
           </div>
           {sendButton}
         </div>
       );
     } else if (
       threadFrozenDueToViewerBlock(
         this.props.threadInfo,
         this.props.viewerID,
         this.props.userInfos,
       ) &&
       threadActualMembers(this.props.threadInfo.members).length === 2
     ) {
       content = (
         <span className={css.explanation}>
           You can&rsquo;t send messages to a user that you&rsquo;ve blocked.
         </span>
       );
     } else if (isMember) {
       content = (
         <span className={css.explanation}>
           You don&rsquo;t have permission to send messages.
         </span>
       );
     } else if (defaultMembersAreVoiced && canJoin) {
       content = null;
     } else {
       content = (
         <span className={css.explanation}>
           You don&rsquo;t have permission to send messages.
         </span>
       );
     }
 
     let typeaheadTooltip;
     if (
       this.props.inputState.typeaheadState.canBeVisible &&
       this.props.suggestions.length > 0 &&
       this.props.typeaheadMatchedStrings &&
       this.textarea
     ) {
       typeaheadTooltip = (
         <TypeaheadTooltip
           inputState={this.props.inputState}
           textarea={this.textarea}
           matchedStrings={this.props.typeaheadMatchedStrings}
           suggestions={this.props.suggestions}
           typeaheadTooltipActionsGetter={getMentionTypeaheadTooltipActions}
           typeaheadTooltipButtonsGetter={getMentionTypeaheadTooltipButtons}
         />
       );
     }
 
     return (
       <div className={css.inputBar}>
         {joinButton}
         {previews}
         {content}
         {typeaheadTooltip}
       </div>
     );
   }
 
   textareaRef = (textarea: ?HTMLTextAreaElement) => {
     this.textarea = textarea;
     if (textarea) {
       textarea.focus();
     }
   };
 
   onChangeMessageText = (event: SyntheticEvent<HTMLTextAreaElement>) => {
     this.props.inputState.setDraft(event.currentTarget.value);
     this.props.inputState.setTextCursorPosition(
       event.currentTarget.selectionStart,
     );
   };
 
   onClickTextarea = (event: SyntheticEvent<HTMLTextAreaElement>) => {
     this.props.inputState.setTextCursorPosition(
       event.currentTarget.selectionStart,
     );
   };
 
   onSelectTextarea = (event: SyntheticEvent<HTMLTextAreaElement>) => {
     this.props.inputState.setTextCursorPosition(
       event.currentTarget.selectionStart,
     );
   };
 
   focusAndUpdateText = (text: string) => {
     // We need to call focus() first on Safari, otherwise the cursor
     // ends up at the start instead of the end for some reason
     const { textarea } = this;
     invariant(textarea, 'textarea should be set');
     textarea.focus();
 
     // We reset the textarea to an empty string at the start so that the cursor
     // always ends up at the end, even if the text doesn't actually change
     textarea.value = '';
     const currentText = this.props.inputState.draft;
     if (!currentText.startsWith(text)) {
       const prependedText = text.concat(currentText);
       this.props.inputState.setDraft(prependedText);
       textarea.value = prependedText;
     } else {
       textarea.value = currentText;
     }
 
     // The above strategies make sure the cursor is at the end,
     // but we also need to make sure that we're scrolled to the bottom
     textarea.scrollTop = textarea.scrollHeight;
   };
 
   onKeyDown = (event: SyntheticKeyboardEvent<HTMLTextAreaElement>) => {
     const { accept, close, moveChoiceUp, moveChoiceDown } =
       this.props.inputState.typeaheadState;
 
     const actions = {
       Enter: accept,
       Tab: accept,
       ArrowDown: moveChoiceDown,
       ArrowUp: moveChoiceUp,
       Escape: close,
     };
 
     if (
       this.props.inputState.typeaheadState.canBeVisible &&
       actions[event.key]
     ) {
       event.preventDefault();
       actions[event.key]();
     } else if (event.key === 'Enter' && !event.shiftKey) {
       event.preventDefault();
       this.send();
     }
   };
 
   onSend = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     this.send();
   };
 
   send() {
     let { nextLocalID } = this.props;
 
     const text = trimMessage(this.props.inputState.draft);
     if (text) {
       this.dispatchTextMessageAction(text, nextLocalID);
       nextLocalID++;
     }
     if (this.props.inputState.pendingUploads.length > 0) {
       this.props.inputState.createMultimediaMessage(
         nextLocalID,
         this.props.threadInfo,
       );
     }
   }
 
   dispatchTextMessageAction(text: string, nextLocalID: number) {
     this.props.inputState.setDraft('');
 
     const localID = `${localIDPrefix}${nextLocalID}`;
     const creatorID = this.props.viewerID;
     invariant(creatorID, 'should have viewer ID in order to send a message');
 
     this.props.inputState.sendTextMessage(
       {
         type: messageTypes.TEXT,
         localID,
         threadID: this.props.threadInfo.id,
         text,
         creatorID,
         time: Date.now(),
       },
       this.props.threadInfo,
       this.props.parentThreadInfo,
     );
   }
 
   multimediaInputRef = (multimediaInput: ?HTMLInputElement) => {
     this.multimediaInput = multimediaInput;
   };
 
   onMultimediaClick = () => {
     if (this.multimediaInput) {
       this.multimediaInput.click();
     }
   };
 
   onMultimediaFileChange = async (
     event: SyntheticInputEvent<HTMLInputElement>,
   ) => {
     const result = await this.props.inputState.appendFiles(
       this.props.threadInfo,
       [...event.target.files],
     );
     if (!result && this.multimediaInput) {
       this.multimediaInput.value = '';
     }
   };
 
   onClickJoin = () => {
     this.props.dispatchActionPromise(joinThreadActionTypes, this.joinAction());
   };
 
   async joinAction() {
     const query = this.props.calendarQuery();
     return await this.props.joinThread({
       threadID: this.props.threadInfo.id,
       calendarQuery: {
         startDate: query.startDate,
         endDate: query.endDate,
         filters: [
           ...query.filters,
           { type: 'threads', threadIDs: [this.props.threadInfo.id] },
         ],
       },
     });
   }
 }
 
 const joinThreadLoadingStatusSelector = createLoadingStatusSelector(
   joinThreadActionTypes,
 );
 const createThreadLoadingStatusSelector =
   createLoadingStatusSelector(newThreadActionTypes);
 
 const ConnectedChatInputBar: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedChatInputBar(props) {
     const viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
     const nextLocalID = useSelector(state => state.nextLocalID);
     const isThreadActive = useSelector(
       state => props.threadInfo.id === state.navInfo.activeChatThreadID,
     );
     const userInfos = useSelector(state => state.userStore.userInfos);
     const joinThreadLoadingStatus = useSelector(
       joinThreadLoadingStatusSelector,
     );
     const createThreadLoadingStatus = useSelector(
       createThreadLoadingStatusSelector,
     );
     const threadCreationInProgress = createThreadLoadingStatus === 'loading';
     const calendarQuery = useSelector(nonThreadCalendarQuery);
     const dispatchActionPromise = useDispatchActionPromise();
-    const callJoinThread = useServerCall(joinThread);
+    const callJoinThread = useJoinThread();
     const userSearchIndex = useSelector(userStoreMentionSearchIndex);
     const { getChatMentionSearchIndex } = useChatMentionContext();
     const chatMentionSearchIndex = getChatMentionSearchIndex(props.threadInfo);
 
     const { parentThreadID } = props.threadInfo;
     const parentThreadInfo = useSelector(state =>
       parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
     );
 
     const userMentionsCandidates = getUserMentionsCandidates(
       props.threadInfo,
       parentThreadInfo,
     );
 
     const chatMentionCandidates = useThreadChatMentionCandidates(
       props.threadInfo,
     );
 
     const typeaheadRegexMatches = React.useMemo(
       () =>
         getTypeaheadRegexMatches(
           props.inputState.draft,
           {
             start: props.inputState.textCursorPosition,
             end: props.inputState.textCursorPosition,
           },
           webMentionTypeaheadRegex,
         ),
       [props.inputState.textCursorPosition, props.inputState.draft],
     );
 
     const typeaheadMatchedStrings: ?TypeaheadMatchedStrings = React.useMemo(
       () =>
         typeaheadRegexMatches !== null
           ? {
               textBeforeAtSymbol:
                 typeaheadRegexMatches.groups?.textPrefix ?? '',
               query: typeaheadRegexMatches.groups?.mentionText ?? '',
             }
           : null,
       [typeaheadRegexMatches],
     );
 
     React.useEffect(() => {
       if (props.inputState.typeaheadState.keepUpdatingThreadMembers) {
         const setter = props.inputState.setTypeaheadState;
         setter({
           frozenUserMentionsCandidates: userMentionsCandidates,
           frozenChatMentionsCandidates: chatMentionCandidates,
         });
       }
     }, [
       userMentionsCandidates,
       props.inputState.setTypeaheadState,
       props.inputState.typeaheadState.keepUpdatingThreadMembers,
       chatMentionCandidates,
     ]);
 
     const suggestions = React.useMemo(() => {
       if (!typeaheadMatchedStrings) {
         return [];
       }
       const suggestedUsers = getMentionTypeaheadUserSuggestions(
         userSearchIndex,
         props.inputState.typeaheadState.frozenUserMentionsCandidates,
         viewerID,
         typeaheadMatchedStrings.query,
       );
       const suggestedChats = getMentionTypeaheadChatSuggestions(
         chatMentionSearchIndex,
         props.inputState.typeaheadState.frozenChatMentionsCandidates,
         typeaheadMatchedStrings.query,
       );
       return [...suggestedUsers, ...suggestedChats];
     }, [
       typeaheadMatchedStrings,
       userSearchIndex,
       props.inputState.typeaheadState.frozenUserMentionsCandidates,
       props.inputState.typeaheadState.frozenChatMentionsCandidates,
       viewerID,
       chatMentionSearchIndex,
     ]);
 
     return (
       <ChatInputBar
         {...props}
         viewerID={viewerID}
         joinThreadLoadingStatus={joinThreadLoadingStatus}
         threadCreationInProgress={threadCreationInProgress}
         calendarQuery={calendarQuery}
         nextLocalID={nextLocalID}
         isThreadActive={isThreadActive}
         userInfos={userInfos}
         dispatchActionPromise={dispatchActionPromise}
         joinThread={callJoinThread}
         typeaheadMatchedStrings={typeaheadMatchedStrings}
         suggestions={suggestions}
         parentThreadInfo={parentThreadInfo}
       />
     );
   });
 
 export default ConnectedChatInputBar;
diff --git a/web/chat/thread-menu.react.js b/web/chat/thread-menu.react.js
index a3b6059c0..413ef5584 100644
--- a/web/chat/thread-menu.react.js
+++ b/web/chat/thread-menu.react.js
@@ -1,317 +1,314 @@
 // @flow
 
 import * as React from 'react';
 
 import {
-  leaveThread,
+  useLeaveThread,
   leaveThreadActionTypes,
 } from 'lib/actions/thread-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { usePromoteSidebar } from 'lib/hooks/promote-sidebar.react.js';
 import { childThreadInfos } from 'lib/selectors/thread-selectors.js';
 import {
   threadHasPermission,
   viewerIsMember,
   threadIsChannel,
 } from 'lib/shared/thread-utils.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
-import {
-  useServerCall,
-  useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 
 import css from './thread-menu.css';
 import MenuItem from '../components/menu-item.react.js';
 import Menu from '../components/menu.react.js';
 import SidebarPromoteModal from '../modals/chat/sidebar-promote-modal.react.js';
 import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react.js';
 import ComposeSubchannelModal from '../modals/threads/create/compose-subchannel-modal.react.js';
 import ThreadSettingsMediaGalleryModal from '../modals/threads/gallery/thread-settings-media-gallery.react.js';
 import ThreadMembersModal from '../modals/threads/members/members-modal.react.js';
 import ThreadNotificationsModal from '../modals/threads/notifications/notifications-modal.react.js';
 import ThreadSettingsModal from '../modals/threads/settings/thread-settings-modal.react.js';
 import SidebarsModal from '../modals/threads/sidebars/sidebars-modal.react.js';
 import SubchannelsModal from '../modals/threads/subchannels/subchannels-modal.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 type ThreadMenuProps = {
   +threadInfo: ThreadInfo,
 };
 
 function ThreadMenu(props: ThreadMenuProps): React.Node {
   const { pushModal, popModal } = useModalContext();
   const { threadInfo } = props;
   const { onPromoteSidebar, canPromoteSidebar } = usePromoteSidebar(threadInfo);
 
   const onClickSettings = React.useCallback(
     () => pushModal(<ThreadSettingsModal threadID={threadInfo.id} />),
     [pushModal, threadInfo.id],
   );
 
   const settingsItem = React.useMemo(() => {
     return (
       <MenuItem
         key="settings"
         text="Settings"
         icon="settings"
         onClick={onClickSettings}
       />
     );
   }, [onClickSettings]);
 
   const onClickMembers = React.useCallback(
     () =>
       pushModal(
         <ThreadMembersModal threadID={threadInfo.id} onClose={popModal} />,
       ),
     [popModal, pushModal, threadInfo.id],
   );
   const membersItem = React.useMemo(() => {
     if (threadInfo.type === threadTypes.PERSONAL) {
       return null;
     }
     return (
       <MenuItem
         key="members"
         text="Members"
         icon="users"
         onClick={onClickMembers}
       />
     );
   }, [onClickMembers, threadInfo.type]);
 
   const onClickThreadMediaGallery = React.useCallback(
     () =>
       pushModal(
         <ThreadSettingsMediaGalleryModal
           onClose={popModal}
           parentThreadInfo={threadInfo}
           limit={36}
           activeTab="All"
         />,
       ),
     [popModal, pushModal, threadInfo],
   );
 
   const threadMediaGalleryItem = React.useMemo(
     () => (
       <MenuItem
         key="threadMediaGallery"
         text="Media"
         icon="image-1"
         onClick={onClickThreadMediaGallery}
       />
     ),
     [onClickThreadMediaGallery],
   );
 
   const childThreads = useSelector(
     state => childThreadInfos(state)[threadInfo.id],
   );
 
   const hasSidebars = React.useMemo(() => {
     return childThreads?.some(
       childThreadInfo => childThreadInfo.type === threadTypes.SIDEBAR,
     );
   }, [childThreads]);
 
   const onClickSidebars = React.useCallback(
     () =>
       pushModal(<SidebarsModal threadID={threadInfo.id} onClose={popModal} />),
     [popModal, pushModal, threadInfo.id],
   );
 
   const sidebarItem = React.useMemo(() => {
     if (!hasSidebars) {
       return null;
     }
     return (
       <MenuItem
         key="sidebars"
         text="Threads"
         icon="arrow-right"
         onClick={onClickSidebars}
       />
     );
   }, [hasSidebars, onClickSidebars]);
 
   const canCreateSubchannels = React.useMemo(
     () => threadHasPermission(threadInfo, threadPermissions.CREATE_SUBCHANNELS),
     [threadInfo],
   );
 
   const hasSubchannels = React.useMemo(() => {
     return !!childThreads?.some(threadIsChannel);
   }, [childThreads]);
 
   const onClickViewSubchannels = React.useCallback(
     () =>
       pushModal(
         <SubchannelsModal threadID={threadInfo.id} onClose={popModal} />,
       ),
     [popModal, pushModal, threadInfo.id],
   );
 
   const viewSubchannelsItem = React.useMemo(() => {
     if (!hasSubchannels) {
       return null;
     }
     return (
       <MenuItem
         key="subchannels"
         text="Subchannels"
         icon="message-square"
         onClick={onClickViewSubchannels}
       />
     );
   }, [hasSubchannels, onClickViewSubchannels]);
 
   const onClickCreateSubchannel = React.useCallback(
     () =>
       pushModal(
         <ComposeSubchannelModal
           parentThreadInfo={threadInfo}
           onClose={popModal}
         />,
       ),
     [popModal, pushModal, threadInfo],
   );
 
   const createSubchannelsItem = React.useMemo(() => {
     if (!canCreateSubchannels) {
       return null;
     }
     return (
       <MenuItem
         key="newSubchannel"
         text="Create new subchannel"
         icon="plus-circle"
         onClick={onClickCreateSubchannel}
       />
     );
   }, [canCreateSubchannels, onClickCreateSubchannel]);
 
   const dispatchActionPromise = useDispatchActionPromise();
-  const callLeaveThread = useServerCall(leaveThread);
+  const callLeaveThread = useLeaveThread();
 
   const onConfirmLeaveThread = React.useCallback(() => {
     dispatchActionPromise(
       leaveThreadActionTypes,
-      callLeaveThread(threadInfo.id),
+      callLeaveThread({ threadID: threadInfo.id }),
     );
     popModal();
   }, [callLeaveThread, popModal, dispatchActionPromise, threadInfo.id]);
 
   const onClickLeaveThread = React.useCallback(
     () =>
       pushModal(
         <ConfirmLeaveThreadModal
           threadInfo={threadInfo}
           onClose={popModal}
           onConfirm={onConfirmLeaveThread}
         />,
       ),
     [popModal, onConfirmLeaveThread, pushModal, threadInfo],
   );
 
   const leaveThreadItem = React.useMemo(() => {
     const canLeaveThread = threadHasPermission(
       threadInfo,
       threadPermissions.LEAVE_THREAD,
     );
     if (!viewerIsMember(threadInfo) || !canLeaveThread) {
       return null;
     }
     return (
       <MenuItem
         key="leave"
         text="Leave chat"
         icon="logout"
         dangerous
         onClick={onClickLeaveThread}
       />
     );
   }, [onClickLeaveThread, threadInfo]);
 
   const onClickPromoteSidebarToThread = React.useCallback(
     () =>
       pushModal(
         <SidebarPromoteModal
           threadInfo={threadInfo}
           onClose={popModal}
           onConfirm={onPromoteSidebar}
         />,
       ),
     [pushModal, threadInfo, popModal, onPromoteSidebar],
   );
 
   const promoteSidebar = React.useMemo(() => {
     return (
       <MenuItem
         key="promote"
         text="Promote to channel"
         icon="message-square-lines"
         onClick={onClickPromoteSidebarToThread}
       />
     );
   }, [onClickPromoteSidebarToThread]);
 
   const onClickNotifications = React.useCallback(() => {
     pushModal(
       <ThreadNotificationsModal threadID={threadInfo.id} onClose={popModal} />,
     );
   }, [popModal, pushModal, threadInfo.id]);
 
   const notificationsItem = React.useMemo(() => {
     if (!viewerIsMember(threadInfo)) {
       return null;
     }
     return (
       <MenuItem
         key="notifications"
         text="Notifications"
         icon="bell"
         onClick={onClickNotifications}
       />
     );
   }, [onClickNotifications, threadInfo]);
 
   const menuItems = React.useMemo(() => {
     const separator = <hr key="separator" className={css.separator} />;
 
     const items = [
       settingsItem,
       notificationsItem,
       membersItem,
       threadMediaGalleryItem,
       sidebarItem,
       viewSubchannelsItem,
       createSubchannelsItem,
       leaveThreadItem && separator,
       canPromoteSidebar && promoteSidebar,
       leaveThreadItem,
     ];
     return items.filter(Boolean);
   }, [
     settingsItem,
     notificationsItem,
     membersItem,
     threadMediaGalleryItem,
     sidebarItem,
     viewSubchannelsItem,
     promoteSidebar,
     createSubchannelsItem,
     leaveThreadItem,
     canPromoteSidebar,
   ]);
   const icon = React.useMemo(
     () => <SWMansionIcon icon="menu-vertical" size={20} />,
     [],
   );
   return <Menu icon={icon}>{menuItems}</Menu>;
 }
 
 export default ThreadMenu;
diff --git a/web/input/input-state-container.react.js b/web/input/input-state-container.react.js
index a15e59c50..2f10a89e7 100644
--- a/web/input/input-state-container.react.js
+++ b/web/input/input-state-container.react.js
@@ -1,1668 +1,1668 @@
 // @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 { useDispatch } from 'react-redux';
 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 { newThread } from 'lib/actions/thread-actions.js';
+import { useNewThread } from 'lib/actions/thread-actions.js';
 import {
   uploadMultimedia,
   uploadMediaMetadata,
   updateMultimediaMessageMediaActionType,
   deleteUpload,
   blobServiceUpload,
   type MultimediaUploadCallbacks,
   type MultimediaUploadExtras,
   type BlobServiceUploadAction,
 } 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,
   UploadMediaMetadataRequest,
   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 { 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 { generateReportID } from 'lib/utils/report-utils.js';
 
 import {
   type PendingMultimediaUpload,
   type TypeaheadState,
   InputStateContext,
 } 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,
   +uploadMediaMetadata: (
     input: UploadMediaMetadataRequest,
   ) => Promise<UploadMultimediaResult>,
   +deleteUpload: (id: string) => 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 State = {
   +pendingUploads: {
     [threadID: string]: { [localUploadID: string]: PendingMultimediaUpload },
   },
   +textCursorPositions: { [threadID: string]: number },
   +typeaheadState: TypeaheadState,
 };
 
 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 = 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 = new Set<string>();
 
   static reassignToRealizedThreads<T>(
     state: { +[threadID: string]: T },
     props: Props,
   ): ?{ [threadID: string]: T } {
     const newState = {};
     let updated = false;
     for (const threadID in state) {
       const newThreadID =
         props.pendingRealizedThreadIDs.get(threadID) ?? threadID;
       if (newThreadID !== threadID) {
         updated = true;
       }
       newState[newThreadID] = state[threadID];
     }
     return updated ? newState : null;
   }
 
   static getDerivedStateFromProps(props: Props, state: State) {
     const pendingUploads = InputStateContainer.reassignToRealizedThreads(
       state.pendingUploads,
       props,
     );
     const textCursorPositions = InputStateContainer.reassignToRealizedThreads(
       state.textCursorPositions,
       props,
     );
 
     if (!pendingUploads && !textCursorPositions) {
       return null;
     }
 
     const stateUpdate = {};
     if (pendingUploads) {
       stateUpdate.pendingUploads = pendingUploads;
     }
     if (textCursorPositions) {
       stateUpdate.textCursorPositions = textCursorPositions;
     }
     return stateUpdate;
   }
 
   static completedMessageIDs(state: State) {
     const completed = new Map();
     for (const threadID in state.pendingUploads) {
       const pendingUploads = state.pendingUploads[threadID];
       for (const localUploadID in pendingUploads) {
         const upload = pendingUploads[localUploadID];
         const { messageID, serverID, failed } = upload;
         if (!messageID || !messageID.startsWith(localIDPrefix)) {
           continue;
         }
         if (!serverID || failed) {
           completed.set(messageID, false);
           continue;
         }
         if (completed.get(messageID) === undefined) {
           completed.set(messageID, true);
         }
       }
     }
     const messageIDs = new Set();
     for (const [messageID, isCompleted] of completed) {
       if (isCompleted) {
         messageIDs.add(messageID);
       }
     }
     return messageIDs;
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (this.props.viewerID !== prevProps.viewerID) {
       this.setState({ pendingUploads: {} });
       return;
     }
 
     const previouslyAssignedMessageIDs = new Set();
     for (const threadID in prevState.pendingUploads) {
       const pendingUploads = prevState.pendingUploads[threadID];
       for (const localUploadID in pendingUploads) {
         const { messageID } = pendingUploads[localUploadID];
         if (messageID) {
           previouslyAssignedMessageIDs.add(messageID);
         }
       }
     }
 
     const newlyAssignedUploads = new Map();
     for (const threadID in this.state.pendingUploads) {
       const pendingUploads = this.state.pendingUploads[threadID];
       for (const localUploadID in pendingUploads) {
         const upload = pendingUploads[localUploadID];
         const { messageID } = upload;
         if (
           !messageID ||
           !messageID.startsWith(localIDPrefix) ||
           previouslyAssignedMessageIDs.has(messageID)
         ) {
           continue;
         }
         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();
     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) {
     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 = {};
         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): 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 = _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 = [];
         const assignedUploads = {};
         if (pendingUploads) {
           const [uploadsWithMessageIDs, uploadsWithoutMessageIDs] =
             _partition('messageID')(pendingUploads);
           threadPendingUploads = _sortBy('localID')(uploadsWithoutMessageIDs);
           const threadAssignedUploads = _groupBy('messageID')(
             uploadsWithMessageIDs,
           );
           for (const messageID in threadAssignedUploads) {
             // lodash libdefs don't return $ReadOnlyArray
             assignedUploads[messageID] = [...threadAssignedUploads[messageID]];
           }
         }
         return {
           pendingUploads: threadPendingUploads,
           assignedUploads,
           draft: draft ?? '',
           textCursorPosition: textCursorPosition ?? 0,
           appendFiles: (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 = createSelector(
     (propsAndState: PropsAndState) => propsAndState.typeaheadState,
     (typeaheadState: TypeaheadState) => ({
       typeaheadState,
       setTypeaheadState: this.setTypeaheadState,
     }),
   );
 
   inputStateSelector = 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 = [
       {
         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>,
   ) {
     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({
           input: {
             blobInput: {
               type: 'file',
               file: upload.file,
             },
             blobHash,
             encryptionKey,
             dimensions,
             loop: false,
             thumbHash,
           },
           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, abortRequest;
     this.setState(
       prevState => {
         const newThreadID = this.getRealizedOrPendingThreadID(threadID);
         const currentPendingUploads = prevState.pendingUploads[newThreadID];
         if (!currentPendingUploads) {
           return {};
         }
         const pendingUpload = currentPendingUploads[localUploadID];
         if (!pendingUpload) {
           return {};
         }
         if (!pendingUpload.uriIsReal) {
           revokeURL = pendingUpload.uri;
         }
         if (pendingUpload.abort) {
           abortRequest = pendingUpload.abort;
         }
         if (pendingUpload.serverID) {
           this.props.deleteUpload(pendingUpload.serverID);
           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,
     parentThreadInfo: ?ThreadInfo,
   ) {
     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(),
     };
     const newThreadInfo = {
       ...threadInfo,
       id: newThreadID,
     };
     this.props.dispatchActionPromise(
       sendTextMessageActionTypes,
       this.sendTextMessageAction(
         newMessageInfo,
         newThreadInfo,
         parentThreadInfo,
       ),
       undefined,
       newMessageInfo,
     );
   }
 
   async sendTextMessageAction(
     messageInfo: RawTextMessageInfo,
     threadInfo: ThreadInfo,
     parentThreadInfo: ?ThreadInfo,
   ): 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 = {};
       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>,
   ) {
     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 uploadsToRetry = [];
     for (const pendingUpload of pendingUploads) {
       const { serverID, messageID, localID, abort } = pendingUpload;
       if (serverID || messageID !== localMessageID) {
         continue;
       }
       if (abort) {
         abort();
       }
       uploadIDsToRetry.add(localID);
       uploadsToRetry.push(pendingUpload);
     }
 
     this.setState(prevState => {
       const newThreadID = this.getRealizedOrPendingThreadID(threadInfo.id);
       const prevPendingUploads = prevState.pendingUploads[newThreadID];
       if (!prevPendingUploads) {
         return {};
       }
       const newPendingUploads = {};
       let pendingUploadChanged = false;
       for (const localID in prevPendingUploads) {
         const pendingUpload = prevPendingUploads[localID];
         if (uploadIDsToRetry.has(localID) && !pendingUpload.serverID) {
           newPendingUploads[localID] = {
             ...pendingUpload,
             failed: false,
             progressPercent: 0,
             abort: null,
           };
           pendingUploadChanged = true;
         } else {
           newPendingUploads[localID] = pendingUpload;
         }
       }
       if (!pendingUploadChanged) {
         return {};
       }
       return {
         pendingUploads: {
           ...prevState.pendingUploads,
           [newThreadID]: newPendingUploads,
         },
       };
     });
 
     this.uploadFiles(threadInfo.id, uploadsToRetry);
   }
 
   addReply = (message: string) => {
     this.replyCallbacks.forEach(addReplyCallback => addReplyCallback(message));
   };
 
   addReplyListener = (callbackReply: (message: string) => void) => {
     this.replyCallbacks.push(callbackReply);
   };
 
   removeReplyListener = (callbackReply: (message: string) => void) => {
     this.replyCallbacks = this.replyCallbacks.filter(
       candidate => candidate !== callbackReply,
     );
   };
 
   render() {
     const { activeChatThreadID } = this.props;
 
     // 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 = useServerCall(blobServiceUpload);
     const callUploadMediaMetadata = useServerCall(uploadMediaMetadata);
     const callDeleteUpload = useServerCall(deleteUpload);
     const callSendMultimediaMessage = useLegacySendMultimediaMessage();
     const callSendTextMessage = useSendTextMessage();
-    const callNewThread = useServerCall(newThread);
+    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);
 
     return (
       <InputStateContainer
         {...props}
         activeChatThreadID={activeChatThreadID}
         drafts={drafts}
         viewerID={viewerID}
         messageStoreMessages={messageStoreMessages}
         pendingRealizedThreadIDs={pendingToRealizedThreadIDs}
         calendarQuery={calendarQuery}
         uploadMultimedia={callUploadMultimedia}
         uploadMediaMetadata={callUploadMediaMetadata}
         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/invite-links/accept-invite-modal.react.js b/web/invite-links/accept-invite-modal.react.js
index 3c807899d..ca07534e6 100644
--- a/web/invite-links/accept-invite-modal.react.js
+++ b/web/invite-links/accept-invite-modal.react.js
@@ -1,133 +1,130 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
-  joinThread,
+  useJoinThread,
   joinThreadActionTypes,
 } from 'lib/actions/thread-actions.js';
 import ModalOverlay from 'lib/components/modal-overlay.react.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { type InviteLinkVerificationResponse } from 'lib/types/link-types.js';
-import {
-  useDispatchActionPromise,
-  useServerCall,
-} from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 
 import css from './accept-invite-modal.css';
 import Button, { buttonThemes } from '../components/button.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { nonThreadCalendarQuery } from '../selectors/nav-selectors.js';
 
 type Props = {
   +verificationResponse: InviteLinkVerificationResponse,
   +inviteSecret: string,
 };
 
 function AcceptInviteModal(props: Props): React.Node {
   const { verificationResponse, inviteSecret } = props;
   const [isLinkValid, setIsLinkValid] = React.useState(
     verificationResponse.status === 'valid',
   );
   const { popModal } = useModalContext();
 
   React.useEffect(() => {
     if (verificationResponse.status === 'already_joined') {
       popModal();
     }
   }, [popModal, verificationResponse.status]);
 
-  const callJoinThread = useServerCall(joinThread);
+  const callJoinThread = useJoinThread();
   const calendarQuery = useSelector(nonThreadCalendarQuery);
   const communityID = verificationResponse.community?.id;
   const createJoinCommunityAction = React.useCallback(async () => {
     invariant(
       communityID,
       'CommunityID should be present while calling this function',
     );
     const query = calendarQuery();
     try {
       const result = await callJoinThread({
         threadID: communityID,
         calendarQuery: {
           startDate: query.startDate,
           endDate: query.endDate,
           filters: [
             ...query.filters,
             { type: 'threads', threadIDs: [communityID] },
           ],
         },
         inviteLinkSecret: inviteSecret,
       });
       popModal();
       return result;
     } catch (e) {
       setIsLinkValid(false);
       throw e;
     }
   }, [calendarQuery, callJoinThread, communityID, inviteSecret, popModal]);
   const dispatchActionPromise = useDispatchActionPromise();
   const joinCommunity = React.useCallback(() => {
     dispatchActionPromise(joinThreadActionTypes, createJoinCommunityAction());
   }, [createJoinCommunityAction, dispatchActionPromise]);
   const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);
 
   let content;
   if (verificationResponse.status === 'valid' && isLinkValid) {
     const { community } = verificationResponse;
     content = (
       <>
         <div className={css.text}>You have been invited to join</div>
         <div className={css.heading}>{community.name}</div>
         <hr />
         <div className={css.group}>
           <Button
             variant="filled"
             buttonColor={buttonThemes.standard}
             disabled={joinThreadLoadingStatus === 'loading'}
             onClick={joinCommunity}
           >
             Accept invite
           </Button>
           <Button variant="outline" onClick={popModal}>
             Cancel
           </Button>
         </div>
       </>
     );
   } else {
     content = (
       <>
         <div className={css.group}>
           <div className={css.heading}>Invite invalid</div>
           <div className={css.text}>
             This invite link may be expired. Please try again with another
             invite link.
           </div>
         </div>
         <hr />
         <Button
           variant="filled"
           buttonColor={buttonThemes.standard}
           onClick={popModal}
         >
           Return to Comm
         </Button>
       </>
     );
   }
 
   return (
     <ModalOverlay onClose={popModal}>
       <div className={css.container}>{content}</div>
     </ModalOverlay>
   );
 }
 
 const joinThreadLoadingStatusSelector = createLoadingStatusSelector(
   joinThreadActionTypes,
 );
 
 export default AcceptInviteModal;
diff --git a/web/modals/chat/toggle-pin-modal.react.js b/web/modals/chat/toggle-pin-modal.react.js
index c44f6758a..c34127fe7 100644
--- a/web/modals/chat/toggle-pin-modal.react.js
+++ b/web/modals/chat/toggle-pin-modal.react.js
@@ -1,133 +1,130 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
-  toggleMessagePin,
+  useToggleMessagePin,
   toggleMessagePinActionTypes,
-} from 'lib/actions/thread-actions.js';
+} from 'lib/actions/message-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
 import { modifyItemForResultScreen } from 'lib/shared/message-utils.js';
 import type { RawMessageInfo } from 'lib/types/message-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
-import {
-  useServerCall,
-  useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 
 import css from './toggle-pin-modal.css';
 import Button, { buttonThemes } from '../../components/button.react.js';
 import MessageResult from '../../components/message-result.react.js';
 import Modal from '../modal.react.js';
 
 type TogglePinModalProps = {
   +item: ChatMessageInfoItem,
   +threadInfo: ThreadInfo,
 };
 
 function TogglePinModal(props: TogglePinModalProps): React.Node {
   const { item, threadInfo } = props;
   const { messageInfo, isPinned } = item;
   const { popModal } = useModalContext();
 
-  const callToggleMessagePin = useServerCall(toggleMessagePin);
+  const callToggleMessagePin = useToggleMessagePin();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const modalInfo = React.useMemo(() => {
     if (isPinned) {
       return {
         name: 'Remove Pinned Message',
         action: 'unpin',
         confirmationText:
           'Are you sure you want to remove this pinned message?',
         buttonText: 'Remove Pinned Message',
         buttonColor: buttonThemes.danger,
       };
     }
 
     return {
       name: 'Pin Message',
       action: 'pin',
       confirmationText: `You may pin this message to the channel 
         you are currently viewing. To unpin a message, select the pinned 
         messages icon in the channel.`,
       buttonText: 'Pin Message',
       buttonColor: buttonThemes.standard,
     };
   }, [isPinned]);
 
   // We want to remove inline engagement (threadCreatedFromMessage / reactions)
   // and the message header (startsConversation). We also want to set isViewer
   // to false so that the message is left-aligned and uncolored.
   const modifiedItem = React.useMemo(() => {
     if (item.messageInfoType !== 'composable') {
       return item;
     }
 
     const strippedItem = {
       ...item,
       threadCreatedFromMessage: undefined,
       reactions: {},
     };
     return modifyItemForResultScreen(strippedItem);
   }, [item]);
 
   const onClick = React.useCallback(() => {
     const createToggleMessagePinPromise = async () => {
       invariant(messageInfo.id, 'messageInfo.id should be defined');
       const result = await callToggleMessagePin({
         messageID: messageInfo.id,
         action: modalInfo.action,
       });
       return ({
         newMessageInfos: result.newMessageInfos,
         threadID: result.threadID,
       }: {
         +newMessageInfos: $ReadOnlyArray<RawMessageInfo>,
         +threadID: string,
       });
     };
 
     dispatchActionPromise(
       toggleMessagePinActionTypes,
       createToggleMessagePinPromise(),
     );
     popModal();
   }, [
     modalInfo,
     callToggleMessagePin,
     dispatchActionPromise,
     messageInfo.id,
     popModal,
   ]);
 
   return (
     <Modal name={modalInfo.name} onClose={popModal} size="large">
       <div className={css.confirmationText}>{modalInfo.confirmationText}</div>
       <div className={css.messageContainer}>
         <MessageResult
           item={modifiedItem}
           threadInfo={threadInfo}
           scrollable={true}
         />
       </div>
       <div className={css.buttonContainer}>
         <Button
           variant="filled"
           className={css.togglePinButton}
           buttonColor={modalInfo.buttonColor}
           onClick={onClick}
         >
           {modalInfo.buttonText}
         </Button>
         <div className={css.cancelButton} onClick={popModal}>
           Cancel
         </div>
       </div>
     </Modal>
   );
 }
 
 export default TogglePinModal;
diff --git a/web/modals/threads/create/compose-subchannel-modal.react.js b/web/modals/threads/create/compose-subchannel-modal.react.js
index ce95ee9c6..e1b455f94 100644
--- a/web/modals/threads/create/compose-subchannel-modal.react.js
+++ b/web/modals/threads/create/compose-subchannel-modal.react.js
@@ -1,276 +1,276 @@
 // @flow
 import * as React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { newThread, newThreadActionTypes } from 'lib/actions/thread-actions.js';
+import {
+  useNewThread,
+  newThreadActionTypes,
+} from 'lib/actions/thread-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
-import {
-  useDispatchActionPromise,
-  useServerCall,
-} from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 import { trimText } from 'lib/utils/text-utils.js';
 
 import css from './compose-subchannel-modal.css';
 import SubchannelMembers from './steps/subchannel-members.react.js';
 import SubchannelSettings from './steps/subchannel-settings.react.js';
 import type { VisibilityType } from './steps/subchannel-settings.react.js';
 import Stepper from '../../../components/stepper.react.js';
 import { updateNavInfoActionType } from '../../../redux/action-types.js';
 import { nonThreadCalendarQuery } from '../../../selectors/nav-selectors.js';
 import Modal from '../../modal.react.js';
 
 type Props = {
   +onClose: () => void,
   +parentThreadInfo: ThreadInfo,
 };
 
 const getThreadType = (visibility: VisibilityType, announcement: boolean) => {
   if (visibility === 'open') {
     return announcement
       ? threadTypes.COMMUNITY_OPEN_ANNOUNCEMENT_SUBTHREAD
       : threadTypes.COMMUNITY_OPEN_SUBTHREAD;
   } else {
     return announcement
       ? threadTypes.COMMUNITY_SECRET_ANNOUNCEMENT_SUBTHREAD
       : threadTypes.COMMUNITY_SECRET_SUBTHREAD;
   }
 };
 
 type Steps = 'settings' | 'members';
 
 type HeaderProps = {
   +parentThreadName: string,
 };
 
 function ComposeSubchannelHeader(props: HeaderProps): React.Node {
   const { parentThreadName } = props;
   return (
     <div className={css.modalHeader}>
       <div>{'within '}</div>
       <div className={css.modalHeaderParentName}>{parentThreadName}</div>
     </div>
   );
 }
 
 const createSubchannelLoadingStatusSelector =
   createLoadingStatusSelector(newThreadActionTypes);
 
 function ComposeSubchannelModal(props: Props): React.Node {
   const { parentThreadInfo, onClose } = props;
   const { uiName: parentThreadName } = useResolvedThreadInfo(parentThreadInfo);
 
   const [activeStep, setActiveStep] = React.useState<Steps>('settings');
 
   const [channelName, setChannelName] = React.useState<string>('');
   const [visibilityType, setVisibilityType] =
     React.useState<VisibilityType>('open');
   const [announcement, setAnnouncement] = React.useState<boolean>(false);
   const [selectedUsers, setSelectedUsers] = React.useState<
     $ReadOnlySet<string>,
   >(new Set());
   const [searchUserText, setSearchUserText] = React.useState<string>('');
 
   const loadingState = useSelector(createSubchannelLoadingStatusSelector);
 
   const [errorMessage, setErrorMessage] = React.useState<string>('');
 
   const calendarQuery = useSelector(nonThreadCalendarQuery);
-  const callNewThread = useServerCall(newThread);
+  const callNewThread = useNewThread();
 
   const dispatchActionPromise = useDispatchActionPromise();
   const dispatch = useDispatch();
 
   const createSubchannel = React.useCallback(async () => {
     try {
       const threadType = getThreadType(visibilityType, announcement);
 
       const query = calendarQuery();
       const result = await callNewThread({
         name: channelName,
         type: threadType,
         parentThreadID: parentThreadInfo.id,
         initialMemberIDs: Array.from(selectedUsers),
         calendarQuery: query,
         color: parentThreadInfo.color,
       });
 
       return result;
     } catch (e) {
       await setErrorMessage('unknown error');
       return null;
     }
   }, [
     parentThreadInfo,
     selectedUsers,
     visibilityType,
     announcement,
     callNewThread,
     calendarQuery,
     channelName,
   ]);
 
   const dispatchCreateSubchannel = React.useCallback(async () => {
     await setErrorMessage('');
 
     const response = createSubchannel();
     await dispatchActionPromise(newThreadActionTypes, response);
     const result = await response;
 
     if (result) {
       const { newThreadID } = result;
       await dispatch({
         type: updateNavInfoActionType,
         payload: {
           activeChatThreadID: newThreadID,
         },
       });
 
       props.onClose();
     }
   }, [dispatchActionPromise, createSubchannel, props, dispatch]);
 
   const onChangeChannelName = React.useCallback(
     (event: SyntheticEvent<HTMLInputElement>) => {
       const target = event.currentTarget;
       setChannelName(target.value);
     },
     [],
   );
 
   const onOpenVisibilityTypeSelected = React.useCallback(
     () => setVisibilityType('open'),
     [],
   );
 
   const onSecretVisibilityTypeSelected = React.useCallback(
     () => setVisibilityType('secret'),
     [],
   );
 
   const onAnnouncementSelected = React.useCallback(
     () => setAnnouncement(!announcement),
     [announcement],
   );
 
   const toggleUserSelection = React.useCallback((userID: string) => {
     setSelectedUsers((users: $ReadOnlySet<string>) => {
       const newUsers = new Set(users);
       if (newUsers.has(userID)) {
         newUsers.delete(userID);
       } else {
         newUsers.add(userID);
       }
       return newUsers;
     });
   }, []);
 
   const subchannelSettings = React.useMemo(
     () => (
       <SubchannelSettings
         channelName={channelName}
         visibilityType={visibilityType}
         announcement={announcement}
         onChangeChannelName={onChangeChannelName}
         onOpenTypeSelect={onOpenVisibilityTypeSelected}
         onSecretTypeSelect={onSecretVisibilityTypeSelected}
         onAnnouncementSelected={onAnnouncementSelected}
       />
     ),
     [
       channelName,
       visibilityType,
       announcement,
       onChangeChannelName,
       onOpenVisibilityTypeSelected,
       onSecretVisibilityTypeSelected,
       onAnnouncementSelected,
     ],
   );
 
   const stepperButtons = React.useMemo(
     () => ({
       settings: {
         nextProps: {
           content: 'Next',
           disabled: !channelName.trim(),
           onClick: () => {
             setErrorMessage('');
             setChannelName(channelName.trim());
             setActiveStep('members');
           },
         },
       },
       members: {
         prevProps: {
           content: 'Back',
           onClick: () => setActiveStep('settings'),
         },
         nextProps: {
           content: 'Create',
           loading: loadingState === 'loading',
           disabled: selectedUsers.size === 0,
           onClick: () => {
             dispatchCreateSubchannel();
           },
         },
       },
     }),
     [channelName, dispatchCreateSubchannel, loadingState, selectedUsers],
   );
 
   const subchannelMembers = React.useMemo(
     () => (
       <SubchannelMembers
         parentThreadInfo={parentThreadInfo}
         selectedUsers={selectedUsers}
         searchText={searchUserText}
         setSearchText={setSearchUserText}
         toggleUserSelection={toggleUserSelection}
       />
     ),
     [
       selectedUsers,
       toggleUserSelection,
       parentThreadInfo,
       searchUserText,
       setSearchUserText,
     ],
   );
 
   const modalName =
     activeStep === 'members'
       ? `Create channel - ${trimText(channelName, 11)}`
       : 'Create channel';
 
   return (
     <Modal name={modalName} onClose={onClose} size="fit-content">
       <div className={css.container}>
         <ComposeSubchannelHeader parentThreadName={parentThreadName} />
         <div className={css.stepItem}>
           <Stepper.Container
             className={css.stepContainer}
             activeStep={activeStep}
           >
             <Stepper.Item
               content={subchannelSettings}
               name="settings"
               nextProps={stepperButtons.settings.nextProps}
             />
             <Stepper.Item
               content={subchannelMembers}
               name="members"
               prevProps={stepperButtons.members.prevProps}
               nextProps={stepperButtons.members.nextProps}
               errorMessage={errorMessage}
             />
           </Stepper.Container>
         </div>
       </div>
     </Modal>
   );
 }
 
 export default ComposeSubchannelModal;
diff --git a/web/modals/threads/gallery/thread-settings-media-gallery.react.js b/web/modals/threads/gallery/thread-settings-media-gallery.react.js
index bf74758b9..6db52ff84 100644
--- a/web/modals/threads/gallery/thread-settings-media-gallery.react.js
+++ b/web/modals/threads/gallery/thread-settings-media-gallery.react.js
@@ -1,191 +1,190 @@
 // @flow
 
 import * as React from 'react';
 
-import { fetchThreadMedia } from 'lib/actions/thread-actions.js';
+import { useFetchThreadMedia } from 'lib/actions/thread-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import {
   encryptedMediaBlobURI,
   encryptedVideoThumbnailBlobURI,
 } from 'lib/media/media-utils.js';
 import type { Media } from 'lib/types/media-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
-import { useServerCall } from 'lib/utils/action-utils.js';
 
 import GalleryItem from './thread-settings-media-gallery-item.react.js';
 import css from './thread-settings-media-gallery.css';
 import Tabs from '../../../components/tabs.react.js';
 import MultimediaModal from '../../../media/multimedia-modal.react.js';
 import Modal from '../../modal.react.js';
 
 type MediaGalleryTab = 'All' | 'Images' | 'Videos';
 
 type ThreadSettingsMediaGalleryModalProps = {
   +onClose: () => void,
   +parentThreadInfo: ThreadInfo,
   +limit: number,
   +activeTab: MediaGalleryTab,
 };
 
 function ThreadSettingsMediaGalleryModal(
   props: ThreadSettingsMediaGalleryModalProps,
 ): React.Node {
   const { pushModal } = useModalContext();
   const { onClose, parentThreadInfo, limit, activeTab } = props;
   const { id: threadID } = parentThreadInfo;
   const modalName = 'Media';
 
-  const callFetchThreadMedia = useServerCall(fetchThreadMedia);
+  const callFetchThreadMedia = useFetchThreadMedia();
   const [mediaInfos, setMediaInfos] = React.useState([]);
   const [tab, setTab] = React.useState<MediaGalleryTab>(activeTab);
 
   React.useEffect(() => {
     const fetchData = async () => {
       const result = await callFetchThreadMedia({
         threadID,
         limit,
         offset: 0,
       });
       setMediaInfos(result.media);
     };
     fetchData();
   }, [callFetchThreadMedia, threadID, limit]);
 
   const onClick = React.useCallback(
     (media: Media) => {
       const thumbHash = media.thumbnailThumbHash ?? media.thumbHash;
       let mediaInfo = {
         thumbHash,
         dimensions: media.dimensions,
       };
       if (media.type === 'photo' || media.type === 'video') {
         const { uri, thumbnailURI } = media;
         mediaInfo = {
           ...mediaInfo,
           type: media.type,
           uri,
           thumbnailURI,
         };
       } else {
         const { encryptionKey, thumbnailEncryptionKey } = media;
         const thumbnailBlobURI =
           media.type === 'encrypted_video'
             ? encryptedVideoThumbnailBlobURI(media)
             : null;
         mediaInfo = {
           ...mediaInfo,
           type: media.type,
           blobURI: encryptedMediaBlobURI(media),
           encryptionKey,
           thumbnailBlobURI,
           thumbnailEncryptionKey,
         };
       }
       pushModal(<MultimediaModal media={mediaInfo} />);
     },
     [pushModal],
   );
 
   const mediaGalleryItems = React.useMemo(() => {
     let filteredMediaInfos = mediaInfos;
     if (tab === 'Images') {
       filteredMediaInfos = mediaInfos.filter(
         mediaInfo =>
           mediaInfo.type === 'photo' || mediaInfo.type === 'encrypted_photo',
       );
     } else if (tab === 'Videos') {
       filteredMediaInfos = mediaInfos.filter(
         mediaInfo =>
           mediaInfo.type === 'video' || mediaInfo.type === 'encrypted_video',
       );
     }
 
     return filteredMediaInfos.map((media, i) => {
       let imageSource;
       if (media.type === 'photo') {
         imageSource = {
           kind: 'plain',
           uri: media.uri,
           thumbHash: media.thumbHash,
         };
       } else if (media.type === 'video') {
         imageSource = {
           kind: 'plain',
           uri: media.thumbnailURI,
           thumbHash: media.thumbnailThumbHash,
         };
       } else if (media.type === 'encrypted_photo') {
         imageSource = {
           kind: 'encrypted',
           blobURI: encryptedMediaBlobURI(media),
           encryptionKey: media.encryptionKey,
           thumbHash: media.thumbHash,
         };
       } else {
         imageSource = {
           kind: 'encrypted',
           blobURI: encryptedVideoThumbnailBlobURI(media),
           encryptionKey: media.thumbnailEncryptionKey,
           thumbHash: media.thumbnailThumbHash,
         };
       }
 
       return (
         <GalleryItem
           key={i}
           onClick={() => onClick(media)}
           imageSource={imageSource}
           imageCSSClass={css.media}
           imageContainerCSSClass={css.mediaContainer}
         />
       );
     });
   }, [tab, mediaInfos, onClick]);
 
   const handleScroll = React.useCallback(
     async event => {
       const container = event.target;
       // Load more data when the user is within 1000 pixels of the end
       const buffer = 1000;
 
       if (
         container.scrollHeight - container.scrollTop >
         container.clientHeight + buffer
       ) {
         return;
       }
 
       const result = await callFetchThreadMedia({
         threadID,
         limit,
         offset: mediaInfos.length,
       });
       setMediaInfos([...mediaInfos, ...result.media]);
     },
     [callFetchThreadMedia, threadID, limit, mediaInfos],
   );
 
   return (
     <Modal name={modalName} onClose={onClose} size="large">
       <Tabs.Container activeTab={tab} setTab={setTab}>
         <Tabs.Item id="All" header="All">
           <div className={css.container} onScroll={handleScroll}>
             {mediaGalleryItems}
           </div>
         </Tabs.Item>
         <Tabs.Item id="Images" header="Images">
           <div className={css.container} onScroll={handleScroll}>
             {mediaGalleryItems}
           </div>
         </Tabs.Item>
         <Tabs.Item id="Videos" header="Videos">
           <div className={css.container} onScroll={handleScroll}>
             {mediaGalleryItems}
           </div>
         </Tabs.Item>
       </Tabs.Container>
     </Modal>
   );
 }
 
 export default ThreadSettingsMediaGalleryModal;
diff --git a/web/modals/threads/members/change-member-role-modal.react.js b/web/modals/threads/members/change-member-role-modal.react.js
index 206bfaaa8..aeee7020a 100644
--- a/web/modals/threads/members/change-member-role-modal.react.js
+++ b/web/modals/threads/members/change-member-role-modal.react.js
@@ -1,152 +1,153 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
-  changeThreadMemberRoles,
+  useChangeThreadMemberRoles,
   changeThreadMemberRolesActionTypes,
 } from 'lib/actions/thread-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { otherUsersButNoOtherAdmins } from 'lib/selectors/thread-selectors.js';
 import { roleIsAdminRole } from 'lib/shared/thread-utils.js';
 import type { RelativeMemberInfo, ThreadInfo } from 'lib/types/thread-types';
-import {
-  useDispatchActionPromise,
-  useServerCall,
-} from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 import { values } from 'lib/utils/objects.js';
 
 import css from './change-member-role-modal.css';
 import UserAvatar from '../../../avatars/user-avatar.react.js';
 import Button, { buttonThemes } from '../../../components/button.react.js';
 import Dropdown from '../../../components/dropdown.react.js';
 import { useSelector } from '../../../redux/redux-utils.js';
 import Modal from '../../modal.react.js';
 import UnsavedChangesModal from '../../unsaved-changes-modal.react.js';
 
 type ChangeMemberRoleModalProps = {
   +memberInfo: RelativeMemberInfo,
   +threadInfo: ThreadInfo,
 };
 
 function ChangeMemberRoleModal(props: ChangeMemberRoleModalProps): React.Node {
   const { memberInfo, threadInfo } = props;
   const { pushModal, popModal } = useModalContext();
   const dispatchActionPromise = useDispatchActionPromise();
-  const callChangeThreadMemberRoles = useServerCall(changeThreadMemberRoles);
+  const callChangeThreadMemberRoles = useChangeThreadMemberRoles();
   const otherUsersButNoOtherAdminsValue = useSelector(
     otherUsersButNoOtherAdmins(threadInfo.id),
   );
 
   const roleOptions = React.useMemo(
     () =>
       values(threadInfo.roles).map(role => ({
         id: role.id,
         name: role.name,
       })),
     [threadInfo.roles],
   );
 
   const initialSelectedRole = memberInfo.role;
   invariant(initialSelectedRole, "Member's role must be defined");
 
   const [selectedRole, setSelectedRole] = React.useState(initialSelectedRole);
 
   const onCloseModal = React.useCallback(() => {
     if (selectedRole === initialSelectedRole) {
       popModal();
       return;
     }
 
     pushModal(<UnsavedChangesModal />);
   }, [initialSelectedRole, popModal, pushModal, selectedRole]);
 
   const disabledRoleChangeMessage = React.useMemo(() => {
     const memberIsAdmin = roleIsAdminRole(
       threadInfo.roles[initialSelectedRole],
     );
 
     if (!otherUsersButNoOtherAdminsValue || !memberIsAdmin) {
       return null;
     }
 
     return (
       <div className={css.roleModalDisabled}>
         <SWMansionIcon icon="info-circle" size={36} className={css.infoIcon} />
         <div className={css.infoText}>
           There must be at least one admin at any given time in a community.
         </div>
       </div>
     );
   }, [initialSelectedRole, otherUsersButNoOtherAdminsValue, threadInfo.roles]);
 
   const onSave = React.useCallback(() => {
     if (selectedRole === initialSelectedRole) {
       popModal();
       return;
     }
 
     const createChangeThreadMemberRolesPromise = () =>
-      callChangeThreadMemberRoles(threadInfo.id, [memberInfo.id], selectedRole);
+      callChangeThreadMemberRoles({
+        threadID: threadInfo.id,
+        memberIDs: [memberInfo.id],
+        newRole: selectedRole,
+      });
 
     dispatchActionPromise(
       changeThreadMemberRolesActionTypes,
       createChangeThreadMemberRolesPromise(),
     );
     popModal();
   }, [
     callChangeThreadMemberRoles,
     dispatchActionPromise,
     initialSelectedRole,
     memberInfo.id,
     popModal,
     selectedRole,
     threadInfo.id,
   ]);
 
   return (
     <Modal name="Change Role" onClose={onCloseModal} size="large">
       <div className={css.roleModalDescription}>
         Members can only be assigned to one role at a time. Changing a
         member&rsquo;s role will replace their previously assigned role.
       </div>
       <div className={css.roleModalMember}>
         <div className={css.roleModalMemberAvatar}>
           <UserAvatar userID={memberInfo.id} size="M" />
         </div>
         <div className={css.roleModalMemberName}>{memberInfo.username}</div>
       </div>
       <div className={css.roleModalRoleSelector}>
         <Dropdown
           options={roleOptions}
           activeSelection={selectedRole}
           setActiveSelection={setSelectedRole}
           disabled={!!disabledRoleChangeMessage}
         />
       </div>
       {disabledRoleChangeMessage}
       <div className={css.roleModalActionButtons}>
         <Button
           variant="outline"
           className={css.roleModalBackButton}
           onClick={onCloseModal}
         >
           Back
         </Button>
         <Button
           variant="filled"
           className={css.roleModalSaveButton}
           buttonColor={buttonThemes.primary}
           onClick={onSave}
           disabled={!!disabledRoleChangeMessage}
         >
           Save
         </Button>
       </div>
     </Modal>
   );
 }
 
 export default ChangeMemberRoleModal;
diff --git a/web/modals/threads/members/member.react.js b/web/modals/threads/members/member.react.js
index ea3b74c5e..a9fba2b99 100644
--- a/web/modals/threads/members/member.react.js
+++ b/web/modals/threads/members/member.react.js
@@ -1,141 +1,138 @@
 // @flow
 
 import * as React from 'react';
 
-import { removeUsersFromThread } from 'lib/actions/thread-actions.js';
+import { useRemoveUsersFromThread } from 'lib/actions/thread-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import {
   removeMemberFromThread,
   getAvailableThreadMemberActions,
 } from 'lib/shared/thread-utils.js';
 import { stringForUser } from 'lib/shared/user-utils.js';
 import type { SetState } from 'lib/types/hook-types.js';
 import {
   type RelativeMemberInfo,
   type ThreadInfo,
 } from 'lib/types/thread-types.js';
-import {
-  useDispatchActionPromise,
-  useServerCall,
-} from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 import { useRolesFromCommunityThreadInfo } from 'lib/utils/role-utils.js';
 
 import ChangeMemberRoleModal from './change-member-role-modal.react.js';
 import css from './members-modal.css';
 import UserAvatar from '../../../avatars/user-avatar.react.js';
 import CommIcon from '../../../CommIcon.react.js';
 import Label from '../../../components/label.react.js';
 import MenuItem from '../../../components/menu-item.react.js';
 import Menu from '../../../components/menu.react.js';
 import { usePushUserProfileModal } from '../../user-profile/user-profile-utils.js';
 
 const commIconComponent = <CommIcon size={18} icon="user-edit" />;
 
 type Props = {
   +memberInfo: RelativeMemberInfo,
   +threadInfo: ThreadInfo,
   +setOpenMenu: SetState<?string>,
 };
 
 function ThreadMember(props: Props): React.Node {
   const { memberInfo, threadInfo, setOpenMenu } = props;
   const { pushModal } = useModalContext();
   const userName = stringForUser(memberInfo);
 
   const roles = useRolesFromCommunityThreadInfo(threadInfo, [memberInfo]);
   const roleName = roles.get(memberInfo.id)?.name;
 
   const onMenuChange = React.useCallback(
     menuOpen => {
       if (menuOpen) {
         setOpenMenu(() => memberInfo.id);
       } else {
         setOpenMenu(menu => (menu === memberInfo.id ? null : menu));
       }
     },
     [memberInfo.id, setOpenMenu],
   );
 
   const dispatchActionPromise = useDispatchActionPromise();
-  const boundRemoveUsersFromThread = useServerCall(removeUsersFromThread);
+  const boundRemoveUsersFromThread = useRemoveUsersFromThread();
 
   const onClickRemoveUser = React.useCallback(
     () =>
       removeMemberFromThread(
         threadInfo,
         memberInfo,
         dispatchActionPromise,
         boundRemoveUsersFromThread,
       ),
     [boundRemoveUsersFromThread, dispatchActionPromise, memberInfo, threadInfo],
   );
 
   const onClickChangeRole = React.useCallback(() => {
     pushModal(
       <ChangeMemberRoleModal memberInfo={memberInfo} threadInfo={threadInfo} />,
     );
   }, [memberInfo, pushModal, threadInfo]);
 
   const menuItems = React.useMemo(
     () =>
       getAvailableThreadMemberActions(memberInfo, threadInfo).map(action => {
         if (action === 'change_role') {
           return (
             <MenuItem
               key="change_role"
               text="Change Role"
               iconComponent={commIconComponent}
               onClick={onClickChangeRole}
             />
           );
         }
         if (action === 'remove_user') {
           return (
             <MenuItem
               key="remove_user"
               text="Remove User"
               icon="logout"
               onClick={onClickRemoveUser}
               dangerous
             />
           );
         }
         return null;
       }),
     [memberInfo, onClickRemoveUser, onClickChangeRole, threadInfo],
   );
 
   const userSettingsIcon = React.useMemo(
     () => <SWMansionIcon icon="edit-1" size={17} />,
     [],
   );
 
   const label = React.useMemo(
     () => <Label variant="grey">{roleName}</Label>,
     [roleName],
   );
 
   const pushUserProfileModal = usePushUserProfileModal(memberInfo.id);
 
   return (
     <div className={css.memberContainer} onClick={pushUserProfileModal}>
       <div className={css.memberInfo}>
         <UserAvatar size="S" userID={memberInfo.id} />
         {userName}
         {label}
       </div>
       <div className={css.memberAction}>
         <Menu
           icon={userSettingsIcon}
           variant="member-actions"
           onChange={onMenuChange}
         >
           {menuItems}
         </Menu>
       </div>
     </div>
   );
 }
 
 export default ThreadMember;
diff --git a/web/roles/create-roles-modal.react.js b/web/roles/create-roles-modal.react.js
index af59e34e1..4e9384fd1 100644
--- a/web/roles/create-roles-modal.react.js
+++ b/web/roles/create-roles-modal.react.js
@@ -1,296 +1,293 @@
 // @flow
 
 import classNames from 'classnames';
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
-  modifyCommunityRole,
+  useModifyCommunityRole,
   modifyCommunityRoleActionTypes,
 } from 'lib/actions/thread-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type {
   UserSurfacedPermission,
   UserSurfacedPermissionOption,
 } from 'lib/types/thread-permission-types.js';
 import type {
   ThreadInfo,
   RoleModificationRequest,
 } from 'lib/types/thread-types.js';
-import {
-  useServerCall,
-  useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 import { values } from 'lib/utils/objects.js';
 import { useFilterPermissionOptionsByThreadType } from 'lib/utils/role-utils.js';
 
 import css from './create-roles-modal.css';
 import Button, { buttonThemes } from '../components/button.react.js';
 import EnumSettingsOption from '../components/enum-settings-option.react.js';
 import LoadingIndicator from '../loading-indicator.react.js';
 import Input from '../modals/input.react.js';
 import Modal from '../modals/modal.react.js';
 import UnsavedChangesModal from '../modals/unsaved-changes-modal.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 const createRolesLoadingStatusSelector = createLoadingStatusSelector(
   modifyCommunityRoleActionTypes,
 );
 
 type CreateRolesModalProps = {
   +threadInfo: ThreadInfo,
   +action: 'create_role' | 'edit_role',
   +existingRoleID?: string,
   +roleName: string,
   +rolePermissions: $ReadOnlySet<UserSurfacedPermission>,
 };
 
 type RoleCreationErrorVariant = 'already_exists' | 'unknown_error';
 
 function CreateRolesModal(props: CreateRolesModalProps): React.Node {
   const { pushModal, popModal } = useModalContext();
   const { threadInfo, action, existingRoleID, roleName, rolePermissions } =
     props;
   const modalName = action === 'create_role' ? 'Create role' : 'Edit role';
 
-  const callModifyCommunityRole = useServerCall(modifyCommunityRole);
+  const callModifyCommunityRole = useModifyCommunityRole();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const createRolesLoadingStatus: LoadingStatus = useSelector(
     createRolesLoadingStatusSelector,
   );
 
   const [pendingRoleName, setPendingRoleName] =
     React.useState<string>(roleName);
   const [pendingRolePermissions, setPendingRolePermissions] =
     React.useState<$ReadOnlySet<UserSurfacedPermission>>(rolePermissions);
 
   const [roleCreationFailed, setRoleCreationFailed] =
     React.useState<?RoleCreationErrorVariant>();
 
   const createButtonText = action === 'create_role' ? 'Create' : 'Save';
 
   const onChangeRoleName = React.useCallback(
     (event: SyntheticEvent<HTMLInputElement>) => {
       setRoleCreationFailed(null);
       setPendingRoleName(event.currentTarget.value);
     },
     [],
   );
 
   const onCloseModal = React.useCallback(() => {
     const pendingSet = new Set(pendingRolePermissions);
     const roleSet = new Set(rolePermissions);
 
     let arePermissionsEqual = true;
     if (pendingSet.size !== roleSet.size) {
       arePermissionsEqual = false;
     }
     for (const permission of pendingSet) {
       if (!roleSet.has(permission)) {
         arePermissionsEqual = false;
         break;
       }
     }
 
     if (pendingRoleName === roleName && arePermissionsEqual) {
       popModal();
       return;
     }
 
     pushModal(<UnsavedChangesModal />);
   }, [
     pendingRoleName,
     roleName,
     pendingRolePermissions,
     rolePermissions,
     pushModal,
     popModal,
   ]);
 
   const clearPermissionsClassNames = classNames({
     [css.clearPermissions]: true,
     [css.clearPermissionsDisabled]: pendingRolePermissions.size === 0,
     [css.clearPermissionsEnabled]: pendingRolePermissions.size > 0,
   });
 
   const onClearPermissions = React.useCallback(
     () => setPendingRolePermissions(new Set()),
     [],
   );
 
   const isUserSurfacedPermissionSelected = React.useCallback(
     (option: UserSurfacedPermissionOption) =>
       pendingRolePermissions.has(option.userSurfacedPermission),
     [pendingRolePermissions],
   );
 
   const onEnumValuePress = React.useCallback(
     (option: UserSurfacedPermissionOption) =>
       setPendingRolePermissions(currentPermissions => {
         if (currentPermissions.has(option.userSurfacedPermission)) {
           const newPermissions = new Set(currentPermissions);
           newPermissions.delete(option.userSurfacedPermission);
           return newPermissions;
         } else {
           return new Set([
             ...currentPermissions,
             option.userSurfacedPermission,
           ]);
         }
       }),
     [],
   );
 
   const filteredUserSurfacedPermissionOptions =
     useFilterPermissionOptionsByThreadType(threadInfo.type);
 
   const permissionsList = React.useMemo(
     () =>
       [...filteredUserSurfacedPermissionOptions].map(permission => (
         <EnumSettingsOption
           key={permission.userSurfacedPermission}
           selected={isUserSurfacedPermissionSelected(permission)}
           onSelect={() => onEnumValuePress(permission)}
           icon={null}
           title={permission.title}
           type="checkbox"
           statements={[{ statement: permission.description }]}
         />
       )),
     [
       filteredUserSurfacedPermissionOptions,
       isUserSurfacedPermissionSelected,
       onEnumValuePress,
     ],
   );
 
   const errorMessageClassNames = classNames({
     [css.errorMessage]: true,
     [css.errorMessageVisible]: !!roleCreationFailed,
   });
 
   const threadRoleNames = React.useMemo(
     () => values(threadInfo.roles).map(role => role.name),
     [threadInfo],
   );
 
   const onClickCreateRole = React.useCallback(() => {
     if (threadRoleNames.includes(pendingRoleName) && action === 'create_role') {
       setRoleCreationFailed('already_exists');
       return;
     }
 
     let callModifyCommunityRoleParams: RoleModificationRequest;
     if (action === 'create_role') {
       callModifyCommunityRoleParams = {
         community: threadInfo.id,
         action,
         name: pendingRoleName,
         permissions: [...pendingRolePermissions],
       };
     } else {
       invariant(existingRoleID, 'existingRoleID should be defined');
       callModifyCommunityRoleParams = {
         community: threadInfo.id,
         existingRoleID,
         action,
         name: pendingRoleName,
         permissions: [...pendingRolePermissions],
       };
     }
 
     dispatchActionPromise(
       modifyCommunityRoleActionTypes,
       (async () => {
         try {
           const response = await callModifyCommunityRole(
             callModifyCommunityRoleParams,
           );
           popModal();
           return response;
         } catch (e) {
           setRoleCreationFailed('unknown_error');
           throw e;
         }
       })(),
     );
   }, [
     callModifyCommunityRole,
     dispatchActionPromise,
     threadInfo,
     action,
     existingRoleID,
     pendingRoleName,
     pendingRolePermissions,
     popModal,
     threadRoleNames,
   ]);
 
   const errorMessage = React.useMemo(() => {
     if (roleCreationFailed === 'already_exists') {
       return 'There is already a role with this name in the community';
     } else {
       return 'An unknown error occurred. Please try again';
     }
   }, [roleCreationFailed]);
 
   const saveButtonContent = React.useMemo(() => {
     if (createRolesLoadingStatus === 'loading') {
       return (
         <LoadingIndicator status={createRolesLoadingStatus} size="medium" />
       );
     }
 
     return createButtonText;
   }, [createRolesLoadingStatus, createButtonText]);
 
   return (
     <Modal name={modalName} onClose={onCloseModal} size="large">
       <form method="POST" className={css.formContainer}>
         <div className={css.roleNameLabel}>Role name</div>
         <div className={css.roleNameInput}>
           <Input
             type="text"
             value={pendingRoleName}
             onChange={onChangeRoleName}
           />
         </div>
         <div className={errorMessageClassNames}>{errorMessage}</div>
       </form>
       <hr className={css.separator} />
       <div className={css.permissionsHeaderContainer}>
         <div className={css.permissionsLabel}>Permissions</div>
         <div
           className={clearPermissionsClassNames}
           onClick={onClearPermissions}
         >
           Clear Permissions
         </div>
       </div>
       <div className={css.permissionsContainer}>{permissionsList}</div>
       <div className={css.buttonsContainer}>
         <Button
           variant="outline"
           className={css.backButton}
           buttonColor={buttonThemes.outline}
           onClick={onCloseModal}
         >
           Back
         </Button>
         <Button
           variant="filled"
           className={css.createRoleButton}
           buttonColor={buttonThemes.standard}
           onClick={onClickCreateRole}
         >
           {saveButtonContent}
         </Button>
       </div>
     </Modal>
   );
 }
 
 export default CreateRolesModal;
diff --git a/web/roles/delete-role-modal.react.js b/web/roles/delete-role-modal.react.js
index 5caa99bfc..6c4a52164 100644
--- a/web/roles/delete-role-modal.react.js
+++ b/web/roles/delete-role-modal.react.js
@@ -1,111 +1,108 @@
 // @flow
 
 import * as React from 'react';
 
 import {
-  deleteCommunityRole,
+  useDeleteCommunityRole,
   deleteCommunityRoleActionTypes,
 } from 'lib/actions/thread-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { useRoleMemberCountsForCommunity } from 'lib/shared/thread-utils.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
-import {
-  useServerCall,
-  useDispatchActionPromise,
-} from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 import { constructRoleDeletionMessagePrompt } from 'lib/utils/role-utils.js';
 
 import css from './delete-role-modal.css';
 import Button, { buttonThemes } from '../components/button.react.js';
 import LoadingIndicator from '../loading-indicator.react.js';
 import Modal from '../modals/modal.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 const deleteRoleLoadingStatusSelector = createLoadingStatusSelector(
   deleteCommunityRoleActionTypes,
 );
 
 type DeleteRoleModalProps = {
   +threadInfo: ThreadInfo,
   +defaultRoleID: string,
   +roleID: string,
 };
 
 function DeleteRoleModal(props: DeleteRoleModalProps): React.Node {
   const { threadInfo, defaultRoleID, roleID } = props;
   const { popModal } = useModalContext();
 
-  const callDeleteCommunityRole = useServerCall(deleteCommunityRole);
+  const callDeleteCommunityRole = useDeleteCommunityRole();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const deleteRoleLoadingStatus: LoadingStatus = useSelector(
     deleteRoleLoadingStatusSelector,
   );
 
   const roleNamesToMemberCounts = useRoleMemberCountsForCommunity(threadInfo);
   const roleName = threadInfo.roles[roleID].name;
   const memberCount = roleNamesToMemberCounts[roleName];
   const defaultRoleName = threadInfo.roles[defaultRoleID].name;
 
   const message = constructRoleDeletionMessagePrompt(
     defaultRoleName,
     memberCount,
   );
 
   const onDeleteRole = React.useCallback(() => {
     dispatchActionPromise(
       deleteCommunityRoleActionTypes,
       (async () => {
         const response = await callDeleteCommunityRole({
           community: threadInfo.id,
           roleID: roleID,
         });
         popModal();
         return response;
       })(),
     );
   }, [
     callDeleteCommunityRole,
     dispatchActionPromise,
     roleID,
     threadInfo.id,
     popModal,
   ]);
 
   const deleteButtonContent = React.useMemo(() => {
     if (deleteRoleLoadingStatus === 'loading') {
       return (
         <LoadingIndicator status={deleteRoleLoadingStatus} size="medium" />
       );
     }
     return 'Yes, delete role';
   }, [deleteRoleLoadingStatus]);
 
   return (
     <Modal name="Delete role" onClose={popModal} size="large">
       <div className={css.roleDeletionText}>{message}</div>
       <div className={css.buttonsContainer}>
         <Button
           variant="outline"
           className={css.cancelButton}
           buttonColor={buttonThemes.outline}
           onClick={popModal}
         >
           Cancel
         </Button>
         <Button
           variant="filled"
           className={css.deleteRoleButton}
           buttonColor={buttonThemes.danger}
           onClick={onDeleteRole}
         >
           {deleteButtonContent}
         </Button>
       </div>
     </Modal>
   );
 }
 
 export default DeleteRoleModal;
diff --git a/web/sidebar/community-creation/community-creation-modal.react.js b/web/sidebar/community-creation/community-creation-modal.react.js
index 828740b05..b024631f4 100644
--- a/web/sidebar/community-creation/community-creation-modal.react.js
+++ b/web/sidebar/community-creation/community-creation-modal.react.js
@@ -1,209 +1,209 @@
 // @flow
 
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 
-import { newThread, newThreadActionTypes } from 'lib/actions/thread-actions.js';
+import {
+  useNewThread,
+  newThreadActionTypes,
+} from 'lib/actions/thread-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import type { NewThreadResult } from 'lib/types/thread-types.js';
-import {
-  useDispatchActionPromise,
-  useServerCall,
-} from 'lib/utils/action-utils.js';
+import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 
 import CommunityCreationKeyserverLabel from './community-creation-keyserver-label.react.js';
 import CommunityCreationMembersModal from './community-creation-members-modal.react.js';
 import css from './community-creation-modal.css';
 import UserAvatar from '../../avatars/user-avatar.react.js';
 import CommIcon from '../../CommIcon.react.js';
 import Button, { buttonThemes } from '../../components/button.react.js';
 import EnumSettingsOption from '../../components/enum-settings-option.react.js';
 import LoadingIndicator from '../../loading-indicator.react.js';
 import Input from '../../modals/input.react.js';
 import Modal from '../../modals/modal.react.js';
 import { updateNavInfoActionType } from '../../redux/action-types.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { nonThreadCalendarQuery } from '../../selectors/nav-selectors.js';
 
 const announcementStatements = [
   {
     statement:
       `This option sets the community’s root channel to an ` +
       `announcement channel. Only admins and other admin-appointed ` +
       `roles can send messages in an announcement channel.`,
     isStatementValid: true,
     styleStatementBasedOnValidity: false,
   },
 ];
 
 const createNewCommunityLoadingStatusSelector =
   createLoadingStatusSelector(newThreadActionTypes);
 
 function CommunityCreationModal(): React.Node {
   const modalContext = useModalContext();
 
   const dispatch = useDispatch();
   const dispatchActionPromise = useDispatchActionPromise();
 
-  const callNewThread = useServerCall(newThread);
+  const callNewThread = useNewThread();
   const calendarQueryFunc = useSelector(nonThreadCalendarQuery);
 
   const [errorMessage, setErrorMessage] = React.useState<?string>();
 
   const [pendingCommunityName, setPendingCommunityName] =
     React.useState<string>('');
 
   const onChangePendingCommunityName = React.useCallback(
     (event: SyntheticEvent<HTMLInputElement>) => {
       setErrorMessage();
       setPendingCommunityName(event.currentTarget.value);
     },
     [],
   );
 
   const [announcementSetting, setAnnouncementSetting] = React.useState(false);
   const onAnnouncementSelected = React.useCallback(() => {
     setErrorMessage();
     setAnnouncementSetting(!announcementSetting);
   }, [announcementSetting]);
 
   const callCreateNewCommunity = React.useCallback(async () => {
     const calendarQuery = calendarQueryFunc();
 
     try {
       const newThreadResult: NewThreadResult = await callNewThread({
         name: pendingCommunityName,
         type: announcementSetting
           ? threadTypes.COMMUNITY_ANNOUNCEMENT_ROOT
           : threadTypes.COMMUNITY_ROOT,
         calendarQuery,
       });
       return newThreadResult;
     } catch (e) {
       setErrorMessage('Community creation failed. Please try again.');
       throw e;
     }
   }, [
     announcementSetting,
     calendarQueryFunc,
     callNewThread,
     pendingCommunityName,
   ]);
 
   const createNewCommunity = React.useCallback(async () => {
     setErrorMessage();
 
     const newThreadResultPromise = callCreateNewCommunity();
     dispatchActionPromise(newThreadActionTypes, newThreadResultPromise);
     const newThreadResult: NewThreadResult = await newThreadResultPromise;
 
     const { newThreadID } = newThreadResult;
     await dispatch({
       type: updateNavInfoActionType,
       payload: {
         activeChatThreadID: newThreadID,
       },
     });
 
     modalContext.popModal();
     modalContext.pushModal(
       <CommunityCreationMembersModal
         onClose={modalContext.popModal}
         threadID={newThreadID}
       />,
     );
   }, [callCreateNewCommunity, dispatch, dispatchActionPromise, modalContext]);
 
   const megaphoneIcon = React.useMemo(
     () => <CommIcon icon="megaphone" size={24} />,
     [],
   );
 
   const avatarNodeEnabled = false;
   let avatarNode;
   if (avatarNodeEnabled) {
     avatarNode = (
       <div className={css.avatarContainer}>
         <UserAvatar userID="256" size="XL" />
       </div>
     );
   }
 
   const createNewCommunityLoadingStatus: LoadingStatus = useSelector(
     createNewCommunityLoadingStatusSelector,
   );
   let buttonContent;
   if (createNewCommunityLoadingStatus === 'loading') {
     buttonContent = (
       <LoadingIndicator
         status={createNewCommunityLoadingStatus}
         size="medium"
       />
     );
   } else if (errorMessage) {
     buttonContent = errorMessage;
   } else {
     buttonContent = 'Create community';
   }
 
   return (
     <Modal
       name="Create a community"
       onClose={modalContext.popModal}
       size="large"
     >
       <div className={css.modalBody}>
         <CommunityCreationKeyserverLabel />
         {avatarNode}
         <form method="POST" className={css.formContainer}>
           <div>
             <div className={css.formTitle}>Community Name</div>
             <div className={css.formContent}>
               <Input
                 type="text"
                 value={pendingCommunityName}
                 placeholder="Community Name"
                 onChange={onChangePendingCommunityName}
               />
             </div>
           </div>
           <div className={css.formNotice}>
             You may edit your community&rsquo;s image and name later.
           </div>
           <hr />
           <div className={css.optionalSettingsContainer}>
             <div className={css.optionalSettingsLabel}>Optional settings</div>
             <EnumSettingsOption
               selected={announcementSetting}
               onSelect={onAnnouncementSelected}
               icon={megaphoneIcon}
               title="Announcement"
               statements={announcementStatements}
               iconPosition="top"
               type="checkbox"
             />
           </div>
           <div className={css.createCommunityButtonContainer}>
             <Button
               onClick={createNewCommunity}
               variant="filled"
               buttonColor={
                 errorMessage ? buttonThemes.danger : buttonThemes.standard
               }
               disabled={createNewCommunityLoadingStatus === 'loading'}
             >
               <div className={css.createCommunityButtonContent}>
                 {buttonContent}
               </div>
             </Button>
           </div>
         </form>
       </div>
     </Modal>
   );
 }
 
 export default CommunityCreationModal;