From 7c2b42e116f2c1fb6c7cc15fb8033c8325344c35 Mon Sep 17 00:00:00 2001 From: Pattadon Date: Thu, 17 Oct 2024 15:11:30 +0700 Subject: [PATCH] Refactor form submission logic in Apply page and BusinessForm component --- src/app/business/apply/page.tsx | 42 +++++++++++++--- src/components/BusinessForm.tsx | 66 ++++++++++++++++--------- src/components/multipleSelector.tsx | 21 +++++--- src/types/schemas/application.schema.ts | 2 +- 4 files changed, 93 insertions(+), 38 deletions(-) diff --git a/src/app/business/apply/page.tsx b/src/app/business/apply/page.tsx index 4134aca..a1a1064 100644 --- a/src/app/business/apply/page.tsx +++ b/src/app/business/apply/page.tsx @@ -13,7 +13,7 @@ import { businessFormSchema } from "@/types/schemas/application.schema"; type businessSchema = z.infer; export default function Apply() { - const [industry, setIndustry] = useState([]); + const [industry, setIndustry] = useState<{id: number, name: string }[]>([]); const [projectType, setProjectType] = useState([]); const [projectPitch, setProjectPitch] = useState("text"); const [applyProject, setApplyProject] = useState(false); @@ -22,11 +22,35 @@ export default function Apply() { const MAX_FILE_SIZE = 5000000; const ACCEPTED_IMAGE_TYPES = ["image/jpeg", "image/jpg", "image/png"]; - const onSubmit: SubmitHandler = async (data) => { - const transformedData = transformChoice(data); + const transformedData = await transformChoice(data); console.log(transformedData); - + await sendRegistration(transformedData); + }; + const sendRegistration = async (recvData: any) => { + const { + data: { user }, + } = await supabase.auth.getUser(); + // console.log(user?.id); + + const { data, error } = await supabase + .from("business_application") + .insert([ + { + user_id: user?.id, + business_name: recvData["companyName"], + business_type_id: recvData["industry"], + location: recvData["country"], + is_for_sale: recvData["isForSale"], + is_generating_revenue: recvData["isGenerating"], + is_in_us: recvData["isInUS"], + pitch_deck_url: recvData["businessPitchDeck"], + money_raised_to_date: recvData["totalRaised"], + community_size: recvData["communitySize"], + }, + ]) + .select(); + console.table(data); }; const createPitchDeckSchema = (inputType: string) => { @@ -289,14 +313,19 @@ export default function Apply() { const fetchIndustry = async () => { let { data: BusinessType, error } = await supabase .from("business_type") - .select("value"); + .select("id, value"); if (error) { console.error(error); } else { if (BusinessType) { // console.table(); - setIndustry(BusinessType.map((item) => item.value)); + setIndustry( + BusinessType.map((item) => ({ + id: item.id, + name: item.value, + })) + ); } } }; @@ -375,7 +404,6 @@ export default function Apply() { setApplyProject={setApplyProject} /> - {/* */} diff --git a/src/components/BusinessForm.tsx b/src/components/BusinessForm.tsx index 3880b9d..d66c790 100644 --- a/src/components/BusinessForm.tsx +++ b/src/components/BusinessForm.tsx @@ -18,12 +18,17 @@ import { z } from "zod"; import { zodResolver } from "@hookform/resolvers/zod"; import { Label } from "@/components/ui/label"; import { Switch } from "@/components/ui/switch"; -import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@radix-ui/react-tooltip"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@radix-ui/react-tooltip"; type businessSchema = z.infer; interface BusinessFormProps { - industry: string[]; + industry: {id: number, name:string}[]; applyProject: boolean; setApplyProject: Function; onSubmit: SubmitHandler; @@ -35,13 +40,13 @@ const BusinessForm = ({ industry, }: BusinessFormProps & { onSubmit: SubmitHandler }) => { const communitySize = [ - "N/A", - "0-5K", - "5-10K", - "10-20K", - "20-50K", - "50-100K", - "100K+", + { id: 1, name: "N/A" }, + { id: 2, name: "0-5K" }, + { id: 3, name: "5-10K" }, + { id: 4, name: "10-20K" }, + { id: 5, name: "20-50K" }, + { id: 6, name: "50-100K" }, + { id: 7, name: "100K+" }, ]; const form = useForm({ resolver: zodResolver(businessFormSchema), @@ -49,14 +54,29 @@ const BusinessForm = ({ }); const [businessPitch, setBusinessPitch] = useState("text"); const [businessPitchFile, setBusinessPitchFile] = useState(""); - const [countries, setCountries] = useState([]); + const [countries, setCountries] = useState<{ id: number; name: string }[]>([]); useEffect(() => { - fetch("https://restcountries.com/v3.1/all") - .then((response) => response.json()) - .then((data) => { - const countryList = data.map((country: { name: { common: any; }; }) => country.name.common); - setCountries(countryList.sort()); - }); + const fetchCountries = async () => { + try { + const response = await fetch("https://restcountries.com/v3.1/all"); + if (!response.ok) { + throw new Error("Network response was not ok"); + } + const data = await response.json(); + const countryList = data.map( + (country: { name: { common: string } }, index: number) => ({ + id: index + 1, + name: country.name.common, + }) + ); + + setCountries(countryList.sort((a: { name: string; }, b: { name: any; }) => a.name.localeCompare(b.name))); + } catch (error) { + console.error("Error fetching countries:", error); + } + }; + + fetchCountries(); }, []); return (
@@ -112,8 +132,9 @@ const BusinessForm = ({ header={<>Country} fieldName="country" choices={countries} - handleFunction={(selectedValues: string) => { - field.onChange(selectedValues); + handleFunction={(selectedValues: any) => { + // console.log("Country selected: " + selectedValues.name); + field.onChange(selectedValues.name); }} description={ <>Select the country where your business is based. @@ -138,8 +159,9 @@ const BusinessForm = ({ header={<>Industry} fieldName="industry" choices={industry} - handleFunction={(selectedValues: string) => { - field.onChange(selectedValues); + handleFunction={(selectedValues: any) => { + // console.log("Type of selected value:", selectedValues.id); + field.onChange(selectedValues.id); }} description={ <> @@ -389,8 +411,8 @@ const BusinessForm = ({ header={<>What's the rough size of your community?} fieldName="communitySize" choices={communitySize} - handleFunction={(selectedValues: string) => { - field.onChange(selectedValues); + handleFunction={(selectedValues: any) => { + field.onChange(selectedValues.name); }} description={ <> diff --git a/src/components/multipleSelector.tsx b/src/components/multipleSelector.tsx index f3911a3..6ad439e 100644 --- a/src/components/multipleSelector.tsx +++ b/src/components/multipleSelector.tsx @@ -8,12 +8,12 @@ import { SelectTrigger, SelectValue, } from "@/components/ui/select"; -import { ReactElement } from "react"; +import { ReactElement, useState } from "react"; interface MultipleOptionSelectorProps { header: ReactElement; fieldName: string; - choices: string[]; + choices: { id: number; name: string }[]; handleFunction: Function | null; description: ReactElement; placeholder: string; @@ -21,6 +21,7 @@ interface MultipleOptionSelectorProps { } export function MultipleOptionSelector(props: MultipleOptionSelectorProps) { + const [value, setValue] = useState(""); return (