GroupNotification: Fix 'joined group' pluralization (#4380)

ts/components/conversation/GroupNotification.stories.tsx

@@ -179,6 +179,29 @@ const stories: Array<GroupNotificationStory> = [
         ],
         i18n,
       },
+      {
+        from: {
+          name: 'Alice',
+          phoneNumber: '(202) 555-1000',
+        },
+        changes: [
+          {
+            type: 'add',
+            contacts: [
+              {
+                phoneNumber: '(202) 555-1000',
+                profileName: 'Mr. Fire',
+                isMe: true,
+              },
+              {
+                phoneNumber: '(202) 555-1001',
+                profileName: 'Mrs. Ice',
+              },
+            ],
+          },
+        ],
+        i18n,
+      },
     ],
   ],
   [

ts/components/conversation/GroupNotification.tsx

@@ -75,35 +75,25 @@ export class GroupNotification extends React.Component<Props> {
           throw new Error('Group update is missing contacts');
         }
 
-        if (contacts.length === 1) {
+        const otherPeopleNotifMsg =
-          if (contactsIncludesMe) {
+          otherPeople.length === 1
-            return <Intl i18n={i18n} id="youJoinedTheGroup" />;
+            ? 'joinedTheGroup'
-          } else {
+            : 'multipleJoinedTheGroup';
-            return (
-              <Intl
-                i18n={i18n}
-                id="joinedTheGroup"
-                components={[otherPeopleWithCommas]}
-              />
-            );
-          }
-        }
-
-        const joinedKey =
-          contacts.length > 1 ? 'multipleJoinedTheGroup' : 'joinedTheGroup';
 
         return (
           <>
-            <Intl
+            {otherPeople.length > 0 && (
-              i18n={i18n}
+              <Intl
-              id={joinedKey}
+                i18n={i18n}
-              components={[otherPeopleWithCommas]}
+                id={otherPeopleNotifMsg}
-            />
+                components={[otherPeopleWithCommas]}
-            {contactsIncludesMe ? (
+              />
+            )}
+            {contactsIncludesMe && (
               <div className="module-group-notification__change">
                 <Intl i18n={i18n} id="youJoinedTheGroup" />
               </div>
-            ) : null}
+            )}
           </>
         );
       case 'remove':