disable chat when websocket disconnects, enable it when it connects

This commit is contained in:
Ginger Wong
2020-09-22 01:38:43 -07:00
parent 5af0afa2a0
commit 58570be302

View File

@@ -14,7 +14,7 @@ export default class Chat extends Component {
super(props, context); super(props, context);
this.state = { this.state = {
inputEnabled: true, webSocketConnected: true,
messages: [], messages: [],
chatUserNames: [], chatUserNames: [],
}; };
@@ -25,6 +25,7 @@ export default class Chat extends Component {
this.getChatHistory = this.getChatHistory.bind(this); this.getChatHistory = this.getChatHistory.bind(this);
this.receivedWebsocketMessage = this.receivedWebsocketMessage.bind(this); this.receivedWebsocketMessage = this.receivedWebsocketMessage.bind(this);
this.websocketConnected = this.websocketConnected.bind(this);
this.websocketDisconnected = this.websocketDisconnected.bind(this); this.websocketDisconnected = this.websocketDisconnected.bind(this);
this.submitChat = this.submitChat.bind(this); this.submitChat = this.submitChat.bind(this);
this.submitChat = this.submitChat.bind(this); this.submitChat = this.submitChat.bind(this);
@@ -64,6 +65,7 @@ export default class Chat extends Component {
this.websocket = this.props.websocket; this.websocket = this.props.websocket;
if (this.websocket) { if (this.websocket) {
this.websocket.addListener(CALLBACKS.RAW_WEBSOCKET_MESSAGE_RECEIVED, this.receivedWebsocketMessage); this.websocket.addListener(CALLBACKS.RAW_WEBSOCKET_MESSAGE_RECEIVED, this.receivedWebsocketMessage);
this.websocket.addListener(CALLBACKS.WEBSOCKET_CONNECTED, this.websocketConnected);
this.websocket.addListener(CALLBACKS.WEBSOCKET_DISCONNECTED, this.websocketDisconnected); this.websocket.addListener(CALLBACKS.WEBSOCKET_DISCONNECTED, this.websocketDisconnected);
} }
} }
@@ -124,12 +126,22 @@ export default class Chat extends Component {
} }
} }
websocketDisconnected() { websocketConnected() {
console.log("=======socket connected.")
this.setState({ this.setState({
inputEnabled: false, webSocketConnected: true,
}); });
} }
websocketDisconnected() {
console.log("=======socket not connected.")
this.setState({
webSocketConnected: false,
});
}
submitChat(content) { submitChat(content) {
if (!content) { if (!content) {
return; return;
@@ -178,7 +190,7 @@ export default class Chat extends Component {
render(props, state) { render(props, state) {
const { username, messagesOnly, chatInputEnabled } = props; const { username, messagesOnly, chatInputEnabled } = props;
const { messages, chatUserNames } = state; const { messages, chatUserNames, webSocketConnected } = state;
const messageList = messages.map( const messageList = messages.map(
(message) => (message) =>
@@ -216,7 +228,7 @@ export default class Chat extends Component {
</div> </div>
<${ChatInput} <${ChatInput}
chatUserNames=${chatUserNames} chatUserNames=${chatUserNames}
inputEnabled=${chatInputEnabled} inputEnabled=${webSocketConnected && chatInputEnabled}
handleSendMessage=${this.submitChat} handleSendMessage=${this.submitChat}
/> />
</div> </div>