Fix unread count bug

refs #16
skygear-demo · Apr 21, 2017 · 39d711a · 39d711a
2 parents 7b8bf9c + 30069c0
commit 39d711a
Show file tree

Hide file tree

Showing 7 changed files with 142 additions and 114 deletions.
diff --git a/chat-SDK-JS b/chat-SDK-JS
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import skygearChat from 'skygear-chat';
 
-import ManagedConversationList from '../utils/ManagedConversationList.jsx';
+import ManagedUserConversationList from '../utils/ManagedConversationList.jsx';
 
 import Conversation from './Conversation.jsx';
 import ConversationPreview from './ConversationPreview.jsx';
@@ -30,38 +30,45 @@ export default class App extends React.Component {
     this.state = {
       unreadCount: 0,    // user's total unread message count (int)
       currentModal: null, // currently displayed modal dialog name (or null)
-      currentConversation: null // currently selected Conversion Record (or null)
+      activeID: null // currently selected UserConversion ID (or null)
     };
-    this.conversationList = new ManagedConversationList();
+    this.userConversationList = new ManagedUserConversationList();
   }
 
   componentDidMount() {
     // subscribe conversation change
-    this.conversationList.subscribe(() => {
-      const {currentConversation} = this.state;
-      const {conversationList} = this;
-      if (currentConversation) {
-        this.setState({
-          currentConversation: conversationList.get(currentConversation._id)
-        });
-      } else {
-        this.forceUpdate();
-      }
+    this.userConversationList.subscribe(() => {
+      this.forceUpdate();
+      this.updateUnreadCount();
     });
+    this.updateUnreadCount();
+  }
+
+  updateUnreadCount() {
     skygearChat.getUnreadCount().then(result => {
       this.setState({unreadCount: result.message});
     });
   }
 
+  selectConversation(userConversation) {
+    this.setState({
+      activeID: userConversation._id,
+      unreadCount: this.state.unreadCount - userConversation.unread_count
+    });
+    userConversation.unread_count = 0;
+    this.updateUnreadCount();
+  }
+
   render() {
     const {
       state: {
         unreadCount,
         currentModal,
-        currentConversation
+        activeID
       },
-      conversationList
+      userConversationList
     } = this;
+    const activeUC = userConversationList.get(activeID);
 
     return (
       <div
@@ -88,36 +95,37 @@ export default class App extends React.Component {
           </div>
           <div style={Styles.conversationContainer}>
             {
-              conversationList
-                .map((c) => {
+              userConversationList
+                .map((uc) => {
                   return <ConversationPreview
-                    key={'ConversationPreview-' + c.id + c.updatedAt}
+                    key={'ConversationPreview-' + uc.id + uc.updatedAt}
                     selected={
-                      c.id === (currentConversation && currentConversation.id)}
-                    conversation={c}
-                    onClick={() => this.setState({currentConversation: c})}/>
+                      uc.id === activeID}
+                    userConversation={uc}
+                    conversation={uc.$transient.conversation}
+                    onClick={() => this.selectConversation(uc)}/>
                 })
             }
           </div>
         </div>
-        {currentConversation &&
+        {activeID &&
           <Conversation
-            key={'Conversation-' + currentConversation.id}
-            conversation={currentConversation}
+            key={'Conversation-' + activeID}
+            conversation={activeUC.$transient.conversation}
             showDetails={() => this.setState({currentModal: 'details'})}/>
         }
         {(modal => {
           switch (modal) {
           case 'createGroup':
             return (
                 <CreateGroupModal
-                  addConversationDelegate={c => conversationList.add(c)}
+                  addConversationDelegate={c => userConversationList.addConversation(c)}
                   onClose={() => this.setState({currentModal: null})}/>
             );
           case 'createChat':
             return (
                 <CreateChatModal
-                  addConversationDelegate={c => conversationList.add(c)}
+                  addConversationDelegate={c => userConversationList.addConversation(c)}
                   onClose={() => this.setState({currentModal: null})}/>
             );
           case 'settings':
@@ -128,11 +136,10 @@ export default class App extends React.Component {
           case 'details':
             return (
                 <DetailsModal
-                  key={'DetailsModal-'
-                      + currentConversation.id + currentConversation.updatedAt}
-                  conversation={currentConversation}
-                  updateConversationDelegate={c => conversationList.update(c)}
-                  removeConversationDelegate={id => conversationList.remove(id)}
+                  key={'DetailsModal-' + activeID.id}
+                  conversation={activeUC.$transient.conversation}
+                  updateConversationDelegate={c => userConversationList.updateConversation(c)}
+                  removeConversationDelegate={c => userConversationList.removeConversation(c)}
                   onClose={() => this.setState({currentModal: null})}/>
             );
           default:

diff --git a/src/components/Conversation.jsx b/src/components/Conversation.jsx
@@ -108,9 +108,10 @@ export default class Conversation extends React.Component {
         createdBy: skygear.currentUser.id
       });
       this.messageList.add(message);
-      skygear.privateDB.save(message);
-      // force update the conversation on new message to trigger pubsub event
-      skygearChat.updateConversation(conversation);
+      skygear.privateDB.save(message).then(() => {
+        // force update the conversation on new message to trigger pubsub event
+        skygearChat.updateConversation(conversation);
+      });
     }
   }
   render() {

diff --git a/src/components/ConversationPreview.jsx b/src/components/ConversationPreview.jsx
@@ -8,7 +8,7 @@ export default class ConversationPreview extends React.Component {
     super(props);
     const {title} = props.conversation;
     this.state = {
-      title: title || 'loading...',  // conversation title (either group name or participant names)
+      title: title || 'loading...',    // conversation title (either group name or participant names)
       imageURL: 'img/loading.svg'      // conversation image URL
     };
   }
@@ -43,23 +43,17 @@ export default class ConversationPreview extends React.Component {
   }
   render() {
     const {
-      props: {
-        selected,
-        onClick,
-        conversation: {
-          unread_count,
-          $transient: {
-            last_message: {
-              body: lastMessage
-            } = {}
-          }
-        }
-      },
-      state: {
-        title,
-        imageURL
-      }
-    } = this;
+      selected,
+      onClick,
+    } = this.props;
+    const {
+      unread_count
+    } = this.props.userConversation;
+    const {
+      title,
+      imageURL
+    } = this.state;
+    const lastMessage = this.props.conversation.$transient.last_message;
 
     return (
       <div
@@ -78,8 +72,8 @@ export default class ConversationPreview extends React.Component {
           {lastMessage &&
             <span
               style={Styles.lastMessage}>
-              { lastMessage.length > 23 ?
-                  lastMessage.substring(0, 20) + '...' : lastMessage }
+              { lastMessage.body.length > 23 ?
+                  lastMessage.body.substring(0, 20) + '...' : lastMessage.body }
             </span>
           }
         </div>

diff --git a/src/components/DetailsModal.jsx b/src/components/DetailsModal.jsx
@@ -77,7 +77,7 @@ export default class DetailsModal extends React.Component {
     ).then(() => {
       // close modal after leaving
       onClose();
-      removeConversationDelegate(conversation._id);
+      removeConversationDelegate(conversation);
     });
   }
   discoverAndAddUser(username) {