From 3708a3ced761a50f87609b40ab9b1deac578956e Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Fri, 17 Jan 2025 20:29:33 -0600
Subject: [PATCH] fix: handle deleted tanks

---
 .../website/src/components/TankCard/index.tsx    | 16 +++++++++++-----
 .../TankSearch/components/RecentlyViewed.tsx     |  4 +++-
 .../website/src/components/TankSearch/index.tsx  |  4 +++-
 .../components/Tankopedia/CalloutsSection.tsx    | 11 ++++++-----
 4 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/packages/website/src/components/TankCard/index.tsx b/packages/website/src/components/TankCard/index.tsx
index 52860d4bd..24836b940 100644
--- a/packages/website/src/components/TankCard/index.tsx
+++ b/packages/website/src/components/TankCard/index.tsx
@@ -1,4 +1,9 @@
-import { asset, TankType, type TankDefinition } from '@blitzkit/core';
+import {
+  asset,
+  fetchTankDefinitions,
+  TankType,
+  type TankDefinition,
+} from '@blitzkit/core';
 import { Flex, Text, type TextProps } from '@radix-ui/themes';
 import { uniq } from 'lodash-es';
 import { forwardRef, type ReactNode } from 'react';
@@ -16,6 +21,8 @@ type TankCardProps = TextProps & {
   noLink?: boolean;
 };
 
+const tankDefinitions = await fetchTankDefinitions();
+
 export const TankCard = forwardRef<HTMLSpanElement, TankCardProps>(
   (
     {
@@ -49,10 +56,9 @@ export const TankCard = forwardRef<HTMLSpanElement, TankCardProps>(
         onClick={() => {
           onSelect?.(tank);
           mutateTankopediaPersistent((draft) => {
-            draft.recentlyViewed = uniq([
-              tank.id,
-              ...draft.recentlyViewed,
-            ]).slice(0, MAX_RECENTLY_VIEWED);
+            draft.recentlyViewed = uniq([tank.id, ...draft.recentlyViewed])
+              .filter((id) => id in tankDefinitions.tanks)
+              .slice(0, MAX_RECENTLY_VIEWED);
           });
         }}
         className="tank-search-card"
diff --git a/packages/website/src/components/TankSearch/components/RecentlyViewed.tsx b/packages/website/src/components/TankSearch/components/RecentlyViewed.tsx
index cb87544ee..bd2777937 100644
--- a/packages/website/src/components/TankSearch/components/RecentlyViewed.tsx
+++ b/packages/website/src/components/TankSearch/components/RecentlyViewed.tsx
@@ -16,7 +16,9 @@ export function RecentlyViewed() {
   const tankopediaPersistentStore = TankopediaPersistent.useStore();
   const filters = useStore($tankFilters);
   // non-reactive because it is a little weird that it updates instantly even before the page loads
-  const recentlyViewed = tankopediaPersistentStore.getState().recentlyViewed;
+  const recentlyViewed = tankopediaPersistentStore
+    .getState()
+    .recentlyViewed.filter((id) => id in tankDefinitions.tanks);
   const sort = useStore($tankopediaSort);
   const hasFilters = useMemo(
     () =>
diff --git a/packages/website/src/components/TankSearch/index.tsx b/packages/website/src/components/TankSearch/index.tsx
index 6fb6dae05..0e3aea2b8 100644
--- a/packages/website/src/components/TankSearch/index.tsx
+++ b/packages/website/src/components/TankSearch/index.tsx
@@ -456,7 +456,9 @@ export const TankSearch = memo<TankSearchProps>(
                     draft.recentlyViewed = uniq([
                       ...tanksFiltered.map(({ id }) => id),
                       ...draft.recentlyViewed,
-                    ]).slice(0, MAX_RECENTLY_VIEWED);
+                    ])
+                      .filter((id) => id in tankDefinitions.tanks)
+                      .slice(0, MAX_RECENTLY_VIEWED);
                   });
                 }}
               >
diff --git a/packages/website/src/components/Tankopedia/CalloutsSection.tsx b/packages/website/src/components/Tankopedia/CalloutsSection.tsx
index 46ee7c58c..4c139ffab 100644
--- a/packages/website/src/components/Tankopedia/CalloutsSection.tsx
+++ b/packages/website/src/components/Tankopedia/CalloutsSection.tsx
@@ -1,4 +1,4 @@
-import { assertSecret } from '@blitzkit/core';
+import { assertSecret, fetchTankDefinitions } from '@blitzkit/core';
 import { MinusCircledIcon } from '@radix-ui/react-icons';
 import { Callout, Flex } from '@radix-ui/themes';
 import { uniq } from 'lodash-es';
@@ -9,6 +9,8 @@ import { AesonPlug } from '../AesonPlug';
 import { ExperimentIcon } from '../ExperimentIcon';
 import { MAX_RECENTLY_VIEWED } from '../TankSearch/constants';
 
+const tankDefinitions = await fetchTankDefinitions();
+
 export function CalloutsSection() {
   const tank = Duel.use((state) => state.protagonist.tank);
   const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
@@ -17,10 +19,9 @@ export function CalloutsSection() {
 
   useEffect(() => {
     mutateTankopediaPersistent((draft) => {
-      draft.recentlyViewed = uniq([tank.id, ...draft.recentlyViewed]).slice(
-        0,
-        MAX_RECENTLY_VIEWED,
-      );
+      draft.recentlyViewed = uniq([tank.id, ...draft.recentlyViewed])
+        .filter((id) => id in tankDefinitions.tanks)
+        .slice(0, MAX_RECENTLY_VIEWED);
     });
   }, [tank]);