feat: use swr

src/app/tools/ratings/page.tsx

@@ -3,41 +3,31 @@
 import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
 import { Button, Flex, Popover, Select, TextField } from '@radix-ui/themes';
 import { range } from 'lodash';
-import { useEffect, useState } from 'react';
-import { RatingsInfo } from '../../../commands/ratings';
+import { useState } from 'react';
+import useSWR from 'swr';
 import PageWrapper from '../../../components/PageWrapper';
 import { REGIONS, REGION_NAMES, Region } from '../../../constants/regions';
 import getRatingsInfo from '../../../core/blitz/getRatingsInfo';
-import {
-  FIRST_ARCHIVED_RATINGS_SEASON,
-  getArchivedLatestSeasonNumberAPI,
-} from '../../../core/blitzkrieg/getArchivedLatestSeasonNumberAPI';
 import getArchivedRatingsInfoAPI from '../../../core/blitzkrieg/getArchivedRatingsInfoAPI';
+import { numberFetcher } from '../../../core/blitzkrieg/numberFetcher';
 import { useRatings } from '../../../stores/ratings';
 
+export const FIRST_ARCHIVED_RATINGS_SEASON = 49;
+
 export default function Page() {
   const ratings = useRatings();
-  const [ratingsInfo, setRatingsInfo] = useState<RatingsInfo | null>(null);
-  const [jumpToLeague, setJumpToLeague] = useState(0);
-  const [latestArchivedSeasonNumber, setLatestArchivedSeasonNumber] = useState<
-    number | null
-  >(null);
   // null being the latest season
   const [season, setSeason] = useState<null | number>(null);
-
-  useEffect(() => {
-    getArchivedLatestSeasonNumberAPI().then(setLatestArchivedSeasonNumber);
-  }, []);
-
-  useEffect(() => {
-    (async () => {
-      if (season === null) {
-        setRatingsInfo(await getRatingsInfo(ratings.region));
-      } else {
-        setRatingsInfo(await getArchivedRatingsInfoAPI(ratings.region, season));
-      }
-    })();
-  }, [season]);
+  const { data: ratingsInfo } = useSWR(`ratings-info-${season}`, () =>
+    season === null
+      ? getRatingsInfo(ratings.region)
+      : getArchivedRatingsInfoAPI(ratings.region, season),
+  );
+  const [jumpToLeague, setJumpToLeague] = useState(0);
+  const { data: latestArchivedSeasonNumber } = useSWR<number>(
+    '/api/ratings/latest-archived-season-number',
+    numberFetcher,
+  );
 
   return (
     <PageWrapper>

src/commands/ratings.tsx

@@ -6,6 +6,7 @@ import {
 } from 'discord.js';
 import { range } from 'lodash';
 import { BlitzkriegRatingsLeaderboard } from '../../scripts/buildRatingsLeaderboard';
+import { FIRST_ARCHIVED_RATINGS_SEASON } from '../app/tools/ratings/page';
 import * as Leaderboard from '../components/Leaderboard';
 import TitleBar from '../components/TitleBar';
 import Wrapper from '../components/Wrapper';
@@ -15,7 +16,6 @@ import { getClanAccountInfo } from '../core/blitz/getClanAccountInfo';
 import getRatingsInfo from '../core/blitz/getRatingsInfo';
 import regionToRegionSubdomain from '../core/blitz/regionToRegionSubdomain';
 import { getArchivedLatestSeasonNumber } from '../core/blitzkrieg/getArchivedLatestSeasonNumber';
-import { FIRST_ARCHIVED_RATINGS_SEASON } from '../core/blitzkrieg/getArchivedLatestSeasonNumberAPI';
 import getArchivedRatingsInfo from '../core/blitzkrieg/getArchivedRatingsInfo';
 import { getArchivedRatingsLeaderboard } from '../core/blitzkrieg/getArchivedRatingsLeaderboard';
 import getArchivedRatingsMidnightLeaderboard from '../core/blitzkrieg/getArchivedRatingsMidnightLeaderboard';

src/core/blitzkrieg/getArchivedLatestSeasonNumberAPI.ts

@@ -1,18 +0,0 @@
-let cachedLatestArchivedSeasonNumber: number | null = null;
-
-/**
- * The first every season that Blitzkrieg tracked :)
- */
-export const FIRST_ARCHIVED_RATINGS_SEASON = 49;
-
-export async function getArchivedLatestSeasonNumberAPI() {
-  if (cachedLatestArchivedSeasonNumber) {
-    return cachedLatestArchivedSeasonNumber;
-  }
-
-  const response = await fetch(`/api/ratings/latest-archived-season-number`);
-  const number = parseInt(await response.text());
-  cachedLatestArchivedSeasonNumber = number;
-
-  return cachedLatestArchivedSeasonNumber;
-}

src/core/blitzkrieg/numberFetcher.ts

@@ -0,0 +1,6 @@
+import { Fetcher } from 'swr';
+
+export const numberFetcher: Fetcher<number, string> = (url) =>
+  fetch(url)
+    .then((res) => res.text())
+    .then(parseInt);