From 753305dd1122ec9e4d4aca891565162c757d4da2 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Sun, 17 Jan 2021 08:19:47 -0800
Subject: [PATCH] Fix "Untitled outfit" on open outfit in new window
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 😅)
---
 src/app/WardrobePage/ItemsPanel.js     |  5 ++++-
 src/app/WardrobePage/useOutfitState.js | 15 ++++++++-------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/app/WardrobePage/ItemsPanel.js b/src/app/WardrobePage/ItemsPanel.js
index e010656..292c295 100644
--- a/src/app/WardrobePage/ItemsPanel.js
+++ b/src/app/WardrobePage/ItemsPanel.js
@@ -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 })
diff --git a/src/app/WardrobePage/useOutfitState.js b/src/app/WardrobePage/useOutfitState.js
index 719a1a7..855f70f 100644
--- a/src/app/WardrobePage/useOutfitState.js
+++ b/src/app/WardrobePage/useOutfitState.js
@@ -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)
   );