From 4f599dcb7bc4247400aa56e6b97b3dcff66b6baa Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Fri, 30 Jul 2021 14:29:08 -0700
Subject: [PATCH] Add better navigation

---
 src/ConferenceCallManager.js      |  4 ++++
 src/ConferenceCallManagerHooks.js |  1 +
 src/JoinOrCreateRoom.jsx          | 12 ++++++++++++
 src/Room.jsx                      |  5 ++++-
 src/Room.module.css               |  6 ++++++
 5 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/ConferenceCallManager.js b/src/ConferenceCallManager.js
index 3c734690..6da87ed8 100644
--- a/src/ConferenceCallManager.js
+++ b/src/ConferenceCallManager.js
@@ -94,6 +94,10 @@ export class ConferenceCallManager extends EventEmitter {
     }
   }
 
+  static logout() {
+    localStorage.removeItem("matrix-auth-store");
+  }
+
   static async register(homeserverUrl, username, password) {
     try {
       const registrationClient = matrixcs.createClient(homeserverUrl);
diff --git a/src/ConferenceCallManagerHooks.js b/src/ConferenceCallManagerHooks.js
index 31121f9f..d4dd31b9 100644
--- a/src/ConferenceCallManagerHooks.js
+++ b/src/ConferenceCallManagerHooks.js
@@ -124,6 +124,7 @@ export function useVideoRoom(manager, roomId, timeout = 5000) {
 
     return () => {
       window.removeEventListener("beforeunload", onBeforeUnload);
+      manager.leaveCall();
     };
   }, [manager]);
 
diff --git a/src/JoinOrCreateRoom.jsx b/src/JoinOrCreateRoom.jsx
index 2b0eff18..4891af73 100644
--- a/src/JoinOrCreateRoom.jsx
+++ b/src/JoinOrCreateRoom.jsx
@@ -60,6 +60,15 @@ export function JoinOrCreateRoom({ manager }) {
     [manager]
   );
 
+  const onLogout = useCallback(
+    (e) => {
+      e.preventDefault();
+      manager.logout();
+      history.push("/");
+    },
+    [manager]
+  );
+
   return (
     <div className="page">
       <h1>Matrix Video Chat</h1>
@@ -99,6 +108,9 @@ export function JoinOrCreateRoom({ manager }) {
           </li>
         ))}
       </ul>
+      <button type="button" onClick={onLogout}>
+        Log Out
+      </button>
     </div>
   );
 }
diff --git a/src/Room.jsx b/src/Room.jsx
index dbb0d9db..978505c7 100644
--- a/src/Room.jsx
+++ b/src/Room.jsx
@@ -16,7 +16,7 @@ limitations under the License.
 
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import styles from "./Room.module.css";
-import { useParams, useLocation } from "react-router-dom";
+import { useParams, useLocation, Link } from "react-router-dom";
 import { useVideoRoom } from "./ConferenceCallManagerHooks";
 import { DevTools } from "./DevTools";
 
@@ -54,6 +54,9 @@ export function Room({ manager }) {
     <div className={styles.room}>
       {!loading && room && (
         <div className={styles.header}>
+          <div className={styles.backNav}>
+            <Link to="/">Back</Link>
+          </div>
           <h3>{room.name}</h3>
           <div className={styles.userNav}>
             <h5>{manager.client.getUserId()}</h5>
diff --git a/src/Room.module.css b/src/Room.module.css
index 42894ef5..d3d72f82 100644
--- a/src/Room.module.css
+++ b/src/Room.module.css
@@ -32,6 +32,12 @@ limitations under the License.
   height: 64px;
 }
 
+.backNav {
+  position: absolute;
+  left: 0;
+  padding: 0 8px;
+}
+
 .userNav {
   position: absolute;
   right: 0;