impress-2020/src/app/WardrobePage/index.js

115 lines
3.7 KiB
JavaScript
Raw Normal View History

2020-04-21 20:32:53 -07:00
import React from "react";
import { Box, Grid, useToast } from "@chakra-ui/core";
2020-05-18 00:11:18 -07:00
import loadable from "@loadable/component";
2020-04-21 20:32:53 -07:00
import ItemsAndSearchPanels from "./ItemsAndSearchPanels";
import OutfitPreview from "../components/OutfitPreview";
import SupportOnly from "./support/SupportOnly";
import useOutfitState, { OutfitStateContext } from "./useOutfitState";
2020-07-20 21:41:26 -07:00
import { usePageTitle } from "../util";
2020-04-21 20:32:53 -07:00
const OutfitControls = loadable(() =>
import(/* webpackPreload: true */ "./OutfitControls")
);
const WardrobeDevHacks = loadable(() => import("./WardrobeDevHacks"));
2020-05-18 00:11:18 -07:00
/**
* WardrobePage is the most fun page on the site - it's where you create
* outfits!
*
* This page has two sections: the OutfitPreview, where we show the outfit as a
* big image; and the ItemsAndSearchPanels, which let you manage which items
* are in the outfit and find new ones.
*
* This component manages shared outfit state, and the fullscreen responsive
* page layout.
*/
2020-04-21 20:32:53 -07:00
function WardrobePage() {
const toast = useToast();
const { loading, error, outfitState, dispatchToOutfit } = useOutfitState();
2020-05-17 23:26:00 -07:00
usePageTitle(`${outfitState.name || "Untitled outfit"} | Dress to Impress`);
// TODO: I haven't found a great place for this error UI yet, and this case
// isn't very common, so this lil toast notification seems good enough!
2020-04-22 15:24:38 -07:00
React.useEffect(() => {
if (error) {
2020-04-24 21:17:03 -07:00
console.log(error);
2020-04-22 15:24:38 -07:00
toast({
title: "We couldn't load this outfit 😖",
description: "Please reload the page to try again. Sorry!",
status: "error",
isClosable: true,
2020-04-24 21:17:03 -07:00
duration: 999999999,
2020-04-22 15:24:38 -07:00
});
}
}, [error, toast]);
// NOTE: Most components pass around outfitState directly, to make the data
// relationships more explicit... but there are some deep components
// that need it, where it's more useful and more performant to access
// via context.
2020-04-21 20:32:53 -07:00
return (
<OutfitStateContext.Provider value={outfitState}>
<SupportOnly>
<WardrobeDevHacks />
</SupportOnly>
<Box
position="absolute"
top="0"
bottom="0"
left="0"
right="0"
// Create a stacking context, so that our drawers and modals don't fight
// with the z-indexes in here!
zIndex="0"
2020-05-17 23:26:00 -07:00
>
<Grid
templateAreas={{
base: `"previewAndControls"
"itemsAndSearch"`,
lg: `"previewAndControls itemsAndSearch"`,
}}
templateRows={{
base: "minmax(100px, 45%) minmax(300px, 55%)",
lg: "100%",
}}
templateColumns={{
base: "100%",
lg: "50% 50%",
}}
height="100%"
width="100%"
>
<Box gridArea="previewAndControls" bg="gray.900" pos="relative">
<Box position="absolute" top="0" bottom="0" left="0" right="0">
<OutfitPreview
speciesId={outfitState.speciesId}
colorId={outfitState.colorId}
pose={outfitState.pose}
appearanceId={outfitState.appearanceId}
wornItemIds={outfitState.wornItemIds}
/>
</Box>
<Box position="absolute" top="0" bottom="0" left="0" right="0">
<OutfitControls
outfitState={outfitState}
dispatchToOutfit={dispatchToOutfit}
/>
</Box>
2020-04-24 00:46:24 -07:00
</Box>
<Box gridArea="itemsAndSearch">
<ItemsAndSearchPanels
loading={loading}
outfitState={outfitState}
dispatchToOutfit={dispatchToOutfit}
/>
</Box>
</Grid>
</Box>
</OutfitStateContext.Provider>
2020-04-21 20:32:53 -07:00
);
}
export default WardrobePage;