feat: use swr

package.json

@@ -46,6 +46,7 @@
     "react-dom": "^18.2.0",
     "react-fuzzysort": "^1.0.1",
     "satori": "^0.10.8",
+    "swr": "^2.2.4",
     "vite-node": "^0.34.5",
     "vitepress": "^1.0.0-rc.20",
     "vitepress-plugin-auto-sidebar": "^1.1.0",

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

yarn.lock

@@ -2462,7 +2462,7 @@ clean-stack@^2.0.0:
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
   integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
 
-[email protected]:
+[email protected], client-only@^0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
@@ -4033,6 +4033,14 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+swr@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.4.tgz#03ec4c56019902fbdc904d78544bd7a9a6fa3f07"
+  integrity sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ==
+  dependencies:
+    client-only "^0.0.1"
+    use-sync-external-store "^1.2.0"
+
 tabbable@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
@@ -4162,7 +4170,7 @@ use-sidecar@^1.1.2:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
-[email protected]:
+[email protected], use-sync-external-store@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==