Fix chat not coming back after server comes back. Closes #136

webroot/js/app.js

@@ -44,7 +44,7 @@ export default class App extends Component {
     this.state = {
       websocket: new Websocket(),
       displayChat: getLocalStorage(KEY_CHAT_DISPLAYED) || true, // chat panel state
-      chatEnabled: false, // chat input box state
+      chatInputEnabled: false, // chat input box state
       username: getLocalStorage(KEY_USERNAME) || generateUsername(),
       userAvatarImage:
         getLocalStorage(KEY_AVATAR) ||
@@ -283,7 +283,7 @@ export default class App extends Component {
     this.setState({
       playerActive: true,
       streamOnline: true,
-      chatEnabled: true,
+      chatInputEnabled: true,
       streamStatusMessage: MESSAGE_ONLINE,
     });
   }
@@ -323,7 +323,7 @@ export default class App extends Component {
 
   disableChatInput() {
     this.setState({
-      chatEnabled: false,
+      chatInputEnabled: false,
     });
   }
 
@@ -340,7 +340,7 @@ export default class App extends Component {
 
   render(props, state) {
     const {
-      chatEnabled,
+      chatInputEnabled,
       configData,
       displayChat,
       extraUserContent,
@@ -538,7 +538,7 @@ export default class App extends Component {
           websocket=${websocket}
           username=${username}
           userAvatarImage=${userAvatarImage}
-          chatEnabled=${chatEnabled}
+          chatInputEnabled=${chatInputEnabled}
         />
       </div>
     `;

webroot/js/components/chat/chat.js

@@ -144,18 +144,6 @@ export default class Chat extends Component {
 		this.websocket.send(message);
   }
 
-  disableChat() {
-    this.setState({
-      inputEnabled: false,
-    });
-	}
-
-	enableChat() {
-    this.setState({
-      inputEnabled: true,
-    });
-	}
-
   updateAuthorList(message) {
     const { type } = message;
     const nameList = this.state.chatUserNames;
@@ -175,7 +163,7 @@ export default class Chat extends Component {
 
 
   render(props, state) {
-    const { username, messagesOnly, chatEnabled } = props;
+    const { username, messagesOnly, chatInputEnabled } = props;
     const { messages, inputEnabled, chatUserNames } = state;
 
     const messageList = messages.map((message) => (html`<${Message} message=${message} username=${username} key=${message.id} />`));
@@ -193,10 +181,12 @@ export default class Chat extends Component {
       `);
     }
 
-    return (
-      html`
+    return html`
       <section id="chat-container-wrap" class="flex flex-col">
-          <div id="chat-container" class="bg-gray-800 flex flex-col justify-end overflow-auto">
+        <div
+          id="chat-container"
+          class="bg-gray-800 flex flex-col justify-end overflow-auto"
+        >
           <div
             id="messages-container"
             ref=${this.scrollableMessagesContainer}
@@ -206,12 +196,12 @@ export default class Chat extends Component {
           </div>
           <${ChatInput}
             chatUserNames=${chatUserNames}
-              inputEnabled=${chatEnabled && inputEnabled}
+            inputEnabled=${chatInputEnabled}
             handleSendMessage=${this.submitChat}
           />
         </div>
       </section>
-    `);
+    `;
   }
 
 }