From 641b82dc4544adefb590c9f7b50dbf774fdbcf4c Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Wed, 23 Feb 2022 15:36:38 -0800
Subject: [PATCH] Fix creating rooms from not found screen

---
 src/room/GroupCallLoader.jsx  |  6 ++++--
 src/room/RoomNotFoundView.jsx |  8 +++-----
 src/room/useLoadGroupCall.js  | 19 ++++++++++++++-----
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/room/GroupCallLoader.jsx b/src/room/GroupCallLoader.jsx
index 1f2a252..3aa361b 100644
--- a/src/room/GroupCallLoader.jsx
+++ b/src/room/GroupCallLoader.jsx
@@ -6,7 +6,7 @@ import { isLocalRoomId } from "../matrix-utils";
 import { RoomNotFoundView } from "./RoomNotFoundView";
 
 export function GroupCallLoader({ client, roomId, viaServers, children }) {
-  const { loading, error, groupCall } = useLoadGroupCall(
+  const { loading, error, groupCall, reload } = useLoadGroupCall(
     client,
     roomId,
     viaServers
@@ -29,7 +29,9 @@ export function GroupCallLoader({ client, roomId, viaServers, children }) {
         error.message.indexOf("Failed to fetch alias") !== -1)) &&
     isLocalRoomId(roomId)
   ) {
-    return <RoomNotFoundView client={client} roomId={roomId} />;
+    return (
+      <RoomNotFoundView client={client} roomId={roomId} onReload={reload} />
+    );
   }
 
   if (error) {
diff --git a/src/room/RoomNotFoundView.jsx b/src/room/RoomNotFoundView.jsx
index 2fc2f77..0172085 100644
--- a/src/room/RoomNotFoundView.jsx
+++ b/src/room/RoomNotFoundView.jsx
@@ -8,7 +8,7 @@ import { Form } from "../form/Form";
 import { useHistory } from "react-router-dom";
 import styles from "./RoomNotFoundView.module.css";
 
-export function RoomNotFoundView({ client, roomId }) {
+export function RoomNotFoundView({ client, roomId, onReload }) {
   const history = useHistory();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState();
@@ -21,11 +21,9 @@ export function RoomNotFoundView({ client, roomId }) {
         setError(undefined);
         setLoading(true);
 
-        const roomIdOrAlias = await createRoom(client, roomName);
+        await createRoom(client, roomName);
 
-        if (roomIdOrAlias) {
-          history.push(`/room/${roomIdOrAlias}`);
-        }
+        onReload();
       }
 
       submit().catch((error) => {
diff --git a/src/room/useLoadGroupCall.js b/src/room/useLoadGroupCall.js
index d198fd9..ffd3033 100644
--- a/src/room/useLoadGroupCall.js
+++ b/src/room/useLoadGroupCall.js
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 
 async function fetchGroupCall(
   client,
@@ -41,14 +41,23 @@ export function useLoadGroupCall(client, roomId, viaServers) {
     loading: true,
     error: undefined,
     groupCall: undefined,
+    reloadId: 0,
   });
 
   useEffect(() => {
     setState({ loading: true });
     fetchGroupCall(client, roomId, viaServers, 30000)
-      .then((groupCall) => setState({ loading: false, groupCall }))
-      .catch((error) => setState({ loading: false, error }));
-  }, [client, roomId]);
+      .then((groupCall) =>
+        setState((prevState) => ({ ...prevState, loading: false, groupCall }))
+      )
+      .catch((error) =>
+        setState((prevState) => ({ ...prevState, loading: false, error }))
+      );
+  }, [client, roomId, state.reloadId]);
 
-  return state;
+  const reload = useCallback(() => {
+    setState((prevState) => ({ ...prevState, reloadId: prevState.reloadId++ }));
+  }, []);
+
+  return { ...state, reload };
 }