From d1262f77d758a05ab5b86771045bedb42b84fb92 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Fri, 11 Sep 2020 22:04:37 -0700
Subject: [PATCH] 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 | 42 ++++++++++++++++++++++++++++--------------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/app/ItemsPage.js b/src/app/ItemsPage.js
index 1e37134..5f028ac 100644
--- a/src/app/ItemsPage.js
+++ b/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 />}
-                {
-                  // This helps you compare your owns/wants to other users.
-                  !isCurrentUser && itemIdsYouWant.has(item.id) && (
-                    <YouWantThisBadge />
-                  )
-                }
+                {showYouWantThisBadge(item) && <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 />}
-                {
-                  // This helps you compare your owns/wants to other users.
-                  !isCurrentUser && itemIdsYouOwn.has(item.id) && (
-                    <YouOwnThisBadge />
-                  )
-                }
+                {showYouOwnThisBadge(item) && <YouOwnThisBadge />}
               </ItemBadgeList>
             }
           />