feat: List component - submission and back navigation

editor.planx.uk/src/@planx/components/List/Public/Context.tsx

@@ -1,9 +1,20 @@
+import {
+  getPreviouslySubmittedData,
+  makeData,
+} from "@planx/components/shared/utils";
+import { PublicProps } from "@planx/components/ui";
 import { FormikProps, useFormik } from "formik";
-import React, { createContext, ReactNode, useContext, useState } from "react";
+import React, {
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useState,
+} from "react";
 
 import {
   generateInitialValues,
   generateValidationSchema,
+  List,
   Schema,
   UserData,
 } from "../model";
@@ -17,7 +28,8 @@ interface ListContextValue {
   editItem: (index: number) => void;
   cancelEditItem: () => void;
   formik: FormikProps<UserData>;
-  handleSubmit: () => void;
+  validateAndSubmitForm: () => void;
+  listProps: PublicProps<List>;
   errors: {
     addItem: boolean;
     unsavedItem: boolean;
@@ -26,18 +38,16 @@ interface ListContextValue {
   };
 }
 
-interface ListProviderProps {
-  children: ReactNode;
-  schema: Schema;
-}
+type ListProviderProps = PropsWithChildren<PublicProps<List>>;
 
 const ListContext = createContext<ListContextValue | undefined>(undefined);
 
-export const ListProvider: React.FC<ListProviderProps> = ({
-  children,
-  schema,
-}) => {
-  const [activeIndex, setActiveIndex] = useState<number>(0);
+export const ListProvider: React.FC<ListProviderProps> = (props) => {
+  const { schema, children, handleSubmit } = props;
+
+  const [activeIndex, setActiveIndex] = useState<number>(
+    props.previouslySubmittedData ? -1 : 0,
+  );
 
   const [addItemError, setAddItemError] = useState<boolean>(false);
   const [unsavedItemError, setUnsavedItemError] = useState<boolean>(false);
@@ -91,7 +101,7 @@ export const ListProvider: React.FC<ListProviderProps> = ({
     );
   };
 
-  const handleSubmit = () => {
+  const validateAndSubmitForm = () => {
     // Do not allow submissions with an unsaved item
     if (activeIndex !== -1) return setUnsavedItemError(true);
 
@@ -106,15 +116,22 @@ export const ListProvider: React.FC<ListProviderProps> = ({
   };
 
   const cancelEditItem = () => setActiveIndex(-1);
+
   const editItem = (index: number) => setActiveIndex(index);
 
+  const getInitialValues = () => {
+    const previousValues = getPreviouslySubmittedData(props);
+    if (previousValues) return previousValues;
+
+    return schema.min ? [generateInitialValues(schema)] : [];
+  };
+
   const formik = useFormik<UserData>({
     initialValues: {
-      userData: schema.min ? [generateInitialValues(schema)] : [],
+      userData: getInitialValues(),
     },
     onSubmit: (values) => {
-      console.log("Submit!");
-      console.log({ values });
+      handleSubmit?.(makeData(props, values.userData));
     },
     validateOnBlur: false,
     validateOnChange: false,
@@ -128,11 +145,12 @@ export const ListProvider: React.FC<ListProviderProps> = ({
         addNewItem,
         saveItem,
         schema,
+        listProps: props,
         editItem,
         removeItem,
         cancelEditItem,
         formik,
-        handleSubmit,
+        validateAndSubmitForm,
         errors: {
           addItem: addItemError,
           unsavedItem: unsavedItemError,