add own/want compare badges

now you can compare your item lists with other users!

src/app/ItemsPage.js

@@ -10,6 +10,8 @@ import ItemCard, {
   ItemBadgeList,
   NcBadge,
   NpBadge,
+  YouOwnThisBadge,
+  YouWantThisBadge,
 } from "./components/ItemCard";
 import useCurrentUser from "./components/useCurrentUser";
 
@@ -39,6 +41,16 @@ function ItemsPage() {
             thumbnailUrl
           }
         }
+
+        currentUser {
+          itemsTheyOwn {
+            id
+          }
+
+          itemsTheyWant {
+            id
+          }
+        }
       }
     `,
     { variables: { userId } }
@@ -56,6 +68,11 @@ function ItemsPage() {
     return <Box color="red.400">{error.message}</Box>;
   }
 
+  const itemIdsYouOwn = new Set(data.currentUser.itemsTheyOwn.map((i) => i.id));
+  const itemIdsYouWant = new Set(
+    data.currentUser.itemsTheyWant.map((i) => i.id)
+  );
+
   return (
     <Box>
       <Heading1 marginBottom="8">
@@ -69,6 +86,12 @@ function ItemsPage() {
             badges={
               <ItemBadgeList>
                 {item.isNc ? <NcBadge /> : <NpBadge />}
+                {
+                  // This helps you compare your owns/wants to other users.
+                  !isCurrentUser && itemIdsYouWant.has(item.id) && (
+                    <YouWantThisBadge />
+                  )
+                }
               </ItemBadgeList>
             }
           />
@@ -86,6 +109,12 @@ function ItemsPage() {
             badges={
               <ItemBadgeList>
                 {item.isNc ? <NcBadge /> : <NpBadge />}
+                {
+                  // This helps you compare your owns/wants to other users.
+                  !isCurrentUser && itemIdsYouOwn.has(item.id) && (
+                    <YouOwnThisBadge />
+                  )
+                }
               </ItemBadgeList>
             }
           />

src/app/ModelingPage.js

@@ -1,14 +1,15 @@
 import React from "react";
 import { Badge, Box, SimpleGrid } from "@chakra-ui/core";
-import { StarIcon } from "@chakra-ui/icons";
 import gql from "graphql-tag";
 import { useQuery } from "@apollo/client";
 
 import { Delay } from "./util";
 import HangerSpinner from "./components/HangerSpinner";
 import { Heading1, Heading2 } from "./util";
-import ItemCard from "./components/ItemCard";
+import ItemCard, {
-import { ItemBadgeList } from "./components/ItemCard";
+  ItemBadgeList,
+  YouOwnThisBadge,
+} from "./components/ItemCard";
 
 function ModelingPage() {
   return (
@@ -94,12 +95,7 @@ function ItemModelCard({ item, currentUserOwnsItem, ...props }) {
 function ItemModelBadges({ item, currentUserOwnsItem }) {
   return (
     <ItemBadgeList>
-      {currentUserOwnsItem && (
+      {currentUserOwnsItem && <YouOwnThisBadge />}
-        <Badge colorScheme="yellow" display="flex" alignItems="center">
-          <StarIcon aria-label="Star" marginRight="1" />
-          You own this!
-        </Badge>
-      )}
       {item.speciesThatNeedModels.map((species) => (
         <Badge>{species.name}</Badge>
       ))}

src/app/components/ItemCard.js

@@ -9,6 +9,7 @@ import {
   useColorModeValue,
   useTheme,
 } from "@chakra-ui/core";
+import { StarIcon } from "@chakra-ui/icons";
 
 import { safeImageUrl } from "../util";
 
@@ -209,4 +210,22 @@ export function NpBadge() {
   );
 }
 
+export function YouOwnThisBadge() {
+  return (
+    <Badge colorScheme="yellow" display="flex" alignItems="center">
+      <StarIcon aria-label="Star" marginRight="1" />
+      You own this!
+    </Badge>
+  );
+}
+
+export function YouWantThisBadge() {
+  return (
+    <Badge colorScheme="blue" display="flex" alignItems="center">
+      <StarIcon aria-label="Star" marginRight="1" />
+      You want this!
+    </Badge>
+  );
+}
+
 export default ItemCard;