Show recent rooms on the home page

src/ConferenceCallManagerHooks.js

@@ -355,12 +355,63 @@ export function useVideoRoom(manager, roomId, timeout = 5000) {
   };
 }
 
+const tsCache = {};
+
+function getLastTs(client, r) {
+  if (tsCache[r.roomId]) {
+    return tsCache[r.roomId];
+  }
+
+  if (!r || !r.timeline) {
+    const ts = Number.MAX_SAFE_INTEGER;
+    tsCache[r.roomId] = ts;
+    return ts;
+  }
+
+  const myUserId = client.getUserId();
+
+  if (r.getMyMembership() !== "join") {
+    const membershipEvent = r.currentState.getStateEvents(
+      "m.room.member",
+      myUserId
+    );
+
+    if (membershipEvent && !Array.isArray(membershipEvent)) {
+      const ts = membershipEvent.getTs();
+      tsCache[r.roomId] = ts;
+      return ts;
+    }
+  }
+
+  for (let i = r.timeline.length - 1; i >= 0; --i) {
+    const ev = r.timeline[i];
+    const ts = ev.getTs();
+
+    if (ts) {
+      tsCache[r.roomId] = ts;
+      return ts;
+    }
+  }
+
+  const ts = Number.MAX_SAFE_INTEGER;
+  tsCache[r.roomId] = ts;
+  return ts;
+}
+
+function sortRooms(client, rooms) {
+  return rooms.sort((a, b) => {
+    return getLastTs(client, b) - getLastTs(client, a);
+  });
+}
+
 export function useRooms(manager) {
   const [rooms, setRooms] = useState([]);
 
   useEffect(() => {
     function updateRooms() {
-      setRooms(manager.client.getRooms());
+      const visibleRooms = manager.client.getVisibleRooms();
+      const sortedRooms = sortRooms(manager.client, visibleRooms);
+      setRooms(sortedRooms);
     }
 
     updateRooms();

src/Home.jsx

@@ -69,29 +69,10 @@ export function Home({ manager }) {
           onLogout={onLogout}
         />
       </Header>
-      <Content className={styles.content}>
+      <Content>
-        <Sidebar>
-          <h5>Rooms:</h5>
-          <div className={styles.roomList}>
-            {rooms.map((room) => (
-              <Link
-                className={styles.roomListItem}
-                key={room.roomId}
-                to={`/room/${room.roomId}`}
-              >
-                <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>
-        </Sidebar>
         <Center>
           <Modal>
+            <section>
               <form onSubmit={onCreateRoom}>
                 <h2>Create New Room</h2>
                 <FieldRow>
@@ -115,6 +96,27 @@ export function Home({ manager }) {
                   <Button type="submit">Create Room</Button>
                 </FieldRow>
               </form>
+            </section>
+            <section>
+              <h3>Recent Rooms</h3>
+              <div className={styles.roomList}>
+                {rooms.map((room) => (
+                  <Link
+                    className={styles.roomListItem}
+                    key={room.roomId}
+                    to={`/room/${room.roomId}`}
+                  >
+                    <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>
           </Modal>
         </Center>
       </Content>

src/Home.module.css

@@ -1,8 +1,3 @@
-.content {
-  flex: 1;
-  overflow: hidden;
-}
-
 .roomList {
   
 }