feat: persistent sorting

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { CaretDownIcon } from '@radix-ui/react-icons';
 import { Button, DropdownMenu, Flex } from '@radix-ui/themes';
 import {
@@ -10,7 +12,7 @@ export function Options() {
   const tankopediaState = useTankopedia();
 
   return (
-    <Flex gap="2">
+    <Flex gap="1">
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>
           <Button variant="soft">
@@ -26,6 +28,7 @@ export function Options() {
             }
           >
             <DropdownMenu.RadioItem value="tier">Tier</DropdownMenu.RadioItem>
+            <DropdownMenu.RadioItem value="name">Name</DropdownMenu.RadioItem>
           </DropdownMenu.RadioGroup>
         </DropdownMenu.Content>
       </DropdownMenu.Root>

src/app/tools/tankopedia/page.tsx

@@ -32,9 +32,20 @@ export default function Page() {
   const input = useRef<HTMLInputElement>(null);
   const sortedTanks = useMemo(
     () =>
-      awaitedTanks.sort((a, b) => {
+      awaitedTanks.toSorted((a, b) => {
         let diff = 0;
-        if (tankopediaState.sortBy === 'tier') diff = a.tier - b.tier;
+
+        if (tankopediaState.sortBy === 'tier') {
+          diff = a.tier - b.tier;
+        }
+        if (tankopediaState.sortBy === 'name') {
+          diff = (
+            a.name_short ??
+            a.name ??
+            `Unknown tank ${a.id}`
+          ).localeCompare(b.name_short ?? b.name ?? `Unknown tank ${b.id}`);
+        }
+
         return tankopediaState.sortDirection === 'ascending' ? diff : -diff;
       }),
     [tankopediaState.sortBy, tankopediaState.sortDirection],
@@ -43,6 +54,11 @@ export default function Page() {
   const [page, setPage] = useState(0);
   const pageInput = useRef<HTMLInputElement>(null);
 
+  useEffect(() => {
+    setSearchedList(sortedTanks);
+    if (input.current) input.current.value = '';
+  }, [sortedTanks]);
+
   useEffect(() => {
     if (pageInput.current) pageInput.current.value = `${page + 1}`;
   }, [page]);
@@ -56,9 +72,9 @@ export default function Page() {
   }, [searchedList]);
 
   return (
-    <PageWrapper size="wide">
+    <PageWrapper size="wide" color="purple">
       <Suspense fallback={<Text>Loading...</Text>}>
-        <Flex direction="column" gap="2">
+        <Flex direction="column" gap="3">
           <TextField.Root>
             <TextField.Slot>
               <MagnifyingGlassIcon height="16" width="16" />
@@ -150,6 +166,7 @@ export default function Page() {
           {searchedList
             .map((tank) => (
               <a
+                key={tank.id}
                 href={`/tools/tankopedia/${tank.id}`}
                 style={{
                   flex: 1,

src/stores/tankopedia.ts

@@ -2,7 +2,7 @@ import { produce } from 'immer';
 import { create } from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
 
-export type TankopediaSortBy = 'tier';
+export type TankopediaSortBy = 'tier' | 'name';
 export type TankopediaSortDirection = 'ascending' | 'descending';
 
 type Tankopedia = {