2020-05-10 00:21:04 -07:00
|
|
|
import React from "react";
|
2020-05-10 00:54:23 -07:00
|
|
|
import { css } from "emotion";
|
|
|
|
import gql from "graphql-tag";
|
2020-05-10 01:17:16 -07:00
|
|
|
import { Box, Button, Flex, Input, useTheme, useToast } from "@chakra-ui/core";
|
2020-05-10 00:21:04 -07:00
|
|
|
import { useHistory } from "react-router-dom";
|
2020-05-10 00:54:23 -07:00
|
|
|
import { useLazyQuery } from "@apollo/react-hooks";
|
2020-05-10 00:21:04 -07:00
|
|
|
|
2020-05-17 23:26:00 -07:00
|
|
|
import { Heading1, usePageTitle } from "./util";
|
2020-05-10 00:21:04 -07:00
|
|
|
|
|
|
|
import HomepageSplashImg from "../images/homepage-splash.png";
|
|
|
|
import SpeciesColorPicker from "./SpeciesColorPicker";
|
|
|
|
|
|
|
|
function HomePage() {
|
2020-05-17 23:26:00 -07:00
|
|
|
usePageTitle("Dress to Impress");
|
|
|
|
|
2020-05-10 00:21:04 -07:00
|
|
|
return (
|
2020-05-17 23:26:00 -07:00
|
|
|
<Flex
|
|
|
|
color="green.800"
|
|
|
|
direction="column"
|
|
|
|
p="6"
|
|
|
|
align="center"
|
|
|
|
textAlign="center"
|
|
|
|
>
|
|
|
|
<Box height="8" />
|
|
|
|
<Box
|
|
|
|
as="img"
|
|
|
|
src={HomepageSplashImg}
|
2020-05-18 01:08:56 -07:00
|
|
|
alt=""
|
2020-05-17 23:26:00 -07:00
|
|
|
width="200px"
|
|
|
|
height="200px"
|
|
|
|
rounded="lg"
|
|
|
|
boxShadow="md"
|
|
|
|
/>
|
|
|
|
<Box height="4" />
|
|
|
|
<Heading1>Dress to Impress</Heading1>
|
|
|
|
<Box height="8" />
|
|
|
|
<StartOutfitForm />
|
|
|
|
<Box height="4" />
|
|
|
|
<Box fontStyle="italic" fontSize="sm">
|
|
|
|
or
|
|
|
|
</Box>
|
|
|
|
<Box height="4" />
|
|
|
|
<SubmitPetForm />
|
|
|
|
</Flex>
|
2020-05-10 00:21:04 -07:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
function StartOutfitForm() {
|
|
|
|
const history = useHistory();
|
|
|
|
|
|
|
|
const [speciesId, setSpeciesId] = React.useState("1");
|
|
|
|
const [colorId, setColorId] = React.useState("8");
|
|
|
|
const [isValid, setIsValid] = React.useState(true);
|
|
|
|
|
2020-05-10 00:54:23 -07:00
|
|
|
const onSubmit = (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
|
2020-05-10 00:21:04 -07:00
|
|
|
if (!isValid) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const params = new URLSearchParams({
|
|
|
|
species: speciesId,
|
|
|
|
color: colorId,
|
|
|
|
});
|
|
|
|
|
|
|
|
history.push(`/outfits/new?${params}`);
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<form onSubmit={onSubmit}>
|
|
|
|
<Flex>
|
|
|
|
<SpeciesColorPicker
|
|
|
|
speciesId={speciesId}
|
|
|
|
colorId={colorId}
|
|
|
|
showPlaceholders
|
|
|
|
onChange={(species, color, isValid) => {
|
|
|
|
setSpeciesId(species.id);
|
|
|
|
setColorId(color.id);
|
|
|
|
setIsValid(isValid);
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
<Box width="4" />
|
2020-05-18 01:21:46 -07:00
|
|
|
<Button
|
|
|
|
type="submit"
|
|
|
|
variantColor="green"
|
|
|
|
disabled={!isValid}
|
|
|
|
backgroundColor="green.600" // for AA contrast
|
|
|
|
_hover={{ backgroundColor: "green.700" }}
|
|
|
|
>
|
2020-05-10 01:17:16 -07:00
|
|
|
Start
|
|
|
|
</Button>
|
2020-05-10 00:21:04 -07:00
|
|
|
</Flex>
|
|
|
|
</form>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-05-10 00:54:23 -07:00
|
|
|
function SubmitPetForm() {
|
|
|
|
const history = useHistory();
|
|
|
|
const theme = useTheme();
|
|
|
|
const toast = useToast();
|
|
|
|
|
|
|
|
const [petName, setPetName] = React.useState("");
|
|
|
|
|
|
|
|
const [loadPet, { loading }] = useLazyQuery(
|
|
|
|
gql`
|
2020-05-19 14:48:54 -07:00
|
|
|
query SubmitPetForm($petName: String!) {
|
2020-05-10 00:54:23 -07:00
|
|
|
petOnNeopetsDotCom(petName: $petName) {
|
|
|
|
color {
|
|
|
|
id
|
|
|
|
}
|
|
|
|
species {
|
|
|
|
id
|
|
|
|
}
|
|
|
|
items {
|
|
|
|
id
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`,
|
|
|
|
{
|
|
|
|
fetchPolicy: "network-only",
|
|
|
|
onCompleted: (data) => {
|
|
|
|
if (!data) return;
|
|
|
|
|
|
|
|
const { species, color, items } = data.petOnNeopetsDotCom;
|
|
|
|
const params = new URLSearchParams({
|
|
|
|
name: petName,
|
|
|
|
species: species.id,
|
|
|
|
color: color.id,
|
2020-05-23 12:47:06 -07:00
|
|
|
pose: "HAPPY_FEM", // TODO: Ask PetService
|
2020-05-10 00:54:23 -07:00
|
|
|
});
|
|
|
|
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();
|
2020-05-18 00:20:48 -07:00
|
|
|
|
2020-05-10 00:54:23 -07:00
|
|
|
loadPet({ variables: { petName } });
|
2020-05-18 00:20:48 -07:00
|
|
|
|
|
|
|
// Start preloading the WardrobePage, too!
|
|
|
|
// eslint-disable-next-line no-unused-expressions
|
|
|
|
import("./WardrobePage");
|
2020-05-10 00:54:23 -07:00
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<form onSubmit={onSubmit}>
|
|
|
|
<Flex>
|
|
|
|
<Input
|
|
|
|
value={petName}
|
|
|
|
onChange={(e) => setPetName(e.target.value)}
|
|
|
|
isDisabled={loading}
|
|
|
|
placeholder="Enter a pet's name"
|
2020-05-18 01:21:46 -07:00
|
|
|
aria-label="Enter a pet's name"
|
2020-05-10 00:54:23 -07:00
|
|
|
borderColor="green.600"
|
|
|
|
_hover={{ borderColor: "green.400" }}
|
|
|
|
boxShadow="md"
|
|
|
|
width="14em"
|
|
|
|
className={css`
|
|
|
|
&::placeholder {
|
|
|
|
color: ${theme.colors.gray["500"]};
|
|
|
|
}
|
|
|
|
`}
|
|
|
|
/>
|
|
|
|
<Box width="4" />
|
|
|
|
<Button
|
|
|
|
type="submit"
|
|
|
|
variantColor="green"
|
|
|
|
isDisabled={!petName}
|
|
|
|
isLoading={loading}
|
2020-05-18 01:21:46 -07:00
|
|
|
backgroundColor="green.600" // for AA contrast
|
|
|
|
_hover={{ backgroundColor: "green.700" }}
|
2020-05-10 00:54:23 -07:00
|
|
|
>
|
|
|
|
Start
|
|
|
|
</Button>
|
|
|
|
</Flex>
|
|
|
|
</form>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-05-10 00:21:04 -07:00
|
|
|
export default HomePage;
|