Fix GM display name (#6215)

app/actions/remote/channel.ts

@@ -394,6 +394,7 @@ export async function fetchMissingSidebarInfo(serverUrl: string, directChannels:
         const displayName = displayNameByChannel[c.id];
         if (displayName) {
             c.display_name = displayName;
+            c.fake = true;
         }
     });
 

app/actions/remote/user.ts

@@ -121,7 +121,7 @@ export async function fetchProfilesPerChannels(serverUrl: string, channelIds: st
 
         // let's filter those channels that we already have the users
         const membersCount = await getMembersCountByChannelsId(database, channelIds);
-        const channelsToFetch = channelIds.filter((c) => membersCount[c] <= 1);
+        const channelsToFetch = channelIds.filter((c) => membersCount[c] <= 1 || membersCount[c] > 2);
 
         // Batch fetching profiles per channel by chunks of 50
         const channels = chunk(channelsToFetch, 50);

app/components/channel_icon/index.tsx

@@ -178,7 +178,7 @@ const ChannelIcon = ({
                     style={[styles.group, unreadGroup, activeGroup, {fontSize}]}
                     testID={`${testID}.gm_member_count`}
                 >
-                    {membersCount}
+                    {membersCount - 1}
                 </Text>
             </View>
         );

app/components/channel_item/__snapshots__/channel_item.test.tsx.snap

@@ -79,46 +79,23 @@ exports[`components/channel_list/categories/body/channel_item should match snaps
             ]
           }
         >
-          <View
+          <Icon
+            name="globe"
             style={
               Array [
                 Object {
-                  "alignItems": "center",
-                  "backgroundColor": "rgba(255,255,255,0.16)",
-                  "borderRadius": 4,
-                  "justifyContent": "center",
+                  "color": "rgba(255,255,255,0.4)",
                 },
                 undefined,
                 undefined,
                 Object {
-                  "height": 24,
-                  "width": 24,
+                  "fontSize": 24,
+                  "left": 1,
                 },
               ]
             }
-          >
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#ffffff",
-                    "fontFamily": "OpenSans-SemiBold",
-                    "fontSize": 12,
-                    "fontWeight": "600",
-                    "lineHeight": 16,
-                  },
-                  undefined,
-                  undefined,
-                  Object {
-                    "fontSize": 12,
-                  },
-                ]
-              }
-              testID="undefined.gm_member_count"
-            >
-              1
-            </Text>
-          </View>
+            testID="undefined.public"
+          />
         </View>
         <View>
           <Text

app/components/channel_item/channel_item.test.tsx

@@ -31,9 +31,10 @@ describe('components/channel_list/categories/body/channel_item', () => {
     it('should match snapshot', () => {
         const wrapper = renderWithIntlAndTheme(
             <ChannelItem
-                channel={{displayName: 'Hello!', type: 'G', shared: false, name: 'hello', deleteAt: 0} as ChannelModel}
+                channel={{displayName: 'Hello!', type: 'O', shared: false, name: 'hello', deleteAt: 0} as ChannelModel}
                 hasDraft={false}
                 isActive={false}
+                membersCount={0}
                 myChannel={myChannel}
                 isMuted={false}
                 collapsed={false}
@@ -53,6 +54,7 @@ describe('components/channel_list/categories/body/channel_item', () => {
                 channel={{displayName: 'Hello!', type: 'G', shared: false, name: 'hello', deleteAt: 0} as ChannelModel}
                 hasDraft={true}
                 isActive={false}
+                membersCount={3}
                 myChannel={myChannel}
                 isMuted={false}
                 collapsed={false}

app/components/channel_item/channel_item.tsx

@@ -29,6 +29,7 @@ type Props = {
     isInfo?: boolean;
     isMuted: boolean;
     isVisible: boolean;
+    membersCount: number;
     myChannel?: MyChannelModel;
     onPress: (channelId: string) => void;
     teamDisplayName?: string;
@@ -115,7 +116,7 @@ export const textStyle = StyleSheet.create({
 
 const ChannelListItem = ({
     channel, collapsed, currentUserId, hasDraft,
-    isActive, isInfo, isMuted, isVisible,
+    isActive, isInfo, isMuted, isVisible, membersCount,
     myChannel, onPress, teamDisplayName, testID}: Props) => {
     const {formatMessage} = useIntl();
     const theme = useTheme();
@@ -151,13 +152,6 @@ const ChannelListItem = ({
         onPress(myChannel?.id || channel.id);
     }, [channel.id, myChannel?.id]);
 
-    const membersCount = useMemo(() => {
-        if (channel.type === General.GM_CHANNEL) {
-            return channel.name.split(',').length;
-        }
-        return 0;
-    }, [channel.type, channel.name]);
-
     const textStyles = useMemo(() => [
         isBright ? textStyle.bright : textStyle.regular,
         styles.text,

app/components/channel_item/index.ts

@@ -7,7 +7,7 @@ import React from 'react';
 import {of as of$, combineLatest} from 'rxjs';
 import {switchMap, distinctUntilChanged} from 'rxjs/operators';
 
-import {Preferences} from '@constants';
+import {General, Preferences} from '@constants';
 import {getPreferenceAsBool} from '@helpers/api/preference';
 import {observeMyChannel} from '@queries/servers/channel';
 import {queryDraft} from '@queries/servers/drafts';
@@ -79,6 +79,11 @@ const enhance = withObservables(['channel', 'isUnreads', 'showTeamName'], ({chan
         );
     }
 
+    let membersCount = of$(0);
+    if (channel.type === General.GM_CHANNEL) {
+        membersCount = channel.members.observeCount();
+    }
+
     return {
         channel: channel.observe(),
         currentUserId,
@@ -86,6 +91,7 @@ const enhance = withObservables(['channel', 'isUnreads', 'showTeamName'], ({chan
         isActive,
         isMuted,
         isVisible,
+        membersCount,
         myChannel,
         teamDisplayName,
     };

app/helpers/database/index.ts

@@ -11,19 +11,17 @@ export const extractRecordsForTable = <T>(records: Model[], tableName: string):
     return records.filter((r) => r.constructor.table === tableName) as T[];
 };
 
-export function extractChannelDisplayName(raw: Pick<Channel, 'type' | 'display_name'>, record?: ChannelModel) {
+export function extractChannelDisplayName(raw: Pick<Channel, 'type' | 'display_name' | 'fake'>, record?: ChannelModel) {
     let displayName = '';
     switch (raw.type) {
         case General.DM_CHANNEL:
             displayName = raw.display_name.trim() || record?.displayName || '';
             break;
         case General.GM_CHANNEL: {
-            const rawMembers = raw.display_name.split(',').length;
-            const recordMembers = record?.displayName.split(',').length || rawMembers;
-            if (recordMembers < rawMembers && record?.displayName) {
-                displayName = record.displayName;
-            } else {
+            if (raw.fake) {
                 displayName = raw.display_name;
+            } else {
+                displayName = record?.displayName || raw.display_name;
             }
             break;
         }