Show common groups in contact modal

ts/components/SharedGroupNames.tsx

@@ -0,0 +1,83 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { FunctionComponent } from 'react';
+import { take } from 'lodash';
+
+import { Emojify } from './conversation/Emojify';
+import { Intl } from './Intl';
+import { LocalizerType } from '../types/Util';
+
+type PropsType = {
+  i18n: LocalizerType;
+  nameClassName?: string;
+  sharedGroupNames: Array<string>;
+};
+
+export const SharedGroupNames: FunctionComponent<PropsType> = ({
+  i18n,
+  nameClassName,
+  sharedGroupNames,
+}) => {
+  const firstThreeGroups = take(sharedGroupNames, 3).map((group, i) => (
+    // We cannot guarantee uniqueness of group names
+    // eslint-disable-next-line react/no-array-index-key
+    <strong key={i} className={nameClassName}>
+      <Emojify text={group} />
+    </strong>
+  ));
+
+  if (sharedGroupNames.length > 3) {
+    const remainingCount = sharedGroupNames.length - 3;
+    return (
+      <Intl
+        i18n={i18n}
+        id="member-of-more-than-3-groups"
+        components={{
+          group1: firstThreeGroups[0],
+          group2: firstThreeGroups[1],
+          group3: firstThreeGroups[2],
+          remainingCount: remainingCount.toString(),
+        }}
+      />
+    );
+  }
+  if (firstThreeGroups.length === 3) {
+    return (
+      <Intl
+        i18n={i18n}
+        id="member-of-3-groups"
+        components={{
+          group1: firstThreeGroups[0],
+          group2: firstThreeGroups[1],
+          group3: firstThreeGroups[2],
+        }}
+      />
+    );
+  }
+  if (firstThreeGroups.length >= 2) {
+    return (
+      <Intl
+        i18n={i18n}
+        id="member-of-2-groups"
+        components={{
+          group1: firstThreeGroups[0],
+          group2: firstThreeGroups[1],
+        }}
+      />
+    );
+  }
+  if (firstThreeGroups.length >= 1) {
+    return (
+      <Intl
+        i18n={i18n}
+        id="member-of-1-group"
+        components={{
+          group: firstThreeGroups[0],
+        }}
+      />
+    );
+  }
+
+  return <>{i18n('no-groups-in-common')}</>;
+};

ts/components/conversation/ContactModal.tsx

@@ -7,6 +7,7 @@ import { createPortal } from 'react-dom';
 import { ConversationType } from '../../state/ducks/conversations';
 import { About } from './About';
 import { Avatar } from '../Avatar';
+import { SharedGroupNames } from '../SharedGroupNames';
 import { LocalizerType } from '../../types/Util';
 
 export type PropsType = {
@@ -119,10 +120,16 @@ export const ContactModal = ({
               <About text={contact.about} />
             </div>
             {contact.phoneNumber && (
-              <div className="module-contact-modal__profile-and-number">
+              <div className="module-contact-modal__info">
                 {contact.phoneNumber}
               </div>
             )}
+            <div className="module-contact-modal__info">
+              <SharedGroupNames
+                i18n={i18n}
+                sharedGroupNames={contact.sharedGroupNames || []}
+              />
+            </div>
             <div className="module-contact-modal__button-container">
               <button
                 type="button"

ts/components/conversation/ConversationHero.tsx

@@ -2,12 +2,10 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
-import { take } from 'lodash';
 import { Avatar, Props as AvatarProps } from '../Avatar';
 import { ContactName } from './ContactName';
 import { About } from './About';
-import { Emojify } from './Emojify';
-import { Intl } from '../Intl';
+import { SharedGroupNames } from '../SharedGroupNames';
 import { LocalizerType } from '../../types/Util';
 
 export type Props = {
@@ -32,7 +30,6 @@ const renderMembershipRow = ({
   'i18n' | 'phoneNumber' | 'sharedGroupNames' | 'conversationType' | 'isMe'
 >) => {
   const className = 'module-conversation-hero__membership';
-  const nameClassName = `${className}__name`;
 
   if (conversationType !== 'direct') {
     return null;
@@ -43,73 +40,15 @@ const renderMembershipRow = ({
   }
 
   if (sharedGroupNames.length > 0) {
-    const firstThreeGroups = take(sharedGroupNames, 3).map((group, i) => (
-      // We cannot guarantee uniqueness of group names
-      // eslint-disable-next-line react/no-array-index-key
-      <strong key={i} className={nameClassName}>
-        <Emojify text={group} />
-      </strong>
-    ));
-
-    if (sharedGroupNames.length > 3) {
-      const remainingCount = sharedGroupNames.length - 3;
-      return (
-        <div className={className}>
-          <Intl
-            i18n={i18n}
-            id="ConversationHero--membership-extra"
-            components={{
-              group1: firstThreeGroups[0],
-              group2: firstThreeGroups[1],
-              group3: firstThreeGroups[2],
-              remainingCount: remainingCount.toString(),
-            }}
-          />
-        </div>
-      );
-    }
-    if (firstThreeGroups.length === 3) {
-      return (
-        <div className={className}>
-          <Intl
-            i18n={i18n}
-            id="ConversationHero--membership-3"
-            components={{
-              group1: firstThreeGroups[0],
-              group2: firstThreeGroups[1],
-              group3: firstThreeGroups[2],
-            }}
-          />
-        </div>
-      );
-    }
-    if (firstThreeGroups.length >= 2) {
-      return (
-        <div className={className}>
-          <Intl
-            i18n={i18n}
-            id="ConversationHero--membership-2"
-            components={{
-              group1: firstThreeGroups[0],
-              group2: firstThreeGroups[1],
-            }}
-          />
-        </div>
-      );
-    }
-    if (firstThreeGroups.length >= 1) {
-      return (
-        <div className={className}>
-          <Intl
-            i18n={i18n}
-            id="ConversationHero--membership-1"
-            components={{
-              group: firstThreeGroups[0],
-            }}
-          />
-        </div>
-      );
-    }
+    return (
+      <div className={className}>
+        <SharedGroupNames
+          i18n={i18n}
+          nameClassName={`${className}__name`}
+          sharedGroupNames={sharedGroupNames}
+        />
+      </div>
+    );
   }
 
   if (!phoneNumber) {

ts/util/lint/exceptions.json

@@ -16492,7 +16492,7 @@
     "rule": "React-useRef",
     "path": "ts/components/conversation/ContactModal.js",
     "line": "    const overlayRef = react_1.default.useRef(null);",
-    "lineNumber": 18,
+    "lineNumber": 19,
     "reasonCategory": "usageTrusted",
     "updated": "2020-11-09T17:48:12.173Z"
   },
@@ -16500,7 +16500,7 @@
     "rule": "React-useRef",
     "path": "ts/components/conversation/ContactModal.js",
     "line": "    const closeButtonRef = react_1.default.useRef(null);",
-    "lineNumber": 19,
+    "lineNumber": 20,
     "reasonCategory": "usageTrusted",
     "updated": "2020-11-10T21:27:04.909Z"
   },
@@ -16526,7 +16526,7 @@
     "rule": "React-useRef",
     "path": "ts/components/conversation/ConversationHero.js",
     "line": "    const firstRenderRef = React.useRef(true);",
-    "lineNumber": 85,
+    "lineNumber": 48,
     "reasonCategory": "falseMatch",
     "updated": "2020-10-26T19:12:24.410Z",
     "reasonDetail": "Doesn't refer to a DOM element."
@@ -16535,7 +16535,7 @@
     "rule": "React-useRef",
     "path": "ts/components/conversation/ConversationHero.tsx",
     "line": "  const firstRenderRef = React.useRef(true);",
-    "lineNumber": 138,
+    "lineNumber": 77,
     "reasonCategory": "falseMatch",
     "updated": "2020-10-26T19:12:24.410Z",
     "reasonDetail": "Doesn't refer to a DOM element."