feat: add loading indicator to dashboard and manage project fetch success state

This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2024-11-06 21:57:24 +07:00
parent 71b8ad314f
commit c0d05653f8

View File

@ -5,12 +5,11 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Overview } from "@/components/ui/overview"; import { Overview } from "@/components/ui/overview";
import { RecentFunds } from "@/components/recent-funds"; import { RecentFunds } from "@/components/recent-funds";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { getBusinessByUserId } from "@/lib/data/businessQuery";
import { useDealList } from "./hook"; import { useDealList } from "./hook";
import { createSupabaseClient } from "@/lib/supabase/clientComponentClient"; import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
import { useQuery } from "@supabase-cache-helpers/postgrest-react-query";
import useSession from "@/lib/supabase/useSession"; import useSession from "@/lib/supabase/useSession";
import { getProjectByUserId } from "@/lib/data/projectQuery"; import { getProjectByUserId } from "@/lib/data/projectQuery";
import { Loader } from "@/components/loading/loader";
const data = [ const data = [
{ {
@ -69,7 +68,9 @@ export default function Dashboard() {
const [projects, setProjects] = useState< const [projects, setProjects] = useState<
{ id: number; project_name: string; business_id: { user_id: number }[]; dataroom_id: number }[] { id: number; project_name: string; business_id: { user_id: number }[]; dataroom_id: number }[]
>([]); >([]);
const [isSuccess, setIsSuccess] = useState(false);
const [graphType, setGraphType] = useState("line"); const [graphType, setGraphType] = useState("line");
const [currentTab, setCurrentTab] = useState();
const dealList = useDealList(); const dealList = useDealList();
const totalDealAmount = dealList?.reduce((sum, deal) => sum + deal.deal_amount, 0) || 0; const totalDealAmount = dealList?.reduce((sum, deal) => sum + deal.deal_amount, 0) || 0;
useEffect(() => { useEffect(() => {
@ -82,17 +83,19 @@ export default function Dashboard() {
} }
if (data) { if (data) {
setProjects(data); setProjects(data);
console.table(data); // console.table(data);
} }
} else { } else {
console.error("Error with UserId while fetching projects"); console.error("Error with UserId while fetching projects");
} }
setIsSuccess(true);
}; };
fetchProjects(); fetchProjects();
}, [supabase, userId]); }, [supabase, userId]);
return ( return (
<> <>
<Loader isSuccess={isSuccess} />
<div className="md:hidden"> <div className="md:hidden">
<Image <Image
src="/examples/dashboard-light.png" src="/examples/dashboard-light.png"