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

This commit is contained in:
Gabe Kangas 2020-09-12 18:46:08 -07:00
parent 4c497454b6
commit 0dcd92e9cd
2 changed files with 26 additions and 36 deletions

View file

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

View file

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