feat: port CreateBot to modal form

fixes #723

src/controllers/modals/ModalController.tsx

@@ -21,6 +21,7 @@ import Changelog from "./components/Changelog";
 import ChannelInfo from "./components/ChannelInfo";
 import Clipboard from "./components/Clipboard";
 import Confirmation from "./components/Confirmation";
+import CreateBot from "./components/CreateBot";
 import CreateCategory from "./components/CreateCategory";
 import CreateChannel from "./components/CreateChannel";
 import CreateGroup from "./components/CreateGroup";
@@ -45,7 +46,6 @@ import ShowToken from "./components/ShowToken";
 import SignOutSessions from "./components/SignOutSessions";
 import SignedOut from "./components/SignedOut";
 import UserPicker from "./components/UserPicker";
-import { CreateBotModal } from "./components/legacy/CreateBot";
 import { OnboardingModal } from "./components/legacy/Onboarding";
 import { UserProfile } from "./components/legacy/UserProfile";
 import { Modal } from "./types";
@@ -258,7 +258,7 @@ export const modalController = new ModalControllerExtended({
     create_invite: CreateInvite,
     create_role: CreateRole,
     create_server: CreateServer,
-    create_bot: CreateBotModal,
+    create_bot: CreateBot,
     custom_status: CustomStatus,
     delete_message: DeleteMessage,
     error: Error,

src/controllers/modals/components/CreateBot.tsx

@@ -0,0 +1,42 @@
+import { Text } from "preact-i18n";
+
+import { ModalForm } from "@revoltchat/ui";
+
+import { useClient } from "../../client/ClientController";
+import { mapError } from "../../client/jsx/error";
+import { ModalProps } from "../types";
+
+/**
+ * Bot creation modal
+ */
+export default function CreateBot({
+    onCreate,
+    ...props
+}: ModalProps<"create_bot">) {
+    const client = useClient();
+
+    return (
+        <ModalForm
+            {...props}
+            title={<Text id="app.special.popovers.create_bot.title" />}
+            schema={{
+                name: "text",
+            }}
+            data={{
+                name: {
+                    field: (<Text id="login.username" />) as React.ReactChild,
+                },
+            }}
+            callback={async ({ name }) => {
+                const { bot } = await client.bots
+                    .create({ name })
+                    .catch(mapError);
+
+                onCreate(bot);
+            }}
+            submit={{
+                children: <Text id="app.special.modals.actions.create" />,
+            }}
+        />
+    );
+}

src/controllers/modals/components/legacy/CreateBot.tsx

@@ -1,86 +0,0 @@
-import { SubmitHandler, useForm } from "react-hook-form";
-import { API } from "revolt.js";
-
-import { Text } from "preact-i18n";
-import { useState } from "preact/hooks";
-
-import { Category, Modal } from "@revoltchat/ui";
-
-import { noopTrue } from "../../../../lib/js";
-
-import { I18nError } from "../../../../context/Locale";
-
-import FormField from "../../../../pages/login/FormField";
-import { useClient } from "../../../client/ClientController";
-import { takeError } from "../../../client/jsx/error";
-import { modalController } from "../../ModalController";
-import { ModalProps } from "../../types";
-
-interface FormInputs {
-    name: string;
-}
-
-export function CreateBotModal({
-    onCreate,
-    ...props
-}: ModalProps<"create_bot">) {
-    const client = useClient();
-    const { handleSubmit, register, errors } = useForm<FormInputs>();
-    const [error, setError] = useState<string | undefined>(undefined);
-
-    const onSubmit: SubmitHandler<FormInputs> = async ({ name }) => {
-        try {
-            const { bot } = await client.bots.create({ name });
-            onCreate(bot);
-            modalController.close();
-        } catch (err) {
-            setError(takeError(err));
-        }
-    };
-
-    return (
-        <Modal
-            {...props}
-            title={<Text id="app.special.popovers.create_bot.title" />}
-            actions={[
-                {
-                    confirmation: true,
-                    palette: "accent",
-                    onClick: async () => {
-                        await handleSubmit(onSubmit)();
-                        return true;
-                    },
-                    children: <Text id="app.special.modals.actions.create" />,
-                },
-                {
-                    palette: "plain",
-                    onClick: noopTrue,
-                    children: <Text id="app.special.modals.actions.cancel" />,
-                },
-            ]}>
-            {/* Preact / React typing incompatabilities */}
-            <form
-                onSubmit={(e) => {
-                    e.preventDefault();
-                    handleSubmit(
-                        onSubmit,
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    )(e as any);
-                }}>
-                <FormField
-                    type="username"
-                    name="name"
-                    register={register}
-                    showOverline
-                    error={errors.name?.message}
-                />
-                {error && (
-                    <Category>
-                        <Text id="app.special.popovers.create_bot.failed" />{" "}
-                        &middot; <I18nError error={error} />
-                    </Category>
-                )}
-            </form>
-        </Modal>
-    );
-}