From 072a95fabaf87cc8e328ddec4dd47095153b54bc Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Sun, 10 May 2020 01:28:39 -0700
Subject: [PATCH] remove demo outfit, initialize state from url

it was causing a flash of content sometimes, oops!
---
 src/app/useOutfitState.js | 58 +++++++++++----------------------------
 1 file changed, 16 insertions(+), 42 deletions(-)

diff --git a/src/app/useOutfitState.js b/src/app/useOutfitState.js
index 6791522..bdd0c72 100644
--- a/src/app/useOutfitState.js
+++ b/src/app/useOutfitState.js
@@ -9,32 +9,10 @@ enableMapSet();
 
 function useOutfitState() {
   const apolloClient = useApolloClient();
+  const initialState = parseOutfitUrl();
   const [state, dispatchToOutfit] = React.useReducer(
     outfitStateReducer(apolloClient),
-    {
-      name: "Dress to Impress demo 💖",
-      wornItemIds: new Set(["51054", "35779", "35780", "37830"]),
-      closetedItemIds: new Set([
-        "76732",
-        "54393",
-        "80087",
-        "75997",
-        "57632",
-        "80052",
-        "67617",
-        "50861",
-        "77778",
-        "51164",
-        "62215",
-        "70660",
-        "74546",
-        "57997",
-      ]),
-      speciesId: "24",
-      colorId: "62",
-      emotion: "HAPPY",
-      genderPresentation: "FEMININE",
-    }
+    initialState
   );
 
   const { name, speciesId, colorId, emotion, genderPresentation } = state;
@@ -101,24 +79,7 @@ function useOutfitState() {
     url,
   };
 
-  // Get the state from the URL the first time we load.
-  React.useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    if (urlParams.has("species")) {
-      dispatchToOutfit({
-        type: "reset",
-        name: urlParams.get("name"),
-        speciesId: urlParams.get("species"),
-        colorId: urlParams.get("color"),
-        emotion: urlParams.get("emotion") || "HAPPY",
-        genderPresentation: urlParams.get("genderPresentation") || "FEMININE",
-        wornItemIds: urlParams.getAll("objects[]"),
-        closetedItemIds: urlParams.getAll("closet[]"),
-      });
-    }
-  }, []);
-
-  // Afterwards, keep the URL up-to-date, but don't listen to it anymore.
+  // Keep the URL up-to-date. (We don't listen to it, though 😅)
   React.useEffect(() => {
     window.history.replaceState(null, "", url);
   }, [url]);
@@ -219,6 +180,19 @@ const outfitStateReducer = (apolloClient) => (baseState, action) => {
   }
 };
 
+function parseOutfitUrl() {
+  const urlParams = new URLSearchParams(window.location.search);
+  return {
+    name: urlParams.get("name"),
+    speciesId: urlParams.get("species"),
+    colorId: urlParams.get("color"),
+    emotion: urlParams.get("emotion") || "HAPPY",
+    genderPresentation: urlParams.get("genderPresentation") || "FEMININE",
+    wornItemIds: urlParams.getAll("objects[]"),
+    closetedItemIds: urlParams.getAll("closet[]"),
+  };
+}
+
 function findItemConflicts(itemIdToAdd, state, apolloClient) {
   const { wornItemIds, speciesId, colorId } = state;