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 ;
+ return (
+
+ );
}
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 };
}