prettier, lint cleanup

app/page.tsx

@@ -1,6 +1,6 @@
-import { Metadata } from "next"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faXmark } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { Metadata } from "next"
 import Form from "components/Form"
 
 export const metadata: Metadata = {

components/Form/ClientField.tsx

@@ -1,13 +1,13 @@
+import { faClock } from "@fortawesome/free-regular-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import React from "react"
 import SelectInput from "./SelectInput"
 import { Utils } from "./Utils"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faClock } from "@fortawesome/free-regular-svg-icons"
 
 // Define a type for your props to improve type-checking
 type ClientFieldProps = {
-    testingCenters: string[]
+  testingCenters: string[]
-    clients: string[]
+  clients: string[]
 }
 
 // Destructure the props in the function parameter
@@ -15,20 +15,19 @@ const ClientField: React.FC<ClientFieldProps> = ({ testingCenters, clients }) =>
   return (
     <div className="flex flex-col gap-4">
       {testingCenters.map((testingCenter) => (
-        <div key={Utils.camelize(testingCenter)} className="flex gap-14 items-center">
+        <div key={Utils.camelize(testingCenter)} className="flex items-center gap-14">
           <span>{testingCenter}</span>
-          <div className="flex gap-2 items-center">
+          <div className="flex items-center gap-2">
             <SelectInput name={Utils.camelize(testingCenter)}>
-            <option value="">Select Client</option>
+              <option value="">Select Client</option>
-            {clients.map((option: string) => (
+              {clients.map((option: string) => (
-              <option key={option} value={option}>
+                <option key={option} value={option}>
-                {option}
+                  {option}
-              </option>
+                </option>
-            ))}
+              ))}
-          </SelectInput>
+            </SelectInput>
-          <FontAwesomeIcon icon={faClock}/>
+            <FontAwesomeIcon icon={faClock} />
-        </div>
+          </div>
-          
         </div>
       ))}
     </div>

components/Form/FileInput.tsx

@@ -1,44 +1,43 @@
-import { useField, useFormikContext } from "formik";
+import { faFile } from "@fortawesome/free-solid-svg-icons"
-import React, { useRef } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import ErrorMessage from "./ErrorMessage";
+import { useField, useFormikContext } from "formik"
-import RequiredAsterisk from "./RequiredAsterisk";
+import React, { useRef } from "react"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import ErrorMessage from "./ErrorMessage"
-import { faFile } from "@fortawesome/free-solid-svg-icons";
+import RequiredAsterisk from "./RequiredAsterisk"
-
 
 interface FileInputProps {
-  label: string;
+  label: string
-  required?: boolean;
+  required?: boolean
-  name:string;
+  name: string
 }
 
-const FileInput: React.FC<FileInputProps> = ({ label,  ...props }) => {
+const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
-  const { required } = props;
+  const { required } = props
-  const [field, meta] = useField(props);
+  const [field, meta] = useField(props)
-  const { setFieldValue } = useFormikContext();
+  const { setFieldValue } = useFormikContext()
-  const fileInputRef = useRef<HTMLInputElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null)
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { files } = event.target;
+    const { files } = event.target
-    const file = files ? files[0] : null;
+    const file = files ? files[0] : null
-    setFieldValue(props.name, file); // Directly use setFieldValue to update Formik's state
+    setFieldValue(props.name, file) // Directly use setFieldValue to update Formik's state
-  };
+  }
 
   const handleClick = () => {
     if (fileInputRef.current) {
-      fileInputRef.current.click();
+      fileInputRef.current.click()
     }
-  };
+  }
 
   const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
+    event.preventDefault()
-    event.stopPropagation();
+    event.stopPropagation()
-    const files = event.dataTransfer.files;
+    const files = event.dataTransfer.files
     if (files && files.length > 0) {
-      const file = files[0];
+      const file = files[0]
-      setFieldValue(props.name, file);
+      setFieldValue(props.name, file)
     }
-  };
+  }
 
   return (
     <div className="mb-4">
@@ -53,15 +52,10 @@ const FileInput: React.FC<FileInputProps> = ({ label,  ...props }) => {
         </div>
         <button type="button">Upload Manifest</button>
       </div>
-      <input
+      <input type="file" className="hidden" ref={fileInputRef} onChange={handleChange} />
-        type="file"
-        className="hidden"
-        ref={fileInputRef}
-        onChange={handleChange}
-      />
       <ErrorMessage touched={meta.touched} error={meta.error} />
     </div>
-  );
+  )
-};
+}
 
-export default FileInput;
+export default FileInput

components/Form/RadioGroup.tsx

@@ -1,8 +1,8 @@
+import * as RadioGroup from "@radix-ui/react-radio-group"
 import { useField } from "formik"
 import React from "react"
 import ErrorMessage from "./ErrorMessage"
 import RequiredAsterisk from "./RequiredAsterisk"
-import * as RadioGroup from "@radix-ui/react-radio-group"
 
 const RadioGroupField = ({
   name,
@@ -28,12 +28,7 @@ const RadioGroupField = ({
         {label}
       </label>
       <RequiredAsterisk required={required} />
-      <RadioGroup.Root
+      <RadioGroup.Root className="flex gap-3" value={field.value} onValueChange={handleChange} aria-label={label}>
-        className="flex gap-3"
-        value={field.value}
-        onValueChange={handleChange}
-        aria-label={label}
-      >
         {options.map((option) => (
           <div className="flex items-center" key={option}>
             <RadioGroup.Item

components/Form/ToggleField.tsx

@@ -1,18 +1,18 @@
-import { useField } from "formik";
+import * as SwitchPrimitive from "@radix-ui/react-switch"
-import React, { useState } from "react";
+import { useField } from "formik"
-import ErrorMessage from "./ErrorMessage";
+import React, { useState } from "react"
-import RequiredAsterisk from "./RequiredAsterisk";
+import ErrorMessage from "./ErrorMessage"
-import * as SwitchPrimitive from "@radix-ui/react-switch";
+import RequiredAsterisk from "./RequiredAsterisk"
 
 const ToggleField = ({
   children,
   ...props
 }: {
-  children: React.ReactNode;
+  children: React.ReactNode
 } & React.InputHTMLAttributes<HTMLInputElement>) => {
-  const { required, ...restProps } = props;
+  const { required, ...restProps } = props
-  const [field, meta] = useField({ ...(restProps as { name: string }), type: "checkbox" });
+  const [field, meta] = useField({ ...(restProps as { name: string }), type: "checkbox" })
-  const [checked, setChecked] = useState(false);
+  const [checked, setChecked] = useState(false)
 
   return (
     <div className="">
@@ -24,15 +24,15 @@ const ToggleField = ({
         className="relative h-[25px] w-[42px] cursor-default rounded-full bg-black shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
         checked={checked}
         onCheckedChange={(isChecked) => {
-          setChecked(isChecked);
+          setChecked(isChecked)
-          field.onChange({ target: { name: field.name, value: isChecked } });
+          field.onChange({ target: { name: field.name, value: isChecked } })
         }}
       >
         <SwitchPrimitive.Thumb className="block h-[21px] w-[21px] translate-x-0.5 rounded-full bg-white shadow-[0_2px_2px] shadow-black transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
       </SwitchPrimitive.Root>
       <ErrorMessage touched={meta.touched} error={meta.error} />
     </div>
-  );
+  )
-};
+}
 
-export default ToggleField;
+export default ToggleField

components/Form/data.tsx

@@ -1,7 +1,7 @@
 export const data = {
-    importNames: ["Import ABC", "Import DEF", "Import GHI"],
+  importNames: ["Import ABC", "Import DEF", "Import GHI"],
-    splitScheduleOptions: ["Yes", "No"],
+  splitScheduleOptions: ["Yes", "No"],
-    clientOptions: ["Single", "Multiple"],
+  clientOptions: ["Single", "Multiple"],
-    testingCenterOptions: ["testing center 1", "testing center 2", "testing center 3", "testing center 4"],
+  testingCenterOptions: ["testing center 1", "testing center 2", "testing center 3", "testing center 4"],
-    clientsOptions: ["client 1", "client 2", "client 3"],
+  clientsOptions: ["client 1", "client 2", "client 3"],
-};
+}

components/Form/formSchemas.ts

@@ -1,30 +1,22 @@
-import { FormValues } from "./types";
+import * as Yup from "yup"
-import * as Yup from "yup";
+import { FormValues } from "./types"
 
 export const initialValues: FormValues = {
-    importName: '',
+  importName: "",
-    manifestFile: null,
+  manifestFile: null,
-    splitSchedule: '',
+  splitSchedule: "",
-    client: '',
+  client: "",
-    testingCenter: '',
+  testingCenter: "",
-    toleranceWindow: false, 
+  toleranceWindow: false,
-};
+}
 
 export const validationSchema = Yup.object({
-    importName: Yup.string()
+  importName: Yup.string()
-        .required('Import name is required')
+    .required("Import name is required")
-        .oneOf(["Import ABC", "Import DEF", "Import GHI"], "Invalid Import Name"),
+    .oneOf(["Import ABC", "Import DEF", "Import GHI"], "Invalid Import Name"),
-    manifestFile: Yup.mixed()
+  manifestFile: Yup.mixed().required("A file is required").nullable(), // Allows for null values
-        .required('A file is required')
+  splitSchedule: Yup.string().required("This field is required").oneOf(["Yes", "No"], "Invalid Option"),
-        .nullable(), // Allows for null values
+  client: Yup.string().required("Client selection is required").oneOf(["Single", "Multiple"], "Invalid Client Type"),
-    splitSchedule: Yup.string()
+  testingCenter: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
-        .required('This field is required')
+  toleranceWindow: Yup.boolean().required("Tolerance window selection is required"), // Assuming this is a boolean represented by a toggle
-        .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
-    toleranceWindow: Yup.boolean()
-        .required('Tolerance window selection is required'), // Assuming this is a boolean represented by a toggle
-});

components/Form/index.tsx

@@ -1,130 +1,95 @@
 "use client"
 
-import React, { useState } from "react";
+import axios from "axios"
+import { Form, Formik } from "formik"
+import React, { useState } from "react"
 
 //Dependencies
-import { Formik, Form } from "formik";
-
-import axios from "axios";
 
 //Input fields
-import SelectInput from "./SelectInput";
+import ClientField from "./ClientField"
-import RadioGroup from "./RadioGroup";
+import { data } from "./data"
-import FileInput from "./FileInput";
+import FileInput from "./FileInput"
-import ToggleField from "./ToggleField";
+import { initialValues, validationSchema } from "./formSchemas"
-import StatusField from "./StatusField";
+import RadioGroup from "./RadioGroup"
-import ClientField from "./ClientField";
+import SelectInput from "./SelectInput"
+import StatusField from "./StatusField"
+import ToggleField from "./ToggleField"
 
-import { FormValues } from "./types";
+import { FormValues } from "./types"
-import { data } from "./data";
-import { initialValues, validationSchema } from "./formSchemas";
 
 const FormComponent: React.FC = () => {
-    const [formSubmitted, setFormSubmitted] = useState(false);
+  const [formSubmitted, setFormSubmitted] = useState(false)
-
-    const submitForm = (values: FormValues) => {
-        return axios.post(
-            `/api/submitForm`,
-            {
-                submissionData: values,
-            },
-            {
-                // options
-                headers: {
-                    "Content-Type": "application/json"
-                }
-            }
-        );
-    };
-    
-    return (
-        <Formik
-        initialValues={initialValues}
-        validationSchema={validationSchema}
-        onSubmit={async (values, { setSubmitting }) => {
-            try {
-                console.log(values);
-                await submitForm(values);
-                setFormSubmitted(true);
-            } catch (error) {
-                console.error("Error submitting form:", error);
-            } finally {
-                setSubmitting(false);
-            }
-        }}
-    >
-        {formik => (
-            <Form>
-                <div className="flex flex-col lg:flex-row gap-4 lg:gap-16">
-                    <div className="flex flex-col grow 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 flex-col grow 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>
-        )}
-    </Formik>
 
+  const submitForm = (values: FormValues) => {
+    return axios.post(
+      `/api/submitForm`,
+      {
+        submissionData: values,
+      },
+      {
+        // options
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
     )
+  }
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      validationSchema={validationSchema}
+      onSubmit={async (values, { setSubmitting }) => {
+        try {
+          console.log(values)
+          await submitForm(values)
+          setFormSubmitted(true)
+        } catch (error) {
+          console.error("Error submitting form:", error)
+        } finally {
+          setSubmitting(false)
+        }
+      }}
+    >
+      {(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>
+            </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>
+      )}
+    </Formik>
+  )
 }
 
-export default FormComponent;
+export default FormComponent
-

components/Form/types.ts

@@ -1,8 +1,8 @@
 export interface FormValues {
-    importName: string;
+  importName: string
-    manifestFile: File | null;
+  manifestFile: File | null
-    splitSchedule: string;
+  splitSchedule: string
-    client: string; 
+  client: string
-    testingCenter: string; 
+  testingCenter: string
-    toleranceWindow: boolean;
+  toleranceWindow: boolean
 }