sort trade list matches to the top of item lists

Items with the "You want this!" or "You own this!" badge will now sort to the top of their respective lists!

src/app/ItemsPage.js

@@ -74,25 +74,44 @@ function ItemsPage() {
     data.currentUser.itemsTheyWant.map((i) => i.id)
   );
 
+  // This helps you compare your owns/wants to other users! If they own
+  // something, and you want it, we say "You own this!". And if they want
+  // something, and you own it, we say "You want this!".
+  const showYouOwnThisBadge = (item) =>
+    !isCurrentUser && itemIdsYouOwn.has(item.id);
+  const showYouWantThisBadge = (item) =>
+    !isCurrentUser && itemIdsYouWant.has(item.id);
+
+  const sortedItemsTheyOwn = [...data.user.itemsTheyOwn].sort((a, b) => {
+    // This is a cute sort hack. We sort first by, bringing "You want this!" to
+    // the top, and then sorting by name _within_ those two groups.
+    const aName = `${showYouWantThisBadge(a) ? "000" : "999"} ${a.name}`;
+    const bName = `${showYouWantThisBadge(b) ? "000" : "999"} ${b.name}`;
+    return aName.localeCompare(bName);
+  });
+
+  const sortedItemsTheyWant = [...data.user.itemsTheyWant].sort((a, b) => {
+    // This is a cute sort hack. We sort first by, bringing "You own this!" to
+    // the top, and then sorting by name _within_ those two groups.
+    const aName = `${showYouOwnThisBadge(a) ? "000" : "999"} ${a.name}`;
+    const bName = `${showYouOwnThisBadge(b) ? "000" : "999"} ${b.name}`;
+    return aName.localeCompare(bName);
+  });
+
   return (
     <Box>
       <Heading1 marginBottom="8">
         {isCurrentUser ? "Items you own" : `Items ${data.user.username} owns`}
       </Heading1>
       <ItemCardList>
-        {data.user.itemsTheyOwn.map((item) => (
+        {sortedItemsTheyOwn.map((item) => (
           <ItemCard
             key={item.id}
             item={item}
             badges={
               <ItemBadgeList>
                 {item.isNc ? <NcBadge /> : <NpBadge />}
-                {
+                {showYouWantThisBadge(item) && <YouWantThisBadge />}
-                  // This helps you compare your owns/wants to other users.
-                  !isCurrentUser && itemIdsYouWant.has(item.id) && (
-                    <YouWantThisBadge />
-                  )
-                }
               </ItemBadgeList>
             }
           />
@@ -103,19 +122,14 @@ function ItemsPage() {
         {isCurrentUser ? "Items you want" : `Items ${data.user.username} wants`}
       </Heading1>
       <ItemCardList>
-        {data.user.itemsTheyWant.map((item) => (
+        {sortedItemsTheyWant.map((item) => (
           <ItemCard
             key={item.id}
             item={item}
             badges={
               <ItemBadgeList>
                 {item.isNc ? <NcBadge /> : <NpBadge />}
-                {
+                {showYouOwnThisBadge(item) && <YouOwnThisBadge />}
-                  // This helps you compare your owns/wants to other users.
-                  !isCurrentUser && itemIdsYouOwn.has(item.id) && (
-                    <YouOwnThisBadge />
-                  )
-                }
               </ItemBadgeList>
             }
           />