Merge pull request midday-ai#69 from YazidKurdi/fetch-stats-performance

chore: use SC to fetch stats
milksense · Apr 5, 2024 · bc85b33 · bc85b33
2 parents 1c0bd57 + 2c01cef
commit bc85b33
Show file tree

Hide file tree

Showing 11 changed files with 41 additions and 178 deletions.
diff --git a/apps/website/src/actions/fetch-stats.ts b/apps/website/src/actions/fetch-stats.ts
@@ -10,7 +10,7 @@ export async function fetchStats() {
   const [
     { count: users },
     { count: transactions },
-    { count: bankAcounts },
+    { count: bankAccounts },
     { count: trackerEntries },
     { count: inboxItems },
     { count: bankConnections },
@@ -73,7 +73,7 @@ export async function fetchStats() {
   return {
     users,
     transactions,
-    bankAcounts,
+    bankAccounts,
     trackerEntries,
     inboxItems,
     bankConnections,

diff --git a/apps/website/src/components/charts/bank-accounts-chart.tsx b/apps/website/src/components/charts/bank-accounts-chart.tsx
@@ -1,21 +1,8 @@
-"use client";
-
 import { fetchStats } from "@/actions/fetch-stats";
-import { useEffect, useState } from "react";
-
-export function BankAccountsChart() {
-  const [data, setData] = useState(0);
 
-  useEffect(() => {
-    async function fetchData() {
-      try {
-        const { bankAcounts } = await fetchStats();
-        setData(bankAcounts);
-      } catch {}
-    }
+export async function BankAccountsChart() {
+  const { bankAccounts } = await fetchStats();
 
-    fetchData();
-  }, []);
 
   return (
     <div className="flex border flex-col items-center justify-center border-border bg-background rounded-xl px-6 pt-8 pb-6 space-y-4">
@@ -31,8 +18,8 @@ export function BankAccountsChart() {
         </span>
 
         <span className="mt-auto font-mono text-[80px] md:text-[122px]">
-          {data &&
-            Intl.NumberFormat("en", { notation: "compact" }).format(data)}
+          {bankAccounts &&
+            Intl.NumberFormat("en", { notation: "compact" }).format(bankAccounts)}
         </span>
       </div>
     </div>

diff --git a/apps/website/src/components/charts/bank-connections-chart.tsx b/apps/website/src/components/charts/bank-connections-chart.tsx
@@ -1,22 +1,8 @@
-"use client";
-
 import { fetchStats } from "@/actions/fetch-stats";
 import Link from "next/link";
-import { useEffect, useState } from "react";
-
-export function BankConnectionsChart() {
-  const [data, setData] = useState(0);
-
-  useEffect(() => {
-    async function fetchData() {
-      try {
-        const { bankConnections } = await fetchStats();
-        setData(bankConnections);
-      } catch {}
-    }
 
-    fetchData();
-  }, []);
+export async function BankConnectionsChart() {
+  const { bankConnections } = await fetchStats();
 
   return (
     <div className="flex border flex-col items-center justify-center border-border bg-background rounded-xl px-6 pt-8 pb-6 space-y-4">
@@ -36,8 +22,8 @@ export function BankConnectionsChart() {
         </span>
 
         <span className="mt-auto font-mono text-[80px] md:text-[122px]">
-          {data &&
-            Intl.NumberFormat("en", { notation: "compact" }).format(data)}
+          {bankConnections &&
+            Intl.NumberFormat("en", { notation: "compact" }).format(bankConnections)}
         </span>
       </div>
     </div>

diff --git a/apps/website/src/components/charts/inbox-chart.tsx b/apps/website/src/components/charts/inbox-chart.tsx
@@ -1,21 +1,10 @@
-"use client";
 
 import { fetchStats } from "@/actions/fetch-stats";
-import { useEffect, useState } from "react";
 
-export function InboxChart() {
-  const [data, setData] = useState(0);
 
-  useEffect(() => {
-    async function fetchData() {
-      try {
-        const { inboxItems } = await fetchStats();
-        setData(inboxItems);
-      } catch {}
-    }
+export async function InboxChart() {
+  const { inboxItems } = await fetchStats();
 
-    fetchData();
-  }, []);
 
   return (
     <div className="flex border flex-col items-center justify-center border-border bg-background rounded-xl px-6 pt-8 pb-6 space-y-4">
@@ -31,8 +20,8 @@ export function InboxChart() {
         </span>
 
         <span className="mt-auto font-mono text-[80px] md:text-[122px]">
-          {data &&
-            Intl.NumberFormat("en", { notation: "compact" }).format(data)}
+          {inboxItems &&
+            Intl.NumberFormat("en", { notation: "compact" }).format(inboxItems)}
         </span>
       </div>
     </div>

diff --git a/apps/website/src/components/charts/reports-chart.tsx b/apps/website/src/components/charts/reports-chart.tsx
@@ -1,21 +1,7 @@
-"use client";
-
 import { fetchStats } from "@/actions/fetch-stats";
-import { useEffect, useState } from "react";
-
-export function ReportsChart() {
-  const [data, setData] = useState(0);
-
-  useEffect(() => {
-    async function fetchData() {
-      try {
-        const { reports } = await fetchStats();
-        setData(reports);
-      } catch {}
-    }
 
-    fetchData();
-  }, []);
+export async function ReportsChart() {
+  const { reports } = await fetchStats();
 
   return (
     <div className="flex border flex-col items-center justify-center border-border bg-background rounded-xl px-6 pt-8 pb-6 space-y-4">
@@ -31,8 +17,8 @@ export function ReportsChart() {
         </span>
 
         <span className="mt-auto font-mono text-[80px] md:text-[122px]">
-          {data &&
-            Intl.NumberFormat("en", { notation: "compact" }).format(data)}
+          {reports &&
+            Intl.NumberFormat("en", { notation: "compact" }).format(reports)}
         </span>
       </div>
     </div>

diff --git a/apps/website/src/components/charts/tracker-entries-chart.tsx b/apps/website/src/components/charts/tracker-entries-chart.tsx
@@ -1,21 +1,7 @@
-"use client";
-
 import { fetchStats } from "@/actions/fetch-stats";
-import { useEffect, useState } from "react";
-
-export function TrackerEntriesChart() {
-  const [data, setData] = useState(0);
-
-  useEffect(() => {
-    async function fetchData() {
-      try {
-        const { trackerEntries } = await fetchStats();
-        setData(trackerEntries);
-      } catch {}
-    }
 
-    fetchData();
-  }, []);
+export async function TrackerEntriesChart() {
+  const { trackerEntries } = await fetchStats();
 
   return (
     <div className="flex border flex-col items-center justify-center border-border bg-background rounded-xl px-6 pt-8 pb-6 space-y-4">
@@ -31,8 +17,8 @@ export function TrackerEntriesChart() {
         </span>
 
         <span className="mt-auto font-mono text-[80px] md:text-[122px]">
-          {data &&
-            Intl.NumberFormat("en", { notation: "compact" }).format(data)}
+          {trackerEntries &&
+            Intl.NumberFormat("en", { notation: "compact" }).format(trackerEntries)}
         </span>
       </div>
     </div>

diff --git a/apps/website/src/components/charts/tracker-projects-chart.tsx b/apps/website/src/components/charts/tracker-projects-chart.tsx
@@ -1,22 +1,7 @@
-"use client";
-
 import { fetchStats } from "@/actions/fetch-stats";
-import { useEffect, useState } from "react";
-
-export function TrackerProjectsChart() {
-  const [data, setData] = useState(0);
-
-  useEffect(() => {
-    async function fetchData() {
-      try {
-        const { trackerProjects } = await fetchStats();
-        setData(trackerProjects);
-      } catch {}
-    }
-
-    fetchData();
-  }, []);
 
+export async function TrackerProjectsChart() {
+  const { trackerProjects } = await fetchStats();
   return (
     <div className="flex border flex-col items-center justify-center border-border bg-background rounded-xl px-6 pt-8 pb-6 space-y-4">
       <h2 className="text-2xl">Time Tracker Projects</h2>
@@ -31,8 +16,8 @@ export function TrackerProjectsChart() {
         </span>
 
         <span className="mt-auto font-mono text-[80px] md:text-[122px]">
-          {data &&
-            Intl.NumberFormat("en", { notation: "compact" }).format(data)}
+          {trackerProjects &&
+            Intl.NumberFormat("en", { notation: "compact" }).format(trackerProjects)}
         </span>
       </div>
     </div>

diff --git a/apps/website/src/components/charts/transaction-enrichments-chart.tsx b/apps/website/src/components/charts/transaction-enrichments-chart.tsx
@@ -1,22 +1,8 @@
-"use client";
-
 import { fetchStats } from "@/actions/fetch-stats";
 import Link from "next/link";
-import { useEffect, useState } from "react";
-
-export function TransactionEnrichmentsChart() {
-  const [data, setData] = useState(0);
-
-  useEffect(() => {
-    async function fetchData() {
-      try {
-        const { transactionEnrichments } = await fetchStats();
-        setData(transactionEnrichments);
-      } catch {}
-    }
 
-    fetchData();
-  }, []);
+export async function TransactionEnrichmentsChart() {
+  const { transactionEnrichments } = await fetchStats();
 
   return (
     <div className="flex border flex-col items-center justify-center border-border bg-background rounded-xl px-6 pt-8 pb-6 space-y-4">
@@ -36,8 +22,8 @@ export function TransactionEnrichmentsChart() {
         </span>
 
         <span className="mt-auto font-mono text-[80px] md:text-[122px]">
-          {data &&
-            Intl.NumberFormat("en", { notation: "compact" }).format(data)}
+          {transactionEnrichments &&
+            Intl.NumberFormat("en", { notation: "compact" }).format(transactionEnrichments)}
         </span>
       </div>
     </div>

diff --git a/apps/website/src/components/charts/transactions-chart.tsx b/apps/website/src/components/charts/transactions-chart.tsx
@@ -1,21 +1,7 @@
-"use client";
-
 import { fetchStats } from "@/actions/fetch-stats";
-import { useEffect, useState } from "react";
-
-export function TransactionsChart() {
-  const [data, setData] = useState(0);
-
-  useEffect(() => {
-    async function fetchData() {
-      try {
-        const { transactions } = await fetchStats();
-        setData(transactions);
-      } catch {}
-    }
 
-    fetchData();
-  }, []);
+export async function TransactionsChart() {
+  const { transactions } = await fetchStats();
 
   return (
     <div className="flex border flex-col items-center justify-center border-border bg-background rounded-xl px-6 pt-8 pb-6 space-y-4">
@@ -31,8 +17,8 @@ export function TransactionsChart() {
         </span>
 
         <span className="mt-auto font-mono text-[80px] md:text-[122px]">
-          {data &&
-            Intl.NumberFormat("en", { notation: "compact" }).format(data)}
+          {transactions &&
+            Intl.NumberFormat("en", { notation: "compact" }).format(transactions)}
         </span>
       </div>
     </div>

diff --git a/apps/website/src/components/charts/users-chart.tsx b/apps/website/src/components/charts/users-chart.tsx
@@ -1,21 +1,7 @@
-"use client";
-
 import { fetchStats } from "@/actions/fetch-stats";
-import { useEffect, useState } from "react";
-
-export function UsersChart() {
-  const [data, setData] = useState(0);
-
-  useEffect(() => {
-    async function fetchData() {
-      try {
-        const { users, transactions } = await fetchStats();
-        setData(users);
-      } catch {}
-    }
 
-    fetchData();
-  }, []);
+export async function UsersChart() {
+  const { users } = await fetchStats();
 
   return (
     <div className="flex border flex-col items-center justify-center border-border bg-background rounded-xl px-6 pt-8 pb-6 space-y-4">
@@ -32,7 +18,7 @@ export function UsersChart() {
         </span>
 
         <span className="mt-auto font-mono text-[80px] md:text-[122px]">
-          {data}
+          {users}
         </span>
       </div>
     </div>

diff --git a/apps/website/src/components/charts/vault-chart.tsx b/apps/website/src/components/charts/vault-chart.tsx
@@ -1,21 +1,7 @@
-"use client";
-
 import { fetchStats } from "@/actions/fetch-stats";
-import { useEffect, useState } from "react";
-
-export function VaultChart() {
-  const [data, setData] = useState(0);
-
-  useEffect(() => {
-    async function fetchData() {
-      try {
-        const { vaultObjects } = await fetchStats();
-        setData(vaultObjects);
-      } catch {}
-    }
 
-    fetchData();
-  }, []);
+export async function VaultChart() {
+  const { vaultObjects } = await fetchStats();
 
   return (
     <div className="flex border flex-col items-center justify-center border-border bg-background rounded-xl px-6 pt-8 pb-6 space-y-4">
@@ -31,8 +17,8 @@ export function VaultChart() {
         </span>
 
         <span className="mt-auto font-mono text-[80px] md:text-[122px]">
-          {data &&
-            Intl.NumberFormat("en", { notation: "compact" }).format(data)}
+          {vaultObjects &&
+            Intl.NumberFormat("en", { notation: "compact" }).format(vaultObjects)}
         </span>
       </div>
     </div>