diff --git a/src/app/ItemPage.js b/src/app/ItemPage.js index a67fe26..e6edab6 100644 --- a/src/app/ItemPage.js +++ b/src/app/ItemPage.js @@ -30,9 +30,8 @@ import { useParams } from "react-router-dom"; import { ItemBadgeList, + ItemKindBadge, ItemThumbnail, - NcBadge, - NpBadge, } from "./components/ItemCard"; import { Delay, Heading1, usePageTitle } from "./util"; import { @@ -76,6 +75,7 @@ function ItemPageHeader({ itemId, isEmbedded }) { id name isNc + isPb thumbnailUrl description createdAt @@ -150,7 +150,7 @@ function ItemPageBadges({ item, isEmbedded }) { return ( - {item?.isNc ? : } + { // If the createdAt date is null (loaded and empty), hide the badge. @@ -192,7 +192,7 @@ function ItemPageBadges({ item, isEmbedded }) { - {!item?.isNc && ( + {!item?.isNc && !item?.isPb && ( - {!item?.isNc && ( + {!item?.isNc && !item?.isPb && ( - {!item?.isNc && ( + {!item?.isNc && !item?.isPb && ( - {item.isNc ? : } + {hasYouOwnThisBadge(item) && } {hasYouWantThisBadge(item) && } {getZoneBadges(item.allOccupiedZones, { diff --git a/src/app/WardrobePage/Item.js b/src/app/WardrobePage/Item.js index e59afc2..9f5ffae 100644 --- a/src/app/WardrobePage/Item.js +++ b/src/app/WardrobePage/Item.js @@ -16,9 +16,8 @@ import loadable from "@loadable/component"; import { ItemCardContent, ItemBadgeList, + ItemKindBadge, MaybeAnimatedBadge, - NcBadge, - NpBadge, YouOwnThisBadge, YouWantThisBadge, getZoneBadges, @@ -211,17 +210,7 @@ function ItemBadges({ item }) { return ( - {item.isNc ? ( - - ) : ( - // The main purpose of the NP badge is alignment: if there are - // zone badges, we want them to start at the same rough position, - // even if there's an NC badge at the start. But if this view - // generally avoids zone badges, we'd rather have the NC badge be - // a little extra that might pop up and hide the NP case, rather - // than try to line things up like a table. - - )} + { // This badge is unreliable, but it's helpful for looking for animated // items to test, so we show it only to support. We use this form diff --git a/src/app/WardrobePage/SearchPanel.js b/src/app/WardrobePage/SearchPanel.js index 9cd9e1c..9699a89 100644 --- a/src/app/WardrobePage/SearchPanel.js +++ b/src/app/WardrobePage/SearchPanel.js @@ -280,6 +280,7 @@ function useSearchResults(query, outfitState) { name thumbnailUrl isNc + isPb currentUserOwnsThis currentUserWantsThis diff --git a/src/app/WardrobePage/useOutfitState.js b/src/app/WardrobePage/useOutfitState.js index 3a6b196..a10e457 100644 --- a/src/app/WardrobePage/useOutfitState.js +++ b/src/app/WardrobePage/useOutfitState.js @@ -38,6 +38,7 @@ function useOutfitState() { name thumbnailUrl isNc + isPb currentUserOwnsThis currentUserWantsThis diff --git a/src/app/components/ItemCard.js b/src/app/components/ItemCard.js index 6844bd4..ddfcc13 100644 --- a/src/app/components/ItemCard.js +++ b/src/app/components/ItemCard.js @@ -230,8 +230,6 @@ export function NcBadge() { } export function NpBadge() { - // NOTE: display:block helps with some layout consistency, overriding the - // default of inline-block. return ( NP @@ -239,6 +237,26 @@ export function NpBadge() { ); } +export function PbBadge() { + return ( + + + PB + + + ); +} + +export function ItemKindBadge({ isNc, isPb }) { + if (isNc) { + return ; + } else if (isPb) { + return ; + } else { + return ; + } +} + export function YouOwnThisBadge({ variant = "long" }) { let badge = (