Refactor matrix hooks

src/home/CallList.jsx

@@ -5,7 +5,7 @@ import { Facepile } from "../Facepile";
 import { Avatar } from "../Avatar";
 import { ReactComponent as VideoIcon } from "../icons/Video.svg";
 import styles from "./CallList.module.css";
-import { getRoomUrl } from "../ConferenceCallManagerHooks";
+import { getRoomUrl } from "../matrix-utils";
 import { Body, Caption } from "../typography/Typography";
 
 export function CallList({ rooms, client }) {

src/home/HomePage.jsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-import { useClient } from "../ConferenceCallManagerHooks";
+import { useClient } from "../ClientContext";
 import { ErrorView, LoadingView } from "../FullScreenView";
 import { UnauthenticatedView } from "./UnauthenticatedView";
 import { RegisteredView } from "./RegisteredView";

src/home/RegisteredView.jsx

@@ -1,9 +1,6 @@
 import React, { useState, useCallback } from "react";
-import {
-  createRoom,
-  useGroupCallRooms,
-  roomAliasFromRoomName,
-} from "../ConferenceCallManagerHooks";
+import { createRoom, roomAliasFromRoomName } from "../matrix-utils";
+import { useGroupCallRooms } from "./useGroupCallRooms";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 import commonStyles from "./common.module.css";
 import styles from "./RegisteredView.module.css";

src/home/UnauthenticatedView.jsx

@@ -5,10 +5,7 @@ import { useHistory } from "react-router-dom";
 import { FieldRow, InputField, ErrorMessage } from "../Input";
 import { Button } from "../button";
 import { randomString } from "matrix-js-sdk/src/randomstring";
-import {
-  createRoom,
-  roomAliasFromRoomName,
-} from "../ConferenceCallManagerHooks";
+import { createRoom, roomAliasFromRoomName } from "../matrix-utils";
 import { useInteractiveRegistration } from "../auth/useInteractiveRegistration";
 import { useModalTriggerState } from "../Modal";
 import { JoinExistingCallModal } from "./JoinExistingCallModal";

src/home/useGroupCallRooms.js

@@ -0,0 +1,87 @@
+import { useState, useEffect } from "react";
+
+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 useGroupCallRooms(client) {
+  const [rooms, setRooms] = useState([]);
+
+  useEffect(() => {
+    function updateRooms() {
+      const groupCalls = client.groupCallEventHandler.groupCalls.values();
+      const rooms = Array.from(groupCalls).map((groupCall) => groupCall.room);
+      const sortedRooms = sortRooms(client, rooms);
+      const items = sortedRooms.map((room) => {
+        const groupCall = client.getGroupCallForRoom(room.roomId);
+
+        return {
+          roomId: room.getCanonicalAlias() || room.roomId,
+          roomName: room.name,
+          avatarUrl: null,
+          room,
+          groupCall,
+          participants: [...groupCall.participants],
+        };
+      });
+      setRooms(items);
+    }
+
+    updateRooms();
+
+    client.on("GroupCall.incoming", updateRooms);
+    client.on("GroupCall.participants", updateRooms);
+
+    return () => {
+      client.removeListener("GroupCall.incoming", updateRooms);
+      client.removeListener("GroupCall.participants", updateRooms);
+    };
+  }, []);
+
+  return rooms;
+}