more types

This commit is contained in:
Timo K 2022-07-28 00:17:09 +02:00
parent f26ab2f941
commit 3727bfb67f
5 changed files with 38 additions and 19 deletions

View file

@ -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>
);
});

View file

@ -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";

View file

@ -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";

View file

@ -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) {

View file

@ -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);