From 9b856a40b8c572e65f6418dd731f7b2e261a0837 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Fri, 1 Oct 2021 04:22:53 -0700
Subject: [PATCH] Sort /support/petAppearances from newest to oldest

---
 src/app/SupportPetAppearancesPage.js | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/app/SupportPetAppearancesPage.js b/src/app/SupportPetAppearancesPage.js
index 16f8d72..5ffad41 100644
--- a/src/app/SupportPetAppearancesPage.js
+++ b/src/app/SupportPetAppearancesPage.js
@@ -37,7 +37,7 @@ function SupportPetAppearancesPage() {
               This includes species/color combinations that have at least one{" "}
               non-glitched <code>UNKNOWN</code> pose, and still need a
               non-glitched version of at least one of the standard 6
-              mood/gender-presentation poses.
+              mood/gender-presentation poses. Sorted newest to oldest.
             </PopoverBody>
           </PopoverContent>
         </Popover>
@@ -76,13 +76,12 @@ function UnlabeledPetAppearancesList() {
     return <ErrorMessage>{error.message}</ErrorMessage>;
   }
 
+  // Sort the pairs from newest to oldest, taking advantage of our knowledge
+  // that the IDs are numbers that increase over time. (A bit hacky, a real
+  // timestamp would be better, but we never stored those oops!)
   const speciesColorPairs = [
     ...data.speciesColorPairsThatNeedSupportLabeling,
-  ].sort((a, b) =>
-    `${a.species.name} ${a.color.name}`.localeCompare(
-      `${b.species.name} ${b.color.name}`
-    )
-  );
+  ].sort((a, b) => Number(b.id) - Number(a.id));
 
   if (speciesColorPairs.length === 0) {
     return <>…never mind, they're all done! Wow, go team!! 🎉</>;
@@ -90,8 +89,8 @@ function UnlabeledPetAppearancesList() {
 
   return (
     <Wrap align="center">
-      {speciesColorPairs.map(({ species, color }) => (
-        <WrapItem key={`${species.id}-${color.id}`}>
+      {speciesColorPairs.map(({ id, species, color }) => (
+        <WrapItem key={id}>
           <SpeciesColorEditorLink species={species} color={color} />
         </WrapItem>
       ))}