Update search result page ui

This commit is contained in:
sirin 2024-10-03 09:20:01 +07:00
parent 6c4987d6f4
commit 02e204d877

View File

@ -1,12 +1,14 @@
"use client"; "use client";
import { useSearchParams } from "next/navigation"; import { useSearchParams } from "next/navigation";
import { createClient, SupabaseClient } from "@supabase/supabase-js"; import { SupabaseClient } from "@supabase/supabase-js";
import { useEffect, useState } from "react";
import { createSupabaseClient } from "@/lib/supabase/clientComponentClient"; import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query"; import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query";
import { useQuery } from "@supabase-cache-helpers/postgrest-react-query"; import { useQuery } from "@supabase-cache-helpers/postgrest-react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { ExtendableCard } from "@/components/extendableCard";
import { Separator } from "@/components/ui/separator";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
interface ProjectInvestmentDetail { interface ProjectInvestmentDetail {
minInvestment: number; minInvestment: number;
@ -19,6 +21,8 @@ interface Project {
projectName: string; projectName: string;
businessId: string; businessId: string;
investmentCount: number; investmentCount: number;
projectShortDescription: string;
publishedTime: string;
ProjectInvestmentDetail: ProjectInvestmentDetail[]; ProjectInvestmentDetail: ProjectInvestmentDetail[];
tags: string[]; tags: string[];
} }
@ -42,6 +46,8 @@ function getProjects(client: SupabaseClient, businessIds: string[]) {
id, id,
projectName, projectName,
businessId, businessId,
publishedTime,
projectShortDescription,
ProjectInvestmentDetail ( ProjectInvestmentDetail (
minInvestment, minInvestment,
totalInvestment, totalInvestment,
@ -116,30 +122,59 @@ export default function Find() {
return ( return (
<div> <div>
<div className="mt-10 mx-[15%]">
<h1 className="text-4xl font-bold">Result</h1>
<Separator className="my-4" />
{results.length === 0 && <p>No results found.</p>} {results.length === 0 && <p>No results found.</p>}
{results.length > 0 && ( {results.length > 0 && (
<ul> <ul>
{results.map((business) => ( {results.map((business) => (
<li key={business.id}> <li key={business.id}>
<h2>{business.businessName}</h2> {/* <h2>{business.businessName}</h2>
<p>Joined Date: {new Date(business.joinedDate).toLocaleDateString()}</p> <p>Joined Date: {new Date(business.joinedDate).toLocaleDateString()}</p>
<ul>
{business.Projects.map((project) => ( {business.Projects.map((project) => (
<li key={project.id}> <ExtendableCard
<h3>{project.projectName}</h3> key={project.id}
<p>Investment Count: {project.investmentCount}</p> name={project.projectName}
<p>Min Investment: ${project.ProjectInvestmentDetail[0]?.minInvestment}</p> description={project.projectName}
<p>Total Investment: ${project.ProjectInvestmentDetail[0]?.totalInvestment}</p> joinDate={project.projectName}
<p>Target Investment: ${project.ProjectInvestmentDetail[0]?.targetInvestment}</p> location={"Bangkok"}
<p>Tags: {project.tags.join(", ")}</p> minInvestment={project.ProjectInvestmentDetail[0]?.minInvestment}
</li> totalInvestor={project.ProjectInvestmentDetail[0]?.totalInvestment}
totalRaised={project.ProjectInvestmentDetail[0]?.targetInvestment}
tags={null}
/>
))} */}
<Card className="w-full">
<CardHeader>
<CardTitle>{business.businessName}</CardTitle>
<CardDescription>Joined Date: {new Date(business.joinedDate).toLocaleDateString()}</CardDescription>
</CardHeader>
<CardContent>
{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}
/>
))} ))}
</ul> </CardContent>
</Card>
</li> </li>
))} ))}
</ul> </ul>
)} )}
<ReactQueryDevtools initialIsOpen={false} /> <ReactQueryDevtools initialIsOpen={false} />
</div> </div>
</div>
); );
} }