TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-24 12:09:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: tank performance filters

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-07-02 19:19:15 -05:00
1 parent 4b46eb59e0
commit 4c6369b8b4
9 files changed
+106 -85
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/tools/tank-performance/components/Tanks.tsx
+10 -2
View File
@@ -4,6 +4,8 @@ import { Table } from '@radix-ui/themes';
import { Suspense, use, useMemo } from 'react'; import { Suspense, use, useMemo } from 'react';
import { averageDefinitionsArray } from '../../../../core/blitzkit/averageDefinitions'; import { averageDefinitionsArray } from '../../../../core/blitzkit/averageDefinitions';
import { tankDefinitions } from '../../../../core/blitzkit/tankDefinitions'; import { tankDefinitions } from '../../../../core/blitzkit/tankDefinitions';
import { tankopediaFilterTank } from '../../../../core/blitzkit/tankopediaFilterTank';
import { useTankopediaFilters } from '../../../../stores/tankopediaFilters';
import { useTankPerformanceSort } from '../../../../stores/tankPerformanceSort'; import { useTankPerformanceSort } from '../../../../stores/tankPerformanceSort';
import { RowLoader } from './RowLoader'; import { RowLoader } from './RowLoader';
import { TankRow } from './TankRow'; import { TankRow } from './TankRow';
@@ -11,8 +13,9 @@ import { TankRow } from './TankRow';
export function Tanks() { export function Tanks() {
const awaitedTankDefinitions = use(tankDefinitions); const awaitedTankDefinitions = use(tankDefinitions);
const awaitedAverageDefinitionsArray = use(averageDefinitionsArray); const awaitedAverageDefinitionsArray = use(averageDefinitionsArray);
const filters = useTankopediaFilters();
const sort = useTankPerformanceSort(); const sort = useTankPerformanceSort();
const tankAverages = useMemo(() => { const tanksSorted = useMemo(() => {
switch (sort.type) { switch (sort.type) {
case 'accuracy': case 'accuracy':
return awaitedAverageDefinitionsArray.sort( return awaitedAverageDefinitionsArray.sort(
@@ -101,10 +104,15 @@ export function Tanks() {
); );
} }
}, [sort]); }, [sort]);
const tanks = useMemo(() => {
return tanksSorted.filter((tank) =>
tankopediaFilterTank(filters, awaitedTankDefinitions[tank.id]),
);
}, [filters, tanksSorted]);
return ( return (
<Table.Body> <Table.Body>
{tankAverages.map((averages) => { {tanks.map((averages) => {
const tank = awaitedTankDefinitions[averages.id]; const tank = awaitedTankDefinitions[averages.id];
return ( return (
<Suspense key={tank.id} fallback={<RowLoader />}> <Suspense key={tank.id} fallback={<RowLoader />}>
src/app/tools/tank-performance/page.tsx
+3
View File
@@ -1,6 +1,7 @@
import { Flex, Table } from '@radix-ui/themes'; import { Flex, Table } from '@radix-ui/themes';
import { Suspense } from 'react'; import { Suspense } from 'react';
import PageWrapper from '../../../components/PageWrapper'; import PageWrapper from '../../../components/PageWrapper';
import { FilterControl } from '../tankopedia/components/FilterControl';
import { BodyLoader } from './components/BodyLoader'; import { BodyLoader } from './components/BodyLoader';
import { Header } from './components/Header'; import { Header } from './components/Header';
import { Info } from './components/Info'; import { Info } from './components/Info';
@@ -11,6 +12,8 @@ export default function Page() {
<PageWrapper color="jade" noMaxWidth> <PageWrapper color="jade" noMaxWidth>
<Info /> <Info />
<FilterControl />
<Flex justify="center"> <Flex justify="center">
<Table.Root variant="surface" style={{ maxWidth: '100%' }}> <Table.Root variant="surface" style={{ maxWidth: '100%' }}>
<Header /> <Header />
src/app/tools/tankopedia/components/FilterControl.tsx
+2
View File
@@ -1,3 +1,5 @@
'use client';
import { ReloadIcon } from '@radix-ui/react-icons'; import { ReloadIcon } from '@radix-ui/react-icons';
import { Box, Flex, IconButton, Text } from '@radix-ui/themes'; import { Box, Flex, IconButton, Text } from '@radix-ui/themes';
import { times } from 'lodash'; import { times } from 'lodash';
src/app/tools/tankopedia/components/Sort.tsx
+60 -60
View File
@@ -2,12 +2,12 @@ import { CaretDownIcon } from '@radix-ui/react-icons';
import { Button, DropdownMenu } from '@radix-ui/themes'; import { Button, DropdownMenu } from '@radix-ui/themes';
import { TankopediaSortDirection } from '../../../../stores/tankopedia'; import { TankopediaSortDirection } from '../../../../stores/tankopedia';
import { import {
mutateTankopediaFilters, mutateTankopediaSort,
useTankopediaFilters, useTankopediaSort,
} from '../../../../stores/tankopediaFilters'; } from '../../../../stores/tankopediaSort';
export function Sort() { export function Sort() {
const sort = useTankopediaFilters((state) => state.sort); const sort = useTankopediaSort();
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
@@ -22,8 +22,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'meta.none'} checked={sort.by === 'meta.none'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'meta.none'; draft.by = 'meta.none';
}); });
}} }}
> >
@@ -38,8 +38,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'fire.dpm'} checked={sort.by === 'fire.dpm'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'fire.dpm'; draft.by = 'fire.dpm';
}); });
}} }}
> >
@@ -48,8 +48,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'fire.dpmPremium'} checked={sort.by === 'fire.dpmPremium'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'fire.dpmPremium'; draft.by = 'fire.dpmPremium';
}); });
}} }}
> >
@@ -58,8 +58,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'fire.reload'} checked={sort.by === 'fire.reload'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'fire.reload'; draft.by = 'fire.reload';
}); });
}} }}
> >
@@ -68,8 +68,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'fire.caliber'} checked={sort.by === 'fire.caliber'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'fire.caliber'; draft.by = 'fire.caliber';
}); });
}} }}
> >
@@ -78,8 +78,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'fire.standardPenetration'} checked={sort.by === 'fire.standardPenetration'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'fire.standardPenetration'; draft.by = 'fire.standardPenetration';
}); });
}} }}
> >
@@ -88,8 +88,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'fire.premiumPenetration'} checked={sort.by === 'fire.premiumPenetration'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'fire.premiumPenetration'; draft.by = 'fire.premiumPenetration';
}); });
}} }}
> >
@@ -98,8 +98,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'fire.damage'} checked={sort.by === 'fire.damage'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'fire.damage'; draft.by = 'fire.damage';
}); });
}} }}
> >
@@ -108,8 +108,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'fire.shellVelocity'} checked={sort.by === 'fire.shellVelocity'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'fire.shellVelocity'; draft.by = 'fire.shellVelocity';
}); });
}} }}
> >
@@ -118,8 +118,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'fire.aimTime'} checked={sort.by === 'fire.aimTime'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'fire.aimTime'; draft.by = 'fire.aimTime';
}); });
}} }}
> >
@@ -128,8 +128,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'fire.dispersionStill'} checked={sort.by === 'fire.dispersionStill'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'fire.dispersionStill'; draft.by = 'fire.dispersionStill';
}); });
}} }}
> >
@@ -138,8 +138,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'fire.dispersionMoving'} checked={sort.by === 'fire.dispersionMoving'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'fire.dispersionMoving'; draft.by = 'fire.dispersionMoving';
}); });
}} }}
> >
@@ -148,8 +148,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'fire.gunDepression'} checked={sort.by === 'fire.gunDepression'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'fire.gunDepression'; draft.by = 'fire.gunDepression';
}); });
}} }}
> >
@@ -158,8 +158,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'fire.gunElevation'} checked={sort.by === 'fire.gunElevation'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'fire.gunElevation'; draft.by = 'fire.gunElevation';
}); });
}} }}
> >
@@ -174,8 +174,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'maneuverability.forwardsSpeed'} checked={sort.by === 'maneuverability.forwardsSpeed'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'maneuverability.forwardsSpeed'; draft.by = 'maneuverability.forwardsSpeed';
}); });
}} }}
> >
@@ -184,8 +184,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'maneuverability.backwardsSpeed'} checked={sort.by === 'maneuverability.backwardsSpeed'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'maneuverability.backwardsSpeed'; draft.by = 'maneuverability.backwardsSpeed';
}); });
}} }}
> >
@@ -194,8 +194,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'maneuverability.power'} checked={sort.by === 'maneuverability.power'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'maneuverability.power'; draft.by = 'maneuverability.power';
}); });
}} }}
> >
@@ -204,8 +204,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'maneuverability.powerToWeight'} checked={sort.by === 'maneuverability.powerToWeight'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'maneuverability.powerToWeight'; draft.by = 'maneuverability.powerToWeight';
}); });
}} }}
> >
@@ -214,8 +214,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'maneuverability.weight'} checked={sort.by === 'maneuverability.weight'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'maneuverability.weight'; draft.by = 'maneuverability.weight';
}); });
}} }}
> >
@@ -224,8 +224,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'maneuverability.traverseSpeed'} checked={sort.by === 'maneuverability.traverseSpeed'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'maneuverability.traverseSpeed'; draft.by = 'maneuverability.traverseSpeed';
}); });
}} }}
> >
@@ -240,8 +240,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'survivability.health'} checked={sort.by === 'survivability.health'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'survivability.health'; draft.by = 'survivability.health';
}); });
}} }}
> >
@@ -250,8 +250,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'survivability.viewRange'} checked={sort.by === 'survivability.viewRange'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'survivability.viewRange'; draft.by = 'survivability.viewRange';
}); });
}} }}
> >
@@ -260,8 +260,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'survivability.camouflageStill'} checked={sort.by === 'survivability.camouflageStill'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'survivability.camouflageStill'; draft.by = 'survivability.camouflageStill';
}); });
}} }}
> >
@@ -270,8 +270,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'survivability.camouflageMoving'} checked={sort.by === 'survivability.camouflageMoving'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'survivability.camouflageMoving'; draft.by = 'survivability.camouflageMoving';
}); });
}} }}
> >
@@ -280,8 +280,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'survivability.camouflageShooting'} checked={sort.by === 'survivability.camouflageShooting'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'survivability.camouflageShooting'; draft.by = 'survivability.camouflageShooting';
}); });
}} }}
> >
@@ -290,8 +290,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'survivability.volume'} checked={sort.by === 'survivability.volume'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'survivability.volume'; draft.by = 'survivability.volume';
}); });
}} }}
> >
@@ -300,8 +300,8 @@ export function Sort() {
<DropdownMenu.CheckboxItem <DropdownMenu.CheckboxItem
checked={sort.by === 'survivability.length'} checked={sort.by === 'survivability.length'}
onClick={() => { onClick={() => {
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.by = 'survivability.length'; draft.by = 'survivability.length';
}); });
}} }}
> >
@@ -314,8 +314,8 @@ export function Sort() {
<DropdownMenu.RadioGroup <DropdownMenu.RadioGroup
value={sort.direction} value={sort.direction}
onValueChange={(value) => onValueChange={(value) =>
mutateTankopediaFilters((draft) => { mutateTankopediaSort((draft) => {
draft.sort.direction = value as TankopediaSortDirection; draft.direction = value as TankopediaSortDirection;
}) })
} }
> >
src/app/tools/tankopedia/components/TankCard.tsx
+2 -3
View File
@@ -12,7 +12,7 @@ import { resolveReload } from '../../../../core/blitzkit/resolveReload';
import { TankDefinition } from '../../../../core/blitzkit/tankDefinitions'; import { TankDefinition } from '../../../../core/blitzkit/tankDefinitions';
import { tankIcon } from '../../../../core/blitzkit/tankIcon'; import { tankIcon } from '../../../../core/blitzkit/tankIcon';
import { unionBoundingBox } from '../../../../core/blitzkit/unionBoundingBox'; import { unionBoundingBox } from '../../../../core/blitzkit/unionBoundingBox';
import { useTankopediaFilters } from '../../../../stores/tankopediaFilters'; import { useTankopediaSort } from '../../../../stores/tankopediaSort';
import * as styles from './TankCard.css'; import * as styles from './TankCard.css';
interface TankCardProps { interface TankCardProps {
@@ -23,8 +23,7 @@ interface TankCardProps {
export function TankCard({ tank, onSelect }: TankCardProps) { export function TankCard({ tank, onSelect }: TankCardProps) {
const awaitedModelDefinitions = use(modelDefinitions); const awaitedModelDefinitions = use(modelDefinitions);
const Icon = classIcons[tank.class]; const Icon = classIcons[tank.class];
// const link = useRef<HTMLAnchorElement>(null); const sortBy = useTankopediaSort((state) => state.by);
const sortBy = useTankopediaFilters((state) => state.sort.by);
const discriminator = useMemo(() => { const discriminator = useMemo(() => {
if (sortBy.startsWith('meta')) return undefined; if (sortBy.startsWith('meta')) return undefined;
src/app/tools/tankopedia/components/TankSearch/index.tsx
+10 -10
View File
@@ -22,6 +22,7 @@ import { unionBoundingBox } from '../../../../../core/blitzkit/unionBoundingBox'
import { useAdExempt } from '../../../../../hooks/useAdExempt'; import { useAdExempt } from '../../../../../hooks/useAdExempt';
import { SORT_NAMES, SORT_UNITS } from '../../../../../stores/tankopedia'; import { SORT_NAMES, SORT_UNITS } from '../../../../../stores/tankopedia';
import { useTankopediaFilters } from '../../../../../stores/tankopediaFilters'; import { useTankopediaFilters } from '../../../../../stores/tankopediaFilters';
import { useTankopediaSort } from '../../../../../stores/tankopediaSort';
import { FilterControl } from '../FilterControl'; import { FilterControl } from '../FilterControl';
import { NoResults } from '../NoResults'; import { NoResults } from '../NoResults';
import { SearchBar } from '../SearchBar'; import { SearchBar } from '../SearchBar';
@@ -45,6 +46,7 @@ export const TankSearch = memo<TankSearchProps>(
const awaitedTanksDefinitionsArray = use(tanksDefinitionsArray); const awaitedTanksDefinitionsArray = use(tanksDefinitionsArray);
const awaitedTankNames = use(tankNames); const awaitedTankNames = use(tankNames);
const filters = useTankopediaFilters(); const filters = useTankopediaFilters();
const sort = useTankopediaSort();
const tanks = useMemo(() => { const tanks = useMemo(() => {
if (filters.search === undefined) { if (filters.search === undefined) {
const filtered = awaitedTanksDefinitionsArray.filter((tank) => const filtered = awaitedTanksDefinitionsArray.filter((tank) =>
@@ -52,7 +54,7 @@ export const TankSearch = memo<TankSearchProps>(
); );
let sorted: TankDefinition[]; let sorted: TankDefinition[];
switch (filters.sort.by) { switch (sort.by) {
case 'meta.none': case 'meta.none':
sorted = filtered sorted = filtered
.sort((a, b) => b.tier - a.tier) .sort((a, b) => b.tier - a.tier)
@@ -362,9 +364,7 @@ export const TankSearch = memo<TankSearchProps>(
break; break;
} }
return filters.sort.direction === 'ascending' return sort.direction === 'ascending' ? sorted : sorted.reverse();
? sorted
: sorted.reverse();
} else { } else {
const searchedRaw = go(filters.search, awaitedTankNames, { const searchedRaw = go(filters.search, awaitedTankNames, {
key: 'combined', key: 'combined',
@@ -385,7 +385,7 @@ export const TankSearch = memo<TankSearchProps>(
<FilterControl compact={compact} /> <FilterControl compact={compact} />
)} )}
{(filters.sort.by !== 'meta.none' || onSelectAll) && ( {(sort.by !== 'meta.none' || onSelectAll) && (
<Flex <Flex
py="2" py="2"
mt="2" mt="2"
@@ -393,13 +393,13 @@ export const TankSearch = memo<TankSearchProps>(
align="center" align="center"
justify="center" justify="center"
> >
{filters.sort.by !== 'meta.none' && ( {sort.by !== 'meta.none' && (
<Text color="gray"> <Text color="gray">
Sorting by {SORT_NAMES[filters.sort.by]} Sorting by {SORT_NAMES[sort.by]}
{SORT_UNITS[filters.sort.by] === undefined {SORT_UNITS[sort.by] === undefined
? '' ? ''
: ` (${SORT_UNITS[filters.sort.by]})`} : ` (${SORT_UNITS[sort.by]})`}
, {filters.sort.direction} , {sort.direction}
</Text> </Text>
)} )}
src/app/tools/tankopedia/components/TierFilter.tsx
+2 -1
View File
@@ -7,10 +7,11 @@ import {
mutateTankopediaFilters, mutateTankopediaFilters,
useTankopediaFilters, useTankopediaFilters,
} from '../../../../stores/tankopediaFilters'; } from '../../../../stores/tankopediaFilters';
import { useTankopediaSort } from '../../../../stores/tankopediaSort';
export const TierFilter = memo(() => { export const TierFilter = memo(() => {
const tierFilter = useTankopediaFilters((state) => state.tier); const tierFilter = useTankopediaFilters((state) => state.tier);
const sort = useTankopediaFilters((state) => state.sort); const sort = useTankopediaSort();
const search = useTankopediaFilters((state) => state.search); const search = useTankopediaFilters((state) => state.search);
if (sort.by !== 'meta.none' || search) return null; if (sort.by !== 'meta.none' || search) return null;
src/stores/tankopediaFilters.ts
-9
View File
@@ -2,7 +2,6 @@ import { produce } from 'immer';
import { create } from 'zustand'; import { create } from 'zustand';
import { TankClass, TreeType } from '../components/Tanks'; import { TankClass, TreeType } from '../components/Tanks';
import { Tier } from '../core/blitzkit/tankDefinitions'; import { Tier } from '../core/blitzkit/tankDefinitions';
import { TankopediaSortBy, TankopediaSortDirection } from './tankopedia';
export interface TankopediaFilters { export interface TankopediaFilters {
tier?: Tier; tier?: Tier;
@@ -11,19 +10,11 @@ export interface TankopediaFilters {
type?: TreeType; type?: TreeType;
testing: 'include' | 'exclude' | 'only'; testing: 'include' | 'exclude' | 'only';
search?: string; search?: string;
sort: {
by: TankopediaSortBy;
direction: TankopediaSortDirection;
};
searching: boolean; searching: boolean;
} }
export const useTankopediaFilters = create<TankopediaFilters>()(() => ({ export const useTankopediaFilters = create<TankopediaFilters>()(() => ({
testing: 'include', testing: 'include',
sort: {
by: 'meta.none',
direction: 'descending',
},
searching: false, searching: false,
})); }));
src/stores/tankopediaSort.ts
+17
View File
@@ -0,0 +1,17 @@
import { produce } from 'immer';
import { create } from 'zustand';
import { TankopediaSortBy, TankopediaSortDirection } from './tankopedia';
export interface TankopediaSort {
by: TankopediaSortBy;
direction: TankopediaSortDirection;
}
export const useTankopediaSort = create<TankopediaSort>()(() => ({
by: 'meta.none',
direction: 'descending',
}));
export function mutateTankopediaSort(recipe: (draft: TankopediaSort) => void) {
useTankopediaSort.setState(produce(recipe));
}