From 2b8ed15bc136395c488521891723fe89f5112148 Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Sun, 17 May 2020 23:26:00 -0700
Subject: [PATCH] remove react-helmet to save 12kb

---
 package.json            |  1 -
 src/app/HomePage.js     | 64 +++++++++++++++++------------------
 src/app/WardrobePage.js | 75 +++++++++++++++++++----------------------
 src/app/util.js         |  6 ++++
 yarn.lock               | 20 -----------
 5 files changed, 71 insertions(+), 95 deletions(-)

diff --git a/package.json b/package.json
index f33a7f8..ca8239b 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,6 @@
     "node-fetch": "^2.6.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-helmet": "^6.0.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1",
     "react-transition-group": "^4.3.0",
diff --git a/src/app/HomePage.js b/src/app/HomePage.js
index eb0f2fe..4106b20 100644
--- a/src/app/HomePage.js
+++ b/src/app/HomePage.js
@@ -2,49 +2,45 @@ import React from "react";
 import { css } from "emotion";
 import gql from "graphql-tag";
 import { Box, Button, Flex, Input, useTheme, useToast } from "@chakra-ui/core";
-import { Helmet } from "react-helmet";
 import { useHistory } from "react-router-dom";
 import { useLazyQuery } from "@apollo/react-hooks";
 
-import { Heading1 } from "./util";
+import { Heading1, usePageTitle } from "./util";
 
 import HomepageSplashImg from "../images/homepage-splash.png";
 import SpeciesColorPicker from "./SpeciesColorPicker";
 
 function HomePage() {
+  usePageTitle("Dress to Impress");
+
   return (
-    <>
-      <Helmet>
-        <title>Dress to Impress</title>
-      </Helmet>
-      <Flex
-        color="green.800"
-        direction="column"
-        p="6"
-        align="center"
-        textAlign="center"
-      >
-        <Box height="8" />
-        <Box
-          as="img"
-          src={HomepageSplashImg}
-          width="200px"
-          height="200px"
-          rounded="lg"
-          boxShadow="md"
-        />
-        <Box height="4" />
-        <Heading1>Dress to Impress</Heading1>
-        <Box height="8" />
-        <StartOutfitForm />
-        <Box height="4" />
-        <Box fontStyle="italic" fontSize="sm">
-          or
-        </Box>
-        <Box height="4" />
-        <SubmitPetForm />
-      </Flex>
-    </>
+    <Flex
+      color="green.800"
+      direction="column"
+      p="6"
+      align="center"
+      textAlign="center"
+    >
+      <Box height="8" />
+      <Box
+        as="img"
+        src={HomepageSplashImg}
+        width="200px"
+        height="200px"
+        rounded="lg"
+        boxShadow="md"
+      />
+      <Box height="4" />
+      <Heading1>Dress to Impress</Heading1>
+      <Box height="8" />
+      <StartOutfitForm />
+      <Box height="4" />
+      <Box fontStyle="italic" fontSize="sm">
+        or
+      </Box>
+      <Box height="4" />
+      <SubmitPetForm />
+    </Flex>
   );
 }
 
diff --git a/src/app/WardrobePage.js b/src/app/WardrobePage.js
index 151f47c..9394a95 100644
--- a/src/app/WardrobePage.js
+++ b/src/app/WardrobePage.js
@@ -1,11 +1,11 @@
 import React from "react";
 import { Box, Grid, useToast } from "@chakra-ui/core";
-import { Helmet } from "react-helmet";
 
 import ItemsAndSearchPanels from "./ItemsAndSearchPanels";
 import OutfitControls from "./OutfitControls";
 import OutfitPreview from "./OutfitPreview";
 import useOutfitState from "./useOutfitState.js";
+import { usePageTitle } from "./util";
 
 /**
  * WardrobePage is the most fun page on the site - it's where you create
@@ -22,6 +22,8 @@ function WardrobePage() {
   const toast = useToast();
   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
   // isn't very common, so this lil toast notification seems good enough!
   React.useEffect(() => {
@@ -38,51 +40,44 @@ function WardrobePage() {
   }, [error, toast]);
 
   return (
-    <>
-      <Helmet>
-        <title>
-          {outfitState.name || "Untitled outfit"} | Dress to Impress
-        </title>
-      </Helmet>
-      <Box position="absolute" top="0" bottom="0" left="0" right="0">
-        <Grid
-          templateAreas={{
-            base: `"previewAndControls"
+    <Box position="absolute" top="0" bottom="0" left="0" right="0">
+      <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 outfitState={outfitState} />
-            </Box>
-            <Box position="absolute" top="0" bottom="0" left="0" right="0">
-              <OutfitControls
-                outfitState={outfitState}
-                dispatchToOutfit={dispatchToOutfit}
-              />
-            </Box>
+          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 outfitState={outfitState} />
           </Box>
-          <Box gridArea="itemsAndSearch">
-            <ItemsAndSearchPanels
-              loading={loading}
+          <Box position="absolute" top="0" bottom="0" left="0" right="0">
+            <OutfitControls
               outfitState={outfitState}
               dispatchToOutfit={dispatchToOutfit}
             />
           </Box>
-        </Grid>
-      </Box>
-    </>
+        </Box>
+        <Box gridArea="itemsAndSearch">
+          <ItemsAndSearchPanels
+            loading={loading}
+            outfitState={outfitState}
+            dispatchToOutfit={dispatchToOutfit}
+          />
+        </Box>
+      </Grid>
+    </Box>
   );
 }
 
diff --git a/src/app/util.js b/src/app/util.js
index 4c4484a..82ac476 100644
--- a/src/app/util.js
+++ b/src/app/util.js
@@ -92,3 +92,9 @@ export function useDebounce(value, delay, { waitForFirstPause = false } = {}) {
 
   return debouncedValue;
 }
+
+export function usePageTitle(title) {
+  React.useEffect(() => {
+    document.title = title;
+  }, [title]);
+}
diff --git a/yarn.lock b/yarn.lock
index 521331a..c6e5f79 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -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"
   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:
   version "2.3.1"
   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-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:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -9821,11 +9806,6 @@ react-scripts@3.4.1:
   optionalDependencies:
     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:
   version "8.0.27"
   resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-8.0.27.tgz#97d4dee677f41e0b2adcb696f3839680a3aa356a"