remove use-http to save 31kb

package.json

@@ -27,8 +27,7 @@
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1",
-    "react-transition-group": "^4.3.0",
-    "use-http": "^1.0.10"
+    "react-transition-group": "^4.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/app/SpeciesColorPicker.js

@@ -1,10 +1,9 @@
 import React from "react";
 import gql from "graphql-tag";
-import useFetch from "use-http";
 import { useQuery } from "@apollo/react-hooks";
 import { Box, Flex, Select, Text } from "@chakra-ui/core";
 
-import { Delay } from "./util";
+import { Delay, useFetch } from "./util";
 
 /**
  * SpeciesColorPicker lets the user pick the species/color of their pet.
@@ -36,7 +35,7 @@ function SpeciesColorPicker({
     loading: loadingValids,
     error: errorValids,
     data: validsBuffer,
-  } = useFetch("/api/validPetPoses", { responseType: "arrayBuffer" }, []);
+  } = useFetch("/api/validPetPoses", { responseType: "arrayBuffer" });
   const valids = React.useMemo(
     () => validsBuffer && new DataView(validsBuffer),
     [validsBuffer]

src/app/util.js

@@ -93,8 +93,59 @@ export function useDebounce(value, delay, { waitForFirstPause = false } = {}) {
   return debouncedValue;
 }
 
+/**
+ * usePageTitle sets the page title!
+ */
 export function usePageTitle(title) {
   React.useEffect(() => {
     document.title = title;
   }, [title]);
 }
+
+/**
+ * useFetch uses `fetch` to fetch the given URL, and returns the request state.
+ *
+ * Our limited API is designed to match the `use-http` library!
+ */
+export function useFetch(url, { responseType }) {
+  // Just trying to be clear about what you'll get back ^_^` If we want to
+  // fetch non-binary data later, extend this and get something else from res!
+  if (responseType !== "arrayBuffer") {
+    throw new Error(`unsupported responseType ${responseType}`);
+  }
+
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  const [data, setData] = React.useState(null);
+
+  React.useEffect(() => {
+    let canceled = false;
+
+    fetch(url)
+      .then(async (res) => {
+        if (canceled) {
+          return;
+        }
+
+        const arrayBuffer = await res.arrayBuffer();
+        setLoading(false);
+        setError(null);
+        setData(arrayBuffer);
+      })
+      .catch((error) => {
+        if (canceled) {
+          return;
+        }
+
+        setLoading(false);
+        setError(error);
+        setData(null);
+      });
+
+    return () => {
+      canceled = true;
+    };
+  }, [url]);
+
+  return { loading, error, data };
+}

yarn.lock

@@ -11504,11 +11504,6 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
-urs@^0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/urs/-/urs-0.0.4.tgz#d559d660f2a468e0bb116e0b7b505af57cb59ae4"
-  integrity sha512-+QflFOKa9DmjWclPB2audGCV83uWUnTXHOxLPQyu7XXcaY9yQ4+Tb3UEm8m4N7abJ0kJUCUAQBpFlq6mx80j9g==
-
 use-callback-ref@^1.2.1:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.3.tgz#9f939dfb5740807bbf9dd79cdd4e99d27e827756"
@@ -11522,15 +11517,6 @@ use-dark-mode@2.3.1:
     "@use-it/event-listener" "^0.1.2"
     use-persisted-state "^0.3.0"
 
-use-http@^1.0.10:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/use-http/-/use-http-1.0.10.tgz#d04da86c65552237ee13ede6218a79693b7fb452"
-  integrity sha512-KSxibM4WoSxnp4B366zVPOEWFadBO84yYtNEMEevupW/6V+D/Gme1Agx0cWwN6AYarrupcUoGT8P8M97jo+pzg==
-  dependencies:
-    urs "^0.0.4"
-    use-ssr "^1.0.22"
-    utility-types "^3.10.0"
-
 use-persisted-state@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/use-persisted-state/-/use-persisted-state-0.3.0.tgz#f8e3d2fd8eee67e0c86fd596c3ea3e8121c07402"
@@ -11546,11 +11532,6 @@ use-sidecar@^1.0.1:
     detect-node "^2.0.4"
     tslib "^1.9.3"
 
-use-ssr@^1.0.22:
-  version "1.0.23"
-  resolved "https://registry.yarnpkg.com/use-ssr/-/use-ssr-1.0.23.tgz#3bde1e10cd01b3b61ab6386d7cddb72e74828bf8"
-  integrity sha512-5bvlssgROgPgIrnILJe2mJch4e2Id0/bVm1SQzqvPvEAXmlsinCCVHWK3a2iHcPat7PkdJHBo0gmSmODIz6tNA==
-
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
@@ -11598,11 +11579,6 @@ utila@^0.4.0, utila@~0.4:
   resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
   integrity sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=
 
-utility-types@^3.10.0:
-  version "3.10.0"
-  resolved "https://registry.yarnpkg.com/utility-types/-/utility-types-3.10.0.tgz#ea4148f9a741015f05ed74fd615e1d20e6bed82b"
-  integrity sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==
-
 utils-merge@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"