diff --git a/src/app/OutfitUrlsPage.js b/src/app/OutfitUrlsPage.js index 86fc215..f5f4d36 100644 --- a/src/app/OutfitUrlsPage.js +++ b/src/app/OutfitUrlsPage.js @@ -25,14 +25,12 @@ import { TabPanels, Tabs, Textarea, - useBreakpointValue, useClipboard, useColorModeValue, VStack, } from "@chakra-ui/react"; import { Delay, ErrorMessage, Heading1, Heading2, usePageTitle } from "./util"; -import HangerSpinner from "./components/HangerSpinner"; import { gql, useQuery } from "@apollo/client"; import { CheckIcon, WarningIcon } from "@chakra-ui/icons"; @@ -141,42 +139,17 @@ function OutfitUrlConverter() { function SingleImageConverter() { const [inputUrl, setInputUrl] = React.useState(""); - let parsedUrl; + let outputUrl; let parseError; try { - parsedUrl = parseS3OutfitUrl(inputUrl); + outputUrl = convertS3OutfitUrl(inputUrl); } catch (e) { parseError = e; } - const outfitId = parsedUrl?.outfitId; - const size = parsedUrl?.size; - - const { loading, error: gqlError, data } = useQuery( - gql` - query OutfitUrlsSingleImageConverter( - $outfitId: ID! - $size: OutfitImageSize - ) { - outfit(id: $outfitId) { - id - imageUrl(size: $size) - } - } - `, - { - variables: { outfitId, size: `SIZE_${size}` }, - skip: outfitId == null || size == null, - onError: (e) => console.error(e), - } - ); - - const imageUrl = data?.outfit?.imageUrl || ""; - const previewBackground = useColorModeValue("gray.200", "whiteAlpha.300"); - const spinnerSize = useBreakpointValue({ base: "md", md: "sm" }); - const { onCopy, hasCopied } = useClipboard(imageUrl); + const { onCopy, hasCopied } = useClipboard(outputUrl); return ( - + Enter an outfit image URL setInputUrl(e.target.value)} /> - - {parseError?.message || - (gqlError && `Error loading outfit data. Try again?`) || - null} - + {parseError?.message || null} @@ -215,11 +184,11 @@ function SingleImageConverter() { - {imageUrl && ( + {outputUrl && (