OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

Disable "Customize more" for invalid pet

Browse source 
Oops, before disabling, we'd build a link with `pose=null`, and that would cause downstream issues on the wardrobe page.
This commit is contained in:
Emi Matchu 2021-02-09 22:31:50 -08:00
parent 1eb00ba6ca
commit b0eeb84d63
1 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/app/ItemPage.js
View file

@ -506,6 +506,7 @@ function ItemPageOutfitPreview({ itemId }) {
speciesId: null, speciesId: null,
colorId: null, colorId: null,
pose: null, pose: null,
isValid: false,
// We use appearance ID, in addition to the above, to give the Apollo cache // We use appearance ID, in addition to the above, to give the Apollo cache
// a really clear hint that the canonical pet appearance we preloaded is // a really clear hint that the canonical pet appearance we preloaded is
@ -621,6 +622,7 @@ function ItemPageOutfitPreview({ itemId }) {
speciesId: canonicalPetAppearance?.species?.id, speciesId: canonicalPetAppearance?.species?.id,
colorId: canonicalPetAppearance?.color?.id, colorId: canonicalPetAppearance?.color?.id,
pose: canonicalPetAppearance?.pose, pose: canonicalPetAppearance?.pose,
isValid: true,
appearanceId: canonicalPetAppearance?.id, appearanceId: canonicalPetAppearance?.id,
}); });
}, },
@ -709,6 +711,7 @@ function ItemPageOutfitPreview({ itemId }) {
colorId={petState.colorId} colorId={petState.colorId}
pose={petState.pose} pose={petState.pose}
itemId={itemId} itemId={itemId}
isDisabled={!petState.isValid}
/> />
{hasAnimations && ( {hasAnimations && (
<PlayPauseButton <PlayPauseButton
@ -736,11 +739,12 @@ function ItemPageOutfitPreview({ itemId }) {
colorId={petState.colorId} colorId={petState.colorId}
pose={petState.pose} pose={petState.pose}
idealPose={idealPose} idealPose={idealPose}
onChange={(species, color, _, closestPose) => { onChange={(species, color, isValid, closestPose) => {
setPetStateFromUserAction({ setPetStateFromUserAction({
speciesId: species.id, speciesId: species.id,
colorId: color.id, colorId: color.id,
pose: closestPose, pose: closestPose,
isValid,
appearanceId: null, appearanceId: null,
}); });
}} }}
@ -785,6 +789,7 @@ function ItemPageOutfitPreview({ itemId }) {
speciesId, speciesId,
colorId, colorId,
pose, pose,
isValid: true,
appearanceId: null, appearanceId: null,
}); });
}} }}
@ -795,7 +800,7 @@ function ItemPageOutfitPreview({ itemId }) {
); );
} }
function CustomizeMoreButton({ speciesId, colorId, pose, itemId }) { function CustomizeMoreButton({ speciesId, colorId, pose, itemId, isDisabled }) {
const url = const url =
`/outfits/new?species=${speciesId}&color=${colorId}&pose=${pose}&` + `/outfits/new?species=${speciesId}&color=${colorId}&pose=${pose}&` +
`objects[]=${itemId}`; `objects[]=${itemId}`;
@ -808,8 +813,8 @@ function CustomizeMoreButton({ speciesId, colorId, pose, itemId }) {
return ( return (
<Button <Button
as={Link} as={isDisabled ? "button" : Link}
to={url} to={isDisabled ? null : url}
role="group" role="group"
position="absolute" position="absolute"
top="2" top="2"
@ -819,6 +824,7 @@ function CustomizeMoreButton({ speciesId, colorId, pose, itemId }) {
_hover={{ backgroundColor: backgroundColorHover }} _hover={{ backgroundColor: backgroundColorHover }}
_focus={{ backgroundColor: backgroundColorHover, boxShadow: "outline" }} _focus={{ backgroundColor: backgroundColorHover, boxShadow: "outline" }}
boxShadow="sm" boxShadow="sm"
isDisabled={isDisabled}
> >
<ExpandOnGroupHover paddingRight="2">Customize more</ExpandOnGroupHover> <ExpandOnGroupHover paddingRight="2">Customize more</ExpandOnGroupHover>
<EditIcon /> <EditIcon />