diff --git a/src/app/UserItemsPage.js b/src/app/UserItemsPage.js
index b58e24f..c36c24e 100644
--- a/src/app/UserItemsPage.js
+++ b/src/app/UserItemsPage.js
@@ -1,6 +1,6 @@
import React from "react";
import { Badge, Box, Center, Wrap } from "@chakra-ui/core";
-import { EmailIcon } from "@chakra-ui/icons";
+import { CheckIcon, EmailIcon, StarIcon } from "@chakra-ui/icons";
import gql from "graphql-tag";
import { useParams } from "react-router-dom";
import { useQuery } from "@apollo/client";
@@ -96,6 +96,13 @@ function UserItemsPage() {
const showYouWantThisBadge = (item) =>
!isCurrentUser && itemIdsYouWant.has(item.id);
+ const numYouOwnThisBadges = data.user.itemsTheyWant.filter(
+ showYouOwnThisBadge
+ ).length;
+ const numYouWantThisBadges = data.user.itemsTheyOwn.filter(
+ showYouWantThisBadge
+ ).length;
+
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.
@@ -120,29 +127,59 @@ function UserItemsPage() {
{isCurrentUser ? "Your items" : `${data.user.username}'s items`}
- {data.user.contactNeopetsUsername && (
-
+
+ {data.user.contactNeopetsUsername && (
{data.user.contactNeopetsUsername}
+ )}
+ {data.user.contactNeopetsUsername && (
Neomail
-
- )}
-
+ )}
+ {numYouOwnThisBadges > 0 && (
+
+
+ {numYouOwnThisBadges > 1
+ ? `${numYouOwnThisBadges} items you own`
+ : "1 item you own"}
+
+ )}
+ {numYouWantThisBadges > 0 && (
+
+
+ {numYouWantThisBadges > 1
+ ? `${numYouWantThisBadges} items you want`
+ : "1 item you want"}
+
+ )}
+
+
{isCurrentUser ? "Items you own" : `Items ${data.user.username} owns`}
@@ -166,7 +203,7 @@ function UserItemsPage() {
})}
-
+
{isCurrentUser ? "Items you want" : `Items ${data.user.username} wants`}
diff --git a/src/app/components/ItemCard.js b/src/app/components/ItemCard.js
index c6bb58c..7d1113e 100644
--- a/src/app/components/ItemCard.js
+++ b/src/app/components/ItemCard.js
@@ -270,7 +270,7 @@ export function YouOwnThisBadge({ variant = "long" }) {
alignItems="center"
minHeight="1.5em"
>
-
+
{variant === "long" && You own this!}
);