Display subscriber count for open groups (#741)

Display subscriber count for open groups

js/models/conversations.js

@@ -2534,6 +2534,10 @@
         });
       }
     },
+    async setSubscriberCount(count) {
+      this.set({ subscriberCount: count });
+      // Not sure if we care about updating the database
+    },
     async setGroupNameAndAvatar(name, avatarPath) {
       const currentName = this.get('name');
       const profileAvatar = this.get('profileAvatar');

js/modules/loki_app_dot_net_api.js

@@ -889,14 +889,16 @@ class LokiPublicChannelAPI {
         include_annotations: 1,
       },
     });
-    if (
-      !res.err &&
-      res.response &&
-      res.response.data.annotations &&
-      res.response.data.annotations.length
-    ) {
+
+    if (res.err || !res.response || !res.response.data) {
+      return;
+    }
+
+    const { data } = res.response;
+
+    if (data.annotations && data.annotations.length) {
       // get our setting note
-      const settingNotes = res.response.data.annotations.filter(
+      const settingNotes = data.annotations.filter(
         note => note.type === SETTINGS_CHANNEL_ANNOTATION_TYPE
       );
       const note = settingNotes && settingNotes.length ? settingNotes[0] : {};
@@ -911,6 +913,10 @@ class LokiPublicChannelAPI {
       // who are the moderators?
       // else could set a default in case of server problems...
     }
+
+    if (data.counts && Number.isInteger(data.counts.subscribers)) {
+      this.conversation.setSubscriberCount(data.counts.subscribers);
+    }
   }
 
   // get moderation actions

js/views/conversation_view.js

@@ -189,6 +189,7 @@
             window.storage.get('primaryDevicePubKey')
           ),
           members,
+          subscriberCount: this.model.get('subscriberCount'),
           selectedMessages: this.model.selectedMessages,
           expirationSettingName,
           showBackButton: Boolean(this.panels && this.panels.length),

ts/components/conversation/ConversationHeader.tsx

@@ -44,8 +44,14 @@ interface Props {
   isRss: boolean;
   amMod: boolean;
 
+  // We might not always have the full list of members,
+  // e.g. for open groups where we could have thousands
+  // of members. We'll keep this for now (for closed chats)
   members: Array<any>;
 
+  // not equal members.length (see above)
+  subscriberCount?: number;
+
   expirationSettingName?: string;
   showBackButton: boolean;
   timerOptions: Array<TimerOption>;
@@ -134,8 +140,10 @@ export class ConversationHeader extends React.Component<Props> {
       profileName,
       isFriend,
       isGroup,
+      isPublic,
       isRss,
       members,
+      subscriberCount,
       isFriendRequestPending,
       isMe,
       name,
@@ -149,13 +157,25 @@ export class ConversationHeader extends React.Component<Props> {
       );
     }
 
+    const memberCount: number = (() => {
+      if (!isGroup || isRss) {
+        return 0;
+      }
+
+      if (isPublic) {
+        return subscriberCount || 0;
+      } else {
+        return members.length;
+      }
+    })();
+
     let text = '';
     if (isFriendRequestPending) {
       text = i18n('pendingAcceptance');
     } else if (!isFriend && !isGroup) {
       text = i18n('notFriends');
-    } else if (isGroup && !isRss && members.length > 0) {
-      const count = String(members.length);
+    } else if (memberCount > 0) {
+      const count = String(memberCount);
       text = i18n('members', [count]);
     }
 
@@ -373,6 +393,7 @@ export class ConversationHeader extends React.Component<Props> {
             <div className="module-conversation-header__title-flex">
               {this.renderOptions(triggerId)}
               {this.renderTitle()}
+              {/* This might be redundant as we show the title in the title: */}
               {isPrivateGroup ? this.renderMemberCount() : null}
             </div>
           </div>
@@ -392,7 +413,9 @@ export class ConversationHeader extends React.Component<Props> {
   }
 
   private renderMemberCount() {
-    const memberCount = this.props.members.length;
+    const memberCount = this.props.isPublic
+      ? this.props.subscriberCount
+      : this.props.members.length;
 
     if (memberCount === 0) {
       return null;