Refactor into WardrobePreviewAndControls component

I'm moving the preview and controls stuff closer together in the code, to clear the way to change `OutfitPreview` into a `useOutfitPreview` hook here!
This commit is contained in:
Emi Matchu 2021-02-10 12:52:00 -08:00
parent d2240cc5c5
commit 2403bd813a
3 changed files with 40 additions and 41 deletions

View file

@ -1,7 +1,7 @@
import React from "react";
import { Box, Grid, useColorModeValue } from "@chakra-ui/react";
function WardrobePageLayout({ preview, controls, itemsAndSearch }) {
function WardrobePageLayout({ previewAndControls, itemsAndSearch }) {
const itemsAndSearchBackground = useColorModeValue("white", "gray.900");
return (
@ -32,13 +32,8 @@ function WardrobePageLayout({ preview, controls, itemsAndSearch }) {
height="100%"
width="100%"
>
<Box gridArea="previewAndControls" bg="gray.900" pos="relative">
<Box position="absolute" top="0" bottom="0" left="0" right="0">
{preview}
</Box>
<Box position="absolute" top="0" bottom="0" left="0" right="0">
{controls}
</Box>
<Box gridArea="previewAndControls" bg="gray.900" position="relative">
{previewAndControls}
</Box>
<Box gridArea="itemsAndSearch" bg={itemsAndSearchBackground}>
{itemsAndSearch}

View file

@ -1,4 +1,5 @@
import React from "react";
import { Box, DarkMode } from "@chakra-ui/react";
import gql from "graphql-tag";
import { useQuery } from "@apollo/client";
@ -7,26 +8,43 @@ import OutfitThumbnail, {
getOutfitThumbnailRenderSize,
} from "../components/OutfitThumbnail";
import OutfitPreview from "../components/OutfitPreview";
import { DarkMode } from "@chakra-ui/react";
import { loadable } from "../util";
function WardrobeOutfitPreview({
const OutfitControls = loadable(() => import("./OutfitControls"));
function WardrobePreviewAndControls({
isLoading,
outfitState,
onChangeHasAnimations,
dispatchToOutfit,
}) {
// Whether the current outfit preview has animations. Determines whether we
// show the play/pause button.
const [hasAnimations, setHasAnimations] = React.useState(false);
return (
<DarkMode>
<OutfitPreview
isLoading={isLoading}
speciesId={outfitState.speciesId}
colorId={outfitState.colorId}
pose={outfitState.pose}
appearanceId={outfitState.appearanceId}
wornItemIds={outfitState.wornItemIds}
onChangeHasAnimations={onChangeHasAnimations}
backdrop={<OutfitThumbnailIfCached outfitId={outfitState.id} />}
/>
</DarkMode>
<>
<Box position="absolute" top="0" bottom="0" left="0" right="0">
<DarkMode>
<OutfitPreview
isLoading={isLoading}
speciesId={outfitState.speciesId}
colorId={outfitState.colorId}
pose={outfitState.pose}
appearanceId={outfitState.appearanceId}
wornItemIds={outfitState.wornItemIds}
onChangeHasAnimations={setHasAnimations}
backdrop={<OutfitThumbnailIfCached outfitId={outfitState.id} />}
/>
</DarkMode>
</Box>
<Box position="absolute" top="0" bottom="0" left="0" right="0">
<OutfitControls
outfitState={outfitState}
dispatchToOutfit={dispatchToOutfit}
showAnimationControls={hasAnimations}
/>
</Box>
</>
);
}
@ -83,4 +101,4 @@ function OutfitThumbnailIfCached({ outfitId }) {
);
}
export default WardrobeOutfitPreview;
export default WardrobePreviewAndControls;

View file

@ -7,11 +7,8 @@ import SupportOnly from "./support/SupportOnly";
import useOutfitState, { OutfitStateContext } from "./useOutfitState";
import { usePageTitle } from "../util";
import WardrobePageLayout from "./WardrobePageLayout";
import WardrobeOutfitPreview from "./WardrobeOutfitPreview";
import WardrobePreviewAndControls from "./WardrobePreviewAndControls";
const OutfitControls = loadable(() =>
import(/* webpackPreload: true */ "./OutfitControls")
);
const WardrobeDevHacks = loadable(() => import("./WardrobeDevHacks"));
/**
@ -29,10 +26,6 @@ function WardrobePage() {
const toast = useToast();
const { loading, error, outfitState, dispatchToOutfit } = useOutfitState();
// Whether the current outfit preview has animations. Determines whether we
// show the play/pause button.
const [hasAnimations, setHasAnimations] = React.useState(false);
usePageTitle(outfitState.name || "Untitled outfit");
// TODO: I haven't found a great place for this error UI yet, and this case
@ -60,18 +53,11 @@ function WardrobePage() {
<WardrobeDevHacks />
</SupportOnly>
<WardrobePageLayout
preview={
<WardrobeOutfitPreview
previewAndControls={
<WardrobePreviewAndControls
isLoading={loading}
outfitState={outfitState}
onChangeHasAnimations={setHasAnimations}
/>
}
controls={
<OutfitControls
outfitState={outfitState}
dispatchToOutfit={dispatchToOutfit}
showAnimationControls={hasAnimations}
/>
}
itemsAndSearch={