feat(modal): port ModifyAccount and PendingRequest

src/components/common/user/UserIcon.tsx

@@ -56,7 +56,7 @@ export default observer(
                 keyof Props | "children" | "as"
             >,
     ) => {
-        const client = useClient();
+        const client = useApplicationState().client!;
 
         const {
             target,

src/components/settings/account/EditAccount.tsx

@@ -12,6 +12,7 @@ import {
 } from "@revoltchat/ui";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
+import { modalController } from "../../../context/modals";
 import {
     ClientStatus,
     StatusContext,
@@ -62,8 +63,9 @@ export default function EditAccount() {
                     account
                     action={<Pencil size={20} />}
                     onClick={() =>
-                        openScreen({
-                            id: "modify_account",
+                        modalController.push({
+                            type: "modify_account",
+                            client,
                             field,
                         })
                     }>

src/context/intermediate/Popovers.tsx

@@ -8,8 +8,6 @@ import { SpecialPromptModal } from "./modals/Prompt";
 import { ChannelInfo } from "./popovers/ChannelInfo";
 import { CreateBotModal } from "./popovers/CreateBot";
 import { ImageViewer } from "./popovers/ImageViewer";
-import { ModifyAccountModal } from "./popovers/ModifyAccount";
-import { PendingRequests } from "./popovers/PendingRequests";
 import { ServerIdentityModal } from "./popovers/ServerIdentityModal";
 import { UserPicker } from "./popovers/UserPicker";
 import { UserProfile } from "./popovers/UserProfile";
@@ -35,12 +33,6 @@ export default function Popovers() {
         case "channel_info":
             // @ts-expect-error someone figure this out :)
             return <ChannelInfo {...screen} onClose={onClose} />;
-        case "pending_requests":
-            // @ts-expect-error someone figure this out :)
-            return <PendingRequests {...screen} onClose={onClose} />;
-        case "modify_account":
-            // @ts-expect-error someone figure this out :)
-            return <ModifyAccountModal onClose={onClose} {...screen} />;
         case "create_bot":
             // @ts-expect-error someone figure this out :)
             return <CreateBotModal onClose={onClose} {...screen} />;

src/context/intermediate/popovers/PendingRequests.tsx

@@ -1,28 +0,0 @@
-import { observer } from "mobx-react-lite";
-import { User } from "revolt.js";
-
-import styles from "./UserPicker.module.scss";
-import { Text } from "preact-i18n";
-
-import { Modal } from "@revoltchat/ui";
-
-import { Friend } from "../../../pages/friends/Friend";
-
-interface Props {
-    users: User[];
-    onClose: () => void;
-}
-
-export const PendingRequests = observer(({ users, onClose }: Props) => {
-    return (
-        <Modal
-            title={<Text id="app.special.friends.pending" />}
-            onClose={onClose}>
-            <div className={styles.list}>
-                {users.map((x) => (
-                    <Friend user={x!} key={x!._id} />
-                ))}
-            </div>
-        </Modal>
-    );
-});

src/context/modals/components/ModifyAccount.tsx

@@ -5,14 +5,12 @@ import { useContext, useState } from "preact/hooks";
 
 import { Category, Error, Modal } from "@revoltchat/ui";
 
+import { noopTrue } from "../../../lib/js";
+
 import FormField from "../../../pages/login/FormField";
 import { AppContext } from "../../revoltjs/RevoltClient";
 import { takeError } from "../../revoltjs/util";
-
-interface Props {
-    onClose: () => void;
-    field: "username" | "email" | "password";
-}
+import { ModalProps } from "../types";
 
 interface FormInputs {
     password: string;
@@ -25,7 +23,10 @@ interface FormInputs {
     current_password?: string;
 }
 
-export function ModifyAccountModal({ onClose, field }: Props) {
+export default function ModifyAccount({
+    field,
+    ...props
+}: ModalProps<"modify_account">) {
     const client = useContext(AppContext);
     const [processing, setProcessing] = useState(false);
     const { handleSubmit, register, errors } = useForm<FormInputs>();
@@ -46,19 +47,19 @@ export function ModifyAccountModal({ onClose, field }: Props) {
                     current_password: password,
                     email: new_email,
                 });
-                onClose();
+                props.onClose();
             } else if (field === "password") {
                 await client.api.patch("/auth/account/change/password", {
                     current_password: password,
                     password: new_password,
                 });
-                onClose();
+                props.onClose();
             } else if (field === "username") {
                 await client.api.patch("/users/@me/username", {
                     username: new_username,
                     password,
                 });
-                onClose();
+                props.onClose();
             }
         } catch (err) {
             setError(takeError(err));
@@ -68,16 +69,13 @@ export function ModifyAccountModal({ onClose, field }: Props) {
 
     return (
         <Modal
-            onClose={onClose}
+            {...props}
             title={<Text id={`app.special.modals.account.change.${field}`} />}
             disabled={processing}
             actions={[
                 {
                     confirmation: true,
-                    onClick: async () => {
-                        await handleSubmit(onSubmit)();
-                        return true;
-                    },
+                    onClick: () => void handleSubmit(onSubmit)(),
                     children:
                         field === "email" ? (
                             <Text id="app.special.modals.actions.send_email" />
@@ -86,7 +84,7 @@ export function ModifyAccountModal({ onClose, field }: Props) {
                         ),
                 },
                 {
-                    onClick: onClose,
+                    onClick: noopTrue,
                     children: <Text id="app.special.modals.actions.cancel" />,
                     palette: "plain",
                 },

src/context/modals/components/PendingFriendRequests.tsx

@@ -0,0 +1,21 @@
+import { Text } from "preact-i18n";
+
+import { Column, Modal } from "@revoltchat/ui";
+
+import { Friend } from "../../../pages/friends/Friend";
+import { ModalProps } from "../types";
+
+export default function PendingFriendRequests({
+    users,
+    ...props
+}: ModalProps<"pending_friend_requests">) {
+    return (
+        <Modal {...props} title={<Text id="app.special.friends.pending" />}>
+            <Column>
+                {users.map((x) => (
+                    <Friend user={x!} key={x!._id} />
+                ))}
+            </Column>
+        </Modal>
+    );
+}

src/context/modals/index.tsx

@@ -21,7 +21,9 @@ import LinkWarning from "./components/LinkWarning";
 import MFAEnableTOTP from "./components/MFAEnableTOTP";
 import MFAFlow from "./components/MFAFlow";
 import MFARecovery from "./components/MFARecovery";
+import ModifyAccount from "./components/ModifyAccount";
 import OutOfDate from "./components/OutOfDate";
+import PendingFriendRequests from "./components/PendingFriendRequests";
 import ShowToken from "./components/ShowToken";
 import SignOutSessions from "./components/SignOutSessions";
 import SignedOut from "./components/SignedOut";
@@ -206,7 +208,9 @@ export const modalController = new ModalControllerExtended({
     mfa_flow: MFAFlow,
     mfa_recovery: MFARecovery,
     mfa_enable_totp: MFAEnableTOTP,
+    modify_account: ModifyAccount,
     out_of_date: OutOfDate,
+    pending_friend_requests: PendingFriendRequests,
     show_token: ShowToken,
     signed_out: SignedOut,
     sign_out_sessions: SignOutSessions,

src/context/modals/types.ts

@@ -1,4 +1,4 @@
-import { API, Client } from "revolt.js";
+import { API, Client, User } from "revolt.js";
 
 export type Modal = {
     key?: string;
@@ -56,6 +56,15 @@ export type Modal = {
           link: string;
           callback: () => true;
       }
+    | {
+          type: "pending_friend_requests";
+          users: User[];
+      }
+    | {
+          type: "modify_account";
+          client: Client;
+          field: "username" | "email" | "password";
+      }
     | {
           type: "signed_out";
       }

src/pages/friends/Friends.tsx

@@ -13,6 +13,7 @@ import { TextReact } from "../../lib/i18n";
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
 import { useIntermediate } from "../../context/intermediate/Intermediate";
+import { modalController } from "../../context/modals";
 import { useClient } from "../../context/revoltjs/RevoltClient";
 
 import CollapsibleSection from "../../components/common/CollapsibleSection";
@@ -129,8 +130,8 @@ export default observer(() => {
                         <div
                             className={styles.pending}
                             onClick={() =>
-                                openScreen({
-                                    id: "pending_requests",
+                                modalController.push({
+                                    type: "pending_friend_requests",
                                     users: incoming,
                                 })
                             }>