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 useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { ArrowLeft, ArrowRight } from "lucide-react"
+import * as React from "react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
 
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
 
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
 
 type CarouselProps = {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical"
-  setApi?: (api: CarouselApi) => void
-}
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+};
 
 type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & 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<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
-  (
-    {
-      orientation = "horizontal",
-      opts,
-      setApi,
-      plugins,
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
+const Carousel = React.forwardRef<HTMLDivElement, 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 [canScrollNext, setCanScrollNext] = React.useState(false)
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
 
     const onSelect = React.useCallback((api: CarouselApi) => {
       if (!api) {
-        return
+        return;
       }
 
-      setCanScrollPrev(api.canScrollPrev())
-      setCanScrollNext(api.canScrollNext())
-    }, [])
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    }, []);
 
     const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev()
-    }, [api])
+      api?.scrollPrev();
+    }, [api]);
 
     const scrollNext = React.useCallback(() => {
-      api?.scrollNext()
-    }, [api])
+      api?.scrollNext();
+    }, [api]);
 
     const handleKeyDown = React.useCallback(
       (event: React.KeyboardEvent<HTMLDivElement>) => {
         if (event.key === "ArrowLeft") {
-          event.preventDefault()
-          scrollPrev()
+          event.preventDefault();
+          scrollPrev();
         } else if (event.key === "ArrowRight") {
-          event.preventDefault()
-          scrollNext()
+          event.preventDefault();
+          scrollNext();
         }
       },
       [scrollPrev, scrollNext]
-    )
+    );
 
     React.useEffect(() => {
       if (!api || !setApi) {
-        return
+        return;
       }
 
-      setApi(api)
-    }, [api, setApi])
+      setApi(api);
+    }, [api, setApi]);
 
     React.useEffect(() => {
       if (!api) {
-        return
+        return;
       }
 
-      onSelect(api)
-      api.on("reInit", onSelect)
-      api.on("select", onSelect)
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
 
       return () => {
-        api?.off("select", onSelect)
-      }
-    }, [api, onSelect])
+        api?.off("select", onSelect);
+      };
+    }, [api, onSelect]);
 
     return (
       <CarouselContext.Provider
@@ -126,137 +110,113 @@ const Carousel = React.forwardRef<
           carouselRef,
           api: api,
           opts,
-          orientation:
-            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          orientation: 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<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel()
+const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel();
 
-  return (
-    <div ref={carouselRef} className="overflow-hidden">
+    return (
+      <div ref={carouselRef} className="overflow-hidden">
+        <div
+          ref={ref}
+          className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+CarouselContent.displayName = "CarouselContent";
+
+const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useCarousel();
+
+    return (
       <div
         ref={ref}
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
-        )}
+        role="group"
+        aria-roledescription="slide"
+        className={cn("min-w-0 shrink-0 grow-0", orientation === "horizontal" ? "pl-4" : "pt-4", className)}
         {...props}
       />
-    </div>
-  )
-})
-CarouselContent.displayName = "CarouselContent"
+    );
+  }
+);
+CarouselItem.displayName = "CarouselItem";
 
-const CarouselItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel()
+const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 
-  return (
-    <div
-      ref={ref}
-      role="group"
-      aria-roledescription="slide"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-CarouselItem.displayName = "CarouselItem"
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute  h-8 w-8 rounded-full",
+          orientation === "horizontal"
+            ? "-left-12 top-1/2 -translate-y-1/2"
+            : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        )}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        {...props}>
+        <ArrowLeft className="h-4 w-4" />
+        <span className="sr-only">Previous slide</span>
+      </Button>
+    );
+  }
+);
+CarouselPrevious.displayName = "CarouselPrevious";
 
-const CarouselPrevious = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
 
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute  h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-left-12 top-1/2 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeft className="h-4 w-4" />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  )
-})
-CarouselPrevious.displayName = "CarouselPrevious"
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute h-8 w-8 rounded-full",
+          orientation === "horizontal"
+            ? "-right-12 top-1/2 -translate-y-1/2"
+            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        )}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        {...props}>
+        <ArrowRight className="h-4 w-4" />
+        <span className="sr-only">Next slide</span>
+      </Button>
+    );
+  }
+);
+CarouselNext.displayName = "CarouselNext";
 
-const CarouselNext = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
-
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...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,
-}
+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) {
-  const start = (page - 1) * pageSize;
-  const end = start + pageSize - 1;
-
-  try {
-    let query = client.from("Project").select(
-      `
-        id,
-        projectName,
-        businessId,
-        publishedTime,
-        projectShortDescription,
-        cardImage,
-        ProjectInvestmentDetail (
-          minInvestment,
-          totalInvestment,
-          targetInvestment,
-          investmentDeadline
-        ),
-        ItemTag (
-          Tag (
-            id,
-            value
-          )
-        ),
-        Business (
-          location
+async function getProjectData(client: SupabaseClient, projectId: number) {
+  const query = client.from("Project").select(
+    `
+      project_name:projectName,
+      project_short_description:projectShortDescription,
+      project_description:projectDescription,
+      published_time:publishedTime,
+      ...ProjectInvestmentDetail!inner (
+        min_investment:minInvestment,
+        total_investment:totalInvestment,
+        target_investment:targetInvestment,
+        investment_deadline:investmentDeadline
+      ),
+      tags:ItemTag!inner (
+        ...Tag!inner (
+          tag_name:value
         )
-      `
-    ).order("publishedTime", { ascending: false })
-      .range(start, end);
+      )
+    `
+  ).eq("id", projectId).single()
 
-    if (searchTerm) {
-      query = query.ilike('projectName', `%${searchTerm}%`);
-    }
-
-    const { data, error } = await query;
-
-    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." };
-  }
+  const {data, error} = await query;
+  return { data, error }
 }
 
 export interface FilterParams {
@@ -178,5 +153,5 @@ function searchProjectsQuery(client: SupabaseClient, {searchTerm, tagsFilter, pr
 }
 
 
-export { getTopProjects, searchProjects, searchProjectsQuery };
+export { getTopProjects, getProjectData, searchProjectsQuery };