feat: next safe generalization

src/app/tools/tankopedia/components/FilterControl.tsx

@@ -14,11 +14,7 @@ import { asset } from '../../../../core/blitzkit/asset';
 import { gameDefinitions } from '../../../../core/blitzkit/gameDefinitions';
 import { Tier } from '../../../../core/blitzkit/tankDefinitions';
 import { TIER_ROMAN_NUMERALS } from '../../../../core/blitzkit/tankDefinitions/constants';
-import {
-  useTankFilters,
-  useTankFiltersContext,
-  useTankFiltersMutation,
-} from '../../../../stores/tankFilters';
+import * as TankFilters from '../../../../stores/tankFilters';
 
 interface FilterControlProps {
   compact?: boolean;
@@ -26,9 +22,9 @@ interface FilterControlProps {
 
 export function FilterControl({ compact }: FilterControlProps) {
   const awaitedGameDefinitions = use(gameDefinitions);
-  const filters = useTankFilters();
-  const mutateTankFilters = useTankFiltersMutation();
-  const tankFiltersContext = useTankFiltersContext();
+  const filters = TankFilters.use();
+  const mutateTankFilters = TankFilters.useMutation();
+  const tankFiltersStore = TankFilters.useStore();
 
   return (
     <Flex height="fit-content" gap="2" align="start" justify="center">
@@ -325,10 +321,7 @@ export function FilterControl({ compact }: FilterControlProps) {
         <IconButton
           color="red"
           onClick={() => {
-            tankFiltersContext.setState(
-              tankFiltersContext.getInitialState(),
-              true,
-            );
+            tankFiltersStore.setState(tankFiltersStore.getInitialState(), true);
           }}
         >
           <ReloadIcon />

src/app/tools/tankopedia/components/NoResults.tsx

@@ -1,12 +1,12 @@
 import { Flex, Link, Text } from '@radix-ui/themes';
-import { useTankFiltersContext } from '../../../../stores/tankFilters';
+import * as TankFilters from '../../../../stores/tankFilters';
 
 interface NoResultsProps {
   type?: 'filters' | 'search';
 }
 
 export function NoResults({ type = 'filters' }: NoResultsProps) {
-  const tankFiltersContext = useTankFiltersContext();
+  const tankFiltersStore = TankFilters.useStore();
 
   return (
     <Flex flexGrow="1" align="center" justify="center">
@@ -17,10 +17,7 @@ export function NoResults({ type = 'filters' }: NoResultsProps) {
           underline="always"
           color="red"
           onClick={() =>
-            tankFiltersContext.setState(
-              tankFiltersContext.getInitialState(),
-              true,
-            )
+            tankFiltersStore.setState(tankFiltersStore.getInitialState(), true)
           }
         >
           {type === 'filters' ? 'Try clearing filters' : 'Try searching again'}

src/app/tools/tankopedia/components/QuickLink.tsx

@@ -1,15 +1,15 @@
 import { CaretRightIcon } from '@radix-ui/react-icons';
 import { Button, Link, TextField } from '@radix-ui/themes';
 import { TankDefinition } from '../../../../core/blitzkit/tankDefinitions';
-import { useTankFilters } from '../../../../stores/tankFilters';
+import * as TankFilters from '../../../../stores/tankFilters';
 
 interface QuickLinkProps {
   topResult?: TankDefinition;
 }
 
 export function QuickLink({ topResult }: QuickLinkProps) {
-  const search = useTankFilters((state) => state.search);
-  const searching = useTankFilters((state) => state.searching);
+  const search = TankFilters.use((state) => state.search);
+  const searching = TankFilters.use((state) => state.searching);
 
   if (!search || !topResult || searching) return null;
 

src/app/tools/tankopedia/components/SearchBar.tsx

@@ -4,10 +4,7 @@ import { debounce } from 'lodash';
 import { useRouter } from 'next/navigation';
 import { KeyboardEventHandler, useCallback, useRef } from 'react';
 import { TankDefinition } from '../../../../core/blitzkit/tankDefinitions';
-import {
-  useTankFilters,
-  useTankFiltersContext,
-} from '../../../../stores/tankFilters';
+import * as TankFilters from '../../../../stores/tankFilters';
 import { QuickLink } from './QuickLink';
 import { Sort } from './Sort';
 
@@ -17,27 +14,27 @@ interface SearchBarProps {
 }
 
 export function SearchBar({ topResult, onSelect }: SearchBarProps) {
-  const tankFiltersContext = useTankFiltersContext();
+  const tankFiltersStore = TankFilters.useStore();
   const router = useRouter();
   const input = useRef<HTMLInputElement>(null);
-  const searching = useTankFilters((state) => state.searching);
+  const searching = TankFilters.use((state) => state.searching);
   const performSearch = useCallback(
     debounce(() => {
-      tankFiltersContext.setState({ searching: false });
+      tankFiltersStore.setState({ searching: false });
 
       if (!input.current) return;
 
       const sanitized = input.current.value.trim();
 
-      tankFiltersContext.setState({
+      tankFiltersStore.setState({
         search: sanitized.length === 0 ? undefined : sanitized,
       });
     }, 500),
     [],
   );
   const handleChange = useCallback(() => {
-    if (!tankFiltersContext.getState().searching) {
-      tankFiltersContext.setState({ searching: true });
+    if (!tankFiltersStore.getState().searching) {
+      tankFiltersStore.setState({ searching: true });
     }
 
     performSearch();

src/app/tools/tankopedia/components/TankSearch/index.tsx

@@ -20,7 +20,7 @@ import {
 } from '../../../../../core/blitzkit/tankDefinitions';
 import { unionBoundingBox } from '../../../../../core/blitzkit/unionBoundingBox';
 import { useAdExempt } from '../../../../../hooks/useAdExempt';
-import { useTankFilters } from '../../../../../stores/tankFilters';
+import * as TankFilters from '../../../../../stores/tankFilters';
 import { SORT_NAMES, SORT_UNITS } from '../../../../../stores/tankopedia';
 import { useTankopediaSort } from '../../../../../stores/tankopediaSort';
 import { FilterControl } from '../FilterControl';
@@ -45,7 +45,7 @@ export const TankSearch = memo<TankSearchProps>(
     const awaitedTankDefinitions = use(tankDefinitions);
     const awaitedTanksDefinitionsArray = use(tanksDefinitionsArray);
     const awaitedTankNames = use(tankNames);
-    const filters = useTankFilters();
+    const filters = TankFilters.use();
     const sort = useTankopediaSort();
     const tanks = useMemo(() => {
       if (filters.search === undefined) {

src/app/tools/tankopedia/components/TierFilter.tsx

@@ -3,17 +3,14 @@ import { times } from 'lodash';
 import { memo } from 'react';
 import { Tier } from '../../../../core/blitzkit/tankDefinitions';
 import { TIER_ROMAN_NUMERALS } from '../../../../core/blitzkit/tankDefinitions/constants';
-import {
-  useTankFilters,
-  useTankFiltersMutation,
-} from '../../../../stores/tankFilters';
+import * as TankFilters from '../../../../stores/tankFilters';
 import { useTankopediaSort } from '../../../../stores/tankopediaSort';
 
 export const TierFilter = memo(() => {
-  const tierFilter = useTankFilters((state) => state.tiers);
+  const tierFilter = TankFilters.use((state) => state.tiers);
   const sort = useTankopediaSort();
-  const search = useTankFilters((state) => state.search);
-  const mutateTankFilters = useTankFiltersMutation();
+  const search = TankFilters.use((state) => state.search);
+  const mutateTankFilters = TankFilters.useMutation();
 
   if (sort.by !== 'meta.none' || search) return null;