feat: dynamically load some data for project deals page

src/app/deals/[id]/followShareButton.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { ShareIcon, StarIcon } from "lucide-react";
+import { redirect } from "next/navigation";
+import useSession from "@/lib/supabase/useSession";
+import toast from "react-hot-toast";
+
+const FollowShareButtons = () => {
+  const [progress, setProgress] = useState(0);
+  const [tab, setTab] = useState("Pitch");
+  const { session, loading } = useSession();
+  const user = session?.user;
+  const [sessionLoaded, setSessionLoaded] = useState(false);
+  const [isFollow, setIsFollow] = useState(false);
+
+  useEffect(() => {
+    if (!loading) {
+      setSessionLoaded(true);
+    }
+  }, [loading]);
+
+  const handleShare = () => {
+    const currentUrl = window.location.href;
+    if (document.hasFocus()) {
+      navigator.clipboard.writeText(currentUrl).then(() => {
+        toast.success("URL copied to clipboard!");
+      });
+    }
+  };
+  const handleFollow = () => {
+    if (user) {
+      setIsFollow((prevState) => !prevState);
+    } else {
+      redirect("/login");
+    }
+  };
+
+  return (
+    <div className="grid grid-cols-2 gap-5 justify-self-end ">
+      <div className="mt-2 cursor-pointer" onClick={handleFollow}>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <StarIcon id="follow" fill={isFollow ? "#FFFF00" : "#fff"} strokeWidth={2} />
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Follow NVIDIA</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+      <div onClick={handleShare} className="cursor-pointer mt-2">
+        <ShareIcon />
+      </div>
+    </div>
+  );
+};
+
+export default FollowShareButtons;

src/app/deals/[id]/page.tsx

@@ -0,0 +1,162 @@
+import Image from "next/image";
+import Link from "next/link";
+
+import ReactMarkdown from "react-markdown";
+
+import * as Tabs from "@radix-ui/react-tabs";
+import { Button } from "@/components/ui/button";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { Separator } from "@/components/ui/separator";
+import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
+import FollowShareButtons from "./followShareButton";
+
+import { getProjectData } from "@/lib/data/projectQuery";
+
+export default async function ProjectDealPage({ params }: { params: { id: number } }) {
+  const supabase = createSupabaseClient();
+
+  const { data: projectData, error: projectDataError } = await getProjectData(supabase, params.id);
+
+  const carouselData = [
+    { src: "/boiler1.jpg", alt: "Boiler 1" },
+    { src: "/boiler1.jpg", alt: "Boiler 1" },
+    { src: "/boiler1.jpg", alt: "Boiler 1" },
+    { src: "/boiler1.jpg", alt: "Boiler 1" },
+    { src: "/boiler1.jpg", alt: "Boiler 1" },
+  ];
+
+  if (projectDataError) {
+    return <div>Error</div>;
+  }
+
+  return (
+    <div className="container max-w-screen-xl my-5">
+      <div className="flex flex-col gap-y-10">
+        <div id="content">
+          {/* Name, star and share button packed */}
+          <div id="header" className="flex flex-col">
+            <div className="flex justify-between">
+              <span className="flex">
+                <Image src="/logo.svg" alt="logo" width={50} height={50} className="sm:scale-75" />
+                <h1 className="mt-3 font-bold  text-lg md:text-3xl">{projectData?.project_name}</h1>
+              </span>
+              <FollowShareButtons />
+            </div>
+            {/* end of pack */}
+            <p className="mt-2 sm:text-sm">{projectData?.project_short_description}</p>
+            <div className="flex flex-wrap mt-3">
+              {projectData?.tags.map((tag, index) => (
+                <span key={index} className="text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1 mx-1 mb-1">
+                  {tag.tag_name}
+                </span>
+              ))}
+            </div>
+          </div>
+          <div id="sub-content" className="flex flex-row mt-5">
+            {/* image carousel */}
+            <div id="image-corousel" className="shrink-0 w-[700px] flex flex-col">
+              <Carousel className="w-full h-full ml-1">
+                <CarouselContent className="flex h-full">
+                  {carouselData.map((item, index) => (
+                    <CarouselItem key={index}>
+                      <Image src={item.src} alt={item.alt} width={700} height={400} className="rounded-lg" />
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>
+                <CarouselPrevious />
+                <CarouselNext />
+              </Carousel>
+
+              <Carousel className="w-full ml-1 h-[100px]">
+                <CarouselContent className="flex space-x-1">
+                  {carouselData.map((item, index) => (
+                    <CarouselItem key={index} className="flex">
+                      <Image src={item.src} alt={item.alt} width={200} height={100} className="rounded-lg basis-0" />
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>
+              </Carousel>
+            </div>
+            <div id="stats" className="flex flex-col w-full mt-4 pl-12">
+              <div className="pl-5">
+                <span>
+                  <h1 className="font-semibold text-xl md:text-4xl mt-8">${projectData?.total_investment}</h1>
+                  <p className="text-sm md:text-lg"> 5% raised of \$5M max goal</p>
+                  <Progress
+                    value={projectData?.total_investment / projectData?.target_investment}
+                    className="w-[60%] h-3 mt-3"
+                  />
+                </span>
+                <span>
+                  <h1 className="font-semibold text-4xl md:mt-8">
+                    <p className="text-xl md:text-4xl">{projectData?.total_investment}</p>
+                  </h1>
+                  <p className="text-sm md:text-lg"> Investors</p>
+                </span>
+                <Separator decorative className="mt-3 w-3/4 ml-5" />
+                <span>
+                  <h1 className="font-semibold text-xl md:text-4xl mt-8 ml-5"></h1>
+                  <p className="text-xl md:text-4xl">1 hours</p>
+                  <p> Left to invest</p>
+                </span>
+                <Button className="mt-5 w-3/4 h-12">
+                  <Link href="/invest">Invest in NVIDIA</Link>
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* menu */}
+        <div id="deck">
+          <div className="flex w-fit">
+            <Tabs.Root defaultValue="pitch">
+              <Tabs.List className="list-none flex gap-10 text-lg md:text-xl">
+                <Tabs.Trigger value="pitch">Pitch</Tabs.Trigger>
+                <Tabs.Trigger value="general">General Data</Tabs.Trigger>
+                <Tabs.Trigger value="update">Updates</Tabs.Trigger>
+              </Tabs.List>
+              <Separator className="mb-4 mt-2 w-full border-1" />
+              <Tabs.Content value="pitch">
+                <Card>
+                  <CardHeader>
+                    <CardTitle></CardTitle>
+                    <CardDescription></CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="prose prose-sm max-w-none">
+                      <ReactMarkdown>{projectData?.project_description || "No pitch available."}</ReactMarkdown>
+                    </div>
+                  </CardContent>
+                </Card>
+              </Tabs.Content>
+              <Tabs.Content value="general">
+                <Card>
+                  <CardHeader>
+                    <CardTitle>general</CardTitle>
+                    <CardDescription>general Description</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <p>general Content</p>
+                  </CardContent>
+                </Card>
+              </Tabs.Content>
+              <Tabs.Content value="update">
+                <Card>
+                  <CardHeader>
+                    <CardTitle>update</CardTitle>
+                    <CardDescription>update Description</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <p>update Content</p>
+                  </CardContent>
+                </Card>
+              </Tabs.Content>
+            </Tabs.Root>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/ui/carousel.tsx

@@ -1,124 +1,108 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import useEmblaCarousel, {
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
-  type UseEmblaCarouselType,
+import { ArrowLeft, ArrowRight } from "lucide-react";
-} from "embla-carousel-react"
-import { ArrowLeft, ArrowRight } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
 
-type CarouselApi = UseEmblaCarouselType[1]
+type CarouselApi = UseEmblaCarouselType[1];
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
-type CarouselOptions = UseCarouselParameters[0]
+type CarouselOptions = UseCarouselParameters[0];
-type CarouselPlugin = UseCarouselParameters[1]
+type CarouselPlugin = UseCarouselParameters[1];
 
 type CarouselProps = {
-  opts?: CarouselOptions
+  opts?: CarouselOptions;
-  plugins?: CarouselPlugin
+  plugins?: CarouselPlugin;
-  orientation?: "horizontal" | "vertical"
+  orientation?: "horizontal" | "vertical";
-  setApi?: (api: CarouselApi) => void
+  setApi?: (api: CarouselApi) => void;
-}
+};
 
 type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
-  api: ReturnType<typeof useEmblaCarousel>[1]
+  api: ReturnType<typeof useEmblaCarousel>[1];
-  scrollPrev: () => void
+  scrollPrev: () => void;
-  scrollNext: () => void
+  scrollNext: () => void;
-  canScrollPrev: boolean
+  canScrollPrev: boolean;
-  canScrollNext: boolean
+  canScrollNext: boolean;
-} & CarouselProps
+} & CarouselProps;
 
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
 
 function useCarousel() {
-  const context = React.useContext(CarouselContext)
+  const context = React.useContext(CarouselContext);
 
   if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
+    throw new Error("useCarousel must be used within a <Carousel />");
   }
 
-  return context
+  return context;
 }
 
-const Carousel = React.forwardRef<
+const Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(
-  HTMLDivElement,
+  ({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
-  (
-    {
-      orientation = "horizontal",
-      opts,
-      setApi,
-      plugins,
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
     const [carouselRef, api] = useEmblaCarousel(
       {
         ...opts,
         axis: orientation === "horizontal" ? "x" : "y",
       },
       plugins
-    )
+    );
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-    const [canScrollNext, setCanScrollNext] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
 
     const onSelect = React.useCallback((api: CarouselApi) => {
       if (!api) {
-        return
+        return;
       }
 
-      setCanScrollPrev(api.canScrollPrev())
+      setCanScrollPrev(api.canScrollPrev());
-      setCanScrollNext(api.canScrollNext())
+      setCanScrollNext(api.canScrollNext());
-    }, [])
+    }, []);
 
     const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev()
+      api?.scrollPrev();
-    }, [api])
+    }, [api]);
 
     const scrollNext = React.useCallback(() => {
-      api?.scrollNext()
+      api?.scrollNext();
-    }, [api])
+    }, [api]);
 
     const handleKeyDown = React.useCallback(
       (event: React.KeyboardEvent<HTMLDivElement>) => {
         if (event.key === "ArrowLeft") {
-          event.preventDefault()
+          event.preventDefault();
-          scrollPrev()
+          scrollPrev();
         } else if (event.key === "ArrowRight") {
-          event.preventDefault()
+          event.preventDefault();
-          scrollNext()
+          scrollNext();
         }
       },
       [scrollPrev, scrollNext]
-    )
+    );
 
     React.useEffect(() => {
       if (!api || !setApi) {
-        return
+        return;
       }
 
-      setApi(api)
+      setApi(api);
-    }, [api, setApi])
+    }, [api, setApi]);
 
     React.useEffect(() => {
       if (!api) {
-        return
+        return;
       }
 
-      onSelect(api)
+      onSelect(api);
-      api.on("reInit", onSelect)
+      api.on("reInit", onSelect);
-      api.on("select", onSelect)
+      api.on("select", onSelect);
 
       return () => {
-        api?.off("select", onSelect)
+        api?.off("select", onSelect);
-      }
+      };
-    }, [api, onSelect])
+    }, [api, onSelect]);
 
     return (
       <CarouselContext.Provider
@@ -126,79 +110,64 @@ const Carousel = React.forwardRef<
           carouselRef,
           api: api,
           opts,
-          orientation:
+          orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
           scrollPrev,
           scrollNext,
           canScrollPrev,
           canScrollNext,
-        }}
+        }}>
-      >
         <div
           ref={ref}
           onKeyDownCapture={handleKeyDown}
           className={cn("relative", className)}
           role="region"
           aria-roledescription="carousel"
-          {...props}
+          {...props}>
-        >
           {children}
         </div>
       </CarouselContext.Provider>
-    )
+    );
   }
-)
+);
-Carousel.displayName = "Carousel"
+Carousel.displayName = "Carousel";
 
-const CarouselContent = React.forwardRef<
+const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  HTMLDivElement,
+  ({ className, ...props }, ref) => {
-  React.HTMLAttributes<HTMLDivElement>
+    const { carouselRef, orientation } = useCarousel();
->(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel()
 
     return (
       <div ref={carouselRef} className="overflow-hidden">
         <div
           ref={ref}
-        className={cn(
+          className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
-        )}
           {...props}
         />
       </div>
-  )
+    );
-})
+  }
-CarouselContent.displayName = "CarouselContent"
+);
+CarouselContent.displayName = "CarouselContent";
 
-const CarouselItem = React.forwardRef<
+const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  HTMLDivElement,
+  ({ className, ...props }, ref) => {
-  React.HTMLAttributes<HTMLDivElement>
+    const { orientation } = useCarousel();
->(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel()
 
     return (
       <div
         ref={ref}
         role="group"
         aria-roledescription="slide"
-      className={cn(
+        className={cn("min-w-0 shrink-0 grow-0", orientation === "horizontal" ? "pl-4" : "pt-4", className)}
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      )}
         {...props}
       />
-  )
+    );
-})
+  }
-CarouselItem.displayName = "CarouselItem"
+);
+CarouselItem.displayName = "CarouselItem";
 
-const CarouselPrevious = React.forwardRef<
+const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
-  HTMLButtonElement,
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  React.ComponentProps<typeof Button>
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
 
     return (
       <Button
@@ -214,20 +183,18 @@ const CarouselPrevious = React.forwardRef<
         )}
         disabled={!canScrollPrev}
         onClick={scrollPrev}
-      {...props}
+        {...props}>
-    >
         <ArrowLeft className="h-4 w-4" />
         <span className="sr-only">Previous slide</span>
       </Button>
-  )
+    );
-})
+  }
-CarouselPrevious.displayName = "CarouselPrevious"
+);
+CarouselPrevious.displayName = "CarouselPrevious";
 
-const CarouselNext = React.forwardRef<
+const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
-  HTMLButtonElement,
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  React.ComponentProps<typeof Button>
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
 
     return (
       <Button
@@ -243,20 +210,13 @@ const CarouselNext = React.forwardRef<
         )}
         disabled={!canScrollNext}
         onClick={scrollNext}
-      {...props}
+        {...props}>
-    >
         <ArrowRight className="h-4 w-4" />
         <span className="sr-only">Next slide</span>
       </Button>
-  )
+    );
-})
-CarouselNext.displayName = "CarouselNext"
-
-export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
   }
+);
+CarouselNext.displayName = "CarouselNext";
+
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };

src/lib/data/projectQuery.ts

@@ -44,54 +44,29 @@ async function getTopProjects(client: SupabaseClient, numberOfRecords: number =
     }
   }
 
-async function searchProjects(client: SupabaseClient, searchTerm: string | null, page: number = 1, pageSize: number = 4) {
+async function getProjectData(client: SupabaseClient, projectId: number) {
-  const start = (page - 1) * pageSize;
+  const query = client.from("Project").select(
-  const end = start + pageSize - 1;
-
-  try {
-    let query = client.from("Project").select(
     `
-        id,
+      project_name:projectName,
-        projectName,
+      project_short_description:projectShortDescription,
-        businessId,
+      project_description:projectDescription,
-        publishedTime,
+      published_time:publishedTime,
-        projectShortDescription,
+      ...ProjectInvestmentDetail!inner (
-        cardImage,
+        min_investment:minInvestment,
-        ProjectInvestmentDetail (
+        total_investment:totalInvestment,
-          minInvestment,
+        target_investment:targetInvestment,
-          totalInvestment,
+        investment_deadline:investmentDeadline
-          targetInvestment,
-          investmentDeadline
       ),
-        ItemTag (
+      tags:ItemTag!inner (
-          Tag (
+        ...Tag!inner (
-            id,
+          tag_name:value
-            value
         )
-        ),
-        Business (
-          location
       )
     `
-    ).order("publishedTime", { ascending: false })
+  ).eq("id", projectId).single()
-      .range(start, end);
-
-    if (searchTerm) {
-      query = query.ilike('projectName', `%${searchTerm}%`);
-    }
 
   const {data, error} = await query;
-
+  return { data, error }
-    if (error) {
-      console.error("Error searching projects:", error.message);
-      return { data: null, error: error.message };
-    }
-
-    return { data, error: null };
-  } catch (err) {
-    console.error("Unexpected error:", err);
-    return { data: null, error: "An unexpected error occurred." };
-  }
 }
 
 export interface FilterParams {
@@ -178,5 +153,5 @@ function searchProjectsQuery(client: SupabaseClient, {searchTerm, tagsFilter, pr
 }
 
 
-export { getTopProjects, searchProjects, searchProjectsQuery };
+export { getTopProjects, getProjectData, searchProjectsQuery };