connect some detail number component to database

This commit is contained in:
Naytitorn Chaovirachot 2024-11-01 01:36:32 +07:00
parent 71d49ffd70
commit e0ddbbc50d
5 changed files with 75 additions and 45 deletions

View File

@ -13,12 +13,28 @@ import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
import FollowShareButtons from "./followShareButton";
import { getProjectData } from "@/lib/data/projectQuery";
import { getDealList } from "@/app/api/dealApi";
export default async function ProjectDealPage({ params }: { params: { id: number } }) {
const supabase = createSupabaseClient();
const { data: projectData, error: projectDataError } = await getProjectData(supabase, params.id);
if (!projectData) {
return <div>No data available</div>;
}
if (projectDataError) {
return <div>Error</div>;
}
// console.log(projectData);
const projectBusinessOwnerId = projectData.business.user_id;
// console.log(projectBusinessOwnerId);
const dealData = await getDealList(projectBusinessOwnerId);
// console.log(dealData);
const carouselData = [
{ src: "/boiler1.jpg", alt: "Boiler 1" },
{ src: "/boiler1.jpg", alt: "Boiler 1" },
@ -27,10 +43,6 @@ export default async function ProjectDealPage({ params }: { params: { id: number
{ 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">
@ -82,8 +94,9 @@ export default async function ProjectDealPage({ params }: { params: { id: number
<div id="stats" className="flex flex-col w-full mt-4 pl-12">
<div className="pl-5">
<span>
{/* #TODO use sum() instead of storing total in database */}
<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>
<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"
@ -91,15 +104,15 @@ export default async function ProjectDealPage({ params }: { params: { id: number
</span>
<span>
<h1 className="font-semibold text-4xl md:mt-8">
<p className="text-xl md:text-4xl">{projectData?.total_investment}</p>
<p className="text-xl md:text-4xl">{dealData ? dealData.length: 0}</p>
</h1>
<p className="text-sm md:text-lg"> Investors</p>
<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>
<p>Left to invest</p>
</span>
<Button className="mt-5 w-3/4 h-12">
<Link href={`/invest/${params.id}`}>Invest in {projectData?.project_name}</Link>
@ -121,8 +134,8 @@ export default async function ProjectDealPage({ params }: { params: { id: number
<Tabs.Content value="pitch">
<Card>
<CardHeader>
<CardTitle></CardTitle>
<CardDescription></CardDescription>
<CardTitle>{projectData.project_name}</CardTitle>
<CardDescription />
</CardHeader>
<CardContent>
<div className="prose prose-sm max-w-none ">

View File

@ -1,5 +1,4 @@
import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
import { getCurrentUserID } from "./userApi";
export type Deal = {
deal_amount: number;
@ -7,9 +6,14 @@ export type Deal = {
investor_id: string;
};
export async function getDealList() {
export async function getDealList(userId: string | undefined) {
if (!userId) {
// console.error("No deal list of this user was found");
return; // Exit on error
}
const supabase = createSupabaseClient();
// get id of investor who invests in the business
// get id of investors who invest in the business
const { data: dealData, error: dealError } = await supabase
.from("business")
.select(
@ -21,11 +25,11 @@ export async function getDealList() {
)
`
)
.eq("user_id", await getCurrentUserID())
.eq("user_id", userId)
.single();
if (dealError) {
alert(JSON.stringify(dealError));
// alert(JSON.stringify(dealError));
console.error("Error fetching deal list:", dealError);
return; // Exit on error
}
@ -56,13 +60,19 @@ export async function getDealList() {
return; // Exit on error
}
console.log(sortedDealData)
return sortedDealData;
}
// #TODO fix query to be non unique
export async function getRecentDealData() {
export async function getRecentDealData(userId: string | undefined) {
if (!userId) {
console.error("User not found");
return; // Exit on error
}
const supabase = createSupabaseClient();
const dealList = await getDealList();
const dealList = await getDealList(userId);
if (!dealList) {
// #TODO div error
@ -100,6 +110,8 @@ export async function getRecentDealData() {
const recentDealData = recentDealList.map((item, index) => {
return { ...item, ...recentUserData[index] };
});
return recentDealData;
}
@ -121,8 +133,6 @@ export function convertToGraphData(deals: Deal[]): Record<string, number> {
// Create a sorted graph data object
const sortedGraphData: Record<string, number> = {};
sortedKeys.forEach((key) => {
sortedGraphData[key] = graphData[key];
});
sortedKeys.forEach((key) => {sortedGraphData[key] = graphData[key]});
return sortedGraphData;
}

View File

@ -1,13 +1,15 @@
import { useEffect, useState } from "react";
import { Deal, getDealList, convertToGraphData, getRecentDealData } from "../api/dealApi";
import { RecentDealData } from "@/components/recent-funds";
import { getCurrentUserID } from "../api/userApi";
// custom hook for deal list
export function useDealList() {
const [dealList, setDealList] = useState<Deal[]>();
const fetchDealList = async () => {
setDealList(await getDealList());
// set the state to the deal list of current business user
setDealList(await getDealList(await getCurrentUserID()));
}
useEffect(() => {
@ -21,7 +23,8 @@ export function useGraphData() {
const [graphData, setGraphData] = useState({});
const fetchGraphData = async () => {
const dealList = await getDealList();
// fetch the state to the deal list of current business user
const dealList = await getDealList(await getCurrentUserID());
if (dealList) {
setGraphData(convertToGraphData(dealList));
}
@ -38,7 +41,8 @@ export function useRecentDealData() {
const [recentDealData, setRecentDealData] = useState<RecentDealData[]>();
const fetchRecentDealData = async () => {
setRecentDealData(await getRecentDealData());
// set the state to the deal list of current business user
setRecentDealData(await getRecentDealData(await getCurrentUserID()));
}
useEffect(() => {

View File

@ -18,7 +18,7 @@ const BUCKET_PITCH_APPLICATION_NAME = "project-application";
export default function ApplyProject() {
const [isSuccess, setIsSuccess] = useState(true);
const onSubmit: SubmitHandler<projectSchema> = async (data) => {
alert("มาแน้ววว");
// alert("มาแน้ววว");
await sendApplication(data);
// console.table(data);
// console.log(typeof data["projectPhotos"], data["projectPhotos"]);

View File

@ -6,28 +6,28 @@ async function getTopProjects(client: SupabaseClient, numberOfRecords: number =
.from("project")
.select(
`
id,
project_name,
business_id,
published_time,
project_short_description,
card_image_url,
project_investment_detail (
min_investment,
total_investment,
target_investment,
investment_deadline
),
project_tag (
tag (
id,
value
)
),
business (
location
id,
project_name,
business_id,
published_time,
project_short_description,
card_image_url,
project_investment_detail (
min_investment,
total_investment,
target_investment,
investment_deadline
),
project_tag (
tag (
id,
value
)
`
),
business (
location
)
`
)
.order("published_time", { ascending: false })
.limit(numberOfRecords);
@ -89,6 +89,9 @@ async function getProjectData(client: SupabaseClient, projectId: number) {
...tag!inner (
tag_name:value
)
),
business (
user_id
)
`
)