fix emoji selector on safari, ensure room only gets created once if crypto fails

This commit is contained in:
Sharon Kennedy 2020-03-26 19:13:55 -04:00
parent b4e4356cb7
commit 9d62ff661c
2 changed files with 34 additions and 15 deletions

View File

@ -76,7 +76,8 @@ class ChatBox extends React.Component {
}); });
} }
toggleEmojiSelector = () => { toggleEmojiSelector = (e) => {
e.preventDefault();
this.setState({ emojiSelectorOpen: !this.state.emojiSelectorOpen }) this.setState({ emojiSelectorOpen: !this.state.emojiSelectorOpen })
} }
@ -137,7 +138,7 @@ class ChatBox extends React.Component {
client = matrix.createClient(this.props.matrixServerUrl) client = matrix.createClient(this.props.matrixServerUrl)
} catch(error) { } catch(error) {
console.log("Error creating client", error) console.log("Error creating client", error)
return this.handleInitError() return this.handleInitError(err)
} }
// empty registration request to get session // empty registration request to get session
@ -189,10 +190,14 @@ class ChatBox extends React.Component {
client = matrix.createClient(opts) client = matrix.createClient(opts)
}) })
.catch(err => { .catch(err => {
this.handleInitError() this.handleInitError(err)
}) })
.then(() => client.initCrypto()) .then(() => client.initCrypto())
.catch(err => this.initializeUnencryptedChat()) .catch(err => {
client.stopClient()
client.clearStores()
return Promise.reject({ error: "Failed crypto", message: err })
})
.then(() => client.setDisplayName(this.props.anonymousDisplayName)) .then(() => client.setDisplayName(this.props.anonymousDisplayName))
.then(() => client.startClient()) .then(() => client.startClient())
.then(() => { .then(() => {
@ -200,7 +205,13 @@ class ChatBox extends React.Component {
client: client client: client
}) })
}) })
.catch(err => this.handleInitError()) .catch(err => {
if (err.error === "Failed crypto") {
this.initializeUnencryptedChat()
} else {
this.handleInitError(err)
}
})
}) })
} }
@ -219,7 +230,7 @@ class ChatBox extends React.Component {
client = matrix.createClient(opts) client = matrix.createClient(opts)
client.setDisplayName(this.props.anonymousDisplayName) client.setDisplayName(this.props.anonymousDisplayName)
} catch { } catch {
return this.handleInitError() return this.handleInitError(err)
} }
return client.startClient() return client.startClient()
.then(() => { .then(() => {
@ -228,10 +239,11 @@ class ChatBox extends React.Component {
isCryptoEnabled: false, isCryptoEnabled: false,
}) })
}) })
.catch(err => this.handleInitError()) .catch(err => this.handleInitError(err))
} }
handleInitError = () => { handleInitError = (err) => {
console.log("Error", err)
this.displayBotMessage({ body: this.props.chatUnavailableMessage }) this.displayBotMessage({ body: this.props.chatUnavailableMessage })
this.setState({ ready: true }) this.setState({ ready: true })
} }
@ -257,6 +269,7 @@ class ChatBox extends React.Component {
} }
createRoom = async function() { createRoom = async function() {
console.log('CREATING ROOM')
const currentDate = new Date() const currentDate = new Date()
const chatDate = currentDate.toLocaleDateString() const chatDate = currentDate.toLocaleDateString()
const chatTime = currentDate.toLocaleTimeString() const chatTime = currentDate.toLocaleTimeString()
@ -331,6 +344,7 @@ class ChatBox extends React.Component {
} }
displayBotMessage = (content, roomId) => { displayBotMessage = (content, roomId) => {
console.log('BOT MESSAGE', content)
const msgList = [...this.state.messages] const msgList = [...this.state.messages]
const msg = { const msg = {
id: uuid(), id: uuid(),
@ -340,6 +354,7 @@ class ChatBox extends React.Component {
content: content, content: content,
} }
msgList.push(msg) msgList.push(msg)
console.log(msgList)
this.setState({ messages: msgList }) this.setState({ messages: msgList })
} }
@ -368,7 +383,8 @@ class ChatBox extends React.Component {
handleKeyDown = (e) => { handleKeyDown = (e) => {
if (e.keyCode === 27) { switch (e.keyCode) {
case 27:
if (this.state.emojiSelectorOpen) { if (this.state.emojiSelectorOpen) {
this.closeEmojiSelector() this.closeEmojiSelector()
} else if (this.state.opened) { } else if (this.state.opened) {
@ -396,6 +412,7 @@ class ChatBox extends React.Component {
if (event.isEncrypted()) { if (event.isEncrypted()) {
return; return;
} }
console.log("handleing UNENCRYPTED event")
this.handleMessageEvent(event) this.handleMessageEvent(event)
} }
}); });
@ -405,6 +422,7 @@ class ChatBox extends React.Component {
return this.handleDecryptionError() return this.handleDecryptionError()
} }
if (event.getType() === "m.room.message") { if (event.getType() === "m.room.message") {
console.log("handleing DECRYPTED event")
this.handleMessageEvent(event) this.handleMessageEvent(event)
} }
}); });
@ -453,6 +471,7 @@ class ChatBox extends React.Component {
handleSubmit = e => { handleSubmit = e => {
e.preventDefault() e.preventDefault()
e.stopPropagation()
const message = this.state.inputValue const message = this.state.inputValue
if (!Boolean(message)) return null; if (!Boolean(message)) return null;

View File

@ -34,7 +34,7 @@ class EmojiSelector extends React.Component {
} }
} }
</Transition> </Transition>
<button id="emoji-button" onClick={toggleEmojiSelector} aria-label="Emoji picker"> <button type="button" id="emoji-button" onClick={toggleEmojiSelector} aria-label="Emoji picker">
<SVG /> <SVG />
</button> </button>
</div> </div>