show a basic item preview on the new item page

This commit is contained in:
Emi Matchu 2020-09-12 17:56:31 -07:00
parent ba3ea5d321
commit bf2660cbd4
3 changed files with 48 additions and 6 deletions

View file

@ -1,5 +1,12 @@
import React from "react"; import React from "react";
import { Badge, Box, Center } from "@chakra-ui/core"; import {
AspectRatio,
Badge,
Box,
Center,
VStack,
useColorModeValue,
} from "@chakra-ui/core";
import { ExternalLinkIcon } from "@chakra-ui/icons"; import { ExternalLinkIcon } from "@chakra-ui/icons";
import gql from "graphql-tag"; import gql from "graphql-tag";
import { useQuery } from "@apollo/client"; import { useQuery } from "@apollo/client";
@ -13,6 +20,7 @@ import {
NpBadge, NpBadge,
} from "./components/ItemCard"; } from "./components/ItemCard";
import { Heading1, usePageTitle } from "./util"; import { Heading1, usePageTitle } from "./util";
import OutfitPreview from "./components/OutfitPreview";
function ItemPage() { function ItemPage() {
const { itemId } = useParams(); const { itemId } = useParams();
@ -48,9 +56,10 @@ function ItemPage() {
const { item } = data; const { item } = data;
return ( return (
<Box> <VStack spacing="6">
<ItemPageHeader item={item} /> <ItemPageHeader item={item} />
</Box> <ItemPageOutfitPreview itemId={itemId} />
</VStack>
); );
} }
@ -138,4 +147,30 @@ function LinkBadge({ children, href }) {
); );
} }
function ItemPageOutfitPreview({ itemId }) {
const borderColor = useColorModeValue("green.700", "green.400");
return (
<AspectRatio
width="100%"
maxWidth="300px"
ratio="1"
border="1px"
borderColor={borderColor}
borderRadius="lg"
boxShadow="lg"
overflow="hidden"
>
<Box>
<OutfitPreview
speciesId="1"
colorId="8"
pose="HAPPY_FEM"
wornItemIds={[itemId]}
/>
</Box>
</AspectRatio>
);
}
export default ItemPage; export default ItemPage;

View file

@ -57,8 +57,11 @@ const typePolicies = {
toReference({ __typename: "Color", id: colorId }) toReference({ __typename: "Color", id: colorId })
); );
if (speciesStandardBodyId == null || colorIsStandard == null) { if (speciesStandardBodyId == null || colorIsStandard == null) {
// This is an expected case while the page is loading. // We haven't loaded all the species/colors into cache yet. We might
return null; // be loading them, depending on the page? Either way, return
// `undefined`, meaning we don't know how to serve this from cache.
// This will cause us to start loading it from the server.
return undefined;
} }
if (colorIsStandard) { if (colorIsStandard) {
@ -68,6 +71,10 @@ const typePolicies = {
id: `item-${itemId}-body-${speciesStandardBodyId}`, id: `item-${itemId}-body-${speciesStandardBodyId}`,
}); });
} else { } else {
// This isn't a standard color, so we don't support special
// cross-color caching for it. Return `undefined`, meaning we don't
// know how to serve this from cache. This will cause us to start
// loading it from the server.
return undefined; return undefined;
} }
}, },

View file

@ -25,7 +25,7 @@ function OutfitPreview({
speciesId, speciesId,
colorId, colorId,
pose, pose,
appearanceId, appearanceId = null,
wornItemIds, wornItemIds,
placeholder, placeholder,
loadingDelay, loadingDelay,