prettier, lint cleanup

2024-03-03 22:34:43 -05:00 · 2024-03-03 22:34:43 -05:00 · 4adcee4af7
commit 4adcee4af7
parent f43bcec080
9 changed files with 176 additions and 231 deletions
--- a/app/page.tsx
+++ b/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 = {
--- a/components/Form/ClientField.tsx
+++ b/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[]
-    clients: string[]
+  testingCenters: 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>
-            {clients.map((option: string) => (
-              <option key={option} value={option}>
-                {option}
-              </option>
-            ))}
-          </SelectInput>
-          <FontAwesomeIcon icon={faClock}/>
-        </div>
-          
+              <option value="">Select Client</option>
+              {clients.map((option: string) => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
+            </SelectInput>
+            <FontAwesomeIcon icon={faClock} />
+          </div>
        </div>
      ))}
    </div>
--- a/components/Form/FileInput.tsx
+++ b/components/Form/FileInput.tsx
@ -1,44 +1,43 @@
-import { useField, useFormikContext } from "formik";
-import React, { useRef } from "react";
-import ErrorMessage from "./ErrorMessage";
-import RequiredAsterisk from "./RequiredAsterisk";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFile } from "@fortawesome/free-solid-svg-icons";
-
+import { faFile } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { useField, useFormikContext } from "formik"
+import React, { useRef } from "react"
+import ErrorMessage from "./ErrorMessage"
+import RequiredAsterisk from "./RequiredAsterisk"

 interface FileInputProps {
-  label: string;
-  required?: boolean;
-  name:string;
+  label: string
+  required?: boolean
+  name: string
 }

-const FileInput: React.FC<FileInputProps> = ({ label,  ...props }) => {
-  const { required } = props;
-  const [field, meta] = useField(props);
-  const { setFieldValue } = useFormikContext();
-  const fileInputRef = useRef<HTMLInputElement>(null);
+const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
+  const { required } = props
+  const [field, meta] = useField(props)
+  const { setFieldValue } = useFormikContext()
+  const fileInputRef = useRef<HTMLInputElement>(null)

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { files } = event.target;
-    const file = files ? files[0] : null;
-    setFieldValue(props.name, file); // Directly use setFieldValue to update Formik's state
-  };
+    const { files } = event.target
+    const file = files ? files[0] : null
+    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.stopPropagation();
-    const files = event.dataTransfer.files;
+    event.preventDefault()
+    event.stopPropagation()
+    const files = event.dataTransfer.files
    if (files && files.length > 0) {
-      const file = files[0];
-      setFieldValue(props.name, file);
+      const file = files[0]
+      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
-        type="file"
-        className="hidden"
-        ref={fileInputRef}
-        onChange={handleChange}
-      />
+      <input type="file" className="hidden" ref={fileInputRef} onChange={handleChange} />
      <ErrorMessage touched={meta.touched} error={meta.error} />
    </div>
-  );
-};
+  )
+}

-export default FileInput;
+export default FileInput
--- a/components/Form/RadioGroup.tsx
+++ b/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
-        className="flex gap-3"
-        value={field.value}
-        onValueChange={handleChange}
-        aria-label={label}
-      >
+      <RadioGroup.Root className="flex gap-3" value={field.value} onValueChange={handleChange} aria-label={label}>
        {options.map((option) => (
          <div className="flex items-center" key={option}>
            <RadioGroup.Item
--- a/components/Form/ToggleField.tsx
+++ b/components/Form/ToggleField.tsx
@ -1,18 +1,18 @@
-import { useField } from "formik";
-import React, { useState } from "react";
-import ErrorMessage from "./ErrorMessage";
-import RequiredAsterisk from "./RequiredAsterisk";
-import * as SwitchPrimitive from "@radix-ui/react-switch";
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+import { useField } from "formik"
+import React, { useState } from "react"
+import ErrorMessage from "./ErrorMessage"
+import RequiredAsterisk from "./RequiredAsterisk"

 const ToggleField = ({
  children,
  ...props
 }: {
-  children: React.ReactNode;
+  children: React.ReactNode
 } & React.InputHTMLAttributes<HTMLInputElement>) => {
-  const { required, ...restProps } = props;
-  const [field, meta] = useField({ ...(restProps as { name: string }), type: "checkbox" });
-  const [checked, setChecked] = useState(false);
+  const { required, ...restProps } = props
+  const [field, meta] = useField({ ...(restProps as { name: string }), type: "checkbox" })
+  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);
-          field.onChange({ target: { name: field.name, value: isChecked } });
+          setChecked(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
--- a/components/Form/data.tsx
+++ b/components/Form/data.tsx
@ -1,7 +1,7 @@
 export const data = {
-    importNames: ["Import ABC", "Import DEF", "Import GHI"],
-    splitScheduleOptions: ["Yes", "No"],
-    clientOptions: ["Single", "Multiple"],
-    testingCenterOptions: ["testing center 1", "testing center 2", "testing center 3", "testing center 4"],
-    clientsOptions: ["client 1", "client 2", "client 3"],
-};
+  importNames: ["Import ABC", "Import DEF", "Import GHI"],
+  splitScheduleOptions: ["Yes", "No"],
+  clientOptions: ["Single", "Multiple"],
+  testingCenterOptions: ["testing center 1", "testing center 2", "testing center 3", "testing center 4"],
+  clientsOptions: ["client 1", "client 2", "client 3"],
+}
--- a/components/Form/formSchemas.ts
+++ b/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: '',
-    manifestFile: null,
-    splitSchedule: '',
-    client: '',
-    testingCenter: '',
-    toleranceWindow: false, 
-};
+  importName: "",
+  manifestFile: null,
+  splitSchedule: "",
+  client: "",
+  testingCenter: "",
+  toleranceWindow: false,
+}

 export const validationSchema = Yup.object({
-    importName: Yup.string()
-        .required('Import name is required')
-        .oneOf(["Import ABC", "Import DEF", "Import GHI"], "Invalid Import Name"),
-    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
-    toleranceWindow: Yup.boolean()
-        .required('Tolerance window selection is required'), // Assuming this is a boolean represented by a toggle
-});
+  importName: Yup.string()
+    .required("Import name is required")
+    .oneOf(["Import ABC", "Import DEF", "Import GHI"], "Invalid Import Name"),
+  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
+  toleranceWindow: Yup.boolean().required("Tolerance window selection is required"), // Assuming this is a boolean represented by a toggle
+})
--- a/components/Form/index.tsx
+++ b/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 RadioGroup from "./RadioGroup";
-import FileInput from "./FileInput";
-import ToggleField from "./ToggleField";
-import StatusField from "./StatusField";
-import ClientField from "./ClientField";
+import ClientField from "./ClientField"
+import { data } from "./data"
+import FileInput from "./FileInput"
+import { initialValues, validationSchema } from "./formSchemas"
+import RadioGroup from "./RadioGroup"
+import SelectInput from "./SelectInput"
+import StatusField from "./StatusField"
+import ToggleField from "./ToggleField"

-import { FormValues } from "./types";
-import { data } from "./data";
-import { initialValues, validationSchema } from "./formSchemas";
+import { FormValues } from "./types"

 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
--- a/components/Form/types.ts
+++ b/components/Form/types.ts
@ -1,8 +1,8 @@
 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
+  testingCenter: string
+  toleranceWindow: boolean
+}