Merge branch 'livekit' into remove-walkie-talkie

src/home/JoinExistingCallModal.tsx

@@ -17,36 +17,29 @@ limitations under the License.
 import { PressEvent } from "@react-types/shared";
 import { useTranslation } from "react-i18next";
 
-import { Modal, ModalContent } from "../Modal";
+import { Modal } from "../Modal";
 import { Button } from "../button";
 import { FieldRow } from "../input/Input";
 import styles from "./JoinExistingCallModal.module.css";
 
 interface Props {
+  open: boolean;
+  onDismiss: () => void;
   onJoin: (e: PressEvent) => void;
-  onClose: () => void;
-  // TODO: add used parameters for <Modal>
-  [index: string]: unknown;
 }
-export function JoinExistingCallModal({ onJoin, onClose, ...rest }: Props) {
+
+export function JoinExistingCallModal({ onJoin, open, onDismiss }: Props) {
   const { t } = useTranslation();
 
   return (
-    <Modal
-      title={t("Join existing call?")}
-      isDismissable
-      {...rest}
-      onClose={onClose}
-    >
-      <ModalContent>
-        <p>{t("This call already exists, would you like to join?")}</p>
-        <FieldRow rightAlign className={styles.buttons}>
-          <Button onPress={onClose}>{t("No")}</Button>
-          <Button onPress={onJoin} data-testid="home_joinExistingRoom">
-            {t("Yes, join call")}
-          </Button>
-        </FieldRow>
-      </ModalContent>
+    <Modal title={t("Join existing call?")} open={open} onDismiss={onDismiss}>
+      <p>{t("This call already exists, would you like to join?")}</p>
+      <FieldRow rightAlign className={styles.buttons}>
+        <Button onPress={onDismiss}>{t("No")}</Button>
+        <Button onPress={onJoin} data-testid="home_joinExistingRoom">
+          {t("Yes, join call")}
+        </Button>
+      </FieldRow>
     </Modal>
   );
 }

src/home/RegisteredView.tsx

@@ -34,7 +34,6 @@ import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { Button } from "../button";
 import { CallList } from "./CallList";
 import { UserMenuContainer } from "../UserMenuContainer";
-import { useModalTriggerState } from "../Modal";
 import { JoinExistingCallModal } from "./JoinExistingCallModal";
 import { Caption } from "../typography/Typography";
 import { Form } from "../form/Form";
@@ -54,7 +53,12 @@ export function RegisteredView({ client }: Props) {
   const [optInAnalytics] = useOptInAnalytics();
   const history = useHistory();
   const { t } = useTranslation();
-  const { modalState, modalProps } = useModalTriggerState();
+  const [joinExistingCallModalOpen, setJoinExistingCallModalOpen] =
+    useState(false);
+  const onDismissJoinExistingCallModal = useCallback(
+    () => setJoinExistingCallModalOpen(false),
+    [setJoinExistingCallModalOpen]
+  );
   const [e2eeEnabled] = useEnableE2EE();
 
   const onSubmit: FormEventHandler<HTMLFormElement> = useCallback(
@@ -90,7 +94,7 @@ export function RegisteredView({ client }: Props) {
           setExistingAlias(roomAliasLocalpartFromRoomName(roomName));
           setLoading(false);
           setError(undefined);
-          modalState.open();
+          setJoinExistingCallModalOpen(true);
         } else {
           console.error(error);
           setLoading(false);
@@ -98,7 +102,7 @@ export function RegisteredView({ client }: Props) {
         }
       });
     },
-    [client, history, modalState, e2eeEnabled]
+    [client, history, setJoinExistingCallModalOpen, e2eeEnabled]
   );
 
   const recentRooms = useGroupCallRooms(client);
@@ -164,9 +168,11 @@ export function RegisteredView({ client }: Props) {
           )}
         </main>
       </div>
-      {modalState.isOpen && (
-        <JoinExistingCallModal onJoin={onJoinExistingRoom} {...modalProps} />
-      )}
+      <JoinExistingCallModal
+        onJoin={onJoinExistingRoom}
+        open={joinExistingCallModalOpen}
+        onDismiss={onDismissJoinExistingCallModal}
+      />
     </>
   );
 }

src/home/UnauthenticatedView.tsx

@@ -31,7 +31,6 @@ import {
   sanitiseRoomNameInput,
 } from "../matrix-utils";
 import { useInteractiveRegistration } from "../auth/useInteractiveRegistration";
-import { useModalTriggerState } from "../Modal";
 import { JoinExistingCallModal } from "./JoinExistingCallModal";
 import { useRecaptcha } from "../auth/useRecaptcha";
 import { Body, Caption, Link } from "../typography/Typography";
@@ -54,7 +53,12 @@ export const UnauthenticatedView: FC = () => {
   const { recaptchaKey, register } = useInteractiveRegistration();
   const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);
 
-  const { modalState, modalProps } = useModalTriggerState();
+  const [joinExistingCallModalOpen, setJoinExistingCallModalOpen] =
+    useState(false);
+  const onDismissJoinExistingCallModal = useCallback(
+    () => setJoinExistingCallModalOpen(false),
+    [setJoinExistingCallModalOpen]
+  );
   const [onFinished, setOnFinished] = useState<() => void>();
   const history = useHistory();
   const { t } = useTranslation();
@@ -108,7 +112,7 @@ export const UnauthenticatedView: FC = () => {
             });
 
             setLoading(false);
-            modalState.open();
+            setJoinExistingCallModalOpen(true);
             return;
           } else {
             throw error;
@@ -131,7 +135,15 @@ export const UnauthenticatedView: FC = () => {
         reset();
       });
     },
-    [register, reset, execute, history, modalState, setClient, e2eeEnabled]
+    [
+      register,
+      reset,
+      execute,
+      history,
+      setJoinExistingCallModalOpen,
+      setClient,
+      e2eeEnabled,
+    ]
   );
 
   return (
@@ -221,8 +233,12 @@ export const UnauthenticatedView: FC = () => {
           </Body>
         </footer>
       </div>
-      {modalState.isOpen && onFinished && (
-        <JoinExistingCallModal onJoin={onFinished} {...modalProps} />
+      {onFinished && (
+        <JoinExistingCallModal
+          onJoin={onFinished}
+          open={joinExistingCallModalOpen}
+          onDismiss={onDismissJoinExistingCallModal}
+        />
       )}
     </>
   );