create ItemCard, use it in ItemsPage too

extracted from modeling page!

src/app/ItemsPage.js

@@ -1,11 +1,16 @@
 import React from "react";
-import { Box, Image, Wrap } from "@chakra-ui/core";
+import { Box, Wrap } from "@chakra-ui/core";
 import gql from "graphql-tag";
 import { useParams } from "react-router-dom";
 import { useQuery } from "@apollo/client";
 
 import HangerSpinner from "./components/HangerSpinner";
 import { Heading1 } from "./util";
+import ItemCard, {
+  ItemBadgeList,
+  NcBadge,
+  NpBadge,
+} from "./components/ItemCard";
 import useCurrentUser from "./components/useCurrentUser";
 
 function ItemsPage() {
@@ -21,6 +26,7 @@ function ItemsPage() {
           username
           itemsTheyOwn {
             id
+            isNc
             name
             thumbnailUrl
           }
@@ -49,17 +55,15 @@ function ItemsPage() {
       </Heading1>
       <Wrap justify="center">
         {data.user.itemsTheyOwn.map((item) => (
-          <Box key={item.id} width="100px" textAlign="center">
-            <Image
-              src={item.thumbnailUrl}
-              alt=""
-              height="80px"
-              width="80px"
-              boxShadow="md"
-              margin="0 auto"
+          <ItemCard
+            key={item.id}
+            item={item}
+            badges={
+              <ItemBadgeList>
+                {item.isNc ? <NcBadge /> : <NpBadge />}
+              </ItemBadgeList>
+            }
           />
-            {item.name}
-          </Box>
         ))}
       </Wrap>
     </Box>

src/app/ModelingPage.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Badge, Box, SimpleGrid, useColorModeValue } from "@chakra-ui/core";
+import { Badge, Box, SimpleGrid } from "@chakra-ui/core";
 import { StarIcon } from "@chakra-ui/icons";
 import gql from "graphql-tag";
 import { useQuery } from "@apollo/client";
@@ -7,7 +7,8 @@ import { useQuery } from "@apollo/client";
 import { Delay } from "./util";
 import HangerSpinner from "./components/HangerSpinner";
 import { Heading1, Heading2 } from "./util";
-import ItemSummary, { ItemSummaryBadgeList } from "./components/ItemSummary";
+import ItemCard from "./components/ItemCard";
+import { ItemBadgeList } from "./components/ItemCard";
 
 function ModelingPage() {
   return (
@@ -83,38 +84,16 @@ function ItemModelsList() {
 }
 
 function ItemModelCard({ item, currentUserOwnsItem, ...props }) {
-  const borderColor = useColorModeValue("gray.100", "green.500");
-
-  return (
-    <Box
-      as="a"
-      href={`https://impress.openneo.net/items/${item.id}`}
-      p="2"
-      boxShadow="lg"
-      borderRadius="lg"
-      width="400px"
-      border="1px"
-      borderColor={borderColor}
-      className="item-model-card"
-      {...props}
-    >
-      <ItemSummary
-        item={item}
-        badges={
-          <ItemModelBadges
-            item={item}
-            currentUserOwnsItem={currentUserOwnsItem}
-          />
-        }
-        focusSelector=".item-model-card:hover &, .item-model-card:focus &"
-      />
-    </Box>
+  const badges = (
+    <ItemModelBadges item={item} currentUserOwnsItem={currentUserOwnsItem} />
   );
+
+  return <ItemCard item={item} badges={badges} />;
 }
 
 function ItemModelBadges({ item, currentUserOwnsItem }) {
   return (
-    <ItemSummaryBadgeList>
+    <ItemBadgeList>
       {currentUserOwnsItem && (
         <Badge colorScheme="yellow" display="flex" alignItems="center">
           <StarIcon aria-label="Star" marginRight="1" />
@@ -124,7 +103,7 @@ function ItemModelBadges({ item, currentUserOwnsItem }) {
       {item.speciesThatNeedModels.map((species) => (
         <Badge>{species.name}</Badge>
       ))}
-    </ItemSummaryBadgeList>
+    </ItemBadgeList>
   );
 }
 

src/app/WardrobePage/Item.js

@@ -18,7 +18,13 @@ import {
 } from "@chakra-ui/icons";
 import loadable from "@loadable/component";
 
-import ItemSummary, { ItemSummaryBadgeList } from "../components/ItemSummary";
+import {
+  ItemCardContent,
+  ItemBadgeList,
+  ItemBadgeTooltip,
+  NcBadge,
+  NpBadge,
+} from "../components/ItemCard";
 import SupportOnly from "./support/SupportOnly";
 
 const LoadableItemSupportDrawer = loadable(() =>
@@ -58,7 +64,7 @@ function Item({
     <>
       <ItemContainer isDisabled={isDisabled}>
         <Box flex="1 1 0" minWidth="0">
-          <ItemSummary
+          <ItemCardContent
             item={item}
             badges={<ItemBadges item={item} />}
             itemNameId={itemNameId}
@@ -189,11 +195,9 @@ function ItemBadges({ item }) {
   );
 
   return (
-    <ItemSummaryBadgeList>
+    <ItemBadgeList>
       {item.isNc ? (
-        <ItemBadgeTooltip label="Neocash">
-          <Badge colorScheme="purple">NC</Badge>
-        </ItemBadgeTooltip>
+        <NcBadge />
       ) : (
         // The main purpose of the NP badge is alignment: if there are
         // zone badges, we want them to start at the same rough position,
@@ -201,9 +205,7 @@ function ItemBadges({ item }) {
         // 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.
-        <ItemBadgeTooltip label="Neopoints">
-          <Badge>NP</Badge>
-        </ItemBadgeTooltip>
+        <NpBadge />
       )}
       {occupiedZoneLabels.map((zoneLabel) => (
         <ZoneBadge key={zoneLabel} variant="occupies" zoneLabel={zoneLabel} />
@@ -211,7 +213,7 @@ function ItemBadges({ item }) {
       {restrictedZoneLabels.map((zoneLabel) => (
         <ZoneBadge key={zoneLabel} variant="restricts" zoneLabel={zoneLabel} />
       ))}
-    </ItemSummaryBadgeList>
+    </ItemBadgeList>
   );
 }
 
@@ -337,18 +339,6 @@ function ZoneBadge({ variant, zoneLabel }) {
   return <Badge>{shorthand}</Badge>;
 }
 
-function ItemBadgeTooltip({ label, children }) {
-  return (
-    <Tooltip
-      label={<Box textAlign="center">{label}</Box>}
-      placement="top"
-      openDelay={400}
-    >
-      {children}
-    </Tooltip>
-  );
-}
-
 /**
  * containerHasFocus is a common CSS selector, for the case where our parent
  * .item-container is hovered or the adjacent hidden radio/checkbox is

src/app/components/ItemCard.js

@@ -1,10 +1,43 @@
 import React from "react";
 import { css } from "emotion";
-import { Box, Image, Wrap, useColorModeValue, useTheme } from "@chakra-ui/core";
+import {
+  Badge,
+  Box,
+  Image,
+  Tooltip,
+  Wrap,
+  useColorModeValue,
+  useTheme,
+} from "@chakra-ui/core";
 
 import { safeImageUrl } from "../util";
 
-function ItemSummary({
+function ItemCard({ item, badges, ...props }) {
+  const borderColor = useColorModeValue("gray.100", "green.500");
+
+  return (
+    <Box
+      as="a"
+      href={`https://impress.openneo.net/items/${item.id}`}
+      p="2"
+      boxShadow="lg"
+      borderRadius="lg"
+      width="400px"
+      border="1px"
+      borderColor={borderColor}
+      className="item-card"
+      {...props}
+    >
+      <ItemCardContent
+        item={item}
+        badges={badges}
+        focusSelector=".item-card:hover &, .item-card:focus &"
+      />
+    </Box>
+  );
+}
+
+export function ItemCardContent({
   item,
   badges,
   isWorn,
@@ -140,7 +173,7 @@ function ItemName({ children, isDisabled, focusSelector, ...props }) {
   );
 }
 
-export function ItemSummaryBadgeList({ children }) {
+export function ItemBadgeList({ children }) {
   return (
     <Wrap spacing="2" marginTop="1" opacity="0.7">
       {children}
@@ -148,4 +181,32 @@ export function ItemSummaryBadgeList({ children }) {
   );
 }
 
-export default ItemSummary;
+export function ItemBadgeTooltip({ label, children }) {
+  return (
+    <Tooltip
+      label={<Box textAlign="center">{label}</Box>}
+      placement="top"
+      openDelay={400}
+    >
+      {children}
+    </Tooltip>
+  );
+}
+
+export function NcBadge() {
+  return (
+    <ItemBadgeTooltip label="Neocash">
+      <Badge colorScheme="purple">NC</Badge>
+    </ItemBadgeTooltip>
+  );
+}
+
+export function NpBadge() {
+  return (
+    <ItemBadgeTooltip label="Neopoints">
+      <Badge>NP</Badge>
+    </ItemBadgeTooltip>
+  );
+}
+
+export default ItemCard;