From f1dd3bffa6e1345893073ff374bf63e3bdc77af2 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Sun, 17 Jan 2021 07:24:54 -0800
Subject: [PATCH] Hide species/color on wardrobe page when not ready

If the species/color of the current outfit aren't available yet (e.g. a saved outfit is still loading in), hide the picker altogether. This is because the picker can't handle change events during that time, and it's easier to just hide all this than to add special case handlers like disabled states! (And, while placeholders are often helpful, I'm not sure the placeholder dropdowns are any better than empty space in this case.)

This can also happen when the user loads a page without a species/color ready, like just going straight to `/outfits/new`. I think I might want to add a handler for that, though.

Resolves the direct cause of Sentry issue IMPRESS-2020-8, though I'm not sure how the user got to the URL `/outfits/new?[object+Object]=&objects[]=35185&objects[]=67084` in the first place...
---
 src/app/WardrobePage/OutfitControls.js | 42 ++++++++++++++------------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/app/WardrobePage/OutfitControls.js b/src/app/WardrobePage/OutfitControls.js
index c6287fb..e8caa28 100644
--- a/src/app/WardrobePage/OutfitControls.js
+++ b/src/app/WardrobePage/OutfitControls.js
@@ -172,24 +172,26 @@ function OutfitControls({
             </Box>
           </Stack>
           <Box gridArea="space" onClick={maybeUnlockFocus} />
-          <Flex gridArea="picker" justify="center" onClick={maybeUnlockFocus}>
-            {/**
-             * We try to center the species/color picker, but the left spacer will
-             * shrink more than the pose picker container if we run out of space!
-             */}
-            <Box flex="1 1 0" />
-            <Box flex="0 0 auto">
-              <DarkMode>
-                <SpeciesColorPicker
-                  speciesId={outfitState.speciesId}
-                  colorId={outfitState.colorId}
-                  idealPose={outfitState.pose}
-                  onChange={onSpeciesColorChange}
-                  stateMustAlwaysBeValid
-                />
-              </DarkMode>
-            </Box>
-            {outfitState.speciesId && outfitState.colorId && (
+          {outfitState.speciesId && outfitState.colorId && (
+            <Flex gridArea="picker" justify="center" onClick={maybeUnlockFocus}>
+              {/**
+               * We try to center the species/color picker, but the left spacer will
+               * shrink more than the pose picker container if we run out of space!
+               */}
+              <Box flex="1 1 0" />
+              <Box flex="0 0 auto">
+                <DarkMode>
+                  {
+                    <SpeciesColorPicker
+                      speciesId={outfitState.speciesId}
+                      colorId={outfitState.colorId}
+                      idealPose={outfitState.pose}
+                      onChange={onSpeciesColorChange}
+                      stateMustAlwaysBeValid
+                    />
+                  }
+                </DarkMode>
+              </Box>
               <Flex flex="1 1 0" align="center" pl="4">
                 <PosePicker
                   speciesId={outfitState.speciesId}
@@ -201,8 +203,8 @@ function OutfitControls({
                   onUnlockFocus={onUnlockFocus}
                 />
               </Flex>
-            )}
-          </Flex>
+            </Flex>
+          )}
         </Box>
       )}
     </ClassNames>