fix: data fetch error in deals and find page

src/app/find/page.tsx

@@ -3,27 +3,14 @@
 import { useSearchParams } from "next/navigation";
 import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
 import { useQuery } from "@supabase-cache-helpers/postgrest-react-query";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 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 extends Tables<"ProjectInvestmentDetail"> {}
-
-interface Project extends Tables<"Project"> {
-  ProjectInvestmentDetail: ProjectInvestmentDetail[];
-}
-
-interface Business extends Tables<"Business"> {
-  Projects: Project[];
-}
+import { getBusinessAndProject } from "@/lib/data/businessQuery";
 
 export default function Find() {
   const searchParams = useSearchParams();
   const query = searchParams.get("query");
-  //   const query = "neon";
 
   let supabase = createSupabaseClient();
 
@@ -31,94 +18,62 @@ export default function Find() {
     data: businesses,
     isLoading: isLoadingBusinesses,
     error: businessError,
-  } = useQuery(getBusinesses(supabase, query));
+  } = useQuery(getBusinessAndProject(supabase, query));
 
-  const businessIds = businesses?.map((b) => b.id) || [];
-  const {
-    data: projects,
-    isLoading: isLoadingProjects,
-    error: projectError,
-  } = useQuery(getProjects(supabase, businessIds), {
-    enabled: businessIds.length > 0,
-  });
-
-  const projectIds = projects?.map((p) => p.id) || [];
-  const {
-    data: tags,
-    isLoading: isLoadingTags,
-    error: tagError,
-  } = useQuery(getTags(supabase, projectIds), {
-    enabled: projectIds.length > 0,
-  });
-
-  const {
-    data: investmentCounts,
-    isLoading: isLoadingInvestments,
-    error: investmentError,
-  } = useQuery(getInvestmentCounts(supabase, projectIds), {
-    enabled: projectIds.length > 0,
-  });
-
-  // -----
-
-  const isLoading = isLoadingBusinesses || isLoadingProjects || isLoadingTags || isLoadingInvestments;
-  const error = businessError || projectError || tagError || investmentError;
-
-  const results: Business[] =
-    businesses?.map((business) => ({
-      ...business,
-      Projects:
-        projects
-          ?.filter((project) => project.businessId === business.id)
-          .map((project) => ({
-            ...project,
-            tags: tags?.filter((tag) => tag.itemId === project.id).map((tag) => tag.Tag.value) || [],
-            investmentCount: investmentCounts?.find((ic) => ic.projectId === project.id)?.count || 0,
-          })) || [],
-    })) || [];
+  const isLoading = isLoadingBusinesses;
+  const error = businessError;
 
   if (isLoading) return <p>Loading...</p>;
   if (error) return <p>Error fetching data: {error.message}</p>;
 
   return (
-    <div>
-      <div className="mt-10 mx-[15%]">
+    <div className="container max-w-screen-xl">
+      <div className="mt-4">
         <h1 className="text-4xl font-bold">Result</h1>
 
         <Separator className="my-4" />
 
-        {results.length === 0 && <p>No results found.</p>}
-        {results.length > 0 && (
-          <ul>
-            {results.map((business) => (
-              <li key={business.id}>
-                <Card className="w-full">
-                  <CardHeader>
-                    <CardTitle>{business.businessName}</CardTitle>
-                    <CardDescription>Joined Date: {new Date(business.joinedDate).toLocaleDateString()}</CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    {business.Projects.map((project) => (
-                      <ProjectCard
-                        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={[]}
-                        imageUri={null}
-                      />
-                    ))}
-                  </CardContent>
-                </Card>
-              </li>
-            ))}
-          </ul>
-        )}
-        <ReactQueryDevtools initialIsOpen={false} />
+        <Card className="w-full">
+          <CardContent className="my-2">
+            {businesses!.length === 0 && <p>No results found.</p>}
+            {businesses!.length > 0 && (
+              <ul>
+                {businesses!.map((business) => (
+                  <li key={business.business_id}>
+                    <Card className="w-full">
+                      <CardHeader>
+                        <CardTitle>{business.business_name}</CardTitle>
+                        <CardDescription>
+                          Joined Date: {new Date(business.joined_date).toLocaleDateString()}
+                        </CardDescription>
+                      </CardHeader>
+                      <CardContent className="grid grid-cols-4 gap-4">
+                        {business?.projects && business.projects.length > 0 ? (
+                          business.projects.map((project) => (
+                            <ProjectCard
+                              key={project.id}
+                              name={project.project_name}
+                              description={project.project_short_description}
+                              joinDate={project.published_time}
+                              location={business.location}
+                              minInvestment={project.min_investment}
+                              totalInvestor={project.total_investment}
+                              totalRaised={project.target_investment}
+                              tags={project.tags?.map((tag) => String(tag.tag_value)) || []}
+                              imageUri={project.card_image_url}
+                            />
+                          ))
+                        ) : (
+                          <p>No Projects</p>
+                        )}
+                      </CardContent>
+                    </Card>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </CardContent>
+        </Card>
       </div>
     </div>
   );

src/lib/data/businessQuery.ts

@@ -0,0 +1,38 @@
+import { SupabaseClient } from "@supabase/supabase-js";
+
+export const getBusinessAndProject = (client: SupabaseClient, businessName: String | null) => {
+  const query = client.from("business").select(`
+      business_id:id,
+      location,
+      business_name,
+      business_type:business_type (
+        business_type_id:id,
+        value
+      ),
+      joined_date,
+      user_id,
+      projects:project (
+        id,
+        project_name,
+        business_id,
+        published_time,
+        card_image_url,
+        project_short_description,
+        ...project_investment_detail (
+          min_investment,
+          total_investment,
+          target_investment
+        ),
+        tags:project_tag (
+          ...tag (
+            tag_value:value
+          )
+        )
+      )
+    `);
+
+  if (businessName && businessName.trim() !== "") {
+    return query.ilike("business_name", `%${businessName}%`);
+  }
+  return query;
+};

src/lib/data/investmentQuery.ts

@@ -0,0 +1,11 @@
+import { SupabaseClient } from "@supabase/supabase-js";
+
+export const getInvestmentCountsByProjectsIds = (client: SupabaseClient, projectIds: string[]) => {
+  return client
+    .from("investment_deal")
+    .select("*", {
+      count: "exact",
+      head: true,
+    })
+    .in("project_id", projectIds);
+};

src/lib/data/projectQuery.ts

@@ -1,9 +1,6 @@
 import { SupabaseClient } from "@supabase/supabase-js";
 
-async function getTopProjects(
-  client: SupabaseClient,
-  numberOfRecords: number = 4
-) {
+async function getTopProjects(client: SupabaseClient, numberOfRecords: number = 4) {
   try {
     const { data, error } = await client
       .from("project")
@@ -62,7 +59,7 @@ function getProjectDataQuery(client: SupabaseClient, projectId: number) {
         target_investment,
         investment_deadline
       ),
-      tags:item_tag!inner (
+      tags:project_tag!inner (
         ...tag!inner (
           tag_name:value
         )
@@ -88,7 +85,7 @@ async function getProjectData(client: SupabaseClient, projectId: number) {
         target_investment,
         investment_deadline
       ),
-      tags:item_tag!inner (
+      tags:project_tag!inner (
         ...tag!inner (
           tag_name:value
         )
@@ -149,7 +146,7 @@ function searchProjectsQuery(
       target_investment,
       investment_deadline
     ),
-    tags:item_tag!inner (
+    tags:project_tag!inner (
       ...tag!inner (
         tag_name:value
       )
@@ -186,7 +183,7 @@ function searchProjectsQuery(
   }
 
   if (tagsFilter) {
-    query = query.in("item_tag.tag.value", tagsFilter);
+    query = query.in("project_tag.tag.value", tagsFilter);
   }
 
   if (projectStatus) {
@@ -200,9 +197,25 @@ function searchProjectsQuery(
   return query;
 }
 
-export {
-  getProjectData,
-  getProjectDataQuery,
-  getTopProjects,
-  searchProjectsQuery,
+const getProjectByBusinessId = (client: SupabaseClient, businessIds: string[]) => {
+  return client
+    .from("project")
+    .select(
+      `
+          id,
+          project_name,
+          business_id,
+          published_time,
+          card_image_url,
+          project_short_description,
+          ...project_investment_detail (
+              min_investment,
+              total_investment,
+              target_investment
+          )
+      `
+    )
+    .in("business_id", businessIds);
 };
+
+export { getProjectData, getProjectDataQuery, getTopProjects, searchProjectsQuery, getProjectByBusinessId };

src/lib/data/query.ts

@@ -1,44 +0,0 @@
-import { SupabaseClient } from "@supabase/supabase-js";
-
-function getBusinesses(client: SupabaseClient, query: string | null) {
-  return client.from("business").select("id, business_name, joined_date").ilike(
-    "business_name",
-    `%${query}%`,
-  );
-}
-
-function getProjects(client: SupabaseClient, businessIds: string[]) {
-  return client
-    .from("project")
-    .select(
-      `
-            id,
-            project_name,
-            business_id,
-            published_time,
-            project_short_description,
-            project_investment_detail (
-                min_investment,
-                total_investment,
-                target_investment
-            )
-        `,
-    )
-    .in("business_id", businessIds);
-}
-
-function getTags(client: SupabaseClient, projectIds: string[]) {
-  return client.from("item_tag").select("item_id, tag (value)").in(
-    "item_id",
-    projectIds,
-  );
-}
-
-function getInvestmentCounts(client: SupabaseClient, projectIds: string[]) {
-  return client.from("investment_deal").select("*", {
-    count: "exact",
-    head: true,
-  }).in("project_id", projectIds);
-}
-
-export { getBusinesses, getInvestmentCounts, getProjects, getTags };

src/lib/data/tagQuery.ts

@@ -0,0 +1,5 @@
+import { SupabaseClient } from "@supabase/supabase-js";
+
+export const getTagsByProjectIds = (client: SupabaseClient, projectIds: string[]) => {
+  return client.from("project_tag").select(`item_id, ...tag (tag_value:value)`).in("item_id", projectIds);
+};