fix: Portal frontend 31

src/components/page/Banner.tsx

@@ -8,7 +8,7 @@ import Section from "./Section"
 
 export interface BannerProps {
   header: string
-  subheader: string
+  subheader?: string
   textAlign?: "start" | "center"
   imageProps?: ImageProps
   buttonProps?: ButtonProps
@@ -50,16 +50,22 @@ const Banner: FC<BannerProps> = ({
           }}
           textAlign={textAlign}
         >
-          <Typography variant="h2" color={contrastText}>
-            {header}
-          </Typography>
           <Typography
+            variant="h2"
             color={contrastText}
-            variant="h4"
-            mb={buttonProps !== undefined ? undefined : 0}
+            mb={subheader !== undefined ? undefined : 0}
           >
-            {subheader}
+            {header}
           </Typography>
+          {subheader !== undefined && (
+            <Typography
+              color={contrastText}
+              variant="h4"
+              mb={buttonProps !== undefined ? undefined : 0}
+            >
+              {subheader}
+            </Typography>
+          )}
           {buttonProps !== undefined && <Button {...buttonProps} />}
         </Stack>
         {imageProps !== undefined && (

src/utils/auth.ts

@@ -0,0 +1,11 @@
+import Cookies from "js-cookie"
+
+export function logout() {
+  Cookies.remove("session_key")
+  Cookies.remove("session_metadata")
+}
+
+// https://docs.djangoproject.com/en/3.2/ref/csrf/
+export function getCsrfCookie() {
+  return Cookies.get(`${import.meta.env.VITE_SERVICE_NAME}_csrftoken`)
+}

src/utils/form.ts

@@ -1,7 +1,4 @@
-import type {
-  TypedLazyQueryTrigger,
-  TypedMutationTrigger,
-} from "@reduxjs/toolkit/query/react"
+import type { TypedMutationTrigger } from "@reduxjs/toolkit/query/react"
 import type { FieldValidator, FormikHelpers } from "formik"
 import { ValidationError, type Schema, type ValidateOptions } from "yup"
 
@@ -33,29 +30,65 @@ export function setFormErrors(
   setErrors(data)
 }
 
-export function submitForm<QueryArg, ResultType, FormValues extends QueryArg>(
-  trigger:
-    | TypedMutationTrigger<ResultType, QueryArg, any>
-    | TypedLazyQueryTrigger<ResultType, QueryArg, any>,
-  query?: {
-    then?: (result: ResultType) => void
-    catch?: (error: Error) => void
-    finally?: () => void
-  },
-): (
+export type SubmitFormOptions<
+  QueryArg,
+  ResultType,
+  FormValues extends QueryArg,
+> = Partial<{
+  clean: (values: FormValues) => QueryArg
+  exclude: Array<keyof FormValues>
+  then: (
+    result: ResultType,
+    values: FormValues,
+    helpers: FormikHelpers<FormValues>,
+  ) => void
+  catch: (
+    error: unknown,
+    values: FormValues,
+    helpers: FormikHelpers<FormValues>,
+  ) => void
+  finally: (values: FormValues, helpers: FormikHelpers<FormValues>) => void
+}>
+
+export type SubmitFormHandler<QueryArg, FormValues extends QueryArg> = (
   values: FormValues,
   helpers: FormikHelpers<FormValues>,
-) => void | Promise<any> {
+) => void | Promise<any>
+
+export function submitForm<QueryArg, ResultType, FormValues extends QueryArg>(
+  trigger: TypedMutationTrigger<ResultType, QueryArg, any>,
+  options?: SubmitFormOptions<QueryArg, ResultType, FormValues>,
+): SubmitFormHandler<QueryArg, FormValues> {
+  const {
+    clean,
+    exclude,
+    then,
+    catch: _catch,
+    finally: _finally,
+  } = options || {}
+
   return (values, helpers) => {
-    trigger(values)
+    let arg: QueryArg = clean ? clean(values) : values
+
+    if (exclude && exclude.length) {
+      arg = Object.fromEntries(
+        Object.entries(arg as object).filter(
+          ([key]) => !exclude.includes(key as keyof FormValues),
+        ),
+      ) as QueryArg
+    }
+
+    trigger(arg)
       .unwrap()
-      .then(query?.then)
+      .then(result => {
+        if (then) then(result, values, helpers)
+      })
       .catch(error => {
-        if (query?.catch !== undefined) query.catch(error)
+        if (_catch) _catch(error, values, helpers)
         setFormErrors(error, helpers.setErrors)
       })
       .finally(() => {
-        if (query?.finally !== undefined) query.finally()
+        if (_finally) _finally(values, helpers)
       })
   }
 }
@@ -76,3 +109,25 @@ export function schemaToFieldValidator(
     }
   }
 }
+
+// Checking if individual fields are dirty is not currently supported.
+// https://github.com/jaredpalmer/formik/issues/1421
+export function getDirty<
+  Values extends Record<string, any>,
+  Names extends Array<keyof Values>,
+>(
+  values: Values,
+  initialValues: Values,
+  names: Names,
+): Record<Names[number], boolean> {
+  return Object.fromEntries(
+    names.map(name => [name, isDirty(values, initialValues, name)]),
+  ) as Record<Names[number], boolean>
+}
+
+export function isDirty<
+  Values extends Record<string, any>,
+  Name extends keyof Values,
+>(values: Values, initialValues: Values, name: Name): boolean {
+  return values[name] !== initialValues[name]
+}