From cde2a01dd913877881ca36a11a6334c65aba0628 Mon Sep 17 00:00:00 2001
From: Teriuihi <teriuihi@alttd.com>
Date: Thu, 8 Aug 2024 21:37:09 +0200
Subject: [PATCH] Refactor form to use useFormik and FormikProvider

Replaced Formik component with useFormik hook and FormikProvider. This change simplifies the form implementation and separates the form's logic and presentation. The form now benefits from more direct access to formik methods and state.
---
 src/components/form/genericForm.tsx | 77 ++++++++++++++++-------------
 1 file changed, 43 insertions(+), 34 deletions(-)

diff --git a/src/components/form/genericForm.tsx b/src/components/form/genericForm.tsx
index c3afd70..4db088d 100644
--- a/src/components/form/genericForm.tsx
+++ b/src/components/form/genericForm.tsx
@@ -1,7 +1,7 @@
 import React, {useState} from "react";
 import './GenericForm.css';
 import {useNavigate} from 'react-router-dom'
-import {ErrorMessage, Field, Form, Formik, FormikValues} from "formik";
+import {ErrorMessage, Field, Form, FormikProvider, FormikValues, useFormik} from "formik";
 import {Step, UserInput, FormData} from './formInterfaces';
 import * as Yup from "yup";
 
@@ -56,30 +56,33 @@ const GenericForm = (formData: FormData) => {
         setCurrentStep(current => Math.max(current - 1, 0))
     }
 
+    const formik = useFormik({
+        initialValues: userInput,
+        validationSchema: spec,
+        onSubmit: (values) => {
+            handleSubmit(values);
+        },
+    });
+
+    const {
+        touched,
+        errors,
+        isValid,
+        handleChange,
+        values,
+        setFieldTouched,
+    } = formik;
+
     const [prevLength, setPrevLength] = useState(0);
     return (
         <div>
             <div>
                 <h1>{formData.title}</h1>
             </div>
-            <div className="container">
-                <Formik
-                    initialValues={userInput}
-                    validationSchema={spec}
-                    onSubmit={(values: FormikValues) => {
-                        handleSubmit(values);
-                    }}
-                >
-                    {({
-                          touched,
-                          errors,
-                          isValid,
-                          handleChange,
-                          values,
-                          setFieldTouched
-                      }) => (
-
-                        <Form>
+            <div>
+                <FormikProvider value={formik}>
+                    <Form>
+                        <div>
                             <div>
                                 <label>
                                     <label>
@@ -131,24 +134,30 @@ const GenericForm = (formData: FormData) => {
                                             />
                                         )
                                     }
+                                </label>
+                            </div>
+                            <div>
+                                <label>
                                     <ErrorMessage name={steps[currentStep].name} component="div"/>
                                 </label>
                             </div>
-                            <button style={{marginLeft: 0}} className="button-outer" type="button" onClick={prev} disabled={currentStep === 0}>
-                                Previous
-                            </button>
-                            <button className="button-outer" type="button" onClick={next}
-                                    hidden={currentStep === (steps.length - 1)}
-                                    disabled={(!touched[steps[currentStep].name] || !!errors[steps[currentStep].name]) || currentStep === (steps.length - 1)}>
-                                Next
-                            </button>
-                            <input type="submit" value="Submit"
-                                   hidden={currentStep !== (steps.length - 1)}
-                                   disabled={!isValid || currentStep !== (steps.length - 1)}
-                            />
-                        </Form>
-                    )}
-                </Formik>
+                            <div>
+                                <button style={{marginLeft: 0}} className="button-outer" type="button" onClick={prev} disabled={currentStep === 0}>
+                                    Previous
+                                </button>
+                                <button className="button-outer" type="button" onClick={next}
+                                        hidden={currentStep === (steps.length - 1)}
+                                        disabled={(!touched[steps[currentStep].name] || !!errors[steps[currentStep].name]) || currentStep === (steps.length - 1)}>
+                                    Next
+                                </button>
+                                <input type="submit" value="Submit"
+                                       hidden={currentStep !== (steps.length - 1)}
+                                       disabled={!isValid || currentStep !== (steps.length - 1)}
+                                />
+                            </div>
+                        </div>
+                    </Form>
+                </FormikProvider>
             </div>
         </div>
     );