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!} );