From 22cd18956bd04ec58180c5eb82fd40f4bdbb172d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Wed, 22 May 2024 13:27:07 -0500
Subject: [PATCH] feat: start of isolation
---
.../TankSearch/components/Results.tsx | 171 ++++++++++++++++++
.../components/TankSearch/index.tsx | 167 +----------------
src/app/tools/tankopedia/page.css.ts | 2 -
3 files changed, 174 insertions(+), 166 deletions(-)
create mode 100644 src/app/tools/tankopedia/components/TankSearch/components/Results.tsx
diff --git a/src/app/tools/tankopedia/components/TankSearch/components/Results.tsx b/src/app/tools/tankopedia/components/TankSearch/components/Results.tsx
new file mode 100644
index 000000000..28e1cda61
--- /dev/null
+++ b/src/app/tools/tankopedia/components/TankSearch/components/Results.tsx
@@ -0,0 +1,171 @@
+import { slateDark } from '@radix-ui/colors';
+import { Card, Flex, Inset, Link } from '@radix-ui/themes';
+import { asset } from '../../../../../../core/blitzkit/asset';
+import { TankDefinition } from '../../../../../../core/blitzkit/tankDefinitions';
+import {
+ TANK_ICONS,
+ TANK_ICONS_COLLECTOR,
+ TANK_ICONS_PREMIUM,
+ TIER_ROMAN_NUMERALS,
+} from '../../../../../../core/blitzkit/tankDefinitions/constants';
+import { tankIcon } from '../../../../../../core/blitzkit/tankIcon';
+import { theme } from '../../../../../../stitches.config';
+import { CompactSearchResultRow } from './CompactSearchResultRow';
+
+interface ResultsProps {
+ compact?: boolean;
+ results: TankDefinition[];
+}
+
+export function Results({ compact, results }: ResultsProps) {
+ const firstChunk = compact
+ ? results.slice(0, Math.ceil(results.length / 2))
+ : [];
+ const secondChunk = compact
+ ? results.slice(Math.ceil(results.length / 2))
+ : [];
+
+ return (
+ 0 && secondChunk.length > 0
+ ? 'space-around'
+ : 'center',
+ }}
+ >
+ {!compact &&
+ results.map((tank) => (
+
+
+
+ })
+
+
+
+
+
})
+
+
+ {tank.name}
+
+
+
+
+ {TIER_ROMAN_NUMERALS[tank.tier]}
+
+
+
+
+
+ ))}
+
+ {compact && firstChunk.length > 0 && (
+
+ )}
+
+ {compact && secondChunk.length > 0 && (
+
+ )}
+
+ );
+}
diff --git a/src/app/tools/tankopedia/components/TankSearch/index.tsx b/src/app/tools/tankopedia/components/TankSearch/index.tsx
index 5a253a9df..2fa6d4659 100644
--- a/src/app/tools/tankopedia/components/TankSearch/index.tsx
+++ b/src/app/tools/tankopedia/components/TankSearch/index.tsx
@@ -1,4 +1,3 @@
-import { slateDark } from '@radix-ui/colors';
import {
CaretDownIcon,
CaretRightIcon,
@@ -8,20 +7,16 @@ import {
import {
AlertDialog,
Button,
- Card,
DropdownMenu,
Flex,
- Inset,
Text,
TextField,
} from '@radix-ui/themes';
import { go } from 'fuzzysort';
-import Link from 'next/link';
import { use, useEffect, useMemo, useRef, useState } from 'react';
import { TreeType } from '../../../../../components/Tanks';
import { TANK_CLASSES } from '../../../../../components/Tanks/components/Item/constants';
import { resolveNearPenetration } from '../../../../../core/blitz/resolveNearPenetration';
-import { asset } from '../../../../../core/blitzkit/asset';
import { modelDefinitions } from '../../../../../core/blitzkit/modelDefinitions';
import { normalizeBoundingBox } from '../../../../../core/blitzkit/normalizeBoundingBox';
import { resolveDpm } from '../../../../../core/blitzkit/resolveDpm';
@@ -31,24 +26,15 @@ import {
TankDefinition,
tanksDefinitionsArray,
} from '../../../../../core/blitzkit/tankDefinitions';
-import {
- TANK_ICONS,
- TANK_ICONS_COLLECTOR,
- TANK_ICONS_PREMIUM,
- TIER_ROMAN_NUMERALS,
-} from '../../../../../core/blitzkit/tankDefinitions/constants';
-import { tankIcon } from '../../../../../core/blitzkit/tankIcon';
import { unionBoundingBox } from '../../../../../core/blitzkit/unionBoundingBox';
-import { theme } from '../../../../../stitches.config';
import mutateTankopediaPersistent, {
SORT_NAMES,
TankopediaSortDirection,
useTankopediaPersistent,
} from '../../../../../stores/tankopedia';
-import * as styles from '../../page.css';
import { PageTurner } from '../PageTurner';
-import { CompactSearchResultRow } from './components/CompactSearchResultRow';
import { Options } from './components/Options';
+import { Results } from './components/Results';
interface TankSearchProps {
compact?: boolean;
@@ -414,13 +400,7 @@ export function TankSearch({
page * tanksPerPage,
(page + 1) * tanksPerPage,
);
- const firstChunk = searchResultsPageSlice.slice(
- 0,
- Math.ceil(searchResultsPageSlice.length / 2),
- );
- const secondChunk = searchResultsPageSlice.slice(
- Math.ceil(searchResultsPageSlice.length / 2),
- );
+
useEffect(() => {
mutateTankopediaPersistent((draft) => {
@@ -873,148 +853,7 @@ export function TankSearch({
)}
- 0 && secondChunk.length > 0
- ? 'space-around'
- : 'center',
- }}
- >
- {!compact &&
- searchResultsPageSlice.map((tank) => (
-
-
-
-
-
-
-
-
-
-