mirror of
https://github.com/Sosokker/B2D-Ventures.git
synced 2025-12-19 05:54:06 +01:00
fix: correct image loading issue in ImageModal and optimize performance
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB
parent
2b51f4d025
commit
9953aae4a4
@ -2,14 +2,7 @@ import { useEffect, useState } from "react";
|
||||
import { SubmitHandler, useForm, ControllerRenderProps } from "react-hook-form";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { MultipleOptionSelector } from "@/components/multipleSelector";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { projectFormSchema } from "@/types/schemas/application.schema";
|
||||
import { z } from "zod";
|
||||
@ -17,19 +10,8 @@ import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
|
||||
import { Textarea } from "./ui/textarea";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/components/ui/command";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { ChevronsUpDown, Check, X } from "lucide-react";
|
||||
|
||||
@ -39,30 +21,21 @@ type FieldType = ControllerRenderProps<any, "projectPhotos">;
|
||||
interface ProjectFormProps {
|
||||
onSubmit: SubmitHandler<projectSchema>;
|
||||
}
|
||||
const ProjectForm = ({
|
||||
onSubmit,
|
||||
}: ProjectFormProps & { onSubmit: SubmitHandler<projectSchema> }) => {
|
||||
const ProjectForm = ({ onSubmit }: ProjectFormProps & { onSubmit: SubmitHandler<projectSchema> }) => {
|
||||
const form = useForm<projectSchema>({
|
||||
resolver: zodResolver(projectFormSchema),
|
||||
defaultValues: {},
|
||||
});
|
||||
let supabase = createSupabaseClient();
|
||||
const [projectType, setProjectType] = useState<
|
||||
{ id: number; name: string }[]
|
||||
>([]);
|
||||
const [projectType, setProjectType] = useState<{ id: number; name: string }[]>([]);
|
||||
const [projectPitch, setProjectPitch] = useState("text");
|
||||
const [selectedImages, setSelectedImages] = useState<File[]>([]);
|
||||
const [projectPitchFile, setProjectPitchFile] = useState("");
|
||||
const [tag, setTag] = useState<{ id: number; value: string }[]>([]);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [selectedTag, setSelectedTag] = useState<
|
||||
{ id: number; value: string }[]
|
||||
>([]);
|
||||
const [selectedTag, setSelectedTag] = useState<{ id: number; value: string }[]>([]);
|
||||
|
||||
const handleFileChange = (
|
||||
event: React.ChangeEvent<HTMLInputElement>,
|
||||
field: FieldType
|
||||
) => {
|
||||
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>, field: FieldType) => {
|
||||
if (event.target.files) {
|
||||
const filesArray = Array.from(event.target.files);
|
||||
console.log("first file", filesArray);
|
||||
@ -86,9 +59,7 @@ const ProjectForm = ({
|
||||
};
|
||||
|
||||
const fetchProjectType = async () => {
|
||||
let { data: ProjectType, error } = await supabase
|
||||
.from("project_type")
|
||||
.select("id, value");
|
||||
let { data: ProjectType, error } = await supabase.from("project_type").select("id, value");
|
||||
|
||||
if (error) {
|
||||
console.error(error);
|
||||
@ -125,10 +96,7 @@ const ProjectForm = ({
|
||||
}, []);
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmit as SubmitHandler<projectSchema>)}
|
||||
className="space-y-8"
|
||||
>
|
||||
<form onSubmit={form.handleSubmit(onSubmit as SubmitHandler<projectSchema>)} className="space-y-8">
|
||||
<div className="ml-96 space-y-10">
|
||||
{/* project name */}
|
||||
<FormField
|
||||
@ -137,17 +105,10 @@ const ProjectForm = ({
|
||||
render={({ field }: { field: any }) => (
|
||||
<FormItem>
|
||||
<div className="space-y-5">
|
||||
<FormLabel className="font-bold text-lg">
|
||||
Project name
|
||||
</FormLabel>
|
||||
<FormLabel className="font-bold text-lg">Project name</FormLabel>
|
||||
<FormControl>
|
||||
<div className="flex space-x-5">
|
||||
<Input
|
||||
type="text"
|
||||
id="projectName"
|
||||
className="w-96"
|
||||
{...field}
|
||||
/>
|
||||
<Input type="text" id="projectName" className="w-96" {...field} />
|
||||
</div>
|
||||
</FormControl>
|
||||
</div>
|
||||
@ -169,9 +130,7 @@ const ProjectForm = ({
|
||||
handleFunction={(selectedValues: any) => {
|
||||
field.onChange(selectedValues.id);
|
||||
}}
|
||||
description={
|
||||
<>Please specify the primary purpose of the funds</>
|
||||
}
|
||||
description={<>Please specify the primary purpose of the funds</>}
|
||||
placeholder="Select a Project type"
|
||||
selectLabel="Project type"
|
||||
/>
|
||||
@ -189,18 +148,11 @@ const ProjectForm = ({
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<div className="mt-10 space-y-5">
|
||||
<FormLabel className="font-bold text-lg">
|
||||
Short description
|
||||
</FormLabel>
|
||||
<FormLabel className="font-bold text-lg">Short description</FormLabel>
|
||||
<div className="flex space-x-5">
|
||||
<Textarea
|
||||
id="shortDescription"
|
||||
className="w-96"
|
||||
{...field}
|
||||
/>
|
||||
<Textarea id="shortDescription" className="w-96" {...field} />
|
||||
<span className="text-[12px] text-neutral-500 self-center">
|
||||
Could you provide a brief description of your project{" "}
|
||||
<br /> in one or two sentences?
|
||||
Could you provide a brief description of your project <br /> in one or two sentences?
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -225,9 +177,7 @@ const ProjectForm = ({
|
||||
<div className="flex space-x-2 w-96">
|
||||
<Button
|
||||
type="button"
|
||||
variant={
|
||||
projectPitch === "text" ? "default" : "outline"
|
||||
}
|
||||
variant={projectPitch === "text" ? "default" : "outline"}
|
||||
onClick={() => setProjectPitch("text")}
|
||||
className="w-32 h-12 text-base"
|
||||
>
|
||||
@ -235,9 +185,7 @@ const ProjectForm = ({
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant={
|
||||
projectPitch === "file" ? "default" : "outline"
|
||||
}
|
||||
variant={projectPitch === "file" ? "default" : "outline"}
|
||||
onClick={() => setProjectPitch("file")}
|
||||
className="w-32 h-12 text-base"
|
||||
>
|
||||
@ -247,11 +195,7 @@ const ProjectForm = ({
|
||||
<div className="flex space-x-5">
|
||||
<Input
|
||||
type={projectPitch === "file" ? "file" : "text"}
|
||||
placeholder={
|
||||
projectPitch === "file"
|
||||
? "Upload your Markdown file"
|
||||
: "https:// "
|
||||
}
|
||||
placeholder={projectPitch === "file" ? "Upload your Markdown file" : "https:// "}
|
||||
accept={projectPitch === "file" ? ".md" : undefined}
|
||||
onChange={(e) => {
|
||||
const value = e.target;
|
||||
@ -266,11 +210,9 @@ const ProjectForm = ({
|
||||
/>
|
||||
|
||||
<span className="text-[12px] text-neutral-500 self-center">
|
||||
Please upload a file or paste a link to your pitch,
|
||||
which should <br />
|
||||
cover key aspects of your project: what it will do,
|
||||
what investors <br /> can expect to gain, and any
|
||||
highlights that make it stand out.
|
||||
Please upload a file or paste a link to your pitch, which should <br />
|
||||
cover key aspects of your project: what it will do, what investors <br /> can expect to gain,
|
||||
and any highlights that make it stand out.
|
||||
</span>
|
||||
</div>
|
||||
{projectPitchFile && (
|
||||
@ -302,23 +244,22 @@ const ProjectForm = ({
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<div className="mt-10 space-y-5">
|
||||
<FormLabel className="font-bold text-lg mt-10">
|
||||
Project logo
|
||||
</FormLabel>
|
||||
<Input
|
||||
type="file"
|
||||
id="projectLogo"
|
||||
className="w-96"
|
||||
accept="image/*"
|
||||
onChange={(e) => {
|
||||
const file = e.target.files?.[0];
|
||||
field.onChange(file || "");
|
||||
}}
|
||||
/>
|
||||
<span className="text-[12px] text-neutral-500 self-center">
|
||||
Please upload the logo picture that best represents your
|
||||
project.
|
||||
</span>
|
||||
<FormLabel className="font-bold text-lg mt-10">Project logo</FormLabel>
|
||||
<div className="flex space-x-5">
|
||||
<Input
|
||||
type="file"
|
||||
id="projectLogo"
|
||||
className="w-96"
|
||||
accept="image/*"
|
||||
onChange={(e) => {
|
||||
const file = e.target.files?.[0];
|
||||
field.onChange(file || "");
|
||||
}}
|
||||
/>
|
||||
<span className="text-[12px] text-neutral-500 self-center">
|
||||
Please upload the logo picture that best represents your project.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
@ -334,9 +275,7 @@ const ProjectForm = ({
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<div className="mt-10 space-y-5">
|
||||
<FormLabel className="font-bold text-lg mt-10">
|
||||
Project photos
|
||||
</FormLabel>
|
||||
<FormLabel className="font-bold text-lg mt-10">Project photos</FormLabel>
|
||||
<div className="flex space-x-5">
|
||||
<Input
|
||||
type="file"
|
||||
@ -349,16 +288,15 @@ const ProjectForm = ({
|
||||
}}
|
||||
/>
|
||||
<span className="text-[12px] text-neutral-500 self-center">
|
||||
Please upload the logo picture that best represents your
|
||||
project.
|
||||
Please upload the photo that best represents your project.
|
||||
<p className="text-red-500">
|
||||
*** It is recommended that the photo be horizontal for better presentation.
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-5 space-y-2 w-96">
|
||||
{selectedImages.map((image, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex justify-between items-center border p-2 rounded"
|
||||
>
|
||||
<div key={index} className="flex justify-between items-center border p-2 rounded">
|
||||
<span>{image.name}</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
@ -385,9 +323,7 @@ const ProjectForm = ({
|
||||
render={({ field }: { field: any }) => (
|
||||
<FormItem>
|
||||
<div className="mt-10 space-y-5">
|
||||
<FormLabel className="font-bold text-lg">
|
||||
Minimum investment
|
||||
</FormLabel>
|
||||
<FormLabel className="font-bold text-lg">Minimum investment</FormLabel>
|
||||
<FormControl>
|
||||
<div className="flex space-x-5">
|
||||
<Input
|
||||
@ -419,9 +355,7 @@ const ProjectForm = ({
|
||||
render={({ field }: { field: any }) => (
|
||||
<FormItem>
|
||||
<div className="mt-10 space-y-5">
|
||||
<FormLabel className="font-bold text-lg">
|
||||
Target investment
|
||||
</FormLabel>
|
||||
<FormLabel className="font-bold text-lg">Target investment</FormLabel>
|
||||
<FormControl>
|
||||
<div className="flex space-x-5">
|
||||
<Input
|
||||
@ -437,8 +371,8 @@ const ProjectForm = ({
|
||||
value={field.value}
|
||||
/>
|
||||
<span className="text-[12px] text-neutral-500 self-center">
|
||||
We encourage you to set a specific target investment{" "}
|
||||
<br /> amount that reflects your funding goals.
|
||||
We encourage you to set a specific target investment <br /> amount that reflects your funding
|
||||
goals.
|
||||
</span>
|
||||
</div>
|
||||
</FormControl>
|
||||
@ -457,16 +391,10 @@ const ProjectForm = ({
|
||||
<FormLabel className="font-bold text-lg">Deadline</FormLabel>
|
||||
<FormControl>
|
||||
<div className="flex space-x-5">
|
||||
<Input
|
||||
type="datetime-local"
|
||||
id="deadline"
|
||||
className="w-96"
|
||||
{...field}
|
||||
/>
|
||||
<Input type="datetime-local" id="deadline" className="w-96" {...field} />
|
||||
<span className="text-[12px] text-neutral-500 self-center">
|
||||
What is the deadline for your fundraising project?
|
||||
Setting <br /> a clear timeline can help motivate
|
||||
potential investors.
|
||||
What is the deadline for your fundraising project? Setting <br /> a clear timeline can help
|
||||
motivate potential investors.
|
||||
</span>
|
||||
</div>
|
||||
</FormControl>
|
||||
@ -493,9 +421,7 @@ const ProjectForm = ({
|
||||
aria-expanded={open}
|
||||
className="w-96 justify-between overflow-hidden text-ellipsis whitespace-nowrap"
|
||||
>
|
||||
{selectedTag.length > 0
|
||||
? selectedTag.map((t) => t.value).join(", ")
|
||||
: "Select tags..."}
|
||||
{selectedTag.length > 0 ? selectedTag.map((t) => t.value).join(", ") : "Select tags..."}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
@ -511,15 +437,11 @@ const ProjectForm = ({
|
||||
value={tag.value}
|
||||
onSelect={() => {
|
||||
setSelectedTag((prev) => {
|
||||
const exists = prev.find(
|
||||
(t) => t.id === tag.id
|
||||
);
|
||||
const exists = prev.find((t) => t.id === tag.id);
|
||||
const updatedTags = exists
|
||||
? prev.filter((t) => t.id !== tag.id)
|
||||
: [...prev, tag];
|
||||
field.onChange(
|
||||
updatedTags.map((t) => t.id)
|
||||
);
|
||||
field.onChange(updatedTags.map((t) => t.id));
|
||||
return updatedTags;
|
||||
});
|
||||
setOpen(false);
|
||||
@ -528,9 +450,7 @@ const ProjectForm = ({
|
||||
<Check
|
||||
className={cn(
|
||||
"h-4",
|
||||
selectedTag.some((t) => t.id === tag.id)
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
selectedTag.some((t) => t.id === tag.id) ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
{tag.value}
|
||||
@ -542,8 +462,7 @@ const ProjectForm = ({
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<span className="text-[12px] text-neutral-500 self-center">
|
||||
Add 1 to 5 tags that describe your project. Tags help{" "}
|
||||
<br />
|
||||
Add 1 to 5 tags that describe your project. Tags help <br />
|
||||
investors understand your focus.
|
||||
</span>
|
||||
</div>
|
||||
@ -561,9 +480,7 @@ const ProjectForm = ({
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedTag((prev) => {
|
||||
const updatedTags = prev.filter(
|
||||
(t) => t.id !== tag.id
|
||||
);
|
||||
const updatedTags = prev.filter((t) => t.id !== tag.id);
|
||||
field.onChange(updatedTags.map((t) => t.id));
|
||||
return updatedTags;
|
||||
});
|
||||
@ -579,10 +496,7 @@ const ProjectForm = ({
|
||||
/>
|
||||
</div>
|
||||
<center>
|
||||
<Button
|
||||
className="mt-12 mb-20 h-10 text-base font-bold py-6 px-5 "
|
||||
type="submit"
|
||||
>
|
||||
<Button className="mt-12 mb-20 h-10 text-base font-bold py-6 px-5 " type="submit">
|
||||
Submit application
|
||||
</Button>
|
||||
</center>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user