Create room when not found and lowercase name

src/matrix-utils.js

@@ -55,10 +55,8 @@ export function roomNameFromRoomId(roomId) {
     .match(/([^:]+):.*$/)[1]
     .substring(1)
     .split("-")
-    .map((part) =>
-      part.length > 0 ? part.charAt(0).toUpperCase() + part.slice(1) : part
-    )
-    .join(" ");
+    .join(" ")
+    .toLowerCase();
 }
 
 export function isLocalRoomId(roomId) {

src/room/GroupCallLoader.jsx

@@ -2,14 +2,13 @@ import React from "react";
 import { useLoadGroupCall } from "./useLoadGroupCall";
 import { ErrorView, FullScreenView } from "../FullScreenView";
 import { usePageTitle } from "../usePageTitle";
-import { isLocalRoomId } from "../matrix-utils";
-import { RoomNotFoundView } from "./RoomNotFoundView";
 
 export function GroupCallLoader({ client, roomId, viaServers, children }) {
-  const { loading, error, groupCall, reload } = useLoadGroupCall(
+  const { loading, error, groupCall } = useLoadGroupCall(
     client,
     roomId,
-    viaServers
+    viaServers,
+    true
   );
 
   usePageTitle(groupCall ? groupCall.room.name : "Loading...");
@@ -22,18 +21,6 @@ export function GroupCallLoader({ client, roomId, viaServers, children }) {
     );
   }
 
-  if (
-    error &&
-    (error.errcode === "M_NOT_FOUND" ||
-      (error.message &&
-        error.message.indexOf("Failed to fetch alias") !== -1)) &&
-    isLocalRoomId(roomId)
-  ) {
-    return (
-      <RoomNotFoundView client={client} roomId={roomId} onReload={reload} />
-    );
-  }
-
   if (error) {
     return <ErrorView error={error} />;
   }

src/room/RoomNotFoundView.jsx

@@ -1,74 +0,0 @@
-import React, { useState, useCallback } from "react";
-import { FullScreenView } from "../FullScreenView";
-import { Headline, Subtitle } from "../typography/Typography";
-import { createRoom, roomNameFromRoomId } from "../matrix-utils";
-import { FieldRow, ErrorMessage, InputField } from "../input/Input";
-import { Button } from "../button";
-import { Form } from "../form/Form";
-import { useHistory } from "react-router-dom";
-import styles from "./RoomNotFoundView.module.css";
-
-export function RoomNotFoundView({ client, roomId, onReload }) {
-  const history = useHistory();
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState();
-  const roomName = roomNameFromRoomId(roomId);
-  const onSubmit = useCallback(
-    (e) => {
-      e.preventDefault();
-
-      async function submit() {
-        setError(undefined);
-        setLoading(true);
-
-        await createRoom(client, roomName);
-
-        onReload();
-      }
-
-      submit().catch((error) => {
-        console.error(error);
-        setLoading(false);
-        setError(error);
-      });
-    },
-    [client, roomName]
-  );
-
-  return (
-    <FullScreenView>
-      <Headline>Call Not Found</Headline>
-      <Subtitle>Would you like to create this call?</Subtitle>
-      <Form onSubmit={onSubmit} className={styles.form}>
-        <FieldRow>
-          <InputField
-            id="callName"
-            name="callName"
-            label="Call name"
-            placeholder="Call name"
-            type="text"
-            required
-            autoComplete="off"
-            value={roomName}
-            disabled
-          />
-        </FieldRow>
-        <FieldRow>
-          <Button
-            type="submit"
-            size="lg"
-            disabled={loading}
-            className={styles.button}
-          >
-            {loading ? "Loading..." : "Create Room"}
-          </Button>
-        </FieldRow>
-        {error && (
-          <FieldRow>
-            <ErrorMessage>{error.message}</ErrorMessage>
-          </FieldRow>
-        )}
-      </Form>
-    </FullScreenView>
-  );
-}

src/room/RoomNotFoundView.module.css

@@ -1,11 +0,0 @@
-.form {
-  padding: 0 24px;
-  justify-content: center;
-  max-width: 409px;
-  width: calc(100% - 48px);
-  margin-bottom: 72px;
-}
-
-.button {
-  width: 100%;
-}

src/room/RoomRedirect.jsx

@@ -18,7 +18,7 @@ export function RoomRedirect() {
       roomId = `#${roomId}:${defaultHomeserverHost}`;
     }
 
-    history.replace(`/room/${roomId}`);
+    history.replace(`/room/${roomId.toLowerCase()}`);
   }, [pathname, history]);
 
   return <LoadingView />;

src/room/useLoadGroupCall.js

@@ -1,4 +1,5 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect } from "react";
+import { isLocalRoomId, createRoom, roomNameFromRoomId } from "../matrix-utils";
 
 async function fetchGroupCall(
   client,
@@ -36,17 +37,49 @@ async function fetchGroupCall(
   });
 }
 
-export function useLoadGroupCall(client, roomId, viaServers) {
+export function useLoadGroupCall(client, roomId, viaServers, createIfNotFound) {
   const [state, setState] = useState({
     loading: true,
     error: undefined,
     groupCall: undefined,
-    reloadId: 0,
   });
 
   useEffect(() => {
+    async function fetchOrCreateGroupCall() {
+      try {
+        const groupCall = await fetchGroupCall(
+          client,
+          roomId,
+          viaServers,
+          30000
+        );
+        return groupCall;
+      } catch (error) {
+        if (
+          createIfNotFound &&
+          (error.errcode === "M_NOT_FOUND" ||
+            (error.message &&
+              error.message.indexOf("Failed to fetch alias") !== -1)) &&
+          isLocalRoomId(roomId)
+        ) {
+          const roomName = roomNameFromRoomId(roomId);
+          await createRoom(client, roomName);
+          const groupCall = await fetchGroupCall(
+            client,
+            roomId,
+            viaServers,
+            30000
+          );
+          return groupCall;
+        }
+
+        throw error;
+      }
+    }
+
     setState({ loading: true });
-    fetchGroupCall(client, roomId, viaServers, 30000)
+
+    fetchOrCreateGroupCall()
       .then((groupCall) =>
         setState((prevState) => ({ ...prevState, loading: false, groupCall }))
       )
@@ -55,9 +88,5 @@ export function useLoadGroupCall(client, roomId, viaServers) {
       );
   }, [client, roomId, state.reloadId]);
 
-  const reload = useCallback(() => {
-    setState((prevState) => ({ ...prevState, reloadId: prevState.reloadId++ }));
-  }, []);
-
-  return { ...state, reload };
+  return state;
 }