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();

src/widgets/chip-input.jsx

@@ -9,7 +9,9 @@ export default class ChipInput extends React.Component {
   constructor(props) {
     super(props);
 
-    this.state = ChipInput.getDerivedStateFromProps(props);
+    this.state = ChipInput.deriveStateFromProps(props);
+    this.state.input = '';
+    this.state.focused = false;
 
     this.handleTextInput = this.handleTextInput.bind(this);
     this.removeChipAt = this.removeChipAt.bind(this);
@@ -19,6 +21,25 @@ export default class ChipInput extends React.Component {
     this.handleKeyDown = this.handleKeyDown.bind(this);
   }
 
+  static deriveStateFromProps(props) {
+    return {
+      placeholder: props.chips ? '' : props.prompt,
+      sortedChips: ChipInput.sortChips(props.chips, props.required),
+      chipIndex: ChipInput.indexChips(props.chips)
+    };
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.chips != this.props.chips ||
+      prevProps.required != this.props.required ||
+      prevProps.prompt != this.props.prompt) {
+      this.setState(ChipInput.deriveStateFromProps(this.props));
+    }
+    if (!prevState || this.props.chips.length > prevState.sortedChips.length) {
+      this.setState({input: ''});
+    }
+  }
+  /*
   static getDerivedStateFromProps(nextProps, prevState) {
     const state = {
       placeholder: nextProps.chips ? '' : nextProps.prompt,
@@ -29,12 +50,12 @@ export default class ChipInput extends React.Component {
 
     if (!prevState || nextProps.chips.length > prevState.sortedChips.length) {
       // Chip added: clear input.
-      state.input ='';
+      state.input = '';
     }
 
     return state;
   }
-
+  */
   // Map chip index to user name
   static indexChips(chips) {
     const index = {};