Allow sorting various sections alphabetically if you like

package.json

@@ -6,5 +6,8 @@
   ],
   "devDependencies": {
     "lerna": "^7.2.0"
+  },
+  "scripts": {
+    "format": "yarn workspaces run format"
   }
 }

packages/greenbox-web/src/components/Familiars.tsx

@@ -1,20 +1,26 @@
 import { SimpleGrid } from "@chakra-ui/react";
 import { FamiliarStatus } from "greenbox-data";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 
 import { useAppSelector } from "../hooks";
 import { createPlayerDataSelector } from "../store";
 
 import Familiar from "./Familiar";
 import HundredPercentedUnownableFamiliars from "./HundredPercentedUnownableFamiliars";
 import Section from "./Section";
+import { SortOrderSelect, sortByKey } from "./SortOrderSelect";
 
 const selectPlayerFamiliars = createPlayerDataSelector("familiars");
 
 export default function Familiars() {
+  const [sortBy, setSortBy] = useState<"name" | "id">("id");
+
   const playerFamiliars = useAppSelector(selectPlayerFamiliars);
   const allFamiliars = useAppSelector((state) => state.familiars);
-  const familiars = useMemo(() => allFamiliars.filter((s) => s.ownable), [allFamiliars]);
+  const familiars = useMemo(
+    () => allFamiliars.filter((s) => s.ownable).toSorted(sortByKey(sortBy)),
+    [allFamiliars, sortBy],
+  );
   const loading = useAppSelector((state) => state.loading.familiars || false);
 
   const totalInTerrarium = useMemo(
@@ -58,6 +64,12 @@ export default function Familiars() {
       ]}
       max={familiars.length}
     >
+      <SortOrderSelect<typeof sortBy>
+        onChange={setSortBy}
+        value={sortBy}
+        alphabeticalKey="name"
+        chronologicalKey="id"
+      />
       <SimpleGrid columns={6} spacing={1}>
         {familiars.map((f) => (
           <Familiar

packages/greenbox-web/src/components/Paths.tsx

@@ -1,17 +1,20 @@
 import { Stack } from "@chakra-ui/react";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 
 import { useAppSelector } from "../hooks";
 import { createPlayerDataSelector } from "../store";
 
 import Path from "./Path";
 import Section from "./Section";
+import { SortOrderSelect, sortByKey } from "./SortOrderSelect";
 
 const selectPlayerPaths = createPlayerDataSelector("paths");
 
 export default function Paths() {
+  const [sortBy, setSortBy] = useState<"name" | "id">("id");
   const playerPaths = useAppSelector(selectPlayerPaths);
-  const paths = useAppSelector((state) => state.paths);
+  const allPaths = useAppSelector((state) => state.paths);
+  const paths = useMemo(() => allPaths.toSorted(sortByKey(sortBy)), [allPaths, sortBy]);
   const loading = useAppSelector((state) => state.loading.paths || false);
 
   // A map of path id to array, where the index represents a tattoo for that path
@@ -103,6 +106,12 @@ export default function Paths() {
       ]}
       max={max}
     >
+      <SortOrderSelect<typeof sortBy>
+        onChange={setSortBy}
+        value={sortBy}
+        alphabeticalKey="name"
+        chronologicalKey="id"
+      />
       {paths.map((p) => (
         <Path
           key={p.name}

packages/greenbox-web/src/components/SortOrderSelect.tsx

@@ -0,0 +1,34 @@
+import { Radio, RadioGroup, Stack } from "@chakra-ui/react";
+
+export const sortByKey =
+  <T extends Record<string, any>>(key: keyof T) =>
+  (a: T, b: T) => {
+    const aVal = a[key] || 0;
+    const bVal = b[key] || 0;
+    if (aVal < bVal) return -1;
+    if (aVal > bVal) return 1;
+    return 0;
+  };
+
+type Props<T> = {
+  onChange: (value: T) => any;
+  value: T;
+  alphabeticalKey: T;
+  chronologicalKey: T;
+};
+
+export function SortOrderSelect<T extends string>({
+  onChange,
+  value,
+  alphabeticalKey,
+  chronologicalKey,
+}: Props<T>) {
+  return (
+    <RadioGroup size="sm" onChange={onChange} value={value}>
+      <Stack direction="row" justifyContent="end">
+        <Radio value={alphabeticalKey}>Alphabetical</Radio>
+        <Radio value={chronologicalKey}>Chronological</Radio>
+      </Stack>
+    </RadioGroup>
+  );
+}

packages/greenbox-web/src/components/Tattoos.tsx

@@ -1,19 +1,25 @@
-import { SimpleGrid } from "@chakra-ui/react";
+import { Radio, RadioGroup, SimpleGrid, Stack } from "@chakra-ui/react";
 import { TattooStatus } from "greenbox-data";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 
 import { useAppSelector } from "../hooks";
 import { createPlayerDataSelector } from "../store";
 
 import Section from "./Section";
+import { SortOrderSelect, sortByKey } from "./SortOrderSelect";
 import Tattoo from "./Tattoo";
 
 const selectPlayerOutfitTattoos = createPlayerDataSelector("outfitTattoos");
 
 export default function Tattoos() {
+  const [sortBy, setSortBy] = useState<"name" | "outfit">("name");
+
   const playerOutfitTattoos = useAppSelector(selectPlayerOutfitTattoos);
   const tattoos = useAppSelector((state) => state.tattoos);
-  const outfitTattoos = useMemo(() => tattoos.filter((t) => t.outfit !== undefined), [tattoos]);
+  const outfitTattoos = useMemo(
+    () => tattoos.filter((t) => t.outfit !== undefined).toSorted(sortByKey(sortBy)),
+    [tattoos, sortBy],
+  );
   const loading = useAppSelector((state) => state.loading.tattoos || false);
 
   const totalOutfitTattos = useMemo(
@@ -52,6 +58,12 @@ export default function Tattoos() {
       ]}
       max={outfitTattoos.length}
     >
+      <SortOrderSelect<typeof sortBy>
+        onChange={setSortBy}
+        value={sortBy}
+        alphabeticalKey="name"
+        chronologicalKey="outfit"
+      />
       <SimpleGrid columns={[4, null, 6]} spacing={1}>
         {outfitTattoos.map((t) => (
           <Tattoo

packages/greenbox-web/src/components/Trophies.tsx

@@ -1,18 +1,22 @@
 import { SimpleGrid } from "@chakra-ui/react";
 import { TrophyStatus } from "greenbox-data";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 
 import { useAppSelector } from "../hooks";
 import { createPlayerDataSelector } from "../store";
 
 import Section from "./Section";
+import { SortOrderSelect, sortByKey } from "./SortOrderSelect";
 import Trophy from "./Trophy";
 
 const selectPlayerTrophies = createPlayerDataSelector("trophies");
 
 export default function Tattoos() {
+  const [sortBy, setSortBy] = useState<"name" | "id">("id");
+
   const playerTrophies = useAppSelector(selectPlayerTrophies);
-  const trophies = useAppSelector((state) => state.trophies);
+  const allTrophies = useAppSelector((state) => state.trophies);
+  const trophies = useMemo(() => allTrophies.toSorted(sortByKey(sortBy)), [allTrophies, sortBy]);
   const loading = useAppSelector((state) => state.loading.trophies || false);
 
   const numberOfTrophies = useMemo(
@@ -42,6 +46,12 @@ export default function Tattoos() {
       ]}
       max={trophies.length}
     >
+      <SortOrderSelect<typeof sortBy>
+        onChange={setSortBy}
+        value={sortBy}
+        alphabeticalKey="name"
+        chronologicalKey="id"
+      />
       <SimpleGrid columns={[3, null, 6]} spacing={1}>
         {trophies.map((t) => (
           <Trophy key={t.id} trophy={t} status={idToTrophy[t.id]?.[1] ?? 0} />