exit chat properly and clear local storage

This commit is contained in:
Sharon Kennedy 2020-02-26 00:12:05 -05:00
parent 9daba69247
commit b934bb3a5f
2 changed files with 32 additions and 9 deletions

View File

@ -4,7 +4,7 @@
<title>Embeddable Chatbox Demo</title> <title>Embeddable Chatbox Demo</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1">
</head> </head>
<body style="height: 100vh; background: darkgrey;"> <body style="height: 100vh;">
<p style="font-family:sans-serif; padding: 3rem 5rem;"> <p style="font-family:sans-serif; padding: 3rem 5rem;">
<a id="bookmarklet">Bookmarklet (drag it to your bookmarks bar)</a> <a id="bookmarklet">Bookmarklet (drag it to your bookmarks bar)</a>
</p> </p>

View File

@ -39,6 +39,8 @@ const initialState = {
ready: true, ready: true,
accessToken: null, accessToken: null,
userId: null, userId: null,
password: null,
localStorage: null,
messages: [ messages: [
{ {
id: 'intro-msg-id', id: 'intro-msg-id',
@ -103,18 +105,35 @@ class ChatBox extends React.Component {
handleExitChat = () => { handleExitChat = () => {
if (this.state.client) { if (this.state.client) {
this.leaveRoom() this.exitChat()
.then(() => {
this.setState(initialState)
})
.catch(err => console.log("Error leaving room", err))
} else { } else {
this.setState(initialState) this.setState(initialState)
} }
} }
leaveRoom = () => { exitChat = () => {
if (!this.state.client) return null;
return this.state.client.leave(this.state.roomId) return this.state.client.leave(this.state.roomId)
.then(() => {
const auth = {
type: 'm.login.password',
// TODO: Remove `user` once servers support proper UIA
// See https://github.com/vector-im/riot-web/issues/10312
user: this.state.userId,
identifier: {
type: "m.id.user",
user: this.state.userId,
},
password: this.state.password,
};
this.state.client.deactivateAccount(auth, true)
})
.then(() => this.state.client.stopClient())
.then(() => this.state.client.clearStores())
.then(() => {
this.state.localStorage.clear()
this.setState(initialState)
})
} }
initializeChat = () => { initializeChat = () => {
@ -150,7 +169,9 @@ class ChatBox extends React.Component {
this.setState({ this.setState({
accessToken: data.access_token, accessToken: data.access_token,
userId: data.user_id, userId: data.user_id,
username: username username: username,
password: password,
localStorage: localStorage,
}) })
// create new client with full options // create new client with full options
@ -334,11 +355,13 @@ class ChatBox extends React.Component {
componentDidMount() { componentDidMount() {
document.addEventListener("keydown", this.handleEscape, false); document.addEventListener("keydown", this.handleEscape, false);
window.addEventListener('beforeunload', this.exitChat)
} }
componentWillUnmount() { componentWillUnmount() {
document.removeEventListener("keydown", this.handleEscape, false); document.removeEventListener("keydown", this.handleEscape, false);
this.leaveRoom(); window.removeEventListener('beforeunload', this.exitChat)
this.exitChat();
} }
handleInputChange = e => { handleInputChange = e => {