support for showing the number of subscribers

src/views/info-view.jsx

@@ -1,6 +1,6 @@
 // InfoView: panel with topic/user info.
 import React from 'react';
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedMessage, FormattedNumber, defineMessages, injectIntl } from 'react-intl';
 
 import { AccessMode, Tinode } from 'tinode-sdk';
 
@@ -655,6 +655,20 @@ class InfoView extends React.Component {
                 </div>
                 : null
               }
+              {this.state.groupTopic && topic.subcnt > 0 ?
+                <div className="group"><label className="small">
+                  {this.state.channel ?
+                    <FormattedMessage id="label_subscriber_count"
+                      defaultMessage="Subscribers:"
+                      description="Label for the count of channel subscribers" />
+                      :
+                    <FormattedMessage id="label_member_count"
+                      defaultMessage="Members:"
+                      description="Label for the count of group topic members" />
+                  }
+                </label>&nbsp;<FormattedNumber value={topic.subcnt}/></div>
+                : null
+              }
               {this.state.description ?
                 <div className="group">
                   <label className="small">

src/views/messages-view.jsx

@@ -44,7 +44,7 @@ const messages = defineMessages({
   },
   last_seen: {
     id: 'last_seen_timestamp',
-    defaultMessage: 'Last seen',
+    defaultMessage: 'Last seen: {timestamp}',
     description: 'Label for the timestamp of when the user or topic was last online'
   },
   not_found: {
@@ -82,6 +82,28 @@ const messages = defineMessages({
     defaultMessage: 'Saved messages',
     description: 'Name of self topic for UI'
   },
+  subscriber_count: {
+    id: 'subscriber_count',
+    defaultMessage: '{count, plural, ' +
+      'one {{count, number} subscriber} ' +
+      'two {{count, number} subscribers} ' +
+      'three {{count, number} subscribers} ' +
+      'few {{count, number} subscribers} ' +
+      'many {{count, number} subscribers} ' +
+      'other {{count, number} subscribers}}',
+    description: 'Count of channel subscribers'
+  },
+  member_count: {
+    id: 'member_count',
+    defaultMessage: '{count, plural, ' +
+      'one {{count, number} member} ' +
+      'two {{count, number} members} ' +
+      'three {{count, number} members} ' +
+      'few {{count, number} members} ' +
+      'many {{count, number} members} ' +
+      'other {{count, number} members}}',
+    description: 'Count of group topic members'
+  },
 });
 
 // Checks if the access permissions are granted but not yet accepted.
@@ -1652,16 +1674,20 @@ class MessagesView extends React.Component {
 
         let lastSeen = null;
         if (isChannel) {
-          lastSeen = formatMessage(messages.channel);
+          lastSeen = formatMessage(messages.subscriber_count, {count: topic.subcnt});
         } else {
           const cont = this.props.tinode.getMeTopic().getContact(this.state.topic);
-          if (cont && Tinode.isP2PTopicName(cont.topic)) {
-            if (cont.online) {
-              lastSeen = formatMessage(messages.online_now);
-            } else if (cont.seen) {
-              lastSeen = formatMessage(messages.last_seen) + ": " +
-                shortDateFormat(cont.seen.when, this.props.intl.locale);
-              // TODO: also handle user agent in c.seen.ua
+          if (cont) {
+            if (Tinode.isP2PTopicName(cont.topic)) {
+              if (cont.online) {
+                lastSeen = formatMessage(messages.online_now);
+              } else if (cont.seen) {
+                lastSeen = formatMessage(messages.last_seen,
+                  {timestamp: shortDateFormat(cont.seen.when, this.props.intl.locale)});
+                // TODO: also handle user agent in c.seen.ua
+              }
+            } else if (Tinode.isGroupTopicName(cont.topic)) {
+              lastSeen = formatMessage(messages.member_count, {count: topic.subcnt});
             }
           }
         }