auto reload site stats

projects/website/src/app/(pages)/page.tsx

@@ -1,9 +1,9 @@
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { AppStatistics } from "@ssr/common/types/backend/app-statistics";
-import Statistic from "@/components/home/statistic";
 import { kyFetch } from "@ssr/common/utils/utils";
 import { Config } from "@ssr/common/config";
+import { AppStats } from "@/components/app-statistics";
 
 export const dynamic = "force-dynamic"; // Always generate the page on load
 
@@ -21,16 +21,7 @@ export default async function HomePage() {
         <p>ScoreSaber Reloaded is a website that allows you to track your ScoreSaber data over time.</p>
       </div>
 
-      {statistics && (
+      {statistics && <AppStats initialStatistics={statistics} />}
-        <div className="flex items-center flex-col">
-          <p className="font-semibold">Site Statistics</p>
-          <Statistic title="Tracked Players" value={statistics.trackedPlayers} />
-          <Statistic title="Tracked Scores" value={statistics.trackedScores} />
-          <Statistic title="Additional Scores Data" value={statistics.additionalScoresData} />
-          <Statistic title="Cached BeatSaver Maps" value={statistics.cachedBeatSaverMaps} />
-          <Statistic title="Cached ScoreSaber Leaderboards" value={statistics.cachedScoreSaberLeaderboards} />
-        </div>
-      )}
 
       <div className="flex gap-2 flex-wrap">
         <Link href="/search">

projects/website/src/components/app-statistics.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import Statistic from "@/components/home/statistic";
+import { AppStatistics } from "@ssr/common/types/backend/app-statistics";
+import { useQuery } from "@tanstack/react-query";
+import { kyFetch } from "@ssr/common/utils/utils";
+import { Config } from "@ssr/common/config";
+import { useEffect, useState } from "react";
+
+type AppStatisticsProps = {
+  /**
+   * The app statistics.
+   */
+  initialStatistics: AppStatistics;
+};
+
+export function AppStats({ initialStatistics }: AppStatisticsProps) {
+  const [statistics, setStatistics] = useState(initialStatistics);
+
+  const { data } = useQuery({
+    queryKey: ["app-statistics"],
+    queryFn: () => kyFetch<AppStatistics>(Config.apiUrl + "/statistics"),
+  });
+
+  useEffect(() => {
+    if (data) {
+      setStatistics(data);
+    }
+  }, [data]);
+
+  return (
+    <div className="flex items-center flex-col">
+      <p className="font-semibold">Site Statistics</p>
+      <Statistic title="Tracked Players" value={statistics.trackedPlayers} />
+      <Statistic title="Tracked Scores" value={statistics.trackedScores} />
+      <Statistic title="Additional Scores Data" value={statistics.additionalScoresData} />
+      <Statistic title="Cached BeatSaver Maps" value={statistics.cachedBeatSaverMaps} />
+      <Statistic title="Cached ScoreSaber Leaderboards" value={statistics.cachedScoreSaberLeaderboards} />
+    </div>
+  );
+}