Add better navigation

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);

src/ConferenceCallManagerHooks.js

@@ -124,6 +124,7 @@ export function useVideoRoom(manager, roomId, timeout = 5000) {
 
     return () => {
       window.removeEventListener("beforeunload", onBeforeUnload);
+      manager.leaveCall();
     };
   }, [manager]);
 

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>
   );
 }

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>

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;