fix: recursive useEffect hook in dashboard page

src/app/dashboard/page.tsx

@@ -1,6 +1,7 @@
 "use client";
+
 import Image from "next/image";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Overview } from "@/components/ui/overview";
 import { RecentFunds } from "@/components/recent-funds";
@@ -11,13 +12,14 @@ import { getProjectByUserId } from "@/lib/data/projectQuery";
 import { Loader } from "@/components/loading/loader";
 import { getInvestmentByProjectsIds } from "@/lib/data/investmentQuery";
 import { useQuery } from "@supabase-cache-helpers/postgrest-react-query";
-import { overAllGraphData, Deal, fourYearGraphData, dayOftheWeekData } from "../portfolio/[uid]/query";
+import { overAllGraphData, fourYearGraphData, dayOftheWeekData } from "../portfolio/[uid]/query";
 import CountUp from "react-countup";
 import { Button } from "@/components/ui/button";
 
 export default function Dashboard() {
   const supabase = createSupabaseClient();
-  const userId = useSession().session?.user.id;
+  const { session, loading: isLoadingSession } = useSession();
+  const userId = session?.user.id;
   const [projects, setProjects] = useState<
     { id: number; project_name: string; business_id: { user_id: number }[]; dataroom_id: number }[]
   >([]);
@@ -33,8 +35,8 @@ export default function Dashboard() {
   >([]);
   const tabOptions = ["daily", "monthly", "yearly"];
   const [activeTab, setActiveTab] = useState("daily");
-  const [isSuccess, setIsSuccess] = useState(false);
   const [graphType, setGraphType] = useState("line");
+  const [isLoadingProjects, setIsLoadingProjects] = useState(true);
   const [currentProjectId, setCurrentProjectId] = useState<number>(projects[0]?.id);
 
   const investmentDetail = useQuery(
@@ -58,6 +60,24 @@ export default function Dashboard() {
   } else {
     graphData = overAllGraphData(filteredData);
   }
+
+  useEffect(() => {
+    const fetchProjects = async () => {
+      if (!userId) return;
+      const { data, error } = await getProjectByUserId(supabase, userId);
+      if (error) console.error("Error fetching projects");
+      setProjects(data || []);
+      setIsLoadingProjects(false);
+    };
+    fetchProjects();
+  }, [supabase, userId]);
+
+  useEffect(() => {
+    if (projects.length > 0 && !currentProjectId) {
+      setCurrentProjectId(projects[0].id);
+    }
+  }, [projects, currentProjectId]);
+
   useEffect(() => {
     const setTopLatestInvestment = () => {
       if (investmentDetail?.data) {
@@ -65,7 +85,6 @@ export default function Dashboard() {
           investmentDetail.data
             .slice(0, 8)
             .map((item) => {
-              // set the project according to current project id
               if (item.project_id === currentProjectId) {
                 return {
                   avatarUrl: item.avatar_url,
@@ -87,34 +106,14 @@ export default function Dashboard() {
             username: string;
           }[]
         );
-        // console.table(latestInvestment);
       }
     };
     setTopLatestInvestment();
-  }, [supabase, investmentDetail]);
+  }, [currentProjectId, investmentDetail?.data]);
-  useEffect(() => {
-    const fetchProjects = async () => {
-      if (userId) {
-        const { data, error } = await getProjectByUserId(supabase, userId);
-        if (error) {
-          console.error("Error while fetching projects");
-        }
-        if (data) {
-          //  set project and current project id
-          setProjects(data);
-          setCurrentProjectId(data[0].id);
-        }
-      } else {
-        console.error("Error with UserId while fetching projects");
-      }
-      setIsSuccess(true);
-    };
-    fetchProjects();
-  }, [supabase, userId]);
 
   return (
     <div className="container max-w-screen-xl">
-      <Loader isSuccess={isSuccess} />
+      <Loader isSuccess={!isLoadingSession && !isLoadingProjects} />{" "}
       <div className="md:hidden">
         <Image
           src="/examples/dashboard-light.png"
@@ -150,7 +149,7 @@ export default function Dashboard() {
                 ))}
               </TabsList>
               {projects.map((project) => (
-                <TabsContent value={project.project_name} className="space-y-4">
+                <TabsContent value={project.project_name} className="space-y-4" key={project.id}>
                   <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
                     <Card>
                       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">

src/app/find/BusinessSection.tsx

@@ -1,5 +1,5 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { BusinessCard } from "@/components/BusinessCard";
+import { BusinessCard } from "@/components/businessCard";
 import { BusinessCardProps } from "@/types/BusinessCard";
 import { Separator } from "@/components/ui/separator";
 import Link from "next/link";

src/components/carousel.tsx

@@ -35,6 +35,7 @@ const Gallery = ({ images }: GalleryProps) => {
           />
         </CarouselItem>
       )),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [images, current]
   );
 

src/components/recent-funds.tsx

@@ -12,15 +12,18 @@ export type RecentDealData = {
 };
 
 interface RecentFundsProps {
-  data?: { name?: string; amount?: number; avatar?: string; date?: Date; logo_url?: string; status?: string; profile_url?: string }[];
+  data?: {
+    name?: string;
+    amount?: number;
+    avatar?: string;
+    date?: Date;
+    logo_url?: string;
+    status?: string;
+    profile_url?: string;
+  }[];
 }
 
 export function RecentFunds(props: RecentFundsProps) {
-  const content = (
-    <div>
-      
-    </div>
-  )
   return (
     <div className="space-y-8">
       {(props?.data || []).map((deal, index) => (
@@ -129,5 +132,4 @@ export function RecentFunds(props: RecentFundsProps) {
       ))}
     </div>
   );
-
 }