Refactor form submission logic in Apply page and BusinessForm component

src/app/business/apply/page.tsx

@@ -6,7 +6,7 @@ import { Switch } from "@/components/ui/switch";
 import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
 import { useEffect, useState } from "react";
 import { Textarea } from "@/components/ui/textarea";
-import { useForm } from "react-hook-form";
+import { useForm, SubmitHandler } from "react-hook-form";
 import {
   Tooltip,
   TooltipContent,
@@ -18,13 +18,12 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { DualOptionSelector } from "@/components/dualSelector";
 import { MultipleOptionSelector } from "@/components/multipleSelector";
 import BusinessForm from "@/components/BusinessForm";
+import { businessFormSchema } from "@/types/schemas/application.schema";
 
+type businessSchema = z.infer<typeof businessFormSchema>;
 export default function Apply() {
+  const form1 = useForm();
   const [industry, setIndustry] = useState<string[]>([]);
-  // const [isInUS, setIsInUS] = useState("");
-  // const [isForSale, setIsForSale] = useState("");
-  // const [isGenerating, setIsGenerating] = useState("");
-  // const [businessPitch, setBusinessPitch] = useState("text");
   const [projectType, setProjectType] = useState<string[]>([]);
   const [projectPitch, setProjectPitch] = useState("text");
   const [applyProject, setApplyProject] = useState(false);
@@ -33,6 +32,18 @@ export default function Apply() {
   const [projectPitchFile, setProjectPitchFile] = useState("");
   const MAX_FILE_SIZE = 5000000;
   const ACCEPTED_IMAGE_TYPES = ["image/jpeg", "image/jpg", "image/png"];
+
+  const handleSubmit: SubmitHandler<any> = (data) => {
+    console.log("Submitted Data:", data);
+    // add api logic
+  };
+
+  const onSubmit: SubmitHandler<businessSchema> = async (data) => {
+    // Your submit logic here
+    console.log(data);
+    // e.g. submit the data to an API
+  };
+
   const createPitchDeckSchema = (inputType: string) => {
     if (inputType === "text") {
       return z
@@ -45,8 +56,7 @@ export default function Apply() {
       return z
         .custom<File>(
           (val: any) => {
-            // confirm val is a File object
+            return val instanceof File;
-            return val instanceof File; // Ensure it is a File instance
           },
           {
             message: "Input must be a file.",
@@ -373,7 +383,7 @@ export default function Apply() {
       </div>
       {/* form */}
       {/* <form action="" onSubmit={handleSubmit(handleSubmitForms)}> */}
-      <BusinessForm onSubmit={onSubmitSingleForm} industry={industry} />
+      <BusinessForm industry={industry} onSubmit={onSubmit} />
 
       <div className="flex space-x-5">
         <Switch onCheckedChange={() => setApplyProject(!applyProject)}></Switch>
@@ -705,7 +715,6 @@ export default function Apply() {
           Submit application
         </Button>
       </center>
-      {/* </form> */}
     </div>
   );
 }

src/components/BusinessForm.tsx

@@ -28,10 +28,9 @@ type businessSchema = z.infer<typeof businessFormSchema>;
 
 interface BusinessFormProps {
   industry: string[];
+  handleSubmit: SubmitHandler<businessSchema>;
+  onSubmit: () => void;
 }
-const handleSubmit = (values: z.infer<typeof businessFormSchema>) => {
-  console.table(values);
-};
 const BusinessForm = ({
   onSubmit,
   industry,
@@ -49,29 +48,12 @@ const BusinessForm = ({
     resolver: zodResolver(businessFormSchema),
     defaultValues: {},
   });
-  const [isInUS, setIsInUS] = useState("");
-  const [isForSale, setIsForSale] = useState("");
-  const [isGenerating, setIsGenerating] = useState("");
   const [businessPitch, setBusinessPitch] = useState("text");
   const [businessPitchFile, setBusinessPitchFile] = useState("");
-  // const handleBusinessFieldChange = (fieldName: string, value: any) => {
-  //   switch (fieldName) {
-  //     case "isInUS":
-  //       setIsInUS(value);
-  //       break;
-  //     case "isForSale":
-  //       setIsForSale(value);
-  //       break;
-  //     case "isGenerating":
-  //       setIsGenerating(value);
-  //       break;
-  //   }
-  //   setValueBusiness(fieldName, value);
-  // };
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-8">
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
         <div className="grid grid-flow-row auto-rows-max w-3/4 ml-1/2 lg:ml-[10%]">
           <h1 className="text-3xl font-bold mt-10 ml-96">About your company</h1>
           <p className="ml-96 mt-5 text-neutral-500">
@@ -170,7 +152,7 @@ const BusinessForm = ({
                     choice1="Yes"
                     choice2="No"
                     handleFunction={(selectedValues: string) => {
-                      setIsInUS;
+                      // setIsInUS;
                       field.onChange(selectedValues);
                     }}
                     description={
@@ -204,7 +186,7 @@ const BusinessForm = ({
                     choice1="Yes"
                     choice2="No"
                     handleFunction={(selectedValues: string) => {
-                      setIsForSale;
+                      // setIsForSale;
                       field.onChange(selectedValues);
                     }}
                     description={
@@ -235,7 +217,7 @@ const BusinessForm = ({
                     choice2="No"
                     value={field.value}
                     handleFunction={(selectedValues: string) => {
-                      setIsGenerating;
+                      // setIsGenerating;
                       field.onChange(selectedValues);
                     }}
                     description={
@@ -284,16 +266,9 @@ const BusinessForm = ({
                           : "https:// "
                       }
                       accept={businessPitch === "file" ? ".md" : undefined}
-                      // onChange={(e) => {
+                      onChange={(e) => {
-                      //   if (businessPitch === "file") {
+                        field.onChange(e);
-                      //     setValueBusiness(
+                      }}
-                      //       "businessPitchDeck",
-                      //       e.target.files?.[0] || ""
-                      //     );
-                      //   } else {
-                      //     field.onChange(e);
-                      //   }
-                      // }}
                       value={
                         businessPitch === "file" ? "" : (field.value as string)
                       }
@@ -304,7 +279,6 @@ const BusinessForm = ({
                         <Button
                           className="ml-4"
                           onClick={() => {
-                            // setValueBusiness("businessPitchDeck", null);
                             setBusinessPitchFile("");
                           }}
                         >
@@ -384,11 +358,6 @@ const BusinessForm = ({
               </FormItem>
             )}
           /> */}
-
-          {/* Submit Button */}
-          <Button type="submit" className="w-52 ml-[45%] my-10">
-            Continue
-          </Button>
         </div>
       </form>
     </Form>