add create resource trpc function

src/pages/resources/create.tsx

@@ -1,23 +1,40 @@
 import { XCircleIcon, PlusCircleIcon } from "@heroicons/react/20/solid";
-import { useState } from "react";
-import { type SubmitHandler, useForm } from "react-hook-form";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import {
+  type SubmitHandler,
+  useForm,
+  type UseFormReturn,
+} from "react-hook-form";
 import { AdminBarLayout } from "~/components/admin/ControlBar";
 import { AdminActionButton, AdminActionLink } from "~/components/admin/common";
 import {
+  type ResourceCreateInput,
   ResourceForm,
   type ResourceUpdateInput,
 } from "~/components/admin/resources/form";
 import { HeaderFooterLayout } from "~/layouts/HeaderFooterLayout";
+import { api } from "~/utils/api";
 
 const EditResourcePage = () => {
-  const formMethods = useForm<ResourceUpdateInput>();
+  const router = useRouter();
+  const formMethods = useForm<ResourceCreateInput>();
 
-  const [serverError, _setServerError] = useState<string | undefined>(
-    undefined
-  );
+  const [serverError, setServerError] = useState<string | undefined>(undefined);
 
-  const onSubmit: SubmitHandler<ResourceUpdateInput> = () => {
-    // TODO: TRPC request to create resource
+  const { mutate } = api.auditoryResource.create.useMutation({
+    onSuccess: async (resData) => {
+      if (!resData) {
+        setServerError("An unexpected error has occured");
+      }
+
+      setServerError(undefined);
+      await router.push(`/resources/${resData.id}`);
+    },
+  });
+
+  const onSubmit: SubmitHandler<ResourceCreateInput> = (data) => {
+    mutate(data);
   };
 
   return (
@@ -28,9 +45,6 @@ const EditResourcePage = () => {
             key="create"
             symbol={<PlusCircleIcon className="w-4" />}
             label="Create"
-            onClick={() => {
-              onSubmit(formMethods.getValues());
-            }}
           />,
           <AdminActionLink
             key="cancel"
@@ -41,7 +55,10 @@ const EditResourcePage = () => {
         ]}
       >
         <div className="mb-12">
-          <ResourceForm methods={formMethods} error={serverError} />
+          <ResourceForm
+            methods={formMethods as UseFormReturn<ResourceUpdateInput>}
+            error={serverError}
+          />
         </div>
       </AdminBarLayout>
     </HeaderFooterLayout>