refactor: extract supabase query + use projectCard instead of extendableCard

src/app/deals/page.tsx

@@ -3,7 +3,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { useState } from "react";
 import { Clock3Icon, MessageSquareIcon, UserIcon, UsersIcon } from "lucide-react";
 import { Separator } from "@/components/ui/separator";
-import { ExtendableCard } from "@/components/extendableCard";
+import { ProjectCard } from "@/components/projectCard";
 
 export default function Deals() {
   const [postAtFilter, setPostAtFilter] = useState("");
@@ -111,7 +111,7 @@ export default function Deals() {
       {/* Block for all the deals */}
       <div className="mt-10 grid grid-cols-3 gap-4">
         {filteredData.map((item, index) => (
-          <ExtendableCard
+          <ProjectCard
             key={index}
             name={item.name}
             description={item.description}

src/app/find/page.tsx

@@ -1,71 +1,25 @@
 "use client";
 
 import { useSearchParams } from "next/navigation";
-import { SupabaseClient } from "@supabase/supabase-js";
 import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
-import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query";
 import { useQuery } from "@supabase-cache-helpers/postgrest-react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { ExtendableCard } from "@/components/extendableCard";
+import { ProjectCard } from "@/components/projectCard";
 import { Separator } from "@/components/ui/separator";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { getBusinesses, getInvestmentCounts, getProjects, getTags } from "@/lib/data/query";
+import { Tables } from "@/types/database.types";
 
-interface ProjectInvestmentDetail {
-  minInvestment: number;
-  totalInvestment: number;
-  targetInvestment: number;
-}
+interface ProjectInvestmentDetail extends Tables<"ProjectInvestmentDetail"> {}
 
-interface Project {
-  id: string;
-  projectName: string;
-  businessId: string;
-  investmentCount: number;
-  projectShortDescription: string;
-  publishedTime: string;
+interface Project extends Tables<"Project"> {
   ProjectInvestmentDetail: ProjectInvestmentDetail[];
-  tags: string[];
 }
 
-interface Business {
-  id: string;
-  businessName: string;
-  joinedDate: string;
+interface Business extends Tables<"Business"> {
   Projects: Project[];
 }
 
-function getBusinesses(client: SupabaseClient, query: string | null) {
-  return client.from("Business").select("id, businessName, joinedDate").ilike("businessName", `%${query}%`);
-}
-
-function getProjects(client: SupabaseClient, businessIds: string[]) {
-  return client
-    .from("Project")
-    .select(
-      `
-            id,
-            projectName,
-            businessId,
-            publishedTime,
-            projectShortDescription,
-            ProjectInvestmentDetail (
-                minInvestment,
-                totalInvestment,
-                targetInvestment
-            )
-        `
-    )
-    .in("businessId", businessIds);
-}
-
-function getTags(client: SupabaseClient, projectIds: string[]) {
-  return client.from("ItemTag").select("itemId, Tag (value)").in("itemId", projectIds);
-}
-
-function getInvestmentCounts(client: SupabaseClient, projectIds: string[]) {
-  return client.from("InvestmentDeal").select("*", { count: "exact", head: true }).in("projectId", projectIds);
-}
-
 export default function Find() {
   const searchParams = useSearchParams();
   const query = searchParams.get("query");
@@ -132,22 +86,6 @@ export default function Find() {
           <ul>
             {results.map((business) => (
               <li key={business.id}>
-                {/* <h2>{business.businessName}</h2>
-                <p>Joined Date: {new Date(business.joinedDate).toLocaleDateString()}</p>
-                {business.Projects.map((project) => (
-                  <ExtendableCard
-                    key={project.id}
-                    name={project.projectName}
-                    description={project.projectName}
-                    joinDate={project.projectName}
-                    location={"Bangkok"}
-                    minInvestment={project.ProjectInvestmentDetail[0]?.minInvestment}
-                    totalInvestor={project.ProjectInvestmentDetail[0]?.totalInvestment}
-                    totalRaised={project.ProjectInvestmentDetail[0]?.targetInvestment}
-                    tags={null}
-                  />
-                ))} */}
-
                 <Card className="w-full">
                   <CardHeader>
                     <CardTitle>{business.businessName}</CardTitle>
@@ -155,7 +93,7 @@ export default function Find() {
                   </CardHeader>
                   <CardContent>
                     {business.Projects.map((project) => (
-                      <ExtendableCard
+                      <ProjectCard
                         key={project.id}
                         name={project.projectName}
                         description={project.projectName}

src/app/page.tsx

@@ -3,7 +3,7 @@ import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
-import { ExtendableCard } from "@/components/extendableCard";
+import { ProjectCard } from "@/components/projectCard";
 
 export default function Home() {
   return (
@@ -83,7 +83,7 @@ export default function Home() {
           </span>
           <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
             <Link href={"/overview"}>
-              <ExtendableCard
+              <ProjectCard
                 name={"NVDA"}
                 description={"Founded in 1993, NVIDIA is a key innovator of computer graphics and AI technology"}
                 joinDate={"December 2021"}
@@ -94,7 +94,7 @@ export default function Home() {
                 totalRaised={9000000}
               />
             </Link>
-            <ExtendableCard
+            <ProjectCard
               name={"Apple Inc."}
               description={
                 "Founded in 1976, Apple Inc. is a leading innovator in consumer electronics, software, and online services, known for products like the iPhone, MacBook, and the App Store."
@@ -106,7 +106,7 @@ export default function Home() {
               totalInvestor={58400}
               totalRaised={9000000}
             />
-            <ExtendableCard
+            <ProjectCard
               name={"Google LLC"}
               description={
                 "Founded in 1998, Google LLC specializes in internet-related services and products, including search engines, online advertising, cloud computing, and the Android operating system."
@@ -118,7 +118,7 @@ export default function Home() {
               totalInvestor={5000}
               totalRaised={1500000000}
             />
-            <ExtendableCard
+            <ProjectCard
               name={"Microsoft Corporation"}
               description={"Microsoft Corporation is a multinational technology company."}
               joinDate={"January 2018"}

src/components/projectCard.tsx

@@ -8,7 +8,7 @@ interface XMap {
   [tag: string]: string;
 }
 
-interface ExtendableCardProps {
+interface ProjectCardProps {
   name: string;
   description: string;
   joinDate: string;
@@ -21,7 +21,7 @@ interface ExtendableCardProps {
   className?: string;
 }
 
-export function ExtendableCard(props: ExtendableCardProps) {
+export function ProjectCard(props: ProjectCardProps) {
   return (
     <div
       className={cn(

src/lib/data/query.ts

@@ -0,0 +1,35 @@
+import { SupabaseClient } from "@supabase/supabase-js";
+
+function getBusinesses(client: SupabaseClient, query: string | null) {
+  return client.from("Business").select("id, businessName, joinedDate").ilike("businessName", `%${query}%`);
+}
+
+function getProjects(client: SupabaseClient, businessIds: string[]) {
+  return client
+    .from("Project")
+    .select(
+      `
+            id,
+            projectName,
+            businessId,
+            publishedTime,
+            projectShortDescription,
+            ProjectInvestmentDetail (
+                minInvestment,
+                totalInvestment,
+                targetInvestment
+            )
+        `
+    )
+    .in("businessId", businessIds);
+}
+
+function getTags(client: SupabaseClient, projectIds: string[]) {
+  return client.from("ItemTag").select("itemId, Tag (value)").in("itemId", projectIds);
+}
+
+function getInvestmentCounts(client: SupabaseClient, projectIds: string[]) {
+  return client.from("InvestmentDeal").select("*", { count: "exact", head: true }).in("projectId", projectIds);
+}
+
+export { getBusinesses, getProjects, getTags, getInvestmentCounts };