refactor: extract KpiCards to separate components

next-frontend/app/page.tsx

@@ -1,54 +1,18 @@
 "use client";
 
-import { useQuery } from "@tanstack/react-query";
-import { AlignVerticalDistributeEnd, Calendar, Hourglass } from "lucide-react";
-
-import { queryKeys } from "@/components/hooks/queryHooks/queryKeys";
-import { KpiCardUiProvider } from "@/components/ui-providers/KpiCardUiProvider";
 import { FilteredSessionAreaChart } from "@/components/visualizers/charts/FilteredSessionAreaChart";
+import { TotalSessionsKpiCard } from "@/components/visualizers/TotalSessionsKpiCard";
+import { CurrentStreakKpiCard } from "@/components/visualizers/CurrentStreakKpiCard";
+import { TotalSessionTimeKpiCard } from "@/components/visualizers/TotalMinutesSpentKpiCard";
 
 export default function IndexPage() {
-  const stats = useQuery({
-    ...queryKeys.statistics.dashboard,
-    retry: false,
-  });
-
-  if (!stats.data || stats.isLoading || stats.isError) {
-    return <div>Something bad happenned</div>;
-  }
-
-  if (stats.data.isErr) {
-    return <div>Something bad happenned</div>;
-  }
-
   return (
     <div className="flex grow flex-col p-8">
       <h2 className="mb-8 text-3xl font-bold tracking-tight">Dashboard</h2>
       <div className="flex gap-8 ">
-        <KpiCardUiProvider
-          value={stats.data.value.session_count}
-          title={"Total Sessions"}
-          description={"Many to go.."}
-        >
-          <AlignVerticalDistributeEnd />
-        </KpiCardUiProvider>
-        <KpiCardUiProvider
-          value={stats.data.value.minutes}
-          title={"Total Minutes Spent"}
-          description={`That's almost ${Math.ceil(
-            stats.data.value.minutes / 60
-          )} hours!`}
-        >
-          <Hourglass />{" "}
-        </KpiCardUiProvider>
-        <KpiCardUiProvider
-          value={stats.data.value.streak}
-          title={"Current Streak"}
-          description={"Keep it going!"}
-        >
-          {" "}
-          <Calendar />
-        </KpiCardUiProvider>
+        <TotalSessionsKpiCard />
+        <TotalSessionTimeKpiCard />
+        <CurrentStreakKpiCard />
       </div>
       <div className="mt-8 grid grow gap-8 md:grid-cols-2 lg:grid-cols-7">
         <FilteredSessionAreaChart

next-frontend/components/visualizers/CurrentStreakKpiCard.tsx

@@ -0,0 +1,33 @@
+import { Calendar } from "lucide-react";
+import { FC } from "react";
+import { KpiCardUiProvider } from "@/components/ui-providers/KpiCardUiProvider";
+import { queryKeys } from "@/components/hooks/queryHooks/queryKeys";
+import { useQuery } from "@tanstack/react-query";
+import { Skeleton } from "@/components/shadcn/skeleton";
+
+type CurrentStreakKpiCardProps = Record<string, never>
+
+export const CurrentStreakKpiCard: FC<CurrentStreakKpiCardProps> = () => {
+  const stats = useQuery({
+    ...queryKeys.statistics.dashboard,
+    retry: false,
+  });
+
+  if (stats.isPending) {
+    return <Skeleton />;
+  }
+
+  if (stats.isError || stats.data.isErr) {
+    return <span>Error occured</span>;
+  }
+
+  return (
+    <KpiCardUiProvider
+      value={stats.data.value.streak}
+      title="Current Streak"
+      description="Keep it going!"
+    >
+      <Calendar />
+    </KpiCardUiProvider>
+  );
+};

next-frontend/components/visualizers/TotalMinutesSpentKpiCard.tsx

@@ -0,0 +1,37 @@
+import { Hourglass } from "lucide-react";
+import { type FC } from "react";
+import { KpiCardUiProvider } from "@/components/ui-providers/KpiCardUiProvider";
+import { queryKeys } from "@/components/hooks/queryHooks/queryKeys";
+import { useQuery } from "@tanstack/react-query";
+import { Skeleton } from "@/components/shadcn/skeleton";
+
+type TotalSessionTimeKpiCardProps = Record<string, never>
+
+export const TotalSessionTimeKpiCard: FC<TotalSessionTimeKpiCardProps> = () => {
+  const stats = useQuery({
+    ...queryKeys.statistics.dashboard,
+    retry: false,
+  });
+
+  if (stats.isPending) {
+    return <Skeleton />;
+  }
+
+  if (stats.isError || stats.data.isErr) {
+    return <span>Error occured</span>;
+  }
+
+  return (
+    <KpiCardUiProvider
+      value={stats.data.value.minutes}
+      title="Total Minutes Spent"
+      description={`That's almost ${Math.ceil(
+        stats.data.value.minutes / 60
+      ).toFixed(2)} hours!`}
+    >
+
+      <Hourglass />
+    </KpiCardUiProvider>
+
+  );
+};

next-frontend/components/visualizers/TotalSessionsKpiCard.tsx

@@ -0,0 +1,33 @@
+import { AlignVerticalDistributeEnd } from "lucide-react";
+import { FC } from "react";
+import { KpiCardUiProvider } from "@/components/ui-providers/KpiCardUiProvider";
+import { queryKeys } from "@/components/hooks/queryHooks/queryKeys";
+import { useQuery } from "@tanstack/react-query";
+import { Skeleton } from "@/components/shadcn/skeleton";
+
+type TotalSessionsKpiCardProps = Record<string, never>
+
+export const TotalSessionsKpiCard: FC<TotalSessionsKpiCardProps> = () => {
+  const stats = useQuery({
+    ...queryKeys.statistics.dashboard,
+    retry: false,
+  });
+
+  if (stats.isPending) {
+    return <Skeleton />;
+  }
+
+  if (stats.isError || stats.data.isErr) {
+    return <span>Error occured</span>;
+  }
+
+  return (
+    <KpiCardUiProvider
+      value={stats.data.value.session_count}
+      title={"Total Sessions"}
+      description={"Many to go.."}
+    >
+      <AlignVerticalDistributeEnd />
+    </KpiCardUiProvider>
+  );
+};