Portal frontend 58

package.json

@@ -23,7 +23,7 @@
     "✅ Do add `devDependencies` below that are `peerDependencies` in the CFL package."
   ],
   "dependencies": {
-    "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.3.10",
+    "codeforlife": "github:ocadotechnology/codeforlife-package-javascript#v2.4.1",
     "crypto-js": "^4.2.0"
   },
   "devDependencies": {

src/api/authFactor.ts

@@ -35,6 +35,7 @@ const authFactorApi = api.injectEndpoints({
         method: "POST",
         body,
       }),
+      invalidatesTags: tagData(AUTH_FACTOR_TAG, { includeListTag: true }),
     }),
     destroyAuthFactor: build.mutation<
       DestroyAuthFactorResult,
@@ -44,7 +45,7 @@ const authFactorApi = api.injectEndpoints({
         url: buildUrl(urls.authFactor.detail, { url: { id } }),
         method: "DELETE",
       }),
-      invalidatesTags: tagData(AUTH_FACTOR_TAG),
+      invalidatesTags: tagData(AUTH_FACTOR_TAG, { includeListTag: true }),
     }),
   }),
 })

src/api/klass.ts

@@ -61,29 +61,33 @@ const classApi = api.injectEndpoints({
         method: "POST",
         body,
       }),
+      invalidatesTags: tagData(CLASS_TAG, { includeListTag: true }),
     }),
     destroyClass: build.mutation<DestroyClassResult, DestroyClassArg>({
       query: id => ({
         url: buildUrl(urls.class.detail, { url: { id } }),
         method: "DELETE",
       }),
-      invalidatesTags: tagData(CLASS_TAG),
+      invalidatesTags: tagData(CLASS_TAG, { includeListTag: true }),
     }),
     updateClass: build.mutation<UpdateClassResult, UpdateClassArg>({
       query: ({ id, ...body }) => ({
         url: buildUrl(urls.class.detail, { url: { id } }),
         method: "PATCH",
         body,
       }),
-      invalidatesTags: tagData(CLASS_TAG),
+      invalidatesTags: tagData(CLASS_TAG, { includeListTag: true }),
     }),
     updateClasses: build.mutation<UpdateClassesResult, UpdateClassesArg>({
       query: body => ({
         url: urls.class.list + "bulk/",
         method: "PATCH",
         body,
       }),
-      invalidatesTags: tagData(CLASS_TAG),
+      invalidatesTags: tagData(CLASS_TAG, {
+        argKeysAreIds: true,
+        includeListTag: true,
+      }),
     }),
   }),
 })

src/api/school.ts

@@ -36,14 +36,15 @@ const schoolApi = api.injectEndpoints({
         method: "POST",
         body,
       }),
+      invalidatesTags: tagData(SCHOOL_TAG, { includeListTag: true }),
     }),
     updateSchool: build.mutation<UpdateSchoolResult, UpdateSchoolArg>({
       query: ({ id, ...body }) => ({
         url: buildUrl(urls.school.detail, { url: { id } }),
         method: "PATCH",
         body,
       }),
-      invalidatesTags: tagData(SCHOOL_TAG),
+      invalidatesTags: tagData(SCHOOL_TAG, { includeListTag: true }),
     }),
   }),
 })

src/api/schoolTeacherInvitation.ts

@@ -98,7 +98,9 @@ const schoolTeacherInvitationApi = api.injectEndpoints({
         method: "DELETE",
         body,
       }),
-      invalidatesTags: tagData("SchoolTeacherInvitation"),
+      invalidatesTags: tagData("SchoolTeacherInvitation", {
+        includeListTag: true,
+      }),
     }),
     rejectSchoolTeacherInvitation: build.mutation<
       RejectSchoolTeacherInvitationResult,
@@ -108,7 +110,9 @@ const schoolTeacherInvitationApi = api.injectEndpoints({
         url: buildUrl(detailUrl + "reject/", { url: { id } }),
         method: "DELETE",
       }),
-      invalidatesTags: tagData("SchoolTeacherInvitation"),
+      invalidatesTags: tagData("SchoolTeacherInvitation", {
+        includeListTag: true,
+      }),
     }),
     refreshSchoolTeacherInvitation: build.mutation<
       RefreshSchoolTeacherInvitationResult,
@@ -118,7 +122,9 @@ const schoolTeacherInvitationApi = api.injectEndpoints({
         url: buildUrl(detailUrl, { url: { id } }),
         method: "PUT",
       }),
-      invalidatesTags: tagData("SchoolTeacherInvitation"),
+      invalidatesTags: tagData("SchoolTeacherInvitation", {
+        includeListTag: true,
+      }),
     }),
     createSchoolTeacherInvitation: build.mutation<
       CreateSchoolTeacherInvitationResult,
@@ -129,6 +135,9 @@ const schoolTeacherInvitationApi = api.injectEndpoints({
         method: "POST",
         body,
       }),
+      invalidatesTags: tagData("SchoolTeacherInvitation", {
+        includeListTag: true,
+      }),
     }),
     destroySchoolTeacherInvitation: build.mutation<
       DestroySchoolTeacherInvitationResult,
@@ -138,7 +147,9 @@ const schoolTeacherInvitationApi = api.injectEndpoints({
         url: buildUrl(detailUrl, { url: { id } }),
         method: "DELETE",
       }),
-      invalidatesTags: tagData("SchoolTeacherInvitation"),
+      invalidatesTags: tagData("SchoolTeacherInvitation", {
+        includeListTag: true,
+      }),
     }),
     retrieveSchoolTeacherInvitation: build.query<
       RetrieveSchoolTeacherInvitationResult,
@@ -158,7 +169,9 @@ const schoolTeacherInvitationApi = api.injectEndpoints({
         url: buildUrl(listUrl, { search }),
         method: "GET",
       }),
-      providesTags: tagData("SchoolTeacherInvitation"),
+      providesTags: tagData("SchoolTeacherInvitation", {
+        includeListTag: true,
+      }),
     }),
   }),
 })

src/api/student.ts

@@ -13,11 +13,13 @@
 
 import api from "."
 
+export const STUDENT_ID = "user.id"
+
 export type CreateStudentsResult = BulkCreateResult<
   Student,
   "auto_gen_password",
   {
-    user: Result<User, "password">
+    user: Result<User, "first_name" | "password">
   }
 >
 export type CreateStudentsArg = BulkCreateArg<
@@ -76,14 +78,22 @@
         method: "POST",
         body,
       }),
+      invalidatesTags: tagData("User", {
+        id: STUDENT_ID,
+        includeListTag: true,
+      }),
     }),
     releaseStudents: build.mutation<ReleaseStudentsResult, ReleaseStudentsArg>({
       query: body => ({
         url: urls.student.list + "release/",
         method: "PUT",
         body,
       }),
-      invalidatesTags: tagData("User", { id: "user" }),
+      invalidatesTags: tagData("User", {
+        id: STUDENT_ID,
+        argKeysAreIds: true,
+        includeListTag: true,
+      }),
     }),
     transferStudents: build.mutation<
       TransferStudentsResult,
@@ -94,7 +104,11 @@
         method: "PUT",
         body,
       }),
-      invalidatesTags: tagData("User", { id: "user" }),
+      invalidatesTags: tagData("User", {
+        id: STUDENT_ID,
+        argKeysAreIds: true,
+        includeListTag: true,
+      }),
     }),
     resetStudentsPassword: build.mutation<
       ResetStudentsPasswordResult,
@@ -112,7 +126,10 @@
         method: "DELETE",
         body,
       }),
-      invalidatesTags: tagData("User", { id: "user" }),
+      invalidatesTags: tagData("User", {
+        id: STUDENT_ID,
+        includeListTag: true,
+      }),
     }),
   }),
 })

src/api/teacher.ts

@@ -12,6 +12,8 @@
 
 import api from "."
 
+export const TEACHER_ID = "user.id"
+
 export type CreateTeacherResult = CreateResult<Teacher>
 export type CreateTeacherArg = {
   user: Arg<User, "first_name" | "last_name" | "password" | "email"> & {
@@ -36,6 +38,10 @@
         method: "POST",
         body,
       }),
+      invalidatesTags: tagData("User", {
+        id: TEACHER_ID,
+        includeListTag: true,
+      }),
     }),
     removeTeacherFromSchool: build.mutation<
       RemoveTeacherFromSchoolResult,
@@ -47,7 +53,10 @@
         }),
         method: "PUT",
       }),
-      invalidatesTags: tagData("User", { id: "user" }),
+      invalidatesTags: tagData("User", {
+        id: TEACHER_ID,
+        includeListTag: true,
+      }),
     }),
     setTeacherAdminAccess: build.mutation<
       SetTeacherAdminAccessResult,
@@ -60,14 +69,20 @@
         method: "PUT",
         body,
       }),
-      invalidatesTags: tagData("User", { id: "user" }),
+      invalidatesTags: tagData("User", {
+        id: TEACHER_ID,
+        includeListTag: true,
+      }),
     }),
     destroyTeacher: build.mutation<DestroyTeacherResult, DestroyTeacherArg>({
       query: id => ({
         url: buildUrl(urls.teacher.detail, { url: { id } }),
         method: "DELETE",
       }),
-      invalidatesTags: tagData("User", { id: "user" }),
+      invalidatesTags: tagData("User", {
+        id: TEACHER_ID,
+        includeListTag: true,
+      }),
     }),
   }),
 })

src/api/user.ts

@@ -124,7 +124,7 @@ const userApi = api.injectEndpoints({
         method: "PUT",
         body,
       }),
-      invalidatesTags: tagData(USER_TAG),
+      invalidatesTags: tagData(USER_TAG, { includeListTag: true }),
     }),
     requestPasswordReset: build.query<
       RequestPasswordResetResult,
@@ -161,7 +161,7 @@ const userApi = api.injectEndpoints({
         method: "PATCH",
         body,
       }),
-      invalidatesTags: tagData(USER_TAG),
+      invalidatesTags: tagData(USER_TAG, { includeListTag: true }),
     }),
     destroyIndependentUser: build.mutation<
       DestroyIndependentUserResult,
@@ -172,7 +172,7 @@ const userApi = api.injectEndpoints({
         method: "DELETE",
         body,
       }),
-      invalidatesTags: tagData(USER_TAG),
+      invalidatesTags: tagData(USER_TAG, { includeListTag: true }),
     }),
     createIndependentUser: build.mutation<
       CreateIndependentUserResult,
@@ -183,6 +183,7 @@ const userApi = api.injectEndpoints({
         method: "POST",
         body,
       }),
+      invalidatesTags: tagData(USER_TAG, { includeListTag: true }),
     }),
     // TODO: create action on the backend.
     validatePassword: build.query<ValidatePasswordResult, ValidatePasswordArg>({

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/BaseForm.tsx

@@ -1,22 +1,30 @@
 import { Form, type FormProps } from "codeforlife/components/form"
 import { Stack, Typography, useTheme } from "@mui/material"
 import { ThemedBox, type ThemedBoxProps } from "codeforlife/theme"
-import { type FormikValues } from "formik"
+import { type FormValues } from "codeforlife/utils/form"
 
 import { themeOptions } from "../../app/theme"
 
-export interface BaseFormProps<Values> extends FormProps<Values> {
+export type BaseFormProps<
+  Values extends FormValues,
+  QueryArg extends FormValues,
+  ResultType,
+> = FormProps<Values, QueryArg, ResultType> & {
   themedBoxProps: Omit<ThemedBoxProps, "withShapes">
   header: string
   subheader?: string
 }
 
-const BaseForm = <Values extends FormikValues = FormikValues>({
+const BaseForm = <
+  Values extends FormValues = FormValues,
+  QueryArg extends FormValues = FormValues,
+  ResultType = unknown,
+>({
   themedBoxProps,
   header,
   subheader,
   ...formProps
-}: BaseFormProps<Values>): JSX.Element => {
+}: BaseFormProps<Values, QueryArg, ResultType>): JSX.Element => {
   const theme = useTheme()
 
   return (
@@ -35,6 +43,7 @@
             {subheader}
           </Typography>
         )}
+        {/* @ts-expect-error props */}
         <Form {...formProps} />
       </Stack>
     </ThemedBox>