diff --git a/src/app/HomePage.js b/src/app/HomePage.js index 64a4406..d26c980 100644 --- a/src/app/HomePage.js +++ b/src/app/HomePage.js @@ -1,6 +1,17 @@ import React from "react"; -import { Box, Flex, Button, Tooltip } from "@chakra-ui/core"; +import { css } from "emotion"; +import gql from "graphql-tag"; +import { + Box, + Button, + Flex, + Input, + Tooltip, + useTheme, + useToast, +} from "@chakra-ui/core"; import { useHistory } from "react-router-dom"; +import { useLazyQuery } from "@apollo/react-hooks"; import { Heading1 } from "./util"; @@ -29,6 +40,12 @@ function HomePage() { Dress to Impress + + + or + + + ); } @@ -40,7 +57,9 @@ function StartOutfitForm() { const [colorId, setColorId] = React.useState("8"); const [isValid, setIsValid] = React.useState(true); - const onSubmit = () => { + const onSubmit = (e) => { + e.preventDefault(); + if (!isValid) { return; } @@ -84,4 +103,92 @@ function StartOutfitForm() { ); } +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 ( +
+ + setPetName(e.target.value)} + isDisabled={loading} + placeholder="Enter a pet's name" + borderColor="green.600" + _hover={{ borderColor: "green.400" }} + boxShadow="md" + width="14em" + className={css` + &::placeholder { + color: ${theme.colors.gray["500"]}; + } + `} + /> + + + +
+ ); +} + export default HomePage; diff --git a/src/app/OutfitControls.js b/src/app/OutfitControls.js index 0fc1d54..5c960d4 100644 --- a/src/app/OutfitControls.js +++ b/src/app/OutfitControls.js @@ -11,10 +11,10 @@ import { useToast, } from "@chakra-ui/core"; -import OutfitResetModal from "./OutfitResetModal"; import PosePicker from "./PosePicker"; import SpeciesColorPicker from "./SpeciesColorPicker"; import useOutfitAppearance from "./useOutfitAppearance"; +import { Link } from "react-router-dom"; /** * OutfitControls is the set of controls layered over the outfit preview, to @@ -54,7 +54,13 @@ function OutfitControls({ outfitState, dispatchToOutfit }) { )} > - + requires this to style right! ^^` + /> - setShowResetModal(true)} - /> - setShowResetModal(false)} - dispatchToOutfit={dispatchToOutfit} - /> - - ); -} - /** * ControlButton is a UI helper to render the cute round buttons we use in * OutfitControls! diff --git a/src/app/OutfitResetModal.js b/src/app/OutfitResetModal.js deleted file mode 100644 index 6e8508d..0000000 --- a/src/app/OutfitResetModal.js +++ /dev/null @@ -1,144 +0,0 @@ -import React from "react"; -import gql from "graphql-tag"; -import { useQuery } from "@apollo/react-hooks"; -import { - Text, - Modal, - ModalOverlay, - ModalContent, - ModalHeader, - ModalCloseButton, - ModalBody, - Input, - Button, - ModalFooter, - FormErrorMessage, - FormControl, - Box, -} from "@chakra-ui/core"; - -/** - * OutfitResetModal gives the user the ability to reset their outfit, by either - * clearing out most of the data, or letting them type in a pet name to load - * from Neopets.com! - */ -function OutfitResetModal({ isOpen, onClose, dispatchToOutfit }) { - const [petName, setPetName] = React.useState(""); - const [submittedPetName, submitPetName] = React.useState(""); - - const { loading, error } = useQuery( - gql` - query($petName: String!) { - petOnNeopetsDotCom(petName: $petName) { - color { - id - } - species { - id - } - items { - id - } - } - } - `, - { - variables: { petName: submittedPetName }, - skip: !submittedPetName, - fetchPolicy: "network-only", - onCompleted: (data) => { - if (!data) return; - - const { species, color, items } = data.petOnNeopetsDotCom; - dispatchToOutfit({ - type: "reset", - name: petName, - speciesId: species.id, - colorId: color.id, - emotion: "HAPPY", // TODO: Ask PetService - genderPresentation: "FEMININE", // TODO: Ask PetService - wornItemIds: items.map((i) => i.id), - closetedItemIds: [], - }); - onClose(); - setPetName(""); - submitPetName(""); - }, - } - ); - - const clearOutfit = () => { - dispatchToOutfit({ - type: "reset", - name: "", - wornItemIds: [], - closetedItemIds: [], - }); - onClose(); - setPetName(""); - submitPetName(""); - }; - - return ( - - - -
{ - e.preventDefault(); - submitPetName(petName); - }} - > - - - Want to try your own pet?{" "} - - 😮 - - - - - - - Choose a pet from Neopets.com, and we'll pull their outfit data - into here for you to play with! - - - - setPetName(e.target.value)} - autoFocus - /> - {error && ( - - We had trouble loading that pet, sorry{" "} - - 😖 - - - )} - - - - - - - - -
-
- ); -} - -export default OutfitResetModal;