From 070077f7f3c64d01ac01661ff095393ea3ce457c Mon Sep 17 00:00:00 2001 From: Naytitorn Chaovirachot Date: Mon, 21 Oct 2024 17:36:31 +0700 Subject: [PATCH] refactor some json query + restructure recent funds json + make amount show in recent funds tab --- src/app/api/dealApi.ts | 89 ++++++++++++++++++++------------- src/app/dashboard/hook.ts | 6 +-- src/app/dashboard/page.tsx | 9 ++-- src/components/recent-funds.tsx | 38 ++++++++------ 4 files changed, 83 insertions(+), 59 deletions(-) diff --git a/src/app/api/dealApi.ts b/src/app/api/dealApi.ts index d4d88af..3c25e4e 100644 --- a/src/app/api/dealApi.ts +++ b/src/app/api/dealApi.ts @@ -7,20 +7,14 @@ export type Deal = { investor_id: string; }; -// Sort the dealList by created_time in descending order -export function byCreatedTimeDesc(a: Deal, b: Deal) { - return new Date(b.created_time).getTime() - new Date(a.created_time).getTime(); -} - export async function getDealList() { const supabase = createSupabaseClient(); - const { data: dealData, error } = await supabase + // get id of investor who invests in the business + const { data: dealData, error: dealError } = await supabase .from('business') .select(` project ( investment_deal ( - deal_amount, - created_time, investor_id ) ) @@ -28,9 +22,9 @@ export async function getDealList() { .eq('user_id', await getCurrentUserID()) .single(); - if (error) { - alert(JSON.stringify(error)); - console.error('Error fetching deal list:', error); + if (dealError) { + alert(JSON.stringify(dealError)); + console.error('Error fetching deal list:', dealError); return; // Exit on error } @@ -39,48 +33,71 @@ export async function getDealList() { return; // Exit if there's no data } - const flattenedDeals = dealData.project.flatMap((proj) => - proj.investment_deal.map((deal) => ({ - deal_amount: deal.deal_amount, - created_time: deal.created_time, - investor_id: deal.investor_id, - })) - ) + const investorIdList = dealData.project[0].investment_deal.map(deal => deal.investor_id); - // Check for empty dealList - if (!flattenedDeals.length) { - alert("No deal list available"); - return; // Exit if there's no data + // get investment_deal data then sort by created_time + const { data: sortedDealData, error: sortedDealDataError } = await supabase + .from("investment_deal") + .select(` + deal_amount, + created_time, + investor_id + `) + .in('investor_id', investorIdList) + .order('created_time', { ascending: false }) + + if (sortedDealDataError) { + alert(JSON.stringify(sortedDealDataError)); + console.error('Error sorting deal list:', sortedDealDataError); + return; // Exit on error } - return flattenedDeals.sort(byCreatedTimeDesc); + + return sortedDealData; }; +// #TODO fix query to be non unique export async function getRecentDealData() { const supabase = createSupabaseClient(); - let dealList = await getDealList(); + const dealList = await getDealList(); if (!dealList) { - // #TODO div no deals available? + // #TODO div error + console.error("No deal available"); return; } - - dealList = dealList.slice(0, 5) - const investorIdList: string[] = dealList.map(deal => deal.investor_id); - const { data: userData, error } = await supabase + // get 5 most recent investor + const recentDealList = dealList.slice(0, 5); + const recentInvestorIdList = recentDealList.map(deal => deal.investor_id); + + const { data: recentUserData, error: recentUserError } = await supabase .from("profiles") - .select("username, avatar_url") // #TODO add email - .in("id", investorIdList); // Filter by investor_id + .select(` + username, + avatar_url + `) + .in('id', recentInvestorIdList); - if (error) { - // Handle the error and return a meaningful message - console.error("Error fetching usernames and avatars:", error); + if (!recentUserData) { + alert("No recent users available"); + return; } - alert(JSON.stringify(userData)); - return userData || []; + if (recentUserError) { + // Handle the error and return a meaningful message + console.error("Error fetching profiles:", recentUserError); + return; + // #TODO div error + } + + // combine two arrays + const recentDealData = recentDealList.map((item, index) => { + return { ...item, ...recentUserData[index] }; + }); + return recentDealData; } +// #TODO refactor using supabase query instead of manual // #TODO move to util export function convertToGraphData(deals: Deal[]): Record { // group by year & month diff --git a/src/app/dashboard/hook.ts b/src/app/dashboard/hook.ts index 82b3793..e2a7ccf 100644 --- a/src/app/dashboard/hook.ts +++ b/src/app/dashboard/hook.ts @@ -1,8 +1,6 @@ import { useEffect, useState } from "react"; import { Deal, getDealList, convertToGraphData, getRecentDealData } from "../api/dealApi"; - - -type RecentDealData = { username: string; avatar_url: string }[] +import { RecentDealData } from "@/components/recent-funds"; // custom hook for deal list export function useDealList() { @@ -37,7 +35,7 @@ export function useGraphData() { } export function useRecentDealData() { - const [recentDealData, setRecentDealData] = useState(); + const [recentDealData, setRecentDealData] = useState(); const fetchRecentDealData = async () => { setRecentDealData(await getRecentDealData()); diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx index f2db558..072d95d 100644 --- a/src/app/dashboard/page.tsx +++ b/src/app/dashboard/page.tsx @@ -18,18 +18,19 @@ export default function Dashboard() { const [graphType, setGraphType] = useState("line"); const graphData = useGraphData(); const dealList = useDealList(); - const recentDealData = useRecentDealData(); + // #TODO dependency injection refactor + define default value inside function (and not here) + const recentDealData = useRecentDealData() || []; const totalDealAmount = dealList?.reduce((sum, deal) => sum + deal.deal_amount, 0) || 0; return ( <> - {dealList?.map((deal, index) => ( + {/* {dealList?.map((deal, index) => (

Deal Amount: {deal.deal_amount}

Created Time: {new Date(deal.created_time).toUTCString()}

Investor ID: {deal.investor_id}

- ))} + ))} */}
- + diff --git a/src/components/recent-funds.tsx b/src/components/recent-funds.tsx index 27cd796..eec5f6c 100644 --- a/src/components/recent-funds.tsx +++ b/src/components/recent-funds.tsx @@ -1,8 +1,11 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; -type RecentDealData = { +export type RecentDealData = { + created_time: Date; + deal_amount: number; + investor_id: string; username: string; - avatar_url: string; + avatar_url?: string; // email: string; }; @@ -13,19 +16,24 @@ interface RecentFundsProps { export function RecentFunds({ recentDealData }: RecentFundsProps) { return (
- {recentDealData?.map((person, index) => ( -
- - - {{person.username[0]}} - -
-

{person.username}

- {/*

{person.email}

*/} + {recentDealData?.length > 0 ? ( + recentDealData.map((data) => ( +
+ + + {/* #TODO make this not quick fix */} + {data.username ? data.username[0]: ""} + +
+

{data.username}

+ {/*

{data.email}

*/} +
+
+${data.deal_amount}
- {/*
+${person.amount}
*/} -
- ))} + )) + ) : ( +

No recent deals available.

+ )}
); -} \ No newline at end of file +}