From 4045844e4b357487db498f186e5b811289bf6fa1 Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Sat, 25 Apr 2020 00:46:25 -0700
Subject: [PATCH] merge zones with the same name in the items UI

---
 src/ItemsPanel.js     |  6 +++---
 src/useOutfitState.js | 24 +++++++++++++-----------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/ItemsPanel.js b/src/ItemsPanel.js
index ff8529d..dc9cc4c 100644
--- a/src/ItemsPanel.js
+++ b/src/ItemsPanel.js
@@ -37,9 +37,9 @@ function ItemsPanel({ outfitState, loading, dispatchToOutfit }) {
           ))}
         {!loading && (
           <TransitionGroup component={null}>
-            {zonesAndItems.map(({ zone, items }) => (
+            {zonesAndItems.map(({ zoneLabel, items }) => (
               <CSSTransition
-                key={zone.id}
+                key={zoneLabel}
                 classNames="items-panel-zone"
                 timeout={500}
                 onExit={(e) => {
@@ -47,7 +47,7 @@ function ItemsPanel({ outfitState, loading, dispatchToOutfit }) {
                 }}
               >
                 <Box mb="10">
-                  <Heading2>{zone.label}</Heading2>
+                  <Heading2>{zoneLabel}</Heading2>
                   <ItemList
                     items={items}
                     outfitState={outfitState}
diff --git a/src/useOutfitState.js b/src/useOutfitState.js
index 76412a7..317b45f 100644
--- a/src/useOutfitState.js
+++ b/src/useOutfitState.js
@@ -199,29 +199,31 @@ function getZonesAndItems(itemsById, wornItemIds, closetedItemIds) {
     .map((id) => itemsById[id])
     .filter((i) => i);
 
+  // We use zone label here, rather than ID, because some zones have the same
+  // label and we *want* to over-simplify that in this UI. (e.g. there are
+  // multiple Hat zones, and some items occupy different ones, but mostly let's
+  // just group them and if they don't conflict then all the better!)
   const allItems = [...wornItems, ...closetedItems];
-  const zonesById = new Map();
-  const itemsByZoneId = new Map();
+  const itemsByZoneLabel = new Map();
   for (const item of allItems) {
     for (const layer of item.appearanceOn.layers) {
-      const zoneId = layer.zone.id;
-      zonesById.set(zoneId, layer.zone);
+      const zoneLabel = layer.zone.label;
 
-      if (!itemsByZoneId.has(zoneId)) {
-        itemsByZoneId.set(zoneId, []);
+      if (!itemsByZoneLabel.has(zoneLabel)) {
+        itemsByZoneLabel.set(zoneLabel, []);
       }
-      itemsByZoneId.get(zoneId).push(item);
+      itemsByZoneLabel.get(zoneLabel).push(item);
     }
   }
 
-  const zonesAndItems = Array.from(itemsByZoneId.entries()).map(
-    ([zoneId, items]) => ({
-      zone: zonesById.get(zoneId),
+  const zonesAndItems = Array.from(itemsByZoneLabel.entries()).map(
+    ([zoneLabel, items]) => ({
+      zoneLabel: zoneLabel,
       items: [...items].sort((a, b) => a.name.localeCompare(b.name)),
     })
   );
 
-  zonesAndItems.sort((a, b) => a.zone.label.localeCompare(b.zone.label));
+  zonesAndItems.sort((a, b) => a.zoneLabel.localeCompare(b.zoneLabel));
 
   return zonesAndItems;
 }