Aggregate homepage stats from APIs

.env.example

@@ -3,7 +3,9 @@ REACT_APP_AUTH_API_BASE_URL=https://next.akatsuki.gg
 REACT_APP_SEARCH_API_BASE_URL=https://next.akatsuki.gg/api
 REACT_APP_LEADERBOARD_API_BASE_URL=https://next.akatsuki.gg/api
 REACT_APP_USER_API_BASE_URL=https://next.akatsuki.gg/api
+REACT_APP_AGGREGATE_USER_STATS_API_BASE_URL=https://next.akatsuki.gg/api
 REACT_APP_SCORES_API_BASE_URL=https://next.akatsuki.gg/api
+REACT_APP_AGGREGATE_SCORE_STATS_API_BASE_URL=https://next.akatsuki.gg/api
 REACT_APP_PROFILE_HISTORY_API_BASE_URL=https://next.akatsuki.gg/api
 REACT_APP_USER_RELATIONSHIPS_API_BASE_URL=https://next.akatsuki.gg/api
 REACT_APP_BANCHO_API_BASE_URL=https://c.akatsuki.gg/api

src/adapters/akatsuki-api/aggregate-score-stats.ts

@@ -0,0 +1,17 @@
+import axios from "axios"
+
+const aggregateScoreStatsApiInstance = axios.create({
+  baseURL: process.env.REACT_APP_AGGREGATE_SCORE_STATS_API_BASE_URL,
+})
+
+export const fetchTotalScoresSet = async (): Promise<number> => {
+  try {
+    const response = await aggregateScoreStatsApiInstance.get(
+      "/v1/aggregate-score-stats/total-scores-set"
+    )
+    return response.data
+  } catch (e: any) {
+    console.log(e)
+    throw new Error(e.response.data.user_feedback)
+  }
+}

src/adapters/akatsuki-api/aggregate-user-stats.ts

@@ -0,0 +1,29 @@
+import axios from "axios"
+
+const aggregateUserStatsApiInstance = axios.create({
+  baseURL: process.env.REACT_APP_AGGREGATE_USER_STATS_API_BASE_URL,
+})
+
+export const fetchTotalPPEarned = async (): Promise<number> => {
+  try {
+    const response = await aggregateUserStatsApiInstance.get(
+      "/v1/aggregate-user-stats/total-pp-earned"
+    )
+    return response.data
+  } catch (e: any) {
+    console.log(e)
+    throw new Error(e.response.data.user_feedback)
+  }
+}
+
+export const fetchTotalRegisteredUsers = async (): Promise<number> => {
+  try {
+    const response = await aggregateUserStatsApiInstance.get(
+      "/v1/aggregate-user-stats/total-registered-users"
+    )
+    return response.data
+  } catch (e: any) {
+    console.log(e)
+    throw new Error(e.response.data.user_feedback)
+  }
+}

src/pages/HomePage.tsx

@@ -1,6 +1,12 @@
 import { Box, Button, Container, Grid, Stack, Typography } from "@mui/material"
+import { useEffect, useState } from "react"
 import { Link } from "react-router-dom"
 
+import { fetchTotalScoresSet } from "../adapters/akatsuki-api/aggregate-score-stats"
+import {
+  fetchTotalPPEarned,
+  fetchTotalRegisteredUsers,
+} from "../adapters/akatsuki-api/aggregate-user-stats"
 import { HomepageStatDisplay } from "../components/home/HomepageStatDisplay"
 import HomepageBanner from "../components/images/banners/homepage_banner.svg"
 import { HomepagePPIcon } from "../components/images/icons/HomepagePPIcon"
@@ -10,9 +16,45 @@ import { WhiteoutAkatsukiLogo } from "../components/images/logos/WhiteoutAkatsuk
 
 export const HomePage = () => {
   // TODO: fetch these from a backend API
-  const totalPPEarned = 1_483_238
-  const totalScoresSet = 92_383_238
-  const totalUsersRegistered = 172_395
+  const [totalPPEarned, setTotalPPEarned] = useState(0)
+  const [totalScoresSet, setTotalScoresSet] = useState(0)
+  const [totalUsersRegistered, setTotalUsersRegistered] = useState(0)
+
+  useEffect(() => {
+    ;(async () => {
+      try {
+        const totalPPEarned = await fetchTotalPPEarned()
+        setTotalPPEarned(totalPPEarned)
+      } catch (error) {
+        console.error("Failed to fetch total PP earned:", error)
+        return
+      }
+    })()
+  }, [totalPPEarned])
+
+  useEffect(() => {
+    ;(async () => {
+      try {
+        const totalScoresSet = await fetchTotalScoresSet()
+        setTotalScoresSet(totalScoresSet)
+      } catch (error) {
+        console.error("Failed to fetch total scores set:", error)
+        return
+      }
+    })()
+  }, [totalScoresSet])
+
+  useEffect(() => {
+    ;(async () => {
+      try {
+        const totalUsersRegistered = await fetchTotalRegisteredUsers()
+        setTotalUsersRegistered(totalUsersRegistered)
+      } catch (error) {
+        console.error("Failed to fetch total users registered:", error)
+        return
+      }
+    })()
+  }, [totalUsersRegistered])
 
   return (
     <Box>

src/types.d.ts

@@ -7,7 +7,9 @@ declare namespace NodeJS {
     readonly REACT_APP_SEARCH_API_BASE_URL: string
     readonly REACT_APP_LEADERBOARD_API_BASE_URL: string
     readonly REACT_APP_USER_API_BASE_URL: string
+    readonly REACT_APP_AGGREGATE_USER_STATS_API_BASE_URL: string
     readonly REACT_APP_SCORES_API_BASE_URL: string
+    readonly REACT_APP_AGGREGATE_SCORE_STATS_API_BASE_URL: string
     readonly REACT_APP_PROFILE_HISTORY_API_BASE_URL: string
     readonly REACT_APP_BANCHO_API_BASE_URL: string
     readonly REACT_APP_USER_RELATIONSHIPS_API_BASE_URL: string