auto reload site stats

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>
+  );
+}