Implemented ability to quickly add a user to a group

ts/state/ducks/conversations.ts

@@ -130,6 +130,7 @@ export type ConversationType = {
   areWePendingApproval?: boolean;
   canChangeTimer?: boolean;
   canEditGroupInfo?: boolean;
+  canAddNewMembers?: boolean;
   color?: AvatarColorType;
   conversationColor?: ConversationColorType;
   customColor?: CustomColorType;
@@ -803,6 +804,7 @@ export type ConversationActionType =
 // Action Creators
 
 export const actions = {
+  addMemberToGroup,
   cancelConversationVerification,
   changeHasGroupLink,
   clearCancelledConversationVerification,
@@ -2004,6 +2006,25 @@ function removeMemberFromGroup(
   };
 }
 
+function addMemberToGroup(
+  conversationId: string,
+  contactId: string,
+  onComplete: () => void
+): ThunkAction<void, RootStateType, unknown, never> {
+  return async () => {
+    const conversationModel = window.ConversationController.get(conversationId);
+    if (conversationModel) {
+      const idForLogging = conversationModel.idForLogging();
+      await longRunningTaskWrapper({
+        name: 'addMemberToGroup',
+        idForLogging,
+        task: () => conversationModel.addMembersV2([contactId]),
+      });
+      onComplete();
+    }
+  };
+}
+
 function toggleGroupsForStorySend(
   conversationIds: Array<string>
 ): ThunkAction<void, RootStateType, unknown, NoopActionType> {

ts/state/ducks/globalModals.ts

@@ -15,23 +15,24 @@ import { useBoundActions } from '../../hooks/useBoundActions';
 // State
 
 export type ForwardMessagePropsType = Omit<PropsForMessage, 'renderingContext'>;
-export type SafetyNumberChangedBlockingDataType = {
-  readonly promiseUuid: UUIDStringType;
-  readonly source?: SafetyNumberChangeSource;
-};
+export type SafetyNumberChangedBlockingDataType = Readonly<{
+  promiseUuid: UUIDStringType;
+  source?: SafetyNumberChangeSource;
+}>;
 
-export type GlobalModalsStateType = {
-  readonly contactModalState?: ContactModalStateType;
-  readonly forwardMessageProps?: ForwardMessagePropsType;
-  readonly isProfileEditorVisible: boolean;
-  readonly isSignalConnectionsVisible: boolean;
-  readonly isStoriesSettingsVisible: boolean;
-  readonly isWhatsNewVisible: boolean;
-  readonly profileEditorHasError: boolean;
-  readonly safetyNumberChangedBlockingData?: SafetyNumberChangedBlockingDataType;
-  readonly safetyNumberModalContactId?: string;
-  readonly userNotFoundModalState?: UserNotFoundModalStateType;
-};
+export type GlobalModalsStateType = Readonly<{
+  contactModalState?: ContactModalStateType;
+  forwardMessageProps?: ForwardMessagePropsType;
+  isProfileEditorVisible: boolean;
+  isSignalConnectionsVisible: boolean;
+  isStoriesSettingsVisible: boolean;
+  isWhatsNewVisible: boolean;
+  profileEditorHasError: boolean;
+  safetyNumberChangedBlockingData?: SafetyNumberChangedBlockingDataType;
+  safetyNumberModalContactId?: string;
+  addUserToAnotherGroupModalContactId?: string;
+  userNotFoundModalState?: UserNotFoundModalStateType;
+}>;
 
 // Actions
 
@@ -49,6 +50,8 @@ const TOGGLE_PROFILE_EDITOR = 'globalModals/TOGGLE_PROFILE_EDITOR';
 export const TOGGLE_PROFILE_EDITOR_ERROR =
   'globalModals/TOGGLE_PROFILE_EDITOR_ERROR';
 const TOGGLE_SAFETY_NUMBER_MODAL = 'globalModals/TOGGLE_SAFETY_NUMBER_MODAL';
+const TOGGLE_ADD_USER_TO_ANOTHER_GROUP_MODAL =
+  'globalModals/TOGGLE_ADD_USER_TO_ANOTHER_GROUP_MODAL';
 const TOGGLE_SIGNAL_CONNECTIONS_MODAL =
   'globalModals/TOGGLE_SIGNAL_CONNECTIONS_MODAL';
 export const SHOW_SEND_ANYWAY_DIALOG = 'globalModals/SHOW_SEND_ANYWAY_DIALOG';
@@ -113,6 +116,11 @@ type ToggleSafetyNumberModalActionType = {
   payload: string | undefined;
 };
 
+type ToggleAddUserToAnotherGroupModalActionType = {
+  type: typeof TOGGLE_ADD_USER_TO_ANOTHER_GROUP_MODAL;
+  payload: string | undefined;
+};
+
 type ToggleSignalConnectionsModalActionType = {
   type: typeof TOGGLE_SIGNAL_CONNECTIONS_MODAL;
 };
@@ -151,6 +159,7 @@ export type GlobalModalsActionType =
   | ToggleProfileEditorActionType
   | ToggleProfileEditorErrorActionType
   | ToggleSafetyNumberModalActionType
+  | ToggleAddUserToAnotherGroupModalActionType
   | ToggleSignalConnectionsModalActionType;
 
 // Action Creators
@@ -170,6 +179,7 @@ export const actions = {
   toggleProfileEditor,
   toggleProfileEditorHasError,
   toggleSafetyNumberModal,
+  toggleAddUserToAnotherGroupModal,
   toggleSignalConnectionsModal,
 };
 
@@ -282,6 +292,15 @@ function toggleSafetyNumberModal(
   };
 }
 
+function toggleAddUserToAnotherGroupModal(
+  contactId?: string
+): ToggleAddUserToAnotherGroupModalActionType {
+  return {
+    type: TOGGLE_ADD_USER_TO_ANOTHER_GROUP_MODAL,
+    payload: contactId,
+  };
+}
+
 function toggleSignalConnectionsModal(): ToggleSignalConnectionsModalActionType {
   return {
     type: TOGGLE_SIGNAL_CONNECTIONS_MODAL,
@@ -394,6 +413,13 @@ export function reducer(
     };
   }
 
+  if (action.type === TOGGLE_ADD_USER_TO_ANOTHER_GROUP_MODAL) {
+    return {
+      ...state,
+      addUserToAnotherGroupModalContactId: action.payload,
+    };
+  }
+
   if (action.type === TOGGLE_FORWARD_MESSAGE_MODAL) {
     return {
       ...state,

ts/state/ducks/toast.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { useBoundActions } from '../../hooks/useBoundActions';
+import type { ReplacementValuesType } from '../../types/Util';
 
 export enum ToastType {
   Error = 'Error',
@@ -12,12 +13,17 @@ export enum ToastType {
   StoryVideoError = 'StoryVideoError',
   StoryVideoTooLong = 'StoryVideoTooLong',
   StoryVideoUnsupported = 'StoryVideoUnsupported',
+  AddingUserToGroup = 'AddingUserToGroup',
+  UserAddedToGroup = 'UserAddedToGroup',
 }
 
 // State
 
 export type ToastStateType = {
-  toastType?: ToastType;
+  toast?: {
+    toastType: ToastType;
+    parameters?: ReplacementValuesType;
+  };
 };
 
 // Actions
@@ -31,7 +37,10 @@ type HideToastActionType = {
 
 type ShowToastActionType = {
   type: typeof SHOW_TOAST;
-  payload: ToastType;
+  payload: {
+    toastType: ToastType;
+    parameters?: ReplacementValuesType;
+  };
 };
 
 export type ToastActionType = HideToastActionType | ShowToastActionType;
@@ -45,13 +54,17 @@ function hideToast(): HideToastActionType {
 }
 
 export type ShowToastActionCreatorType = (
-  toastType: ToastType
+  toastType: ToastType,
+  parameters?: ReplacementValuesType
 ) => ShowToastActionType;
 
-const showToast: ShowToastActionCreatorType = toastType => {
+const showToast: ShowToastActionCreatorType = (toastType, parameters) => {
   return {
     type: SHOW_TOAST,
-    payload: toastType,
+    payload: {
+      toastType,
+      parameters,
+    },
   };
 };
 
@@ -75,14 +88,14 @@ export function reducer(
   if (action.type === HIDE_TOAST) {
     return {
       ...state,
-      toastType: undefined,
+      toast: undefined,
     };
   }
 
   if (action.type === SHOW_TOAST) {
     return {
       ...state,
-      toastType: action.payload,
+      toast: action.payload,
     };
   }
 

ts/state/selectors/conversations.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import memoizee from 'memoizee';
-import { isNumber } from 'lodash';
+import { isNumber, pick } from 'lodash';
 import { createSelector } from 'reselect';
 
 import type { StateType } from '../reducer';
@@ -477,6 +477,18 @@ export const getAllComposableConversations = createSelector(
     )
 );
 
+export const getAllGroupsWithInviteAccess = createSelector(
+  getConversationLookup,
+  (conversationLookup: ConversationLookupType): Array<ConversationType> =>
+    Object.values(conversationLookup).filter(conversation => {
+      return (
+        conversation.type === 'group' &&
+        conversation.title &&
+        conversation.canAddNewMembers
+      );
+    })
+);
+
 /**
  * getComposableContacts/getCandidateContactsForNewGroup both return contacts for the
  * composer and group members, a different list from your primary system contacts.
@@ -1010,6 +1022,14 @@ export const getGroupAdminsSelector = createSelector(
   }
 );
 
+export const getContactSelector = createSelector(
+  getConversationSelector,
+  conversationSelector => {
+    return (contactId: string) =>
+      pick(conversationSelector(contactId), 'id', 'title', 'uuid');
+  }
+);
+
 const getConversationVerificationData = createSelector(
   getConversations,
   (

ts/state/smart/AddUserToAnotherGroupModal.tsx

@@ -0,0 +1,37 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { connect } from 'react-redux';
+import { mapDispatchToProps } from '../actions';
+import { AddUserToAnotherGroupModal } from '../../components/AddUserToAnotherGroupModal';
+import type { StateType } from '../reducer';
+import {
+  getAllGroupsWithInviteAccess,
+  getContactSelector,
+} from '../selectors/conversations';
+import { getIntl, getRegionCode, getTheme } from '../selectors/user';
+
+export type Props = {
+  contactID: string;
+};
+
+const mapStateToProps = (state: StateType, props: Props) => {
+  const candidateConversations = getAllGroupsWithInviteAccess(state);
+  const getContact = getContactSelector(state);
+
+  const regionCode = getRegionCode(state);
+
+  return {
+    contact: getContact(props.contactID),
+    i18n: getIntl(state),
+    theme: getTheme(state),
+    candidateConversations,
+    regionCode,
+  };
+};
+
+const smart = connect(mapStateToProps, mapDispatchToProps);
+
+export const SmartAddUserToAnotherGroupModal = smart(
+  AddUserToAnotherGroupModal
+);

ts/state/smart/App.tsx

@@ -91,7 +91,7 @@ const mapStateToProps = (state: StateType) => {
     titleBarDoubleClick: (): void => {
       window.titleBarDoubleClick();
     },
-    toastType: state.toast.toastType,
+    toast: state.toast.toast,
   };
 };
 

ts/state/smart/ConversationDetails.tsx

@@ -3,6 +3,7 @@
 
 import React from 'react';
 import { connect } from 'react-redux';
+import { sortBy } from 'lodash';
 
 import type { StateType } from '../reducer';
 import { mapDispatchToProps } from '../actions';
@@ -11,6 +12,7 @@ import { ConversationDetails } from '../../components/conversation/conversation-
 import {
   getConversationByIdSelector,
   getConversationByUuidSelector,
+  getAllComposableConversations,
 } from '../selectors/conversations';
 import { getGroupMemberships } from '../../util/getGroupMemberships';
 import { getActiveCallState } from '../selectors/calling';
@@ -84,6 +86,7 @@ const mapStateToProps = (
   );
 
   const canEditGroupInfo = Boolean(conversation.canEditGroupInfo);
+  const canAddNewMembers = Boolean(conversation.canAddNewMembers);
   const isAdmin = Boolean(conversation.areWeAdmin);
 
   const hasGroupLink =
@@ -98,11 +101,25 @@ const mapStateToProps = (
 
   const badges = getBadgesSelector(state)(conversation.badges);
 
+  const groupsInCommon =
+    conversation.type === 'direct'
+      ? getAllComposableConversations(state).filter(
+          c =>
+            c.type === 'group' &&
+            (c.memberships ?? []).some(
+              member => member.uuid === conversation.uuid
+            )
+        )
+      : [];
+
+  const groupsInCommonSorted = sortBy(groupsInCommon, 'title');
+
   return {
     ...props,
     areWeASubscriber: getAreWeASubscriber(state),
     badges,
     canEditGroupInfo,
+    canAddNewMembers,
     conversation: {
       ...conversation,
       ...getConversationColorAttributes(conversation),
@@ -114,6 +131,7 @@ const mapStateToProps = (
     ...groupMemberships,
     userAvatarData: conversation.avatars || [],
     hasGroupLink,
+    groupsInCommon: groupsInCommonSorted,
     isGroup: conversation.type === 'group',
     theme: getTheme(state),
     renderChooseGroupMembersModal,

ts/state/smart/GlobalModalContainer.tsx

@@ -14,7 +14,8 @@ import { SmartStoriesSettingsModal } from './StoriesSettingsModal';
 import { getConversationsStoppingSend } from '../selectors/conversations';
 import { mapDispatchToProps } from '../actions';
 
-import { getIntl } from '../selectors/user';
+import { getIntl, getTheme } from '../selectors/user';
+import { SmartAddUserToAnotherGroupModal } from './AddUserToAnotherGroupModal';
 
 function renderProfileEditor(): JSX.Element {
   return <SmartProfileEditorModal />;
@@ -43,6 +44,7 @@ const mapStateToProps = (state: StateType) => {
     ...state.globalModals,
     hasSafetyNumberChangeModal: getConversationsStoppingSend(state).length > 0,
     i18n,
+    theme: getTheme(state),
     renderContactModal,
     renderForwardMessageModal,
     renderProfileEditor,
@@ -52,6 +54,15 @@ const mapStateToProps = (state: StateType) => {
         contactID={String(state.globalModals.safetyNumberModalContactId)}
       />
     ),
+    renderAddUserToAnotherGroup: () => {
+      return (
+        <SmartAddUserToAnotherGroupModal
+          contactID={String(
+            state.globalModals.addUserToAnotherGroupModalContactId
+          )}
+        />
+      );
+    },
     renderSendAnywayDialog,
   };
 };