Use friendly URLs

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

src/App.tsx

@@ -67,9 +67,6 @@ export default function App({ history }: AppProps) {
                     <SentryRoute exact path="/register">
                       <RegisterPage />
                     </SentryRoute>
-                    <SentryRoute path="/room/:roomId?">
-                      <RoomPage />
-                    </SentryRoute>
                     <SentryRoute path="/inspector">
                       <SequenceDiagramViewerPage />
                     </SentryRoute>

src/home/CallList.tsx

@@ -74,7 +74,10 @@ function CallTile({
 }: CallTileProps) {
   return (
     <div className={styles.callTile}>
-      <Link to={`/room/${roomId}`} className={styles.callTileLink}>
+      <Link
+        to={`/${roomId.substring(1).split(":")[0]}`}
+        className={styles.callTileLink}
+      >
         <Avatar
           size={Size.LG}
           bgKey={name}

src/home/RegisteredView.tsx

@@ -72,7 +72,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
         const [roomIdOrAlias] = await createRoom(client, roomName, ptt);
 
         if (roomIdOrAlias) {
-          history.push(`/room/${roomIdOrAlias}`);
+          history.push(`/${roomIdOrAlias.substring(1).split(":")[0]}`);
         }
       }
 

src/home/UnauthenticatedView.tsx

@@ -86,8 +86,7 @@ export const UnauthenticatedView: FC = () => {
             setOnFinished(() => {
               setClient(client, session);
               const aliasLocalpart = roomAliasLocalpartFromRoomName(roomName);
-              const [, serverName] = client.getUserId().split(":");
-              history.push(`/room/#${aliasLocalpart}:${serverName}`);
+              history.push(`/${aliasLocalpart}`);
             });
 
             setLoading(false);
@@ -100,7 +99,7 @@ export const UnauthenticatedView: FC = () => {
 
         // Only consider the registration successful if we managed to create the room, too
         setClient(client, session);
-        history.push(`/room/${roomIdOrAlias}`);
+        history.push(`/${roomIdOrAlias.substring(1).split(":")[0]}`);
       }
 
       submit().catch((error) => {

src/matrix-utils.ts

@@ -346,15 +346,11 @@ export async function createRoom(
 // Returns a URL to that will load Element Call with the given room
 export function getRoomUrl(roomIdOrAlias: string): string {
   if (roomIdOrAlias.startsWith("#")) {
-    const [localPart, host] = roomIdOrAlias.replace("#", "").split(":");
-
-    if (host !== Config.defaultServerName()) {
-      return `${window.location.protocol}//${window.location.host}/room/${roomIdOrAlias}`;
-    } else {
-      return `${window.location.protocol}//${window.location.host}/${localPart}`;
-    }
+    return `${window.location.protocol}//${window.location.host}/${
+      roomIdOrAlias.substring(1).split(":")[0]
+    }`;
   } else {
-    return `${window.location.protocol}//${window.location.host}/room/#?roomId=${roomIdOrAlias}`;
+    return `${window.location.protocol}//${window.location.host}?roomId=${roomIdOrAlias}`;
   }
 }