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

Fix "Untitled outfit" on open outfit in new window

Browse source 
Previously, when you navigated directly to an outfit by typing the URL into the browser or following an external link, the name would stay as "Untitled outfit", even after the outfit loaded.

This was because, when you render an `Editable` Chakra component with `value={undefined}`, it permanently enters "uncontrolled" mode, and providing a value later doesn't change that.

But tbh passing `undefined` down from outfit state wasn't my intention! But yeah, turns out the `?.` operator returns `undefined` rather than `null`, which I guess makes sense!

So, I've fixed this on both ends. I'm now passing more `null`s down via outfit state, because I think that's a more expected value in general.

But also, for the `Editable`, I'm making a point of passing in an empty string as `value`, so that this component will be resilient to upstream changes in the future. (It's pretty brittle to _depend_ on the difference between `null` and `undefined`, as we saw here 😅)
This commit is contained in:
Emi Matchu 2021-01-17 08:19:47 -08:00
parent 9b0a99e2ae
commit 753305dd11
2 changed files with 12 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/app/WardrobePage/ItemsPanel.js
View file

@ -247,7 +247,10 @@ function OutfitHeading({ outfitState, dispatchToOutfit }) {
<Box role="group" d="inline-block" position="relative" width="100%">
<Heading1 mb="6">
<Editable
value={outfitState.name}
// Make sure not to ever pass `undefined` into here, or else the
// component enters uncontrolled mode, and changing the value
// later won't fix it!
value={outfitState.name || ""}
placeholder="Untitled outfit"
onChange={(value) =>
dispatchToOutfit({ type: "rename", outfitName: value })

15
src/app/WardrobePage/useOutfitState.js
View file

@ -88,14 +88,15 @@ function useOutfitState() {
// We also call `Array.from` on our item IDs. It's more convenient to manage
// them as a Set in state, but most callers will find it more convenient to
// access them as arrays! e.g. for `.map()`.
const outfit = outfitData?.outfit;
const outfit = outfitData?.outfit || null;
const id = state.id;
const creator = outfit?.creator;
const name = state.name || outfit?.name;
const speciesId = state.speciesId || outfit?.petAppearance?.species?.id;
const colorId = state.colorId || outfit?.petAppearance?.color?.id;
const pose = state.pose || outfit?.petAppearance?.pose;
const appearanceId = state?.appearanceId;
const creator = outfit?.creator || null;
const name = state.name || outfit?.name || null;
const speciesId =
state.speciesId || outfit?.petAppearance?.species?.id || null;
const colorId = state.colorId || outfit?.petAppearance?.color?.id || null;
const pose = state.pose || outfit?.petAppearance?.pose || null;
const appearanceId = state.appearanceId || null;
const wornItemIds = Array.from(
state.wornItemIds || outfit?.wornItems?.map((i) => i.id)
);