impress-2020/src/app/OutfitUrlsPage.js

import React from "react";
import { css } from "@emotion/react";
import {
  AspectRatio,
  Box,
  Button,
  Center,
  Flex,
  FormControl,
  FormErrorMessage,
  FormLabel,
  Grid,
  Input,
  InputGroup,
  InputRightElement,
  Tab,
  TabList,
  TabPanel,
  TabPanels,
  Tabs,
  Textarea,
  useBreakpointValue,
  useClipboard,
  useColorModeValue,
  VStack,
} from "@chakra-ui/react";

import { Delay, Heading1, Heading2 } from "./util";
import HangerSpinner from "./components/HangerSpinner";
import { gql, useQuery } from "@apollo/client";

function OutfitUrlsPage() {
  return (
    <>
      <Heading1 marginBottom="4">Changing our outfit URLs</Heading1>
      <VStack
        spacing="4"
        alignItems="flex-start"
        css={css`
          max-width: 800px;

          p {
            margin-bottom: 1em;
          }
          a {
            text-decoration: underline;
          }
          h2,
          h3 {
            margin-bottom: 0.5em;
          }
        `}
      >
        <section>
          <p>
            Hi, friends! Sorry for the trouble 😓 In short, by switching to the
            new outfit URLs below, we'll decrease our hosting costs by
            $20/month! 🙏
          </p>
          <OutfitUrlConverter />
        </section>
        <Box height="2" />
        <section>
          <Heading2>The history</Heading2>
          <p>
            When we started hosting outfit images back in 2012, we didn't know a
            lot about web infrastructure, and we weren't thinking a lot about
            permanent URLs 😅 We uploaded images directly to{" "}
            <a href="https://aws.amazon.com/s3/">Amazon S3</a>, and gave you
            Amazon's URL for them, at <code>amazonaws.com</code>.
          </p>
          <p>
            Since then, we've grown a lot, and our Amazon costs have increased a
            lot too! These days, it costs about $30/month to serve outfit images
            from S3—and $20 of that is just to <em>store</em> our millions of
            outfit images, including the ones nobody visits 😅
          </p>
          <p>
            So, we've moved our apps to a new, more cost-efficient way to share
            outfit images! But, until we delete the old images from Amazon S3
            altogether, we're still paying $20/month <em>just</em> to support
            the old <code>amazonaws.com</code> URLs.
          </p>
          <p>
            I looked hard for a way to redirect the old Amazon URLs to our new
            service, but it seems to not be possible, and it seems like
            $20/month could be better spent another way 😖
          </p>
          <p>
            I'm truly sorry for breaking some of the lookups and petpages out
            there, and I hope this tool helps folks migrate to the new version
            quickly and easily! 🙏
          </p>
        </section>
      </VStack>
    </>
  );
}

function OutfitUrlConverter() {
  return (
    <Tabs>
      <TabList>
        <Tab>Convert an image</Tab>
        <Tab>Convert a lookup/petpage</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>
          <SingleImageConverter />
        </TabPanel>
        <TabPanel>
          <BulkImageConverter />
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
}

function SingleImageConverter() {
  const [inputUrl, setInputUrl] = React.useState("");

  let parsedUrl;
  let parseError;
  try {
    parsedUrl = parseS3OutfitUrl(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);

  return (
    <Grid
      templateAreas={{
        base: `
          "input"
          "output"
          "preview"
        `,
        md: `
          "preview input"
          "preview output"
        `,
      }}
      templateColumns={{ base: "auto", md: "auto 1fr" }}
      columnGap="4"
      rowGap="2"
      justifyItems="center"
    >
      <FormControl gridArea="input" isInvalid={Boolean(parseError) || gqlError}>
        <FormLabel fontWeight="bold">Enter an outfit image URL</FormLabel>
        <Input
          placeholder="https://openneo-uploads.s3.amazonaws.com/outfits/123/456/789/preview.png"
          value={inputUrl}
          onChange={(e) => setInputUrl(e.target.value)}
        />
        <FormErrorMessage>
          {parseError?.message ||
            (gqlError && `Error loading outfit data. Try again?`) ||
            null}
        </FormErrorMessage>
      </FormControl>
      <FormControl gridArea="output">
        <FormLabel fontSize="sm">
          Then, use this new URL in your layouts instead:
        </FormLabel>
        <InputGroup size="sm">
          <Input
            placeholder="https://impress-outfit-images.openneo.net/outfits/123456789/v/1020304050/600.png"
            isReadOnly
            value={imageUrl}
          />
          {imageUrl && (
            <InputRightElement width="4rem" paddingRight="1">
              <Button
                height="calc(100% - .5rem)"
                size="xs"
                minWidth="100%"
                onClick={onCopy}
              >
                {hasCopied ? "Copied!" : "Copy"}
              </Button>
            </InputRightElement>
          )}
        </InputGroup>
      </FormControl>
      <AspectRatio
        gridArea="preview"
        width={{ base: "100%", md: "150px" }}
        maxWidth={{ base: "300px", md: "150px" }}
        ratio={1}
        background={previewBackground}
        borderRadius="md"
        boxShadow="sm"
        marginTop={{ base: "4", md: "0" }}
        overflow="hidden"
      >
        <Center>
          {loading ? (
            <Delay ms={1000}>
              <HangerSpinner size={spinnerSize} />
            </Delay>
          ) : imageUrl ? (
            <Box
              as="img"
              src={imageUrl}
              alt="Outfit image preview"
              width={size}
              height={size}
              maxWidth="100%"
              maxHeight="100%"
              sx={{
                // Don't let alt text flash in while loading
                "&:-moz-loading": {
                  visibility: "hidden",
                },
              }}
            />
          ) : null}
        </Center>
      </AspectRatio>
    </Grid>
  );
}

function BulkImageConverter() {
  const [inputHtml, setInputHtml] = React.useState("");

  const outputHtml = inputHtml
    ? "<!-- TODO: Not implemented yet! -->\n" + inputHtml
    : "";

  const { onCopy, hasCopied } = useClipboard(outputHtml);

  return (
    <Grid
      templateAreas={`
        "input"
        "output"
      `}
      rowGap="4"
    >
      <FormControl gridArea="input">
        <FormLabel fontWeight="bold">Enter your lookup/petpage HTML</FormLabel>
        <Textarea
          fontFamily="monospace"
          fontSize="xs"
          value={inputHtml}
          onChange={(e) => setInputHtml(e.target.value)}
        />
      </FormControl>
      <FormControl gridArea="output">
        <Flex alignItems="center">
          <FormLabel fontSize="sm">
            Then, use this new HTML for your page instead:
          </FormLabel>
          <Box flex="1 0 0" />
          <Button size="xs" onClick={onCopy} marginLeft="4">
            <Grid templateAreas="the-area">
              <Box gridArea="the-area">{hasCopied ? "Copied!" : "Copy"}</Box>
              {/* This invisible "Copied!" enforces a min size for the button
               * content, so that the button never changes size. */}
              <Box gridArea="the-area" aria-hidden visibility="hidden">
                Copied!
              </Box>
            </Grid>
          </Button>
        </Flex>
        <Textarea
          isReadOnly
          fontFamily="monospace"
          fontSize="xs"
          value={outputHtml}
        />
      </FormControl>
    </Grid>
  );
}

const S3_OUTFIT_URL_PATTERN = /^https?:\/\/openneo-uploads\.s3\.amazonaws\.com\/outfits\/([0-9]{3})\/([0-9]{3})\/([0-9]{3})\/(preview|medium_preview|small_preview)\.png$/;
const S3_FILENAMES_TO_SIZES = {
  preview: 600,
  medium_preview: 300,
  small_preview: 150,
};

function parseS3OutfitUrl(url) {
  if (!url) {
    return null;
  }

  const match = S3_OUTFIT_URL_PATTERN.exec(url);
  if (!match) {
    throw new Error(
      `This URL didn't match the expected pattern. Make sure it's formatted like this: https://openneo-uploads.s3.amazonaws.com/outfits/123/456/789/preview.png`
    );
  }

  // Convert ID to number to remove leading 0s, then convert back to string for
  // consistency with how we handle outfit IDs in this app.
  const outfitId = String(Number(`${match[1]}${match[2]}${match[3]}`));
  const size = S3_FILENAMES_TO_SIZES[match[4]];

  return { outfitId, size };
}

export default OutfitUrlsPage;