getDerivedStateFromProps refactored in contacts-view and chips-input, #35

src/views/contacts-view.jsx

@@ -20,21 +20,21 @@ export default class ContactsView extends React.Component {
 
     this.handleAction = this.handleAction.bind(this);
 
-    this.state = ContactsView.getDerivedStateFromProps(props, {});
+    this.state = ContactsView.deriveStateFromProps(props);
   }
 
-  static getDerivedStateFromProps(nextProps, prevState) {
+  static deriveStateFromProps(props) {
     const contacts = [];
     let unreadThreads = 0;
     let archivedCount = 0;
-    nextProps.chatList.map((c) => {
+    props.chatList.map((c) => {
       if (c.private && c.private.arch) {
-        if (nextProps.archive) {
+        if (props.archive) {
           contacts.push(c);
         } else {
           archivedCount ++;
         }
-      } else if (!nextProps.archive) {
+      } else if (!props.archive) {
         contacts.push(c);
         unreadThreads += c.unread > 0 ? 1 : 0;
       }
@@ -51,14 +51,22 @@ export default class ContactsView extends React.Component {
       });
     }
 
-    updateFavicon(unreadThreads);
-
     return {
       contactList: contacts,
-      archivedCount: archivedCount
+      unreadThreads: unreadThreads
     };
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.chatList != this.props.chatList) {
+      const newState = ContactsView.deriveStateFromProps(this.props);
+      this.setState(newState);
+      if (newState.unreadThreads != prevState.unreadThreads) {
+        updateFavicon(newState.unreadThreads);
+      }
+    }
+  }
+
   handleAction(action_ignored) {
     this.props.onShowArchive();
   }

src/views/tinode-web.jsx

@@ -538,14 +538,14 @@ class TinodeWeb extends React.Component {
 
       // New message received
       if (document.hidden) {
-        if (this.state.messageSounds && !isArchived) {
+        if (this.state.messageSounds && !archived) {
           POP_SOUND.play();
         }
         this.resetContactList();
 
       // Skip update if the topic is currently open, otherwise the badge will annoyingly flash.
       } else if (this.state.topicSelected != cont.topic) {
-        if (this.state.messageSounds && !isArchived) {
+        if (this.state.messageSounds && !archived) {
           POP_SOUND.play();
         }
         this.resetContactList();