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 (
+
+ );
+}
+
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 (
-
-
-
-
-
-
- );
-}
-
-export default OutfitResetModal;