remove submitForm util

src/features/footer/RegisterToNewsletterForm.tsx

@@ -1,7 +1,6 @@
 import * as forms from "codeforlife/components/form"
 import { FormHelperText, Stack, useMediaQuery, useTheme } from "@mui/material"
 import { type FC } from "react"
-import { submitForm } from "codeforlife/utils/form"
 import { useNavigate } from "react-router-dom"
 
 import { useRegisterToNewsletterMutation } from "../../api/user"
@@ -11,7 +10,6 @@ export interface RegisterToNewsletterFormProps {}
 const RegisterToNewsletterForm: FC<RegisterToNewsletterFormProps> = () => {
   const theme = useTheme()
   const onlyXS = useMediaQuery(theme.breakpoints.only("xs"))
-  const [registerToNewsletter] = useRegisterToNewsletterMutation()
   const navigate = useNavigate()
 
   return (
@@ -25,7 +23,8 @@ const RegisterToNewsletterForm: FC<RegisterToNewsletterFormProps> = () => {
           email: "",
           over18: false,
         }}
-        onSubmit={submitForm(registerToNewsletter, {
+        useMutation={useRegisterToNewsletterMutation}
+        submitOptions={{
           exclude: ["over18"],
           then: () => {
             navigate(".", {
@@ -54,7 +53,7 @@ const RegisterToNewsletterForm: FC<RegisterToNewsletterFormProps> = () => {
               },
             })
           },
-        })}
+        }}
       >
         <Stack spacing={2}>
           <forms.EmailField

src/pages/login/IndyForm.tsx

@@ -2,7 +2,6 @@ import * as form from "codeforlife/components/form"
 import { Stack, Typography } from "@mui/material"
 import type { FC } from "react"
 import { Link } from "codeforlife/components/router"
-import { submitForm } from "codeforlife/utils/form"
 import { useNavigate } from "codeforlife/hooks"
 
 import BaseForm from "./BaseForm"
@@ -12,7 +11,6 @@ import { useLoginWithEmailMutation } from "../../api/sso"
 export interface IndyFormProps {}
 
 const IndyForm: FC<IndyFormProps> = () => {
-  const [loginWithEmail] = useLoginWithEmailMutation()
   const navigate = useNavigate()
 
   return (
@@ -21,11 +19,12 @@ const IndyForm: FC<IndyFormProps> = () => {
       header="Welcome"
       subheader="Please enter your login details."
       initialValues={{ email: "", password: "" }}
-      onSubmit={submitForm(loginWithEmail, {
+      useMutation={useLoginWithEmailMutation}
+      submitOptions={{
         then: () => {
           navigate(paths.indy.dashboard._)
         },
-      })}
+      }}
     >
       <form.EmailField required />
       <form.PasswordField required />

src/pages/login/studentForms/FirstName.tsx

@@ -3,7 +3,6 @@ import { type FC, useEffect } from "react"
 import { useNavigate, useParams } from "codeforlife/hooks"
 import { ChevronRight as ChevronRightIcon } from "@mui/icons-material"
 import { Stack } from "@mui/material"
-import { submitForm } from "codeforlife/utils/form"
 
 import BaseForm from "../BaseForm"
 import { classIdSchema } from "../../../app/schemas"
@@ -13,7 +12,6 @@ import { useLoginAsStudentMutation } from "../../../api/sso"
 export interface FirstNameProps {}
 
 const FirstName: FC<FirstNameProps> = () => {
-  const [loginAsStudent] = useLoginAsStudentMutation()
   const navigate = useNavigate()
 
   const params = useParams({ classId: classIdSchema.required() })
@@ -47,11 +45,12 @@ const FirstName: FC<FirstNameProps> = () => {
             password: "",
             class_id: params.classId,
           }}
-          onSubmit={submitForm(loginAsStudent, {
+          useMutation={useLoginAsStudentMutation}
+          submitOptions={{
             then: () => {
               navigate(paths.student.dashboard._)
             },
-          })}
+          }}
         >
           <form.FirstNameField required />
           <form.PasswordField required />

src/pages/login/teacherForms/Email.tsx

@@ -2,7 +2,6 @@ import * as form from "codeforlife/components/form"
 import { Stack, Typography } from "@mui/material"
 import type { FC } from "react"
 import { Link } from "codeforlife/components/router"
-import { submitForm } from "codeforlife/utils/form"
 import { useNavigate } from "codeforlife/hooks"
 
 import BaseForm from "../BaseForm"
@@ -12,7 +11,6 @@ import { useLoginWithEmailMutation } from "../../../api/sso"
 export interface EmailProps {}
 
 const Email: FC<EmailProps> = () => {
-  const [loginWithEmail] = useLoginWithEmailMutation()
   const navigate = useNavigate()
 
   return (
@@ -21,15 +19,16 @@ const Email: FC<EmailProps> = () => {
       header="Welcome"
       subheader="Please enter your login details."
       initialValues={{ email: "", password: "" }}
-      onSubmit={submitForm(loginWithEmail, {
+      useMutation={useLoginWithEmailMutation}
+      submitOptions={{
         then: ({ auth_factors }) => {
           navigate(
             auth_factors.includes("otp")
               ? paths.login.teacher.otp._
               : paths.teacher.dashboard.tab.school._,
           )
         },
-      })}
+      }}
     >
       <form.EmailField required />
       <form.PasswordField required />

src/pages/login/teacherForms/Otp.tsx

@@ -3,7 +3,6 @@ import { useNavigate, useSession } from "codeforlife/hooks"
 import { type FC } from "react"
 import { LinkButton } from "codeforlife/components/router"
 import { Stack } from "@mui/material"
-import { submitForm } from "codeforlife/utils/form"
 
 import BaseForm from "../BaseForm"
 import { paths } from "../../../routes"
@@ -12,7 +11,6 @@ import { useLoginWithOtpMutation } from "../../../api/sso"
 export interface OtpProps {}
 
 const Otp: FC<OtpProps> = () => {
-  const [loginWithOtp] = useLoginWithOtpMutation()
   const navigate = useNavigate()
 
   return useSession(
@@ -22,11 +20,12 @@ const Otp: FC<OtpProps> = () => {
         header="Welcome"
         subheader="Please enter the token generated by your token generator."
         initialValues={{ otp: "" }}
-        onSubmit={submitForm(loginWithOtp, {
+        useMutation={useLoginWithOtpMutation}
+        submitOptions={{
           then: () => {
             navigate(paths.teacher.dashboard.tab.school._)
           },
-        })}
+        }}
       >
         <form.OtpField />
         {otp_bypass_token_exists && (

src/pages/login/teacherForms/OtpBypassToken.tsx

@@ -4,7 +4,6 @@ import { Stack, Typography, useTheme } from "@mui/material"
 import { useNavigate, useSession } from "codeforlife/hooks"
 import type { FC } from "react"
 import { LinkButton } from "codeforlife/components/router"
-import { submitForm } from "codeforlife/utils/form"
 
 import BaseForm from "../BaseForm"
 import { paths } from "../../../routes"
@@ -13,7 +12,6 @@ import { useLoginWithOtpBypassTokenMutation } from "../../../api/sso"
 export interface OtpBypassTokenProps {}
 
 const OtpBypassToken: FC<OtpBypassTokenProps> = () => {
-  const [loginWithOtpBypassToken] = useLoginWithOtpBypassTokenMutation()
   const navigate = useNavigate()
   const theme = useTheme()
 
@@ -22,11 +20,12 @@ const OtpBypassToken: FC<OtpBypassTokenProps> = () => {
       themedBoxProps={{ userType: "teacher" }}
       header="Welcome"
       initialValues={{ token: "" }}
-      onSubmit={submitForm(loginWithOtpBypassToken, {
+      useMutation={useLoginWithOtpBypassTokenMutation}
+      submitOptions={{
         then: () => {
           navigate(paths.teacher.dashboard.tab.school._)
         },
-      })}
+      }}
     >
       <Typography marginBottom={theme.spacing(6)}>
         Use this form for entering backup tokens for logging in. These tokens

src/pages/register/IndyForm.tsx

@@ -4,7 +4,6 @@ import { ChevronRight as ChevronRightIcon } from "@mui/icons-material"
 import { type FC } from "react"
 import { Link } from "codeforlife/components/router"
 import dayjs from "dayjs"
-import { submitForm } from "codeforlife/utils/form"
 import { useNavigate } from "react-router-dom"
 
 import { LastNameField, NewPasswordField } from "../../components/form"
@@ -16,7 +15,6 @@ export interface IndyFormProps {}
 
 const IndyForm: FC<IndyFormProps> = () => {
   const navigate = useNavigate()
-  const [createIndependentUser] = useCreateIndependentUserMutation()
 
   const EmailApplicableAge = 13
   const ReceiveUpdateAge = 18
@@ -39,12 +37,13 @@ const IndyForm: FC<IndyFormProps> = () => {
           password: "",
           password_repeat: "",
         }}
-        onSubmit={submitForm(createIndependentUser, {
+        useMutation={useCreateIndependentUserMutation}
+        submitOptions={{
           exclude: ["password_repeat", "meets_criteria"],
           then: () => {
             navigate(paths.register.emailVerification.userType.indy._)
           },
-        })}
+        }}
       >
         {form => {
           const yearsOfAge = form.values.date_of_birth

src/pages/register/TeacherForm.tsx

@@ -3,7 +3,6 @@ import { ChevronRight as ChevronRightIcon } from "@mui/icons-material"
 import { type FC } from "react"
 import { Link } from "codeforlife/components/router"
 import { Stack } from "@mui/material"
-import { submitForm } from "codeforlife/utils/form"
 import { useNavigate } from "codeforlife/hooks"
 
 import { LastNameField, NewPasswordField } from "../../components/form"
@@ -15,7 +14,6 @@ export interface TeacherFormProps {}
 
 const TeacherForm: FC<TeacherFormProps> = () => {
   const navigate = useNavigate()
-  const [createTeacher] = useCreateTeacherMutation()
 
   return (
     <BaseForm
@@ -36,12 +34,13 @@ const TeacherForm: FC<TeacherFormProps> = () => {
             meets_criteria: false,
           },
         }}
-        onSubmit={submitForm(createTeacher, {
+        useMutation={useCreateTeacherMutation}
+        submitOptions={{
           exclude: ["user.password_repeat", "user.meets_criteria"],
           then: () => {
             navigate(paths.register.emailVerification.userType.teacher._)
           },
-        })}
+        }}
       >
         <form.FirstNameField name="user.first_name" required />
         <LastNameField name="user.last_name" />

src/pages/studentAccount/UpdateAccountForm.tsx

@@ -1,13 +1,14 @@
 import * as forms from "codeforlife/components/form"
 import { Stack, Typography } from "@mui/material"
-import { getDirty, isDirty, submitForm } from "codeforlife/utils/form"
+import { getDirty, isDirty } from "codeforlife/utils/form"
 import { type FC } from "react"
 import { LinkButton } from "codeforlife/components/router"
 import { useNavigate } from "codeforlife/hooks"
 
 import {
   type RetrieveUserResult,
   type UpdateUserArg,
+  type UpdateUserResult,
   useUpdateUserMutation,
 } from "../../api/user"
 import { indyPasswordSchema, studentPasswordSchema } from "../../app/schemas"
@@ -18,7 +19,6 @@ export interface UpdateAccountFormProps {
 }
 
 const UpdateAccountForm: FC<UpdateAccountFormProps> = ({ user }) => {
-  const [updateUser] = useUpdateUserMutation()
   const navigate = useNavigate()
 
   const initialValues = user.student
@@ -69,7 +69,8 @@ const UpdateAccountForm: FC<UpdateAccountFormProps> = ({ user }) => {
       )}
       <forms.Form
         initialValues={initialValues}
-        onSubmit={submitForm(updateUser, {
+        useMutation={useUpdateUserMutation}
+        submitOptions={{
           exclude: ["password_repeat"],
           clean: (values: typeof initialValues) => {
             const arg: UpdateUserArg = { id: values.id }
@@ -87,7 +88,7 @@ const UpdateAccountForm: FC<UpdateAccountFormProps> = ({ user }) => {
 
             return arg
           },
-          then: (_, values) => {
+          then: (_: UpdateUserResult, values: typeof initialValues) => {
             const messages = [
               "Your account details have been changed successfully.",
             ]
@@ -111,7 +112,7 @@ const UpdateAccountForm: FC<UpdateAccountFormProps> = ({ user }) => {
               },
             })
           },
-        })}
+        }}
       >
         {form => {
           const dirty = getDirty(form.values, initialValues, [

src/pages/teacherDashboard/classes/CreateClassForm.tsx

@@ -3,7 +3,6 @@ import { Stack, Typography } from "@mui/material"
 import { type FC } from "react"
 import { type SchoolTeacherUser } from "codeforlife/api"
 import { generatePath } from "react-router"
-import { submitForm } from "codeforlife/utils/form"
 import { useNavigate } from "codeforlife/hooks"
 
 import {
@@ -20,7 +19,6 @@ export interface CreateClassFormProps {
 }
 
 const CreateClassForm: FC<CreateClassFormProps> = ({ authUser }) => {
-  const [createClass] = useCreateClassMutation()
   const navigate = useNavigate()
 
   return (
@@ -39,7 +37,8 @@ const CreateClassForm: FC<CreateClassFormProps> = ({ authUser }) => {
           teacher: authUser.teacher.id,
           read_classmates_data: false,
         }}
-        onSubmit={submitForm(createClass, {
+        useMutation={useCreateClassMutation}
+        submitOptions={{
           then: ({ id }, { name }) => {
             navigate(
               generatePath(paths.teacher.dashboard.tab.classes.class._, {
@@ -58,7 +57,7 @@ const CreateClassForm: FC<CreateClassFormProps> = ({ authUser }) => {
               },
             )
           },
-        })}
+        }}
       >
         <Stack gap={2}>
           <Stack direction={{ sm: "row" }} gap={2}>