feat: migrate session

.vscode/settings.json

@@ -13,7 +13,6 @@
     "artefacts",
     "astrojs",
     "atgm",
-    "Avearges",
     "AYUV",
     "battleresults",
     "bbox",

packages/website-legacy/tsconfig.json

@@ -10,6 +10,7 @@
   "include": [
     "src/**/*",
     ".next/types/**/*.ts",
-    "../website/src/components/Performance/PerformanceInfo.tsx"
+    "../website/src/components/Performance/PerformanceInfo.tsx",
+    "../website/src/pages/tools/session/index.tsx"
   ]
 }

packages/website/src/pages/tools/session/index.astro

@@ -0,0 +1,8 @@
+---
+import { Page } from '.';
+import ToolLayout from '../../../layouts/ToolLayout.astro';
+---
+
+<ToolLayout>
+  <Page client:load />
+</ToolLayout>

packages/website/src/pages/tools/session/index.tsx

@@ -1,12 +1,9 @@
 import {
-  AccountListWithServer,
-  IndividualAccountInfo,
-  IndividualTankStats,
   STAT_KEYS,
   STAT_NAMES,
-  Stat,
   UNLOCALIZED_REGION_NAMES_SHORT,
   deltaTankStats,
+  fetchAverageDefinitions,
   fetchTankDefinitions,
   generateStats,
   getAccountInfo,
@@ -15,6 +12,10 @@ import {
   prettifyStats,
   searchPlayersAcrossRegions,
   sumBlitzStarsStats,
+  type AccountListWithServer,
+  type IndividualAccountInfo,
+  type IndividualTankStats,
+  type Stat,
 } from '@blitzkit/core';
 import {
   ArrowDownIcon,
@@ -29,22 +30,29 @@ import {
   Heading,
   IconButton,
   Select,
-  Spinner,
   Table,
   Text,
   TextField,
 } from '@radix-ui/themes';
 import { debounce } from 'lodash-es';
-import { use, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import usePromise from 'react-promise-suspense';
+import { PageWrapper } from '../../../components/PageWrapper';
+import { TankRowHeaderCell } from '../../../components/TankRowHeaderCell';
+import { Session, type SessionTracking } from '../../../stores/session';
 
-const awaitedTankDefinitions = await fetchTankDefinitions();
+const tankDefinitions = await fetchTankDefinitions();
+const tankAverages = await fetchAverageDefinitions();
 
-export default function Page({
+export function Page() {
-  searchParams,
+  return (
-}: {
+    <Session.Provider>
-  searchParams: { id?: string };
+      <Content />
-}) {
+    </Session.Provider>
-  const [loaded, setLoaded] = useState(false);
+  );
+}
+
+function Content() {
   const [showSearch, setShowSearch] = useState(false);
   const [searching, setSearching] = useState(false);
   const [searchResults, setSearchResults] = useState<AccountListWithServer>([]);
@@ -56,27 +64,26 @@ export default function Page({
   const [tankStatsB, setTankStatsB] = useState<IndividualTankStats[] | null>(
     null,
   );
-  const accountInfoPromise = useMemo(
+  const accountInfo = usePromise(
-    () =>
+    (id?: number) =>
       new Promise<IndividualAccountInfo | null>(async (resolve) => {
+        if (!id) return resolve(null);
+
         resolve(
-          session.tracking
+          session.tracking ? await getAccountInfo(idToRegion(id), id) : null,
-            ? await getAccountInfo(session.player.region, session.player.id)
-            : null,
         );
       }),
-    [session.tracking && session.player.id],
+    [session.tracking ? session.player.id : undefined],
   );
-  const accountInfo = use(accountInfoPromise);
   const delta = useMemo(
     () =>
       session.tracking && tankStatsB
         ? deltaTankStats(session.player.stats, tankStatsB)
             .sort((a, b) => b.last_battle_time - a.last_battle_time)
             .map((entry) => {
-              const tank = awaitedTankDefinitions[entry.tank_id];
+              const tank = tankDefinitions.tanks[entry.tank_id];
-              const average = awaitedTankAvearges[tank.id];
+              const average = tankAverages.averages[tank.id];
-              const stats = generateStats(entry.all, average?.all);
+              const stats = generateStats(entry.all, average.mu);
               const statsPretty = prettifyStats(stats);
 
               return {
@@ -119,7 +126,7 @@ export default function Page({
       if (!input.current) return;
 
       draft.tracking = true;
-      (draft as Session.SessionTracking).player = {
+      (draft as SessionTracking).player = {
         id,
         region,
         since: Date.now(),
@@ -147,22 +154,6 @@ export default function Page({
     return () => clearInterval(interval);
   }, [session.tracking && session.player.id]);
 
-  useEffect(() => {
-    setLoaded(true);
-
-    if (searchParams.id && !session.tracking) {
-      track(Number(searchParams.id));
-    }
-  }, []);
-
-  if (!loaded) {
-    return (
-      <PageWrapper align="center" justify="center">
-        <Spinner />
-      </PageWrapper>
-    );
-  }
-
   return (
     <PageWrapper color="blue">
       <AlertDialog.Root
@@ -187,39 +178,6 @@ export default function Page({
         </AlertDialog.Content>
       </AlertDialog.Root>
 
-      {searchParams.id &&
-        session.tracking &&
-        Number(searchParams.id) !== session.player.id && (
-          <AlertDialog.Root
-            open={showLinkOverridePrompt}
-            onOpenChange={setShowLinkOverridePrompt}
-          >
-            <AlertDialog.Content>
-              <AlertDialog.Title>
-                You are currently tracking {accountInfo?.nickname}
-              </AlertDialog.Title>
-              <AlertDialog.Description>
-                Would you like to stop tracking {accountInfo?.nickname} and
-                start tracking a new player?
-              </AlertDialog.Description>
-
-              <Flex mt="4" justify="end">
-                <AlertDialog.Action>
-                  <Button
-                    variant="solid"
-                    onClick={() => {
-                      setShowLinkOverridePrompt(false);
-                      track(Number(searchParams.id));
-                    }}
-                  >
-                    Proceed
-                  </Button>
-                </AlertDialog.Action>
-              </Flex>
-            </AlertDialog.Content>
-          </AlertDialog.Root>
-        )}
-
       {!session.tracking && (
         <Flex
           style={{ flex: 1 }}
@@ -325,7 +283,7 @@ export default function Page({
                 }
 
                 mutateSession((draft) => {
-                  (draft as Session.SessionTracking).player.stats = stats;
+                  (draft as SessionTracking).player.stats = stats;
                 });
               }}
             >
@@ -383,9 +341,9 @@ export default function Page({
                             key={key}
                             onClick={() => {
                               mutateSession((draft) => {
-                                (
+                                (draft as SessionTracking).columns.unshift(
-                                  draft as Session.SessionTracking
+                                  key as Stat,
-                                ).columns.unshift(key as Stat);
+                                );
                               });
                             }}
                           >
@@ -401,12 +359,9 @@ export default function Page({
                     onValueChange={(value) => {
                       mutateSession((draft) => {
                         if (value === 'remove') {
-                          (draft as Session.SessionTracking).columns.splice(
+                          (draft as SessionTracking).columns.splice(index, 1);
-                            index,
-                            1,
-                          );
                         } else {
-                          (draft as Session.SessionTracking).columns[index] =
+                          (draft as SessionTracking).columns[index] =
                             value as Stat;
                         }
                       });

packages/website/src/stores/session.ts

@@ -1,5 +1,5 @@
-import { IndividualTankStats, Region, Stat } from '@blitzkit/core';
+import type { IndividualTankStats, Region, Stat } from '@blitzkit/core';
-import lodash from 'lodash-es';
+import { merge } from 'lodash-es';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { createContextualStore } from '../core/zustand/createContextualStore';
@@ -24,15 +24,14 @@ interface SessionNotTracking extends SessionBase {
 
 type Session = SessionTracking | SessionNotTracking;
 
-export const { Provider, use, useMutation, useStore } = createContextualStore(
+export const Session = createContextualStore(() =>
-  () =>
   create<Session>()(
     persist(
       (set) => ({
         columns: ['battles', 'winrate', 'wn8', 'averageDamage'],
         tracking: false,
       }),
-        { name: 'session-2', merge: (a, b) => lodash.merge(b, a) },
+      { name: 'session-2', merge: (a, b) => merge(b, a) },
     ),
   ),
 );