a couple of minor changes for clarity

service-worker.js

@@ -57,6 +57,7 @@ const fbMessaging = firebase.messaging();
 // This method shows the push notifications while the window is in background.
 fbMessaging.onBackgroundMessage((payload) => {
   if (payload.data.silent == 'true') {
+    // TODO: if this is an 'msg', fetch the new message in the background.
     return;
   }
 
@@ -68,8 +69,8 @@ fbMessaging.onBackgroundMessage((payload) => {
   const pushType = payload.data.what || 'msg';
   const title = payload.data.title || self.i18nMessage(pushType == 'msg' ? 'new_message' : 'new_chat');
   const options = {
-    body: payload.data.content || '',
-    icon: '/img/logo96.png',
+    body: payload.data.content || '', // TODO: content for 'sub' should be topic's or user's title.
+    icon: '/img/logo96.png', // TODO: use topic's or user's avatar (would have to fetch for 'sub', read from db for 'msg').
     badge: '/img/badge96.png',
     tag: payload.data.topic || undefined,
     data: {

src/views/messages-view.jsx

@@ -82,7 +82,7 @@ class MessagesView extends React.Component {
     this.sendImageAttachment = this.sendImageAttachment.bind(this);
     this.sendFileAttachment = this.sendFileAttachment.bind(this);
     this.sendKeyPress = this.sendKeyPress.bind(this);
-    this.topicSubscribe = this.topicSubscribe.bind(this);
+    this.subscribe = this.subscribe.bind(this);
     this.handleScrollReference = this.handleScrollReference.bind(this);
     this.handleScrollEvent = this.handleScrollEvent.bind(this);
     this.handleDescChange = this.handleDescChange.bind(this);
@@ -161,7 +161,7 @@ class MessagesView extends React.Component {
     }
 
     if ((this.state.topic != prevState.topic) || !prevProps.ready) {
-      this.topicSubscribe(topic);
+      this.subscribe(topic);
     }
   }
 
@@ -297,7 +297,7 @@ class MessagesView extends React.Component {
     return nextState;
   }
 
-  topicSubscribe(topic) {
+  subscribe(topic) {
     if (!topic || topic.isSubscribed() || !this.props.ready) {
       return;
     }
@@ -317,6 +317,7 @@ class MessagesView extends React.Component {
       // And show "loading" spinner.
       this.setState({ fetchingMessages: true });
     }
+
     const setQuery = newTopic ? this.props.newTopicParams : undefined;
     topic.subscribe(getQuery.build(), setQuery)
       .then((ctrl) => {

src/views/new-topic-view.jsx

@@ -56,16 +56,17 @@ class NewTopicView extends React.Component {
     this.setState({searchQuery: Tinode.isNullValue(query) ? null : query});
   }
 
-  handleContactSelected(sel) {
-    if (this.state.tabSelected === 'p2p') {
+  handleContactSelected(uid) {
+    if (this.state.tabSelected == 'p2p') {
       HashNavigation.navigateTo(HashNavigation.removeUrlParam(window.location.hash, 'tab'));
-      this.props.onCreateTopic(sel);
+      this.props.onCreateTopic(uid);
     }
   }
 
   handleNewGroupSubmit(name, description, dataUrl, priv, tags, isChannel) {
     HashNavigation.navigateTo(HashNavigation.removeUrlParam(window.location.hash, 'tab'));
-    this.props.onCreateTopic(undefined, theCard(name, dataUrl, null, description), priv, tags, isChannel);
+    this.props.onCreateTopic(undefined,
+      {public: theCard(name, dataUrl, null, description), private: priv, tags: tags}, isChannel);
   }
 
   handleGroupByID(topicName) {

src/views/tinode-web.jsx

@@ -901,9 +901,9 @@ class TinodeWeb extends React.Component {
 
   // User is sending a message, either plain text or a drafty object, possibly
   // with attachments.
-  //  - msg - Drafty message with content
-  //  - promise - Promise to be resolved when the upload is completed
-  //  - uploader - for tracking progress
+  //  - msg: Drafty message with content
+  //  - promise: if message is dependent on uploading media, a Promise to be resolved when the upload is completed.
+  //  - uploader: for tracking progress
   handleSendMessage(msg, promise, uploader) {
     const topic = this.tinode.getTopic(this.state.topicSelected);
 
@@ -912,10 +912,20 @@ class TinodeWeb extends React.Component {
     msg._uploader = uploader;
 
     if (!topic.isSubscribed()) {
+      // Topic is not subscribed yet. Subscribe.
       if (!promise) {
         promise = Promise.resolve();
       }
-      promise = promise.then(() => { return topic.subscribe(); });
+      promise = promise
+        .then(() => topic.subscribe())
+        .then(() => {
+          // If there are unsent messages, try sending them now.
+          topic.queuedMessages((pub) => {
+            if (!pub._sending && topic.isSubscribed()) {
+              this.sendMessage(pub);
+            }
+          });
+        });
     }
 
     if (promise) {
@@ -1179,7 +1189,7 @@ class TinodeWeb extends React.Component {
   }
 
   // Request to start a topic, new or selected from search results, or "by ID".
-  handleStartTopicRequest(topicName, pub, priv, tags, isChannel) {
+  handleStartTopicRequest(topicName, newTopicParams, isChannel) {
     // Check if topic is indeed new. If not, launch it.
     if (topicName && this.tinode.isTopicCached(topicName)) {
       this.handleTopicSelected(topicName);
@@ -1194,14 +1204,14 @@ class TinodeWeb extends React.Component {
       params.desc = {defacs: {auth: DEFAULT_P2P_ACCESS_MODE}};
     } else {
       topicName = topicName || this.tinode.newGroupTopicName(isChannel);
-      params.desc = {public: pub, private: {comment: priv}};
-      params.tags = tags;
+      params.desc = {public: newTopicParams.public, private: {comment: newTopicParams.private}};
+      params.tags = newTopicParams.tags;
     }
     params._topicName = topicName;
     this.setState({newTopicParams: params}, () => {this.handleTopicSelected(topicName)});
   }
 
-  // New topic was creted, here is the new topic name.
+  // New topic was created, here is the new topic name.
   handleNewTopicCreated(oldName, newName) {
     if (this.state.topicSelected == oldName && oldName != newName) {
       // If the current URl contains the old topic name, replace it with new.

umd/index.dev.js

@@ -2824,7 +2824,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     this.sendImageAttachment = this.sendImageAttachment.bind(this);
     this.sendFileAttachment = this.sendFileAttachment.bind(this);
     this.sendKeyPress = this.sendKeyPress.bind(this);
-    this.topicSubscribe = this.topicSubscribe.bind(this);
+    this.subscribe = this.subscribe.bind(this);
     this.handleScrollReference = this.handleScrollReference.bind(this);
     this.handleScrollEvent = this.handleScrollEvent.bind(this);
     this.handleDescChange = this.handleDescChange.bind(this);
@@ -2895,7 +2895,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     }
 
     if (this.state.topic != prevState.topic || !prevProps.ready) {
-      this.topicSubscribe(topic);
+      this.subscribe(topic);
     }
   }
 
@@ -3036,7 +3036,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     return nextState;
   }
 
-  topicSubscribe(topic) {
+  subscribe(topic) {
     if (!topic || topic.isSubscribed() || !this.props.ready) {
       return;
     }
@@ -3887,16 +3887,20 @@ class NewTopicView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     });
   }
 
-  handleContactSelected(sel) {
-    if (this.state.tabSelected === 'p2p') {
+  handleContactSelected(uid) {
+    if (this.state.tabSelected == 'p2p') {
       _lib_navigation_js__WEBPACK_IMPORTED_MODULE_7__.default.navigateTo(_lib_navigation_js__WEBPACK_IMPORTED_MODULE_7__.default.removeUrlParam(window.location.hash, 'tab'));
-      this.props.onCreateTopic(sel);
+      this.props.onCreateTopic(uid);
     }
   }
 
   handleNewGroupSubmit(name, description, dataUrl, priv, tags, isChannel) {
     _lib_navigation_js__WEBPACK_IMPORTED_MODULE_7__.default.navigateTo(_lib_navigation_js__WEBPACK_IMPORTED_MODULE_7__.default.removeUrlParam(window.location.hash, 'tab'));
-    this.props.onCreateTopic(undefined, (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_8__.theCard)(name, dataUrl, null, description), priv, tags, isChannel);
+    this.props.onCreateTopic(undefined, {
+      public: (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_8__.theCard)(name, dataUrl, null, description),
+      private: priv,
+      tags: tags
+    }, isChannel);
   }
 
   handleGroupByID(topicName) {
@@ -5488,8 +5492,12 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
         promise = Promise.resolve();
       }
 
-      promise = promise.then(() => {
-        return topic.subscribe();
+      promise = promise.then(() => topic.subscribe()).then(() => {
+        topic.queuedMessages(pub => {
+          if (!pub._sending && topic.isSubscribed()) {
+            this.sendMessage(pub);
+          }
+        });
       });
     }
 
@@ -5796,7 +5804,7 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
     _lib_navigation_js__WEBPACK_IMPORTED_MODULE_15__.default.navigateTo(_lib_navigation_js__WEBPACK_IMPORTED_MODULE_15__.default.setUrlInfoPanel(window.location.hash, hash));
   }
 
-  handleStartTopicRequest(topicName, pub, priv, tags, isChannel) {
+  handleStartTopicRequest(topicName, newTopicParams, isChannel) {
     if (topicName && this.tinode.isTopicCached(topicName)) {
       this.handleTopicSelected(topicName);
       return;
@@ -5816,12 +5824,12 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
     } else {
       topicName = topicName || this.tinode.newGroupTopicName(isChannel);
       params.desc = {
-        public: pub,
+        public: newTopicParams.public,
         private: {
-          comment: priv
+          comment: newTopicParams.private
         }
       };
-      params.tags = tags;
+      params.tags = newTopicParams.tags;
     }
 
     params._topicName = topicName;