diff --git a/dev-todos.txt b/dev-todos.txt index 1c2e865..ae169b6 100644 --- a/dev-todos.txt +++ b/dev-todos.txt @@ -3,3 +3,9 @@ * Restore good download behavior: use crossOrigin for everything, and remove cache-buster in the URL we use for canvas * Undo the local linking we did for @chakra-ui/core, react, and react-dom on Matchu's machine 😅 * Present invalidated items somewhere on the screen, instead of them just vanishing? :/ + +Features: + * Outfit sharing + * Search by zone + * Outfit saving + * Use the space better on big screens? diff --git a/package.json b/package.json index 05ae20f..6a3d290 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "graphql": "^15.0.0", "immer": "^6.0.3", "mysql2": "^2.1.0", + "node-fetch": "^2.6.0", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.1", diff --git a/src/OutfitResetModal.js b/src/OutfitResetModal.js index 97989da..b7001a2 100644 --- a/src/OutfitResetModal.js +++ b/src/OutfitResetModal.js @@ -1,4 +1,6 @@ import React from "react"; +import gql from "graphql-tag"; +import { useQuery } from "@apollo/react-hooks"; import { Text, Modal, @@ -17,24 +19,45 @@ import { function OutfitResetModal({ isOpen, onClose, dispatchToOutfit }) { const [petName, setPetName] = React.useState(""); + const [submittedPetName, submitPetName] = React.useState(""); - const onComplete = ({ custom_pet, object_info_registry }) => { - dispatchToOutfit({ - type: "reset", - name: custom_pet.name, - speciesId: custom_pet.species_id, - colorId: custom_pet.color_id, - wornItemIds: Object.values(object_info_registry).map( - (o) => o.obj_info_id - ), - closetedItemIds: [], - }); - onClose(); - setPetName(""); - }; - const { loading, error, loadOutfitData } = useLoadOutfitData( - petName, - onComplete + 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, + wornItemIds: items.map((i) => i.id), + closetedItemIds: [], + }); + onClose(); + setPetName(""); + submitPetName(""); + }, + } ); const clearOutfit = () => { @@ -46,6 +69,7 @@ function OutfitResetModal({ isOpen, onClose, dispatchToOutfit }) { }); onClose(); setPetName(""); + submitPetName(""); }; return ( @@ -55,7 +79,7 @@ function OutfitResetModal({ isOpen, onClose, dispatchToOutfit }) {