From da10f82be033b78232c78b1c7ed0640d71a3b4cf Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Mon, 23 Aug 2021 12:32:32 -0700
Subject: [PATCH] Show recent rooms on the home page

---
 src/ConferenceCallManagerHooks.js | 53 ++++++++++++++++++-
 src/Home.jsx                      | 86 ++++++++++++++++---------------
 src/Home.module.css               |  5 --
 3 files changed, 96 insertions(+), 48 deletions(-)

diff --git a/src/ConferenceCallManagerHooks.js b/src/ConferenceCallManagerHooks.js
index e72b04f..48ee2fe 100644
--- a/src/ConferenceCallManagerHooks.js
+++ b/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();
diff --git a/src/Home.jsx b/src/Home.jsx
index fd5f8b8..9368404 100644
--- a/src/Home.jsx
+++ b/src/Home.jsx
@@ -69,52 +69,54 @@ export function Home({ manager }) {
           onLogout={onLogout}
         />
       </Header>
-      <Content className={styles.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>
+      <Content>
         <Center>
           <Modal>
-            <form onSubmit={onCreateRoom}>
-              <h2>Create New Room</h2>
-              <FieldRow>
-                <InputField
-                  id="roomName"
-                  name="roomName"
-                  label="Room Name"
-                  type="text"
-                  required
-                  autoComplete="off"
-                  placeholder="Room Name"
-                  ref={roomNameRef}
-                />
-              </FieldRow>
-              {createRoomError && (
+            <section>
+              <form onSubmit={onCreateRoom}>
+                <h2>Create New Room</h2>
                 <FieldRow>
-                  <ErrorMessage>{createRoomError.message}</ErrorMessage>
+                  <InputField
+                    id="roomName"
+                    name="roomName"
+                    label="Room Name"
+                    type="text"
+                    required
+                    autoComplete="off"
+                    placeholder="Room Name"
+                    ref={roomNameRef}
+                  />
                 </FieldRow>
-              )}
-              <FieldRow rightAlign>
-                <Button type="submit">Create Room</Button>
-              </FieldRow>
-            </form>
+                {createRoomError && (
+                  <FieldRow>
+                    <ErrorMessage>{createRoomError.message}</ErrorMessage>
+                  </FieldRow>
+                )}
+                <FieldRow rightAlign>
+                  <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>
diff --git a/src/Home.module.css b/src/Home.module.css
index 3b94eba..81b696d 100644
--- a/src/Home.module.css
+++ b/src/Home.module.css
@@ -1,8 +1,3 @@
-.content {
-  flex: 1;
-  overflow: hidden;
-}
-
 .roomList {
   
 }