Add room id routing

src/CallList.jsx

@@ -1,22 +1,23 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Link } from "react-router-dom";
 import { CopyButton } from "./button";
 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";
 
 export function CallList({ title, rooms }) {
   return (
     <>
       <h3>{title}</h3>
       <div className={styles.callList}>
-        {rooms.map(({ roomId, roomName, roomUrl, avatarUrl, participants }) => (
+        {rooms.map(({ roomId, roomName, avatarUrl, participants }) => (
           <CallTile
             key={roomId}
             name={roomName}
             avatarUrl={avatarUrl}
-            roomUrl={roomUrl}
+            roomId={roomId}
             participants={participants}
           />
         ))}
@@ -25,9 +26,9 @@ export function CallList({ title, rooms }) {
   );
 }
 
-function CallTile({ name, avatarUrl, roomUrl, participants }) {
+function CallTile({ name, avatarUrl, roomId, participants }) {
   return (
-    <Link to={roomUrl} className={styles.callTile}>
+    <Link to={`/room/${roomId}`} className={styles.callTile}>
       <Avatar
         size="md"
         bgKey={name}
@@ -37,13 +38,13 @@ function CallTile({ name, avatarUrl, roomUrl, participants }) {
       />
       <div className={styles.callInfo}>
         <h5>{name}</h5>
-        <p>{roomUrl}</p>
+        <p>{roomId}</p>
         {participants && <Facepile participants={participants} />}
       </div>
       <CopyButton
         className={styles.copyButton}
         variant="icon"
-        value={roomUrl}
+        value={getRoomUrl(roomId)}
       />
     </Link>
   );