mirror of
https://github.com/Sosokker/B2D-Ventures.git
synced 2025-12-19 05:54:06 +01:00
Refactor form submission logic in Apply page and BusinessForm component
This commit is contained in:
Pattadon
parent
47baae84fb
commit
7c2b42e116
@ -13,7 +13,7 @@ import { businessFormSchema } from "@/types/schemas/application.schema";
|
||||
|
||||
type businessSchema = z.infer<typeof businessFormSchema>;
|
||||
export default function Apply() {
|
||||
const [industry, setIndustry] = useState<string[]>([]);
|
||||
const [industry, setIndustry] = useState<{id: number, name: string }[]>([]);
|
||||
const [projectType, setProjectType] = useState<string[]>([]);
|
||||
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<businessSchema> = 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}
|
||||
/>
|
||||
|
||||
|
||||
{/* </div>
|
||||
</div> */}
|
||||
|
||||
|
||||
@ -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<typeof businessFormSchema>;
|
||||
|
||||
interface BusinessFormProps {
|
||||
industry: string[];
|
||||
industry: {id: number, name:string}[];
|
||||
applyProject: boolean;
|
||||
setApplyProject: Function;
|
||||
onSubmit: SubmitHandler<businessSchema>;
|
||||
@ -35,13 +40,13 @@ const BusinessForm = ({
|
||||
industry,
|
||||
}: BusinessFormProps & { onSubmit: SubmitHandler<businessSchema> }) => {
|
||||
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<businessSchema>({
|
||||
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 (
|
||||
<Form {...form}>
|
||||
@ -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={
|
||||
<>
|
||||
|
||||
@ -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 (
|
||||
<div className="mt-10 space-y-5">
|
||||
<Label htmlFor={props.fieldName} className="font-bold text-lg mt-10">
|
||||
@ -28,10 +29,14 @@ export function MultipleOptionSelector(props: MultipleOptionSelectorProps) {
|
||||
</Label>
|
||||
<div className="flex space-x-5">
|
||||
<Select
|
||||
onValueChange={(value) => {
|
||||
if (props.handleFunction) {
|
||||
props.handleFunction(props.fieldName, value);
|
||||
// console.log(value, props.fieldName);
|
||||
value={value}
|
||||
onValueChange={(id) => {
|
||||
setValue(id);
|
||||
const selectedChoice = props.choices.find(
|
||||
(choice) => choice.id.toString() === id
|
||||
);
|
||||
if (selectedChoice && props.handleFunction) {
|
||||
props.handleFunction(selectedChoice);
|
||||
}
|
||||
}}
|
||||
>
|
||||
@ -42,8 +47,8 @@ export function MultipleOptionSelector(props: MultipleOptionSelectorProps) {
|
||||
<SelectGroup>
|
||||
<SelectLabel>{props.selectLabel}</SelectLabel>
|
||||
{props.choices.map((i) => (
|
||||
<SelectItem key={i} value={i}>
|
||||
{i}
|
||||
<SelectItem key={i.id} value={i.id.toString()}>
|
||||
{i.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
|
||||
@ -95,7 +95,7 @@ const businessFormSchema = z.object({
|
||||
companyName: z.string().min(5, {
|
||||
message: "Company name must be at least 5 characters.",
|
||||
}),
|
||||
industry: z.string({
|
||||
industry: z.number({
|
||||
required_error: "Please select one of the option",
|
||||
}),
|
||||
isInUS: z
|
||||
|
||||
Loading…
Reference in New Issue
Block a user