chat fixes and optimizations (#431)

* - format messages on didMount instead of didUpdate. will also prevent bad setSTate loops when message is blank;
- convert message.js to functional comp
- prevent extra rerenders in messages and chat with shouldComponentUpdate checks

* revert chat test

* more concise returns;

webroot/js/components/chat/chat.js

@@ -19,6 +19,7 @@ export default class Chat extends Component {
       webSocketConnected: true,
       messages: [],
       chatUserNames: [],
+      newMessagesReceived: false,
     };
 
     this.scrollableMessagesContainer = createRef();
@@ -34,19 +35,37 @@ export default class Chat extends Component {
     this.submitChat = this.submitChat.bind(this);
     this.scrollToBottom = this.scrollToBottom.bind(this);
     this.handleWindowResize = debounce(this.handleWindowResize.bind(this), 500);
-
+    this.handleNetworkingError = this.handleNetworkingError.bind(this);
     this.messageListCallback = this.messageListCallback.bind(this);
   }
 
   componentDidMount() {
    this.setupWebSocketCallbacks();
    this.getChatHistory();
+
    window.addEventListener('resize', this.handleWindowResize);
 
    this.messageListObserver = new MutationObserver(this.messageListCallback);
    this.messageListObserver.observe(this.scrollableMessagesContainer.current, { childList: true });
   }
 
+  shouldComponentUpdate(nextProps, nextState) {
+    const { username, chatInputEnabled } = this.props;
+    const { username: nextUserName, chatInputEnabled: nextChatEnabled } = nextProps;
+
+    const { webSocketConnected, messages, chatUserNames, newMessagesReceived } = this.state;
+    const {webSocketConnected: nextSocket, messages: nextMessages, chatUserNames: nextUserNames, newMessagesReceived: nextMessagesReceived } = nextState;
+
+    return (
+      username !== nextUserName ||
+      chatInputEnabled !== nextChatEnabled ||
+      webSocketConnected !== nextSocket ||
+      messages.length !== nextMessages.length ||
+      chatUserNames.length !== nextUserNames.length || newMessagesReceived !== nextMessagesReceived
+    );
+  }
+
+
   componentDidUpdate(prevProps, prevState) {
     const { username: prevName } = prevProps;
     const { username } = this.props;
@@ -61,7 +80,9 @@ export default class Chat extends Component {
 
     // scroll to bottom of messages list when new ones come in
     if (messages.length > prevMessages.length) {
-      this.newMessagesReceived = true;
+      this.setState({
+        newMessagesReceived: true,
+      });
     }
   }
   componentWillUnmount() {
@@ -96,7 +117,7 @@ export default class Chat extends Component {
       });
     })
     .catch(error => {
-      // this.handleNetworkingError(`Fetch getChatHistory: ${error}`);
+      this.handleNetworkingError(`Fetch getChatHistory: ${error}`);
     });
   }
 
@@ -113,6 +134,11 @@ export default class Chat extends Component {
     this.addMessage(message);
   }
 
+  handleNetworkingError(error) {
+    // todo: something more useful
+    console.log(error);
+  }
+
   addMessage(message) {
     const { messages: curMessages } = this.state;
 
@@ -196,14 +222,16 @@ export default class Chat extends Component {
     if (numMutations) {
       const item = mutations[numMutations - 1];
       if (item.type === 'childList' && item.addedNodes.length) {
-        if (this.newMessagesReceived) {
+        if (this.state.newMessagesReceived) {
           if (!this.receivedFirstMessages) {
             this.scrollToBottom();
             this.receivedFirstMessages = true;
           } else if (this.checkShouldScroll()) {
             this.scrollToBottom();
           }
-          this.newMessagesReceived = false;
+          this.setState({
+            newMessagesReceived: false,
+          });
         }
       }
     }