79 lines
2.1 KiB
JavaScript
79 lines
2.1 KiB
JavaScript
|
import React from "react";
|
||
|
|
import gql from "graphql-tag";
|
||
|
|
import { useQuery } from "@apollo/client";
|
||
|
|
|
||
|
|
import OutfitThumbnail, {
|
||
|
|
outfitThumbnailFragment,
|
||
|
|
getOutfitThumbnailRenderSize,
|
||
|
|
} from "../components/OutfitThumbnail";
|
||
|
|
import OutfitPreview from "../components/OutfitPreview";
|
||
|
|
|
||
|
|
function WardrobeOutfitPreview({
|
||
|
|
isLoading,
|
||
|
|
outfitState,
|
||
|
|
onChangeHasAnimations,
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<OutfitPreview
|
||
|
|
isLoading={isLoading}
|
||
|
|
speciesId={outfitState.speciesId}
|
||
|
|
colorId={outfitState.colorId}
|
||
|
|
pose={outfitState.pose}
|
||
|
|
appearanceId={outfitState.appearanceId}
|
||
|
|
wornItemIds={outfitState.wornItemIds}
|
||
|
|
onChangeHasAnimations={onChangeHasAnimations}
|
||
|
|
placeholder={<OutfitThumbnailIfCached outfitId={outfitState.id} />}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* OutfitThumbnailIfCached will render an OutfitThumbnail as a placeholder for
|
||
|
|
* the outfit preview... but only if we already have the data to generate the
|
||
|
|
* thumbnail stored in our local Apollo GraphQL cache.
|
||
|
|
*
|
||
|
|
* This means that, when you come from the Your Outfits page, we can show the
|
||
|
|
* outfit thumbnail instantly while everything else loads. But on direct
|
||
|
|
* navigation, this does nothing, and we just wait for the preview to load in
|
||
|
|
* like usual!
|
||
|
|
*/
|
||
|
|
function OutfitThumbnailIfCached({ outfitId }) {
|
||
|
|
const { data } = useQuery(
|
||
|
|
gql`
|
||
|
|
query OutfitThumbnailIfCached($outfitId: ID!, $size: LayerImageSize!) {
|
||
|
|
outfit(id: $outfitId) {
|
||
|
|
id
|
||
|
|
...OutfitThumbnailFragment
|
||
|
|
}
|
||
|
|
}
|
||
|
|
${outfitThumbnailFragment}
|
||
|
|
`,
|
||
|
|
{
|
||
|
|
variables: {
|
||
|
|
outfitId,
|
||
|
|
// NOTE: This parameter is used inside `OutfitThumbnailFragment`!
|
||
|
|
size: "SIZE_" + getOutfitThumbnailRenderSize(),
|
||
|
|
},
|
||
|
|
fetchPolicy: "cache-only",
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
if (!data?.outfit) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<OutfitThumbnail
|
||
|
|
petAppearance={data.outfit.petAppearance}
|
||
|
|
itemAppearances={data.outfit.itemAppearances}
|
||
|
|
alt=""
|
||
|
|
objectFit="contain"
|
||
|
|
width="100%"
|
||
|
|
height="100%"
|
||
|
|
filter="blur(2px)"
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default WardrobeOutfitPreview;
|