Create room when not found and lowercase name
This commit is contained in:
parent
014b740e47
commit
35fb1e710b
6 changed files with 44 additions and 115 deletions
|
@ -55,10 +55,8 @@ export function roomNameFromRoomId(roomId) {
|
||||||
.match(/([^:]+):.*$/)[1]
|
.match(/([^:]+):.*$/)[1]
|
||||||
.substring(1)
|
.substring(1)
|
||||||
.split("-")
|
.split("-")
|
||||||
.map((part) =>
|
.join(" ")
|
||||||
part.length > 0 ? part.charAt(0).toUpperCase() + part.slice(1) : part
|
.toLowerCase();
|
||||||
)
|
|
||||||
.join(" ");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function isLocalRoomId(roomId) {
|
export function isLocalRoomId(roomId) {
|
||||||
|
|
|
@ -2,14 +2,13 @@ import React from "react";
|
||||||
import { useLoadGroupCall } from "./useLoadGroupCall";
|
import { useLoadGroupCall } from "./useLoadGroupCall";
|
||||||
import { ErrorView, FullScreenView } from "../FullScreenView";
|
import { ErrorView, FullScreenView } from "../FullScreenView";
|
||||||
import { usePageTitle } from "../usePageTitle";
|
import { usePageTitle } from "../usePageTitle";
|
||||||
import { isLocalRoomId } from "../matrix-utils";
|
|
||||||
import { RoomNotFoundView } from "./RoomNotFoundView";
|
|
||||||
|
|
||||||
export function GroupCallLoader({ client, roomId, viaServers, children }) {
|
export function GroupCallLoader({ client, roomId, viaServers, children }) {
|
||||||
const { loading, error, groupCall, reload } = useLoadGroupCall(
|
const { loading, error, groupCall } = useLoadGroupCall(
|
||||||
client,
|
client,
|
||||||
roomId,
|
roomId,
|
||||||
viaServers
|
viaServers,
|
||||||
|
true
|
||||||
);
|
);
|
||||||
|
|
||||||
usePageTitle(groupCall ? groupCall.room.name : "Loading...");
|
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) {
|
if (error) {
|
||||||
return <ErrorView error={error} />;
|
return <ErrorView error={error} />;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
|
@ -1,11 +0,0 @@
|
||||||
.form {
|
|
||||||
padding: 0 24px;
|
|
||||||
justify-content: center;
|
|
||||||
max-width: 409px;
|
|
||||||
width: calc(100% - 48px);
|
|
||||||
margin-bottom: 72px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
|
@ -18,7 +18,7 @@ export function RoomRedirect() {
|
||||||
roomId = `#${roomId}:${defaultHomeserverHost}`;
|
roomId = `#${roomId}:${defaultHomeserverHost}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
history.replace(`/room/${roomId}`);
|
history.replace(`/room/${roomId.toLowerCase()}`);
|
||||||
}, [pathname, history]);
|
}, [pathname, history]);
|
||||||
|
|
||||||
return <LoadingView />;
|
return <LoadingView />;
|
||||||
|
|
|
@ -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(
|
async function fetchGroupCall(
|
||||||
client,
|
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({
|
const [state, setState] = useState({
|
||||||
loading: true,
|
loading: true,
|
||||||
error: undefined,
|
error: undefined,
|
||||||
groupCall: undefined,
|
groupCall: undefined,
|
||||||
reloadId: 0,
|
|
||||||
});
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
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 });
|
setState({ loading: true });
|
||||||
fetchGroupCall(client, roomId, viaServers, 30000)
|
|
||||||
|
fetchOrCreateGroupCall()
|
||||||
.then((groupCall) =>
|
.then((groupCall) =>
|
||||||
setState((prevState) => ({ ...prevState, loading: false, groupCall }))
|
setState((prevState) => ({ ...prevState, loading: false, groupCall }))
|
||||||
)
|
)
|
||||||
|
@ -55,9 +88,5 @@ export function useLoadGroupCall(client, roomId, viaServers) {
|
||||||
);
|
);
|
||||||
}, [client, roomId, state.reloadId]);
|
}, [client, roomId, state.reloadId]);
|
||||||
|
|
||||||
const reload = useCallback(() => {
|
return state;
|
||||||
setState((prevState) => ({ ...prevState, reloadId: prevState.reloadId++ }));
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return { ...state, reload };
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue