Refactor form submission logic in Apply page and BusinessForm component

This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2024-10-16 22:52:06 +07:00
parent 25a9f37b19
commit 3a9f3faa48
2 changed files with 27 additions and 49 deletions

View File

@ -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; // Ensure it is a File instance
return val instanceof File;
},
{
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>
);
}

View File

@ -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) => {
// if (businessPitch === "file") {
// setValueBusiness(
// "businessPitchDeck",
// e.target.files?.[0] || ""
// );
// } else {
// field.onChange(e);
// }
// }}
onChange={(e) => {
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>