Matchu
f74fc05112
I've been getting more Sentry errors about JS chunk errors after deploys, and finally looked into it! Turns out that, our try/catch handling was working great, and the page was reloading correctly for users as expected. But in these scenarios we would _also_ throw and log two uncaught errors! The first is that, because we're a single-page app, unrecognized routes fall back to the index.html by default (to power our custom client-side routes, like /outfits/123 etc). So this meant that missing JS files, which _should_ be returning a 404, were instead returning 200 OK and an HTML file, which failed to parse. (And running the script isn't included in the catchable part of the `import` promise!) Now, in our `vercel.json` config, we catch those paths specifically and 404 them. (The exact choice of path is important: on dev, all these routes run _before_ the dev server, which is responsible for serving the static files - but dev doesn't include hashes in the JS file names, so this 404 route only matches built prod JS files, not local dev JS files.) The second is that we failed to return anything to `@loadable/component` in the error case, so it would try to render `undefined` as if it were a component class. Now, we return a trivial component class that returns null!
696 lines
19 KiB
JavaScript
696 lines
19 KiB
JavaScript
import React from "react";
|
|
import { ClassNames } from "@emotion/react";
|
|
import gql from "graphql-tag";
|
|
import {
|
|
Box,
|
|
Button,
|
|
Flex,
|
|
HStack,
|
|
IconButton,
|
|
Input,
|
|
InputGroup,
|
|
InputLeftElement,
|
|
InputRightElement,
|
|
ListItem,
|
|
Textarea,
|
|
UnorderedList,
|
|
useColorModeValue,
|
|
useTheme,
|
|
useToast,
|
|
VStack,
|
|
} from "@chakra-ui/react";
|
|
import { ArrowForwardIcon, SearchIcon } from "@chakra-ui/icons";
|
|
import { useHistory, useLocation } from "react-router-dom";
|
|
import { useLazyQuery, useQuery } from "@apollo/client";
|
|
|
|
import {
|
|
Delay,
|
|
ErrorMessage,
|
|
Heading1,
|
|
Heading2,
|
|
useCommonStyles,
|
|
useLocalStorage,
|
|
usePageTitle,
|
|
} from "./util";
|
|
import OutfitPreview from "./components/OutfitPreview";
|
|
import SpeciesColorPicker from "./components/SpeciesColorPicker";
|
|
import SquareItemCard, {
|
|
SquareItemCardSkeleton,
|
|
} from "./components/SquareItemCard";
|
|
import WIPCallout from "./components/WIPCallout";
|
|
|
|
import HomepageSplashImg from "./images/homepage-splash.png";
|
|
import HomepageSplashImg2x from "./images/homepage-splash@2x.png";
|
|
import FeedbackXweeImg from "./images/feedback-xwee.png";
|
|
import FeedbackXweeImg2x from "./images/feedback-xwee@2x.png";
|
|
|
|
function HomePage() {
|
|
usePageTitle(null);
|
|
useSupportSetup();
|
|
|
|
const [previewState, setPreviewState] = React.useState(null);
|
|
|
|
React.useEffect(() => {
|
|
if (window.location.href.includes("send-test-error-for-sentry")) {
|
|
throw new Error("Test error for Sentry");
|
|
}
|
|
});
|
|
|
|
return (
|
|
<Flex direction="column" align="center" textAlign="center" marginTop="8">
|
|
<Box
|
|
width="200px"
|
|
height="200px"
|
|
borderRadius="lg"
|
|
boxShadow="md"
|
|
overflow="hidden"
|
|
>
|
|
<OutfitPreview
|
|
speciesId={previewState?.speciesId}
|
|
colorId={previewState?.colorId}
|
|
pose={previewState?.pose}
|
|
wornItemIds={[]}
|
|
loadingDelayMs={1500}
|
|
placeholder={
|
|
<Box
|
|
as="img"
|
|
src={HomepageSplashImg}
|
|
srcSet={`${HomepageSplashImg} 1x, ${HomepageSplashImg2x} 2x`}
|
|
alt=""
|
|
/>
|
|
}
|
|
/>
|
|
</Box>
|
|
<Box height="4" />
|
|
<Heading1>Dress to Impress</Heading1>
|
|
<Box fontSize="lg" fontStyle="italic" opacity="0.85" role="doc-subtitle">
|
|
Design and share your Neopets outfits!
|
|
</Box>
|
|
<Box height="8" />
|
|
<StartOutfitForm onChange={setPreviewState} />
|
|
<Box height="4" />
|
|
<Box fontStyle="italic" fontSize="sm">
|
|
or
|
|
</Box>
|
|
<Box height="4" />
|
|
<SubmitPetForm />
|
|
<Box height="16" />
|
|
<NewItemsSection />
|
|
<Box height="16" />
|
|
<FeedbackFormSection />
|
|
<Box height="16" />
|
|
<WIPCallout details="We started building this last year, but, well… what a year 😅 Anyway, this will eventually become the main site, at impress.openneo.net!">
|
|
Maybe we'll rename it to Impress 2021… or maybe not! 🤔
|
|
</WIPCallout>
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
function StartOutfitForm({ onChange }) {
|
|
const history = useHistory();
|
|
|
|
const idealPose = React.useMemo(
|
|
() => (Math.random() > 0.5 ? "HAPPY_FEM" : "HAPPY_MASC"),
|
|
[]
|
|
);
|
|
|
|
const [speciesId, setSpeciesId] = React.useState("1");
|
|
const [colorId, setColorId] = React.useState("8");
|
|
const [isValid, setIsValid] = React.useState(true);
|
|
const [closestPose, setClosestPose] = React.useState(idealPose);
|
|
|
|
const onSubmit = (e) => {
|
|
e.preventDefault();
|
|
|
|
if (!isValid) {
|
|
return;
|
|
}
|
|
|
|
const params = new URLSearchParams({
|
|
species: speciesId,
|
|
color: colorId,
|
|
pose: closestPose,
|
|
});
|
|
|
|
history.push(`/outfits/new?${params}`);
|
|
};
|
|
|
|
const buttonBgColor = useColorModeValue("green.600", "green.300");
|
|
const buttonBgColorHover = useColorModeValue("green.700", "green.200");
|
|
|
|
return (
|
|
<form onSubmit={onSubmit}>
|
|
<Flex>
|
|
<SpeciesColorPicker
|
|
speciesId={speciesId}
|
|
colorId={colorId}
|
|
idealPose={idealPose}
|
|
showPlaceholders
|
|
colorPlaceholderText="Blue"
|
|
speciesPlaceholderText="Acara"
|
|
onChange={(species, color, isValid, closestPose) => {
|
|
setSpeciesId(species.id);
|
|
setColorId(color.id);
|
|
setIsValid(isValid);
|
|
setClosestPose(closestPose);
|
|
|
|
if (isValid) {
|
|
onChange({
|
|
speciesId: species.id,
|
|
colorId: color.id,
|
|
pose: closestPose,
|
|
});
|
|
}
|
|
}}
|
|
/>
|
|
<Box width="4" />
|
|
<Button
|
|
type="submit"
|
|
colorScheme="green"
|
|
disabled={!isValid}
|
|
backgroundColor={buttonBgColor}
|
|
_hover={{ backgroundColor: buttonBgColorHover }}
|
|
>
|
|
Start
|
|
</Button>
|
|
</Flex>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
function SubmitPetForm() {
|
|
const history = useHistory();
|
|
const theme = useTheme();
|
|
const toast = useToast();
|
|
|
|
const [petName, setPetName] = React.useState("");
|
|
|
|
const [loadPet, { loading }] = useLazyQuery(
|
|
gql`
|
|
query SubmitPetForm($petName: String!) {
|
|
petOnNeopetsDotCom(petName: $petName) {
|
|
color {
|
|
id
|
|
}
|
|
species {
|
|
id
|
|
}
|
|
pose
|
|
items {
|
|
id
|
|
}
|
|
}
|
|
}
|
|
`,
|
|
{
|
|
fetchPolicy: "network-only",
|
|
onCompleted: (data) => {
|
|
if (!data) return;
|
|
|
|
const { species, color, pose, items } = data.petOnNeopetsDotCom;
|
|
const params = new URLSearchParams({
|
|
name: petName,
|
|
species: species.id,
|
|
color: color.id,
|
|
pose,
|
|
});
|
|
for (const item of items) {
|
|
params.append("objects[]", item.id);
|
|
}
|
|
history.push(`/outfits/new?${params}`);
|
|
},
|
|
onError: () => {
|
|
toast({
|
|
title: "We couldn't load that pet, sorry 😓",
|
|
description: "Is it spelled correctly?",
|
|
status: "error",
|
|
});
|
|
},
|
|
}
|
|
);
|
|
|
|
const onSubmit = (e) => {
|
|
e.preventDefault();
|
|
|
|
loadPet({ variables: { petName } });
|
|
|
|
// Start preloading the WardrobePage, too!
|
|
// eslint-disable-next-line no-unused-expressions
|
|
import("./WardrobePage").catch((e) => {
|
|
// Let's just let this slide, because it's a preload error. Critical
|
|
// failures will happen elsewhere, and trigger reloads!
|
|
console.error(e);
|
|
});
|
|
};
|
|
|
|
const { brightBackground } = useCommonStyles();
|
|
const inputBorderColor = useColorModeValue("green.600", "green.500");
|
|
const inputBorderColorHover = useColorModeValue("green.400", "green.300");
|
|
const buttonBgColor = useColorModeValue("green.600", "green.300");
|
|
const buttonBgColorHover = useColorModeValue("green.700", "green.200");
|
|
|
|
return (
|
|
<ClassNames>
|
|
{({ css }) => (
|
|
<form onSubmit={onSubmit}>
|
|
<Flex>
|
|
<Input
|
|
value={petName}
|
|
onChange={(e) => setPetName(e.target.value)}
|
|
isDisabled={loading}
|
|
placeholder="Enter a pet's name"
|
|
aria-label="Enter a pet's name"
|
|
borderColor={inputBorderColor}
|
|
_hover={{ borderColor: inputBorderColorHover }}
|
|
background={brightBackground}
|
|
boxShadow="md"
|
|
width="14em"
|
|
className={css`
|
|
&::placeholder {
|
|
color: ${theme.colors.gray["500"]};
|
|
}
|
|
`}
|
|
/>
|
|
<Box width="4" />
|
|
<Button
|
|
type="submit"
|
|
colorScheme="green"
|
|
isDisabled={!petName}
|
|
isLoading={loading}
|
|
backgroundColor={buttonBgColor} // for AA contrast
|
|
_hover={{ backgroundColor: buttonBgColorHover }}
|
|
>
|
|
Start
|
|
</Button>
|
|
</Flex>
|
|
</form>
|
|
)}
|
|
</ClassNames>
|
|
);
|
|
}
|
|
|
|
function NewItemsSection() {
|
|
return (
|
|
<Box width="100%">
|
|
<Flex align="center" wrap="wrap">
|
|
<Heading2 flex="0 0 auto" marginRight="2" textAlign="left">
|
|
Latest items
|
|
</Heading2>
|
|
<Box flex="0 0 auto" marginLeft="auto" width="48">
|
|
<ItemsSearchField />
|
|
</Box>
|
|
</Flex>
|
|
<NewItemsSectionContent />
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
function ItemsSearchField() {
|
|
const [query, setQuery] = React.useState("");
|
|
const { brightBackground } = useCommonStyles();
|
|
const history = useHistory();
|
|
|
|
return (
|
|
<form
|
|
onSubmit={() => {
|
|
if (query) {
|
|
history.push(`/items/search/${encodeURIComponent(query)}`);
|
|
}
|
|
}}
|
|
>
|
|
<InputGroup
|
|
size="sm"
|
|
backgroundColor={query ? brightBackground : "transparent"}
|
|
_focusWithin={{ backgroundColor: brightBackground }}
|
|
>
|
|
<InputLeftElement pointerEvents="none">
|
|
<SearchIcon color="gray.400" />
|
|
</InputLeftElement>
|
|
<Input
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
placeholder="Search all items…"
|
|
borderRadius="full"
|
|
/>
|
|
<InputRightElement>
|
|
<IconButton
|
|
type="submit"
|
|
variant="ghost"
|
|
icon={<ArrowForwardIcon />}
|
|
aria-label="Search"
|
|
minWidth="1.5rem"
|
|
minHeight="1.5rem"
|
|
width="1.5rem"
|
|
height="1.5rem"
|
|
borderRadius="full"
|
|
opacity={query ? 1 : 0}
|
|
transition="opacity 0.2s"
|
|
aria-hidden={query ? "false" : "true"}
|
|
/>
|
|
</InputRightElement>
|
|
</InputGroup>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
function NewItemsSectionContent() {
|
|
const { loading, error, data } = useQuery(
|
|
gql`
|
|
query NewItemsSection {
|
|
newestItems {
|
|
id
|
|
name
|
|
thumbnailUrl
|
|
}
|
|
}
|
|
`
|
|
);
|
|
|
|
if (loading) {
|
|
return (
|
|
<Delay>
|
|
<ItemCardHStack>
|
|
<SquareItemCardSkeleton />
|
|
<SquareItemCardSkeleton minHeightNumLines={3} />
|
|
<SquareItemCardSkeleton />
|
|
<SquareItemCardSkeleton />
|
|
<SquareItemCardSkeleton minHeightNumLines={3} />
|
|
<SquareItemCardSkeleton />
|
|
<SquareItemCardSkeleton minHeightNumLines={3} />
|
|
<SquareItemCardSkeleton />
|
|
<SquareItemCardSkeleton />
|
|
<SquareItemCardSkeleton />
|
|
<SquareItemCardSkeleton />
|
|
<SquareItemCardSkeleton minHeightNumLines={3} />
|
|
<SquareItemCardSkeleton />
|
|
<SquareItemCardSkeleton />
|
|
<SquareItemCardSkeleton minHeightNumLines={3} />
|
|
<SquareItemCardSkeleton />
|
|
<SquareItemCardSkeleton minHeightNumLines={3} />
|
|
<SquareItemCardSkeleton />
|
|
<SquareItemCardSkeleton />
|
|
<SquareItemCardSkeleton />
|
|
</ItemCardHStack>
|
|
</Delay>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<ErrorMessage>
|
|
Couldn't load new items. Check your connection and try again!
|
|
</ErrorMessage>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ItemCardHStack>
|
|
{data.newestItems.map((item) => (
|
|
<SquareItemCard key={item.id} item={item} />
|
|
))}
|
|
</ItemCardHStack>
|
|
);
|
|
}
|
|
|
|
function ItemCardHStack({ children }) {
|
|
return (
|
|
// HACK: I wanted to just have an HStack with overflow:auto and internal
|
|
// paddingX, but the right-hand-side padding didn't seem to work
|
|
// during overflow. This was the best I could come up with...
|
|
<Flex maxWidth="100%" overflow="auto" paddingY="4">
|
|
<Box minWidth="2" />
|
|
<HStack align="flex-start" spacing="4">
|
|
{children}
|
|
</HStack>
|
|
<Box minWidth="2" />
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
function FeedbackFormSection() {
|
|
const { brightBackground } = useCommonStyles();
|
|
const pitchBorderColor = useColorModeValue("gray.300", "green.400");
|
|
const formBorderColor = useColorModeValue("gray.300", "blue.400");
|
|
|
|
return (
|
|
<VStack spacing="4" alignItems="stretch">
|
|
<FeedbackFormContainer
|
|
background={brightBackground}
|
|
borderColor={pitchBorderColor}
|
|
>
|
|
<Flex>
|
|
<Box
|
|
padding="2"
|
|
borderRadius="lg"
|
|
overflow="hidden"
|
|
flex="0 0 auto"
|
|
marginTop="4"
|
|
>
|
|
<Box
|
|
as="img"
|
|
src={FeedbackXweeImg}
|
|
srcSet={`${FeedbackXweeImg} 1x, ${FeedbackXweeImg2x} 2x`}
|
|
height="90px"
|
|
width="90px"
|
|
opacity="0.9"
|
|
alt=""
|
|
/>
|
|
</Box>
|
|
<FeedbackFormPitch />
|
|
</Flex>
|
|
</FeedbackFormContainer>
|
|
<FeedbackFormContainer
|
|
borderColor={formBorderColor}
|
|
image={
|
|
<Box
|
|
as="img"
|
|
src={FeedbackXweeImg}
|
|
srcSet={`${FeedbackXweeImg} 1x, ${FeedbackXweeImg2x} 2x`}
|
|
height="90px"
|
|
width="90px"
|
|
opacity="0.9"
|
|
alt=""
|
|
/>
|
|
}
|
|
>
|
|
<FeedbackForm />
|
|
</FeedbackFormContainer>
|
|
</VStack>
|
|
);
|
|
}
|
|
|
|
function FeedbackFormContainer({ background, borderColor, children }) {
|
|
return (
|
|
<Box
|
|
as="section"
|
|
background={background}
|
|
border="1px solid"
|
|
borderColor={borderColor}
|
|
borderRadius="lg"
|
|
boxShadow="lg"
|
|
maxWidth="500px"
|
|
paddingLeft="2"
|
|
paddingRight="4"
|
|
paddingY="2"
|
|
transition="all 0.2s"
|
|
>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
function FeedbackFormPitch() {
|
|
return (
|
|
<Flex direction="column" textAlign="left" opacity="0.9">
|
|
<Box as="header">Hi friends! Welcome to the beta!</Box>
|
|
<Box as="p" fontSize="sm">
|
|
This is the new Dress to Impress! It's ready for the future, and it even
|
|
works great on mobile! More coming soon!
|
|
</Box>
|
|
<Flex direction={{ base: "column", sm: "row" }}>
|
|
<Box
|
|
as="section"
|
|
fontSize="sm"
|
|
marginY="2"
|
|
flex={{ base: "0 0 auto", sm: "0 1 50%" }}
|
|
>
|
|
<Box as="h3" fontWeight="600">
|
|
New updates (Jan 21)
|
|
</Box>
|
|
<UnorderedList>
|
|
<ListItem>Search by items you own</ListItem>
|
|
<ListItem>Latest items & search!</ListItem>
|
|
<ListItem>Your Outfits page!</ListItem>
|
|
</UnorderedList>
|
|
</Box>
|
|
<Box width="2" />
|
|
<Box
|
|
as="section"
|
|
fontSize="sm"
|
|
marginY="2"
|
|
flex={{ base: "0 0 auto", sm: "0 1 50%" }}
|
|
>
|
|
<Box as="h3" fontWeight="600">
|
|
Coming soon
|
|
</Box>
|
|
<UnorderedList>
|
|
<ListItem>Better item list pages</ListItem>
|
|
<ListItem>
|
|
…a lot more things{" "}
|
|
<span role="img" aria-label="Sweat smile emoji">
|
|
😅
|
|
</span>
|
|
</ListItem>
|
|
</UnorderedList>
|
|
</Box>
|
|
</Flex>
|
|
<Box fontSize="sm" marginTop="1">
|
|
↓ Got ideas? Send them to us, please!{" "}
|
|
<span role="img" aria-label="Sparkle heart emoji">
|
|
💖
|
|
</span>
|
|
</Box>
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
function FeedbackForm() {
|
|
const [content, setContent] = React.useState("");
|
|
const [email, setEmail] = useLocalStorage("DTIFeedbackFormEmail", "");
|
|
const [isSending, setIsSending] = React.useState(false);
|
|
const toast = useToast();
|
|
|
|
const onSubmit = React.useCallback(
|
|
(e) => {
|
|
e.preventDefault();
|
|
|
|
fetch("/api/sendFeedback", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ content, email }),
|
|
})
|
|
.then((res) => {
|
|
if (!res.ok) {
|
|
throw new Error(`/api/sendFeedback returned status ${res.status}`);
|
|
}
|
|
|
|
setIsSending(false);
|
|
setContent("");
|
|
toast({
|
|
status: "success",
|
|
title: "Got it! We'll take a look soon.",
|
|
description:
|
|
"Thanks for helping us get better! Best wishes to you and your " +
|
|
"pets!!",
|
|
});
|
|
})
|
|
.catch((e) => {
|
|
setIsSending(false);
|
|
console.error(e);
|
|
toast({
|
|
status: "warning",
|
|
title: "Oops, we had an error sending this, sorry!",
|
|
description:
|
|
"We'd still love to hear from you! Please reach out to " +
|
|
"matchu@openneo.net with whatever's on your mind. Thanks and " +
|
|
"enjoy the site!",
|
|
duration: null,
|
|
isClosable: true,
|
|
});
|
|
});
|
|
|
|
setIsSending(true);
|
|
},
|
|
[content, email, toast]
|
|
);
|
|
|
|
const { brightBackground } = useCommonStyles();
|
|
|
|
return (
|
|
<Box
|
|
as="form"
|
|
// We use Grid here rather than our usual Flex, mainly so the fields will
|
|
// tab in the correct order!
|
|
display="grid"
|
|
gridTemplateAreas={`"email send" "content content"`}
|
|
gridTemplateColumns="1fr auto"
|
|
gridGap="2"
|
|
onSubmit={onSubmit}
|
|
>
|
|
<Input
|
|
type="email"
|
|
placeholder="Email address (optional)"
|
|
size="sm"
|
|
gridArea="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
background={brightBackground}
|
|
/>
|
|
<Textarea
|
|
size="sm"
|
|
placeholder={"I love…\nI wish…\nNext, you should add…"}
|
|
gridArea="content"
|
|
value={content}
|
|
onChange={(e) => setContent(e.target.value)}
|
|
background={brightBackground}
|
|
/>
|
|
<Button
|
|
type="submit"
|
|
size="sm"
|
|
colorScheme="blue"
|
|
gridArea="send"
|
|
isDisabled={content.trim().length === 0}
|
|
isLoading={isSending}
|
|
>
|
|
Send
|
|
</Button>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* useSupportSetup helps our support staff get set up with special access.
|
|
* If you provide ?supportSecret=... in the URL, we'll save it in a cookie and
|
|
* pop up a toast!
|
|
*
|
|
* This doesn't guarantee the secret is correct, of course! We don't bother to
|
|
* check that here; the server will reject requests from bad support secrets.
|
|
* And there's nothing especially secret in the support UI, so it's okay if
|
|
* other people know about the tools and poke around a powerless interface!
|
|
*/
|
|
function useSupportSetup() {
|
|
const location = useLocation();
|
|
const toast = useToast();
|
|
|
|
React.useEffect(() => {
|
|
const params = new URLSearchParams(location.search);
|
|
const supportSecret = params.get("supportSecret");
|
|
const existingSupportSecret = localStorage.getItem("supportSecret");
|
|
|
|
if (supportSecret && supportSecret !== existingSupportSecret) {
|
|
localStorage.setItem("supportSecret", supportSecret);
|
|
|
|
toast({
|
|
title: "Support secret saved!",
|
|
description:
|
|
`You should now see special Support UI across the site. ` +
|
|
`Thanks for your help! 💖`,
|
|
status: "success",
|
|
duration: 10000,
|
|
isClosable: true,
|
|
});
|
|
} else if (supportSecret === "") {
|
|
localStorage.removeItem("supportSecret");
|
|
|
|
toast({
|
|
title: "Support secret deleted.",
|
|
description: `The Support UI will now stop appearing on this device.`,
|
|
status: "success",
|
|
duration: 10000,
|
|
isClosable: true,
|
|
});
|
|
}
|
|
}, [location, toast]);
|
|
}
|
|
|
|
export default HomePage;
|