diff --git a/src/app/ItemsPage.js b/src/app/ItemsPage.js index d6e101c..f33fedf 100644 --- a/src/app/ItemsPage.js +++ b/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 {error.message}; } + const itemIdsYouOwn = new Set(data.currentUser.itemsTheyOwn.map((i) => i.id)); + const itemIdsYouWant = new Set( + data.currentUser.itemsTheyWant.map((i) => i.id) + ); + return ( @@ -69,6 +86,12 @@ function ItemsPage() { badges={ {item.isNc ? : } + { + // This helps you compare your owns/wants to other users. + !isCurrentUser && itemIdsYouWant.has(item.id) && ( + + ) + } } /> @@ -86,6 +109,12 @@ function ItemsPage() { badges={ {item.isNc ? : } + { + // This helps you compare your owns/wants to other users. + !isCurrentUser && itemIdsYouOwn.has(item.id) && ( + + ) + } } /> diff --git a/src/app/ModelingPage.js b/src/app/ModelingPage.js index 72dc4aa..9685cb8 100644 --- a/src/app/ModelingPage.js +++ b/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 { ItemBadgeList } from "./components/ItemCard"; +import ItemCard, { + ItemBadgeList, + YouOwnThisBadge, +} from "./components/ItemCard"; function ModelingPage() { return ( @@ -94,12 +95,7 @@ function ItemModelCard({ item, currentUserOwnsItem, ...props }) { function ItemModelBadges({ item, currentUserOwnsItem }) { return ( - {currentUserOwnsItem && ( - - - You own this! - - )} + {currentUserOwnsItem && } {item.speciesThatNeedModels.map((species) => ( {species.name} ))} diff --git a/src/app/components/ItemCard.js b/src/app/components/ItemCard.js index d36e4d2..3adf7c5 100644 --- a/src/app/components/ItemCard.js +++ b/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 ( + + + You own this! + + ); +} + +export function YouWantThisBadge() { + return ( + + + You want this! + + ); +} + export default ItemCard;