Sort /support/petAppearances from newest to oldest

This commit is contained in:
Emi Matchu 2021-10-01 04:22:53 -07:00
parent 4d4bc289df
commit 9b856a40b8

View file

@ -37,7 +37,7 @@ function SupportPetAppearancesPage() {
This includes species/color combinations that have at least one{" "} This includes species/color combinations that have at least one{" "}
non-glitched <code>UNKNOWN</code> pose, and still need a non-glitched <code>UNKNOWN</code> pose, and still need a
non-glitched version of at least one of the standard 6 non-glitched version of at least one of the standard 6
mood/gender-presentation poses. mood/gender-presentation poses. Sorted newest to oldest.
</PopoverBody> </PopoverBody>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
@ -76,13 +76,12 @@ function UnlabeledPetAppearancesList() {
return <ErrorMessage>{error.message}</ErrorMessage>; 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 = [ const speciesColorPairs = [
...data.speciesColorPairsThatNeedSupportLabeling, ...data.speciesColorPairsThatNeedSupportLabeling,
].sort((a, b) => ].sort((a, b) => Number(b.id) - Number(a.id));
`${a.species.name} ${a.color.name}`.localeCompare(
`${b.species.name} ${b.color.name}`
)
);
if (speciesColorPairs.length === 0) { if (speciesColorPairs.length === 0) {
return <>never mind, they're all done! Wow, go team!! 🎉</>; return <>never mind, they're all done! Wow, go team!! 🎉</>;
@ -90,8 +89,8 @@ function UnlabeledPetAppearancesList() {
return ( return (
<Wrap align="center"> <Wrap align="center">
{speciesColorPairs.map(({ species, color }) => ( {speciesColorPairs.map(({ id, species, color }) => (
<WrapItem key={`${species.id}-${color.id}`}> <WrapItem key={id}>
<SpeciesColorEditorLink species={species} color={color} /> <SpeciesColorEditorLink species={species} color={color} />
</WrapItem> </WrapItem>
))} ))}