fix: Portal frontend 31 (#53)

* make subheader optional

* provide values

* submit form helper

* dirty utils

* auth utils

* add path helpers

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,10 +1,9 @@
-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"
 
+import { excludeKeyPaths } from "./general"
+
 export function isFormError(error: unknown): boolean {
   return (
     typeof error === "object" &&
@@ -33,29 +32,66 @@ 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 extends object,
+  ResultType,
+  FormValues extends QueryArg,
+> = Partial<{
+  clean: (values: FormValues) => QueryArg
+  exclude: string[]
+  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 extends object,
+  FormValues extends QueryArg,
+> = (
   values: FormValues,
   helpers: FormikHelpers<FormValues>,
-) => void | Promise<any> {
+) => void | Promise<any>
+
+export function submitForm<
+  QueryArg extends object,
+  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) arg = excludeKeyPaths(arg, exclude)
+
+    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 +112,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]
+}

src/utils/general.test.ts

@@ -1,4 +1,6 @@
-import { getNestedProperty } from "./general"
+import { excludeKeyPaths, getNestedProperty, withKeyPaths } from "./general"
+
+// getNestedProperty
 
 const PERSON = { father: { father: { name: "John" } } }
 
@@ -19,3 +21,22 @@ test("get a nested property that doesn't exist", () => {
 
   expect(name).toBeUndefined()
 })
+
+// withKeyPaths
+
+test("get the paths of nested keys", () => {
+  const obj = withKeyPaths({ a: 1, b: { c: 2, d: { e: 3 } } })
+
+  expect(obj).toMatchObject({ a: 1, b: { "b.c": 2, "b.d": { "b.d.e": 3 } } })
+})
+
+// excludeKeyPaths
+
+test("exclude nested keys by their path", () => {
+  const obj = excludeKeyPaths({ a: 1, b: { c: 2, d: { e: 3 } } }, [
+    "b.c",
+    "b.d.e",
+  ])
+
+  expect(obj).toMatchObject({ a: 1, b: { d: {} } })
+})

src/utils/general.ts

@@ -453,3 +453,41 @@ export function getNestedProperty(
 
   return value
 }
+
+export function withKeyPaths(obj: object, delimiter: string = "."): object {
+  function _withKeyPaths(obj: object, path: string[]) {
+    return Object.fromEntries(
+      Object.entries(obj).map(([key, value]) => {
+        const _path = [...path, key]
+
+        if (typeof value === "object") value = _withKeyPaths(value, _path)
+
+        return [_path.join(delimiter), value]
+      }),
+    )
+  }
+
+  return _withKeyPaths(obj, [])
+}
+
+export function excludeKeyPaths(
+  obj: object,
+  exclude: string[],
+  delimiter: string = ".",
+): any {
+  function _excludeKeyPaths(obj: object, path: string[]) {
+    return Object.fromEntries(
+      Object.entries(obj)
+        .map(([key, value]) => {
+          const _path = [...path, key]
+
+          if (typeof value === "object") value = _excludeKeyPaths(value, _path)
+
+          return exclude.includes(_path.join(delimiter)) ? [] : [key, value]
+        })
+        .filter(entry => entry.length),
+    )
+  }
+
+  return exclude.length ? _excludeKeyPaths(obj, []) : obj
+}