List group rooms and public group rooms properly

.env

@@ -0,0 +1,8 @@
+####
+# App Config
+# Environment files are documented here:
+# https://vitejs.dev/guide/env-and-mode.html#env-files
+####
+
+# The room id for the space to use for listing public group call rooms
+# VITE_PUBLIC_SPACE_ROOM_ID=!hjdfshkdskjdsk:myhomeserver.com

README.md

@@ -39,3 +39,7 @@ yarn link matrix-js-sdk
 yarn link matrix-react-sdk
 yarn dev
 ```
+
+## Config
+
+Configuration options are documented in the `.env` file.

src/ConferenceCallManagerHooks.js

@@ -277,24 +277,45 @@ function sortRooms(client, rooms) {
   });
 }
 
-export function useRooms(client) {
+export function useGroupCallRooms(client) {
   const [rooms, setRooms] = useState([]);
 
   useEffect(() => {
     function updateRooms() {
-      const visibleRooms = client.getVisibleRooms();
+      const groupCalls = client.groupCallEventHandler.groupCalls.values();
-      const sortedRooms = sortRooms(client, visibleRooms);
+      const rooms = Array.from(groupCalls).map((groupCall) => groupCall.room);
+      const sortedRooms = sortRooms(client, rooms);
       setRooms(sortedRooms);
     }
 
     updateRooms();
 
-    client.on("Room", updateRooms);
+    client.on("GroupCall.incoming", updateRooms);
 
     return () => {
-      client.removeListener("Room", updateRooms);
+      client.removeListener("GroupCall.incoming", updateRooms);
     };
   }, []);
 
   return rooms;
 }
+
+export function usePublicRooms(client, publicSpaceRoomId, maxRooms = 50) {
+  const [rooms, setRooms] = useState([]);
+
+  useEffect(() => {
+    if (publicSpaceRoomId) {
+      client.getRoomHierarchy(publicSpaceRoomId, maxRooms).then(({ rooms }) => {
+        const filteredRooms = rooms.filter(
+          (room) => room.room_type !== "m.space"
+        );
+
+        setRooms(filteredRooms);
+      });
+    } else {
+      setRooms([]);
+    }
+  }, [publicSpaceRoomId]);
+
+  return rooms;
+}

src/Home.jsx

@@ -16,7 +16,10 @@ limitations under the License.
 
 import React, { useCallback, useRef, useState } from "react";
 import { useHistory, Link } from "react-router-dom";
-import { useRooms } from "./ConferenceCallManagerHooks";
+import {
+  useGroupCallRooms,
+  usePublicRooms,
+} from "./ConferenceCallManagerHooks";
 import { Header, LeftNav, UserNav } from "./Header";
 import ColorHash from "color-hash";
 import styles from "./Home.module.css";
@@ -34,7 +37,11 @@ export function Home({ client, onLogout }) {
   const roomNameRef = useRef();
   const guestAccessRef = useRef();
   const [createRoomError, setCreateRoomError] = useState();
-  const rooms = useRooms(client);
+  const rooms = useGroupCallRooms(client);
+  const publicRooms = usePublicRooms(
+    client,
+    import.meta.env.VITE_PUBLIC_SPACE_ROOM_ID
+  );
 
   const onCreateRoom = useCallback(
     (e) => {
@@ -139,6 +146,28 @@ export function Home({ client, onLogout }) {
                 </FieldRow>
               </form>
             </section>
+            {publicRooms.length > 0 && (
+              <section>
+                <h3>Public Rooms</h3>
+                <div className={styles.roomList}>
+                  {publicRooms.map((room) => (
+                    <Link
+                      className={styles.roomListItem}
+                      key={room.room_id}
+                      to={`/room/${room.room_id}`}
+                    >
+                      <div
+                        className={styles.roomAvatar}
+                        style={{ backgroundColor: colorHash.hex(room.name) }}
+                      >
+                        <span>{room.name.slice(0, 1)}</span>
+                      </div>
+                      <div className={styles.roomName}>{room.name}</div>
+                    </Link>
+                  ))}
+                </div>
+              </section>
+            )}
             <section>
               <h3>Recent Rooms</h3>
               <div className={styles.roomList}>