Fix inaccurate numbers on group details screen

ts/components/conversation/conversation-details/ConversationDetails.stories.tsx

@@ -45,6 +45,13 @@ const createProps = (hasGroupLink = false): Props => ({
       isMe: i === 2,
     }),
   })),
+  pendingApprovalMemberships: times(8, () => ({
+    member: getDefaultConversation(),
+  })),
+  pendingMemberships: times(5, () => ({
+    metadata: {},
+    member: getDefaultConversation(),
+  })),
   setDisappearingMessages: action('setDisappearingMessages'),
   showAllMedia: action('showAllMedia'),
   showContactModal: action('showContactModal'),

ts/components/conversation/conversation-details/ConversationDetails.tsx

@@ -22,6 +22,10 @@ import {
   ConversationDetailsMembershipList,
   GroupV2Membership,
 } from './ConversationDetailsMembershipList';
+import {
+  GroupV2PendingMembership,
+  GroupV2RequestingMembership,
+} from './PendingInvites';
 import { EditConversationAttributesModal } from './EditConversationAttributesModal';
 import { RequestState } from './util';
 
@@ -41,6 +45,8 @@ export type StateProps = {
   isAdmin: boolean;
   loadRecentMediaItems: (limit: number) => void;
   memberships: Array<GroupV2Membership>;
+  pendingApprovalMemberships: ReadonlyArray<GroupV2RequestingMembership>;
+  pendingMemberships: ReadonlyArray<GroupV2PendingMembership>;
   setDisappearingMessages: (seconds: number) => void;
   showAllMedia: () => void;
   showContactModal: (conversationId: string) => void;
@@ -77,6 +83,8 @@ export const ConversationDetails: React.ComponentType<Props> = ({
   isAdmin,
   loadRecentMediaItems,
   memberships,
+  pendingApprovalMemberships,
+  pendingMemberships,
   setDisappearingMessages,
   showAllMedia,
   showContactModal,
@@ -108,9 +116,6 @@ export const ConversationDetails: React.ComponentType<Props> = ({
     throw new Error('ConversationDetails rendered without a conversation');
   }
 
-  const pendingMemberships = conversation.pendingMemberships || [];
-  const pendingApprovalMemberships =
-    conversation.pendingApprovalMemberships || [];
   const invitesCount =
     pendingMemberships.length + pendingApprovalMemberships.length;
 
@@ -213,6 +218,7 @@ export const ConversationDetails: React.ComponentType<Props> = ({
         canEdit={canEditGroupInfo}
         conversation={conversation}
         i18n={i18n}
+        memberships={memberships}
         startEditing={() => {
           setModalState(ModalState.EditingGroupAttributes);
         }}

ts/components/conversation/conversation-details/ConversationDetailsHeader.stories.tsx

@@ -27,7 +27,6 @@ const createConversation = (): ConversationType =>
     type: 'group',
     lastUpdated: 0,
     title: text('conversation title', 'Some Conversation'),
-    memberships: new Array(number('conversation members length', 0)),
   });
 
 const createProps = (overrideProps: Partial<Props> = {}): Props => ({
@@ -35,6 +34,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   i18n,
   canEdit: false,
   startEditing: action('startEditing'),
+  memberships: new Array(number('conversation members length', 0)),
   ...overrideProps,
 });
 

ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx

@@ -7,12 +7,14 @@ import { Avatar } from '../../Avatar';
 import { Emojify } from '../Emojify';
 import { LocalizerType } from '../../../types/Util';
 import { ConversationType } from '../../../state/ducks/conversations';
+import { GroupV2Membership } from './ConversationDetailsMembershipList';
 import { bemGenerator } from './util';
 
 export type Props = {
   canEdit: boolean;
   conversation: ConversationType;
   i18n: LocalizerType;
+  memberships: Array<GroupV2Membership>;
   startEditing: () => void;
 };
 
@@ -22,10 +24,9 @@ export const ConversationDetailsHeader: React.ComponentType<Props> = ({
   canEdit,
   conversation,
   i18n,
+  memberships,
   startEditing,
 }) => {
-  const memberships = conversation.memberships || [];
-
   const contents = (
     <>
       <Avatar