Refactor useIsRoomE2EE

Make it take a room object rather than a room ID to avoid it depending
on a side effect, ie. if the room object input changes, the hook will be
re-run but if we can't get the room from the room ID for whatever reason,
we'd be stuck.

Also add logging on why we decided a room was e2ee.

src/room/AppSelectionModal.tsx

@@ -25,9 +25,10 @@ import { useIsRoomE2EE, useRoomSharedKey } from "../e2ee/sharedKeyManagement";
 import { getAbsoluteRoomUrl } from "../matrix-utils";
 import styles from "./AppSelectionModal.module.css";
 import { editFragmentQuery } from "../UrlParams";
+import { useClient } from "../ClientContext";
 
 interface Props {
-  roomId: string | null;
+  roomId: string | undefined;
 }
 
 export const AppSelectionModal: FC<Props> = ({ roomId }) => {
@@ -43,8 +44,11 @@ export const AppSelectionModal: FC<Props> = ({ roomId }) => {
     [setOpen]
   );
 
+  const { client } = useClient();
+  const room = useMemo(() => client?.getRoom(roomId) ?? null, [roomId, client]);
+
   const roomSharedKey = useRoomSharedKey(roomId ?? "");
-  const roomIsEncrypted = useIsRoomE2EE(roomId ?? "");
+  const roomIsEncrypted = useIsRoomE2EE(room ?? undefined);
   if (roomIsEncrypted && roomSharedKey === undefined) {
     logger.error(
       "Generating app redirect URL for encrypted room but don't have key available!"
@@ -58,7 +62,7 @@ export const AppSelectionModal: FC<Props> = ({ roomId }) => {
     // we got in our own URL and use that, but it's not a string that a human
     // ever sees so it's somewhat redundant. We just don't pass a name.
     const url = new URL(
-      roomId === null
+      !roomId
         ? window.location.href
         : getAbsoluteRoomUrl(roomId, undefined, roomSharedKey ?? undefined)
     );

src/room/GroupCallView.tsx

@@ -76,7 +76,7 @@ export function GroupCallView({
   const isJoined = useMatrixRTCSessionJoinState(rtcSession);
 
   const e2eeSharedKey = useManageRoomSharedKey(rtcSession.room.roomId);
-  const isRoomE2EE = useIsRoomE2EE(rtcSession.room.roomId);
+  const isRoomE2EE = useIsRoomE2EE(rtcSession.room);
 
   useEffect(() => {
     window.rtcSession = rtcSession;
@@ -88,7 +88,6 @@ export function GroupCallView({
   const { displayName, avatarUrl } = useProfile(client);
   const roomName = useRoomName(rtcSession.room);
   const roomAvatar = useRoomAvatar(rtcSession.room);
-  const roomEncrypted = useIsRoomE2EE(rtcSession.room.roomId)!;
 
   const matrixInfo = useMemo((): MatrixInfo => {
     return {
@@ -99,7 +98,7 @@ export function GroupCallView({
       roomName,
       roomAlias: rtcSession.room.getCanonicalAlias(),
       roomAvatar,
-      roomEncrypted,
+      roomEncrypted: isRoomE2EE!,
     };
   }, [
     displayName,
@@ -107,7 +106,7 @@ export function GroupCallView({
     rtcSession,
     roomName,
     roomAvatar,
-    roomEncrypted,
+    isRoomE2EE,
     client,
   ]);
 

src/room/RoomPage.tsx

@@ -110,7 +110,7 @@ export const RoomPage: FC = () => {
       {content}
       {/* On Android and iOS, show a prompt to launch the mobile app. */}
       {appPrompt && (platform === "android" || platform === "ios") && (
-        <AppSelectionModal roomId={roomId} />
+        <AppSelectionModal roomId={roomId ?? undefined} />
       )}
     </>
   );