refactor some json query + restructure recent funds json + make amount show in recent funds tab

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<string, number> {
   // group by year & month

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<RecentDealData>();
+  const [recentDealData, setRecentDealData] = useState<RecentDealData[]>();
 
   const fetchRecentDealData = async () => {
     setRecentDealData(await getRecentDealData());

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) => (
         <div key={index} className="deal-item">
           <p>Deal Amount: {deal.deal_amount}</p>
           <p>Created Time: {new Date(deal.created_time).toUTCString()}</p>
           <p>Investor ID: {deal.investor_id}</p>
         </div>
-      ))}
+      ))} */}
       <div className="md:hidden">
         <Image
           src="/examples/dashboard-light.png"
@@ -199,7 +200,7 @@ export default function Dashboard() {
                     </CardDescription>
                   </CardHeader>
                   <CardContent>
-                    <RecentFunds recentDealData={recentDealData!}>
+                    <RecentFunds recentDealData={recentDealData}>
                     </RecentFunds>
                   </CardContent>
                 </Card>

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 (
     <div className="space-y-8">
-      {recentDealData?.map((person, index) => (
-        <div className="flex items-center" key={index}>
-          <Avatar className="h-9 w-9">
-            <AvatarImage src={person.avatar_url} alt={person.username} />
-            {<AvatarFallback>{person.username[0]}</AvatarFallback>}
-          </Avatar>
-          <div className="ml-4 space-y-1">
-            <p className="text-sm font-medium leading-none">{person.username}</p>
-            {/* <p className="text-sm text-muted-foreground">{person.email}</p> */}
+      {recentDealData?.length > 0 ? (
+        recentDealData.map((data) => (
+          <div className="flex items-center" key={data.investor_id}>
+            <Avatar className="h-9 w-9">
+              <AvatarImage src={data.avatar_url} alt={data.username} />
+              {/* #TODO make this not quick fix */}
+              <AvatarFallback>{data.username ? data.username[0]: ""}</AvatarFallback>
+            </Avatar>
+            <div className="ml-4 space-y-1">
+              <p className="text-sm font-medium leading-none">{data.username}</p>
+              {/* <p className="text-sm text-muted-foreground">{data.email}</p> */}
+            </div>
+            <div className="ml-auto font-medium">+${data.deal_amount}</div>
           </div>
-          {/* <div className="ml-auto font-medium">+${person.amount}</div> */}
-        </div>
-      ))}
+        ))
+      ) : (
+        <p>No recent deals available.</p>
+      )}
     </div>
   );
-}
+}