import React from "react";
import { css } from "emotion";
import gql from "graphql-tag";
import { Box, Button, Flex, Input, useTheme, useToast } from "@chakra-ui/core";
import { useHistory } from "react-router-dom";
import { useLazyQuery } from "@apollo/react-hooks";
import { Heading1, usePageTitle } from "./util";
import HomepageSplashImg from "../images/homepage-splash.png";
import HomepageSplashImg2x from "../images/homepage-splash@2x.png";
import SpeciesColorPicker from "./components/SpeciesColorPicker";
function HomePage() {
usePageTitle("Dress to Impress");
return (
Dress to Impress
or
);
}
function StartOutfitForm() {
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}`);
};
return (
);
}
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");
};
return (
);
}
export default HomePage;