show a basic item preview on the new item page
This commit is contained in:
parent
ba3ea5d321
commit
bf2660cbd4
3 changed files with 48 additions and 6 deletions
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -25,7 +25,7 @@ function OutfitPreview({
|
||||||
speciesId,
|
speciesId,
|
||||||
colorId,
|
colorId,
|
||||||
pose,
|
pose,
|
||||||
appearanceId,
|
appearanceId = null,
|
||||||
wornItemIds,
|
wornItemIds,
|
||||||
placeholder,
|
placeholder,
|
||||||
loadingDelay,
|
loadingDelay,
|
||||||
|
|
Loading…
Reference in a new issue