more types
This commit is contained in:
parent
f26ab2f941
commit
3727bfb67f
5 changed files with 38 additions and 19 deletions
|
@ -15,16 +15,25 @@ limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
import React, { forwardRef } from "react";
|
import React, { FormEventHandler, forwardRef } from "react";
|
||||||
|
|
||||||
import styles from "./Form.module.css";
|
import styles from "./Form.module.css";
|
||||||
|
|
||||||
export const Form = forwardRef<HTMLFormElement, { className: string }>(
|
export const Form = forwardRef<
|
||||||
({ children, className, ...rest }, ref) => {
|
HTMLFormElement,
|
||||||
return (
|
{
|
||||||
<form {...rest} className={classNames(styles.form, className)} ref={ref}>
|
className: string;
|
||||||
{children}
|
onSubmit: FormEventHandler<HTMLFormElement>;
|
||||||
</form>
|
children: JSX.Element[];
|
||||||
);
|
|
||||||
}
|
}
|
||||||
);
|
>(({ children, className, onSubmit }, ref) => {
|
||||||
|
return (
|
||||||
|
<form
|
||||||
|
onSubmit={onSubmit}
|
||||||
|
className={classNames(styles.form, className)}
|
||||||
|
ref={ref}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
|
@ -16,7 +16,7 @@ limitations under the License.
|
||||||
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import { MatrixClient, Room, RoomMember } from "matrix-js-sdk";
|
import { MatrixClient, RoomMember } from "matrix-js-sdk";
|
||||||
|
|
||||||
import { CopyButton } from "../button";
|
import { CopyButton } from "../button";
|
||||||
import { Facepile } from "../Facepile";
|
import { Facepile } from "../Facepile";
|
||||||
|
|
|
@ -15,6 +15,7 @@ limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
import { useClient } from "../ClientContext";
|
import { useClient } from "../ClientContext";
|
||||||
import { ErrorView, LoadingView } from "../FullScreenView";
|
import { ErrorView, LoadingView } from "../FullScreenView";
|
||||||
import { UnauthenticatedView } from "./UnauthenticatedView";
|
import { UnauthenticatedView } from "./UnauthenticatedView";
|
||||||
|
|
|
@ -24,6 +24,7 @@ import styles from "./JoinExistingCallModal.module.css";
|
||||||
interface Props {
|
interface Props {
|
||||||
onJoin: (e: PressEvent) => void;
|
onJoin: (e: PressEvent) => void;
|
||||||
onClose: (e: PressEvent) => void;
|
onClose: (e: PressEvent) => void;
|
||||||
|
// TODO: add used parameters for <Modal>
|
||||||
[index: string]: unknown;
|
[index: string]: unknown;
|
||||||
}
|
}
|
||||||
export function JoinExistingCallModal({ onJoin, onClose, ...rest }: Props) {
|
export function JoinExistingCallModal({ onJoin, onClose, ...rest }: Props) {
|
||||||
|
|
|
@ -14,7 +14,12 @@ See the License for the specific language governing permissions and
|
||||||
limitations under the License.
|
limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { useState, useCallback } from "react";
|
import React, {
|
||||||
|
useState,
|
||||||
|
useCallback,
|
||||||
|
FormEvent,
|
||||||
|
FormEventHandler,
|
||||||
|
} from "react";
|
||||||
import { useHistory } from "react-router-dom";
|
import { useHistory } from "react-router-dom";
|
||||||
import { MatrixClient } from "matrix-js-sdk";
|
import { MatrixClient } from "matrix-js-sdk";
|
||||||
|
|
||||||
|
@ -32,27 +37,31 @@ import { JoinExistingCallModal } from "./JoinExistingCallModal";
|
||||||
import { Title } from "../typography/Typography";
|
import { Title } from "../typography/Typography";
|
||||||
import { Form } from "../form/Form";
|
import { Form } from "../form/Form";
|
||||||
import { CallType, CallTypeDropdown } from "./CallTypeDropdown";
|
import { CallType, CallTypeDropdown } from "./CallTypeDropdown";
|
||||||
|
interface Props {
|
||||||
|
client: MatrixClient;
|
||||||
|
isPasswordlessUser: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
export function RegisteredView({ client }: { client: MatrixClient }) {
|
export function RegisteredView({ client, isPasswordlessUser }: Props) {
|
||||||
const [callType, setCallType] = useState(CallType.Video);
|
const [callType, setCallType] = useState(CallType.Video);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [error, setError] = useState<Error>();
|
const [error, setError] = useState<Error>();
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
const { modalState, modalProps } = useModalTriggerState();
|
const { modalState, modalProps } = useModalTriggerState();
|
||||||
|
|
||||||
const onSubmit = useCallback(
|
const onSubmit: FormEventHandler<HTMLFormElement> = useCallback(
|
||||||
(e) => {
|
(e: FormEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const data = new FormData(e.target);
|
const data = new FormData(e.target as HTMLFormElement);
|
||||||
const roomNameData = data.get("callName");
|
const roomNameData = data.get("callName");
|
||||||
const roomName = typeof roomNameData === "string" ? roomNameData : "";
|
const roomName = typeof roomNameData === "string" ? roomNameData : "";
|
||||||
const ptt = callType === CallType.Radio;
|
// const ptt = callType === CallType.Radio;
|
||||||
|
|
||||||
async function submit() {
|
async function submit() {
|
||||||
setError(undefined);
|
setError(undefined);
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
|
|
||||||
const [roomIdOrAlias] = await createRoom(client, roomName, ptt);
|
const [roomIdOrAlias] = await createRoom(client, roomName);
|
||||||
|
|
||||||
if (roomIdOrAlias) {
|
if (roomIdOrAlias) {
|
||||||
history.push(`/room/${roomIdOrAlias}`);
|
history.push(`/room/${roomIdOrAlias}`);
|
||||||
|
@ -69,11 +78,10 @@ export function RegisteredView({ client }: { client: MatrixClient }) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
setError(error);
|
setError(error);
|
||||||
reset();
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
[callType, client, history, modalState]
|
[client, history, modalState]
|
||||||
);
|
);
|
||||||
|
|
||||||
const recentRooms = useGroupCallRooms(client);
|
const recentRooms = useGroupCallRooms(client);
|
||||||
|
|
Loading…
Reference in a new issue