import React from "react";
import { css } from "emotion";
import gql from "graphql-tag";
import {
Box,
Button,
Flex,
Input,
Tooltip,
useTheme,
useToast,
} from "@chakra-ui/core";
import { Helmet } from "react-helmet";
import { useHistory } from "react-router-dom";
import { useLazyQuery } from "@apollo/react-hooks";
import { Heading1 } from "./util";
import HomepageSplashImg from "../images/homepage-splash.png";
import SpeciesColorPicker from "./SpeciesColorPicker";
function HomePage() {
return (
<>
Dress to Impress
Dress to Impress
or
>
);
}
function StartOutfitForm() {
const history = useHistory();
const [speciesId, setSpeciesId] = React.useState("1");
const [colorId, setColorId] = React.useState("8");
const [isValid, setIsValid] = React.useState(true);
const onSubmit = (e) => {
e.preventDefault();
if (!isValid) {
return;
}
const params = new URLSearchParams({
species: speciesId,
color: colorId,
});
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($petName: String!) {
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,
emotion: "HAPPY", // TODO: Ask PetService
genderPresentation: "FEMININE", // TODO: Ask PetService
});
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 } });
};
return (
);
}
export default HomePage;