From 9f250364e4deaefb39f34322bdcb9da226acdfe2 Mon Sep 17 00:00:00 2001
From: Jesus Vasquez <jesus.wmr@gmail.com>
Date: Sun, 3 Mar 2024 23:32:46 -0500
Subject: [PATCH] work in progress

---
 components/Form/FileInput.tsx  | 10 ++--
 components/Form/formSchemas.ts | 10 +++-
 components/Form/index.tsx      | 90 ++++++++++++++++++++--------------
 components/Form/types.ts       | 16 +++---
 4 files changed, 76 insertions(+), 50 deletions(-)

diff --git a/components/Form/FileInput.tsx b/components/Form/FileInput.tsx
index daed5b0..7a79146 100644
--- a/components/Form/FileInput.tsx
+++ b/components/Form/FileInput.tsx
@@ -45,12 +45,12 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
         {label}
         <RequiredAsterisk required={required} />
       </label>
-      <div className="drop-area" onClick={handleClick} onDrop={handleDrop} onDragOver={(e) => e.preventDefault()}>
-        <div>
-          <FontAwesomeIcon icon={faFile} />
-          <h4>Drag & Drop Here or Browse</h4>
+      <div className="border border-grey-500 rounded-md p-4 flex flex-col items-center gap-4" onClick={handleClick} onDrop={handleDrop} onDragOver={(e) => e.preventDefault()}>
+        <div className="border border-grey-500 border-dashed flex flex-col gap-4 items-center justify-center rounded-md py-9 w-full">
+          <FontAwesomeIcon icon={faFile} className="text-amber-500 h-5 w-5" />
+          <h4 className="">Drag & Drop Here or <span className="font-bold">Browse</span></h4>
         </div>
-        <button type="button">Upload Manifest</button>
+        <button type="button" className="text-white px-12 py-2 rounded-md bg-blue-950 w-fit">Upload Manifest</button>
       </div>
       <input type="file" className="hidden" ref={fileInputRef} onChange={handleChange} />
       <ErrorMessage touched={meta.touched} error={meta.error} />
diff --git a/components/Form/formSchemas.ts b/components/Form/formSchemas.ts
index 38ac1d7..367c036 100644
--- a/components/Form/formSchemas.ts
+++ b/components/Form/formSchemas.ts
@@ -6,7 +6,10 @@ export const initialValues: FormValues = {
   manifestFile: null,
   splitSchedule: "",
   client: "",
-  testingCenter: "",
+  testingCenter1: "",
+  testingCenter2: "",
+  testingCenter3: "",
+  testingCenter4: "",
   toleranceWindow: false,
 }
 
@@ -17,6 +20,9 @@ export const validationSchema = Yup.object({
   manifestFile: Yup.mixed().required("A file is required").nullable(), // Allows for null values
   splitSchedule: Yup.string().required("This field is required").oneOf(["Yes", "No"], "Invalid Option"),
   client: Yup.string().required("Client selection is required").oneOf(["Single", "Multiple"], "Invalid Client Type"),
-  testingCenter: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
+  testingCenter1: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
+  testingCenter2: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
+  testingCenter3: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
+  testingCenter4: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
   toleranceWindow: Yup.boolean().required("Tolerance window selection is required"), // Assuming this is a boolean represented by a toggle
 })
diff --git a/components/Form/index.tsx b/components/Form/index.tsx
index 561cabb..e4b5397 100644
--- a/components/Form/index.tsx
+++ b/components/Form/index.tsx
@@ -37,13 +37,14 @@ const FormComponent: React.FC = () => {
   }
 
   return (
+    <>
     <Formik
       initialValues={initialValues}
       validationSchema={validationSchema}
       onSubmit={async (values, { setSubmitting }) => {
+        console.log("Form values:", values); // Log form values on submit
         try {
-          console.log(values)
-          await submitForm(values)
+          //await submitForm(values)
           setFormSubmitted(true)
         } catch (error) {
           console.error("Error submitting form:", error)
@@ -52,43 +53,58 @@ const FormComponent: React.FC = () => {
         }
       }}
     >
-      {(formik) => (
-        <Form>
-          <div className="flex flex-col gap-4 lg:flex-row lg:gap-16">
-            <div className="flex grow flex-col lg:max-w-[500px]">
-              <SelectInput key="importName" name="importName" label="Select Import Name:" required>
-                <option value="">Select Import Name:</option>
-                {data.importNames.map((option) => (
-                  <option key={option} value={option}>
-                    {option}
-                  </option>
-                ))}
-              </SelectInput>
-              <FileInput label="Select a manifest that you'd like to import" name="manifestFile" required />
-              <StatusField label="Elapse Data Checking:" statusLabel="No Elapsed Dates!" statusColor="text-green-500" />
-              <ToggleField key="toleranceWindow" name="toleranceWindow" required={true}>
-                Tolerance Window:
-              </ToggleField>
+      {(formik) => {
+        console.log("Form errors:", formik.errors); // Log form errors on every render
+        console.log("Form values:", formik.values); // Log current form values on every render
+
+        return (
+          <Form>
+            <div className="flex flex-col gap-4 lg:flex-row lg:gap-16">
+              <div className="flex grow flex-col lg:max-w-[500px]">
+                <SelectInput key="importName" name="importName" label="Select Import Name:" required>
+                  <option value="">Select Import Name:</option>
+                  {data.importNames.map((option) => (
+                    <option key={option} value={option}>
+                      {option}
+                    </option>
+                  ))}
+                </SelectInput>
+                {/* <FileInput label="Select a manifest that you'd like to import" name="manifestFile" required /> */}
+                <StatusField label="Elapse Data Checking:" statusLabel="No Elapsed Dates!" statusColor="text-green-500" />
+                <ToggleField key="toleranceWindow" name="toleranceWindow" required={true}>
+                  Tolerance Window:
+                </ToggleField>
+              </div>
+              <div className="flex grow flex-col lg:max-w-[350px]">
+                <RadioGroup
+                  key="splitSchedule"
+                  name="splitSchedule"
+                  label="Split schedule using social distancing?"
+                  options={data.splitScheduleOptions}
+                  required={true}
+                />
+                <StatusField label="Location Checking:" statusLabel="All Available!" statusColor="text-green-500" />
+                <RadioGroup key="client" name="client" label="Client" options={data.clientOptions} required={true} />
+                <ClientField testingCenters={data.testingCenterOptions} clients={data.clientsOptions} />
+              </div>
             </div>
-            <div className="flex grow flex-col lg:max-w-[350px]">
-              <RadioGroup
-                key="splitSchedule"
-                name="splitSchedule"
-                label="Split schedule using social distancing?"
-                options={data.splitScheduleOptions}
-                required={true}
-              />
-              <StatusField label="Location Checking:" statusLabel="All Available!" statusColor="text-green-500" />
-              <RadioGroup key="client" name="client" label="Client" options={data.clientOptions} required={true} />
-              <ClientField testingCenters={data.testingCenterOptions} clients={data.clientsOptions} />
-            </div>
-          </div>
-          <button className="mx-auto mt-4" type="submit" disabled={formik.isSubmitting}>
-            Submit
-          </button>
-        </Form>
-      )}
+            <button
+                className="mx-auto mt-4 flex items-center justify-center rounded-full py-3 px-9 text-center text-md font-bold shadow-xs transition-all bg-blue-950 text-white"
+                type="submit"
+                disabled={formik.isSubmitting}
+            >
+                Continue Import
+                {formik.isSubmitting && <div className="ml-3 h-5 w-5 animate-spin rounded-full border-x-2 border-b-2"></div>}
+            </button>
+          </Form>
+        )
+      }
+        
+      }
     </Formik>
+    {formSubmitted && <div>Success</div>}
+    </>
+    
   )
 }
 
diff --git a/components/Form/types.ts b/components/Form/types.ts
index fea6431..e7d0660 100644
--- a/components/Form/types.ts
+++ b/components/Form/types.ts
@@ -1,8 +1,12 @@
 export interface FormValues {
-  importName: string
-  manifestFile: File | null
-  splitSchedule: string
-  client: string
-  testingCenter: string
-  toleranceWindow: boolean
+  importName: string;
+  manifestFile: File | null;
+  splitSchedule: string;
+  client: string;
+  testingCenter1: string;
+  testingCenter2: string;
+  testingCenter3: string;
+  testingCenter4: string;
+  toleranceWindow: boolean;
 }
+