diff --git a/package.json b/package.json index ca8239b..b6d7f90 100644 --- a/package.json +++ b/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", diff --git a/src/app/SpeciesColorPicker.js b/src/app/SpeciesColorPicker.js index d174ede..0377b28 100644 --- a/src/app/SpeciesColorPicker.js +++ b/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] diff --git a/src/app/util.js b/src/app/util.js index 82ac476..0ffc393 100644 --- a/src/app/util.js +++ b/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 }; +} diff --git a/yarn.lock b/yarn.lock index c6e5f79..1db2cc4 100644 --- a/yarn.lock +++ b/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"