OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

remove react-helmet to save 12kb

Browse source
This commit is contained in:
Matt Dunn-Rankin 2020-05-17 23:26:00 -07:00
parent 9c8a48a325
commit 2b8ed15bc1
5 changed files with 71 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -25,7 +25,6 @@
"node-fetch": "^2.6.0", "node-fetch": "^2.6.0",
"react": "^16.13.1", "react": "^16.13.1",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-helmet": "^6.0.0",
"react-router-dom": "^5.1.2", "react-router-dom": "^5.1.2",
"react-scripts": "3.4.1", "react-scripts": "3.4.1",
"react-transition-group": "^4.3.0", "react-transition-group": "^4.3.0",

64
src/app/HomePage.js
View file

@ -2,49 +2,45 @@ import React from "react";
import { css } from "emotion"; import { css } from "emotion";
import gql from "graphql-tag"; import gql from "graphql-tag";
import { Box, Button, Flex, Input, useTheme, useToast } from "@chakra-ui/core"; import { Box, Button, Flex, Input, useTheme, useToast } from "@chakra-ui/core";
import { Helmet } from "react-helmet";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import { useLazyQuery } from "@apollo/react-hooks"; import { useLazyQuery } from "@apollo/react-hooks";
import { Heading1 } from "./util"; import { Heading1, usePageTitle } from "./util";
import HomepageSplashImg from "../images/homepage-splash.png"; import HomepageSplashImg from "../images/homepage-splash.png";
import SpeciesColorPicker from "./SpeciesColorPicker"; import SpeciesColorPicker from "./SpeciesColorPicker";
function HomePage() { function HomePage() {
usePageTitle("Dress to Impress");
return ( return (
<> <Flex
<Helmet> color="green.800"
<title>Dress to Impress</title> direction="column"
</Helmet> p="6"
<Flex align="center"
color="green.800" textAlign="center"
direction="column" >
p="6" <Box height="8" />
align="center" <Box
textAlign="center" as="img"
> src={HomepageSplashImg}
<Box height="8" /> width="200px"
<Box height="200px"
as="img" rounded="lg"
src={HomepageSplashImg} boxShadow="md"
width="200px" />
height="200px" <Box height="4" />
rounded="lg" <Heading1>Dress to Impress</Heading1>
boxShadow="md" <Box height="8" />
/> <StartOutfitForm />
<Box height="4" /> <Box height="4" />
<Heading1>Dress to Impress</Heading1> <Box fontStyle="italic" fontSize="sm">
<Box height="8" /> or
<StartOutfitForm /> </Box>
<Box height="4" /> <Box height="4" />
<Box fontStyle="italic" fontSize="sm"> <SubmitPetForm />
or </Flex>
</Box>
<Box height="4" />
<SubmitPetForm />
</Flex>
</>
); );
} }

75
src/app/WardrobePage.js
View file

@ -1,11 +1,11 @@
import React from "react"; import React from "react";
import { Box, Grid, useToast } from "@chakra-ui/core"; import { Box, Grid, useToast } from "@chakra-ui/core";
import { Helmet } from "react-helmet";
import ItemsAndSearchPanels from "./ItemsAndSearchPanels"; import ItemsAndSearchPanels from "./ItemsAndSearchPanels";
import OutfitControls from "./OutfitControls"; import OutfitControls from "./OutfitControls";
import OutfitPreview from "./OutfitPreview"; import OutfitPreview from "./OutfitPreview";
import useOutfitState from "./useOutfitState.js"; import useOutfitState from "./useOutfitState.js";
import { usePageTitle } from "./util";
/** /**
* WardrobePage is the most fun page on the site - it's where you create * WardrobePage is the most fun page on the site - it's where you create
@ -22,6 +22,8 @@ function WardrobePage() {
const toast = useToast(); const toast = useToast();
const { loading, error, outfitState, dispatchToOutfit } = useOutfitState(); const { loading, error, outfitState, dispatchToOutfit } = useOutfitState();
usePageTitle(`${outfitState.name || "Untitled outfit"} | Dress to Impress`);
// TODO: I haven't found a great place for this error UI yet, and this case // 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! // isn't very common, so this lil toast notification seems good enough!
React.useEffect(() => { React.useEffect(() => {
@ -38,51 +40,44 @@ function WardrobePage() {
}, [error, toast]); }, [error, toast]);
return ( return (
<> <Box position="absolute" top="0" bottom="0" left="0" right="0">
<Helmet> <Grid
<title> templateAreas={{
{outfitState.name || "Untitled outfit"} | Dress to Impress base: `"previewAndControls"
</title>
</Helmet>
<Box position="absolute" top="0" bottom="0" left="0" right="0">
<Grid
templateAreas={{
base: `"previewAndControls"
"itemsAndSearch"`, "itemsAndSearch"`,
lg: `"previewAndControls itemsAndSearch"`, lg: `"previewAndControls itemsAndSearch"`,
}} }}
templateRows={{ templateRows={{
base: "minmax(100px, 45%) minmax(300px, 55%)", base: "minmax(100px, 45%) minmax(300px, 55%)",
lg: "100%", lg: "100%",
}} }}
templateColumns={{ templateColumns={{
base: "100%", base: "100%",
lg: "50% 50%", lg: "50% 50%",
}} }}
height="100%" height="100%"
width="100%" width="100%"
> >
<Box gridArea="previewAndControls" bg="gray.900" pos="relative"> <Box gridArea="previewAndControls" bg="gray.900" pos="relative">
<Box position="absolute" top="0" bottom="0" left="0" right="0"> <Box position="absolute" top="0" bottom="0" left="0" right="0">
<OutfitPreview outfitState={outfitState} /> <OutfitPreview outfitState={outfitState} />
</Box>
<Box position="absolute" top="0" bottom="0" left="0" right="0">
<OutfitControls
outfitState={outfitState}
dispatchToOutfit={dispatchToOutfit}
/>
</Box>
</Box> </Box>
<Box gridArea="itemsAndSearch"> <Box position="absolute" top="0" bottom="0" left="0" right="0">
<ItemsAndSearchPanels <OutfitControls
loading={loading}
outfitState={outfitState} outfitState={outfitState}
dispatchToOutfit={dispatchToOutfit} dispatchToOutfit={dispatchToOutfit}
/> />
</Box> </Box>
</Grid> </Box>
</Box> <Box gridArea="itemsAndSearch">
</> <ItemsAndSearchPanels
loading={loading}
outfitState={outfitState}
dispatchToOutfit={dispatchToOutfit}
/>
</Box>
</Grid>
</Box>
); );
} }

6
src/app/util.js
View file

@ -92,3 +92,9 @@ export function useDebounce(value, delay, { waitForFirstPause = false } = {}) {
return debouncedValue; return debouncedValue;
} }
export function usePageTitle(title) {
React.useEffect(() => {
document.title = title;
}, [title]);
}

20
yarn.lock
View file

@ -9700,11 +9700,6 @@ react-error-overlay@^6.0.7:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA== integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
react-fast-compare@^2.0.4:
version "2.0.4"
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
react-focus-lock@^2.2.1: react-focus-lock@^2.2.1:
version "2.3.1" version "2.3.1"
resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.3.1.tgz#9d5d85899773609c7eefa4fc54fff6a0f5f2fc47" resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.3.1.tgz#9d5d85899773609c7eefa4fc54fff6a0f5f2fc47"
@ -9717,16 +9712,6 @@ react-focus-lock@^2.2.1:
use-callback-ref "^1.2.1" use-callback-ref "^1.2.1"
use-sidecar "^1.0.1" use-sidecar "^1.0.1"
react-helmet@^6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.0.0.tgz#fcb93ebaca3ba562a686eb2f1f9d46093d83b5f8"
integrity sha512-My6S4sa0uHN/IuVUn0HFmasW5xj9clTkB9qmMngscVycQ5vVG51Qp44BEvLJ4lixupTwDlU9qX1/sCrMN4AEPg==
dependencies:
object-assign "^4.1.1"
prop-types "^15.7.2"
react-fast-compare "^2.0.4"
react-side-effect "^2.1.0"
react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4: react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
version "16.13.1" version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@ -9821,11 +9806,6 @@ react-scripts@3.4.1:
optionalDependencies: optionalDependencies:
fsevents "2.1.2" fsevents "2.1.2"
react-side-effect@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.0.tgz#1ce4a8b4445168c487ed24dab886421f74d380d3"
integrity sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg==
react-spring@^8.0.27: react-spring@^8.0.27:
version "8.0.27" version "8.0.27"
resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-8.0.27.tgz#97d4dee677f41e0b2adcb696f3839680a3aa356a" resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-8.0.27.tgz#97d4dee677f41e0b2adcb696f3839680a3aa356a"