useRooms hook

src/App.jsx

@@ -28,6 +28,7 @@ import {
 import {
   useConferenceCallManager,
   useVideoRoom,
+  useRooms,
 } from "./ConferenceCallManagerHooks";
 
 export default function App() {
@@ -49,13 +50,7 @@ export default function App() {
               {authenticated ? (
                 <JoinOrCreateRoom manager={manager} />
               ) : (
-                <>
+                <LoginOrRegister onRegister={register} onLogin={login} />
-                  <div className={styles.page}>
-                    <h1>Matrix Video Chat</h1>
-                    <Register onRegister={register} />
-                    <Login onLogin={login} />
-                  </div>
-                </>
               )}
             </Route>
             <Route path="/room/:roomId">
@@ -72,45 +67,54 @@ export default function App() {
   );
 }
 
-function Register({ onRegister }) {
+function LoginOrRegister({ onRegister, onLogin }) {
-  const usernameRef = useRef();
+  const registerUsernameRef = useRef();
-  const passwordRef = useRef();
+  const registerPasswordRef = useRef();
+  const loginUsernameRef = useRef();
+  const loginPasswordRef = useRef();
 
-  const onSubmit = useCallback((e) => {
+  const onSubmitRegisterForm = useCallback((e) => {
     e.preventDefault();
     onRegister(usernameRef.current.value, passwordRef.current.value);
   });
 
-  return (
+  const onSubmitLoginForm = useCallback((e) => {
-    <>
-      <h2>Register</h2>
-      <form onSubmit={onSubmit}>
-        <input type="text" ref={usernameRef} placeholder="Username"></input>
-        <input type="password" ref={passwordRef} placeholder="Password"></input>
-        <button type="submit">Register</button>
-      </form>
-    </>
-  );
-}
-
-function Login({ onLogin }) {
-  const usernameRef = useRef();
-  const passwordRef = useRef();
-
-  const onSubmit = useCallback((e) => {
     e.preventDefault();
     onLogin(usernameRef.current.value, passwordRef.current.value);
   });
 
   return (
-    <>
+    <div className={styles.page}>
+      <h1>Matrix Video Chat</h1>
+      <h2>Register</h2>
+      <form onSubmit={onSubmitRegisterForm}>
+        <input
+          type="text"
+          ref={registerUsernameRef}
+          placeholder="Username"
+        ></input>
+        <input
+          type="password"
+          ref={registerPasswordRef}
+          placeholder="Password"
+        ></input>
+        <button type="submit">Register</button>
+      </form>
       <h2>Login</h2>
-      <form onSubmit={onSubmit}>
+      <form onSubmit={onSubmitLoginForm}>
-        <input type="text" ref={usernameRef} placeholder="Username"></input>
+        <input
-        <input type="password" ref={passwordRef} placeholder="Password"></input>
+          type="text"
+          ref={loginUsernameRef}
+          placeholder="Username"
+        ></input>
+        <input
+          type="password"
+          ref={loginPasswordRef}
+          placeholder="Password"
+        ></input>
         <button type="submit">Login</button>
       </form>
-    </>
+    </div>
   );
 }
 
@@ -120,21 +124,7 @@ function JoinOrCreateRoom({ manager }) {
   const roomIdRef = useRef();
   const [createRoomError, setCreateRoomError] = useState();
   const [joinRoomError, setJoinRoomError] = useState();
-  const [rooms, setRooms] = useState([]);
+  const rooms = useRooms(manager);
-
-  useEffect(() => {
-    function updateRooms() {
-      setRooms(manager.client.getRooms());
-    }
-
-    updateRooms();
-
-    manager.client.on("Room", updateRooms);
-
-    return () => {
-      manager.client.removeListener("Room", updateRooms);
-    };
-  }, []);
 
   const onCreateRoom = useCallback(
     (e) => {

src/ConferenceCallManagerHooks.js

@@ -187,3 +187,23 @@ export function useVideoRoom(manager, roomId, timeout = 5000) {
 
   return { loading, joined, room, participants, error, joinCall };
 }
+
+export function useRooms(manager) {
+  const [rooms, setRooms] = useState([]);
+
+  useEffect(() => {
+    function updateRooms() {
+      setRooms(manager.client.getRooms());
+    }
+
+    updateRooms();
+
+    manager.client.on("Room", updateRooms);
+
+    return () => {
+      manager.client.removeListener("Room", updateRooms);
+    };
+  }, []);
+
+  return rooms;
+}