From 49d3e1d1c26868b06877afeeeaf30ed7d294a24d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 6 Apr 2024 10:36:07 -0500
Subject: [PATCH] feat: select all option

---
 .vscode/settings.json                         |  1 +
 src/app/tools/compare/page.tsx                | 11 ++++-
 .../components/TankSearch/index.tsx           | 48 ++++++++++++++++++-
 3 files changed, 57 insertions(+), 3 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 042ffd324..df5fe0a2f 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -148,6 +148,7 @@
     "whitespaces",
     "winrate",
     "wireframe",
+    "Woah",
     "WOTB",
     "wotblitz",
     "xffn",
diff --git a/src/app/tools/compare/page.tsx b/src/app/tools/compare/page.tsx
index 56099e92c..5b89060df 100644
--- a/src/app/tools/compare/page.tsx
+++ b/src/app/tools/compare/page.tsx
@@ -293,7 +293,16 @@ export default function Page() {
                         tankToCompareMember(tank, awaitedSkillDefinitions),
                       );
                     });
-
+                    setAddTankDialogOpen(false);
+                  }}
+                  onSelectAll={(tanks) => {
+                    mutateCompareTemporary((draft) => {
+                      draft.members.push(
+                        ...tanks.map((tank) =>
+                          tankToCompareMember(tank, awaitedSkillDefinitions),
+                        ),
+                      );
+                    });
                     setAddTankDialogOpen(false);
                   }}
                 />
diff --git a/src/app/tools/tankopedia/components/TankSearch/index.tsx b/src/app/tools/tankopedia/components/TankSearch/index.tsx
index 0c9213cde..f1c8f9098 100644
--- a/src/app/tools/tankopedia/components/TankSearch/index.tsx
+++ b/src/app/tools/tankopedia/components/TankSearch/index.tsx
@@ -5,6 +5,7 @@ import {
   TrashIcon,
 } from '@radix-ui/react-icons';
 import {
+  AlertDialog,
   Button,
   Card,
   DropdownMenu,
@@ -51,11 +52,16 @@ import { Options } from './components/Options';
 interface TankSearchProps {
   compact?: boolean;
   onSelect?: (tank: TankDefinition) => void;
+  onSelectAll?: (tanks: TankDefinition[]) => void;
 }
 
 const treeTypeOrder: TreeType[] = ['researchable', 'premium', 'collector'];
 
-export function TankSearch({ compact, onSelect = () => {} }: TankSearchProps) {
+export function TankSearch({
+  compact,
+  onSelect = () => {},
+  onSelectAll,
+}: TankSearchProps) {
   const tanksPerPage = compact ? 16 : 96;
   const nations = use(NATIONS);
   const filters = useTankopediaPersistent((state) => state.filters);
@@ -796,10 +802,47 @@ export function TankSearch({ compact, onSelect = () => {} }: TankSearchProps) {
         <Options />
       </Flex>
 
-      <Flex justify="center">
+      <Flex justify="center" gap="4" align="center">
         <Text color="gray">
           Sorting: {SORT_NAMES[sort.by]}, {sort.direction}
         </Text>
+
+        {onSelectAll && searchResults.length <= 8 && (
+          <Button variant="ghost" onClick={() => onSelectAll(searchResults)}>
+            Select all
+          </Button>
+        )}
+        {onSelectAll && searchResults.length > 8 && (
+          <AlertDialog.Root>
+            <AlertDialog.Trigger>
+              <Button variant="ghost">Select all</Button>
+            </AlertDialog.Trigger>
+
+            <AlertDialog.Content>
+              <AlertDialog.Title>
+                Woah! That's a lot of tanks.
+              </AlertDialog.Title>
+              <AlertDialog.Description>
+                Would you like to select{' '}
+                <Text color="red">all {searchResults.length} tanks</Text>?
+              </AlertDialog.Description>
+
+              <Flex gap="2" justify="end">
+                <AlertDialog.Cancel>
+                  <Button variant="soft" color="gray">
+                    Cancel
+                  </Button>
+                </AlertDialog.Cancel>
+
+                <AlertDialog.Action onClick={() => onSelectAll(searchResults)}>
+                  <Button variant="solid" color="red">
+                    Select {searchResults.length} tanks
+                  </Button>
+                </AlertDialog.Action>
+              </Flex>
+            </AlertDialog.Content>
+          </AlertDialog.Root>
+        )}
       </Flex>
 
       {!compact && (
@@ -935,6 +978,7 @@ export function TankSearch({ compact, onSelect = () => {} }: TankSearchProps) {
           <CompactSearchResultRow tanks={secondChunk} onSelect={onSelect} />
         )}
       </Flex>
+
       <PageTurner tanksPerPage={tanksPerPage} searchedList={searchResults} />
     </>
   );