From f49c2552ce4019fa5d46168ab1972d20f4f9c0a1 Mon Sep 17 00:00:00 2001
From: Matt Dunn-Rankin <mattdunnrankin@khanacademy.org>
Date: Fri, 24 Apr 2020 20:19:26 -0700
Subject: [PATCH] add support for unwearing items!

---
 src/ItemList.js       |  7 ++++++-
 src/useOutfitState.js | 18 ++++++++++++++----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/ItemList.js b/src/ItemList.js
index 24254a6..b763075 100644
--- a/src/ItemList.js
+++ b/src/ItemList.js
@@ -40,7 +40,12 @@ function Item({ item, isWorn, dispatchToOutfit }) {
       d="flex"
       alignItems="center"
       cursor="pointer"
-      onClick={() => dispatchToOutfit({ type: "wearItem", itemId: item.id })}
+      onClick={() =>
+        dispatchToOutfit({
+          type: isWorn ? "unwearItem" : "wearItem",
+          itemId: item.id,
+        })
+      }
     >
       <ItemThumbnail src={item.thumbnailUrl} isWorn={isWorn} />
       <Box width="3" />
diff --git a/src/useOutfitState.js b/src/useOutfitState.js
index 8cee207..8ffdf6f 100644
--- a/src/useOutfitState.js
+++ b/src/useOutfitState.js
@@ -63,12 +63,12 @@ const outfitStateReducer = (apolloClient) => (baseState, action) => {
   switch (action.type) {
     case "wearItem":
       return produce(baseState, (state) => {
+        // A hack to work around https://github.com/immerjs/immer/issues/586
+        state.wornItemIds.add("fake-id-immer#586").delete("fake-id-immer#586");
+
         const { wornItemIds, closetedItemIds } = state;
         const { itemId } = action;
 
-        // Move the item out of the closet.
-        closetedItemIds.delete(itemId);
-
         // Move conflicting items to the closet.
         //
         // We do this by looking them up in the Apollo Cache, which is going to
@@ -87,9 +87,19 @@ const outfitStateReducer = (apolloClient) => (baseState, action) => {
           closetedItemIds.add(conflictingId);
         }
 
-        // Add this item to the worn set.
+        // Move this item from the closet to the worn set.
+        closetedItemIds.delete(itemId);
         wornItemIds.add(itemId);
       });
+    case "unwearItem":
+      return produce(baseState, (state) => {
+        const { wornItemIds, closetedItemIds } = state;
+        const { itemId } = action;
+
+        // Move this item from the worn set to the closet.
+        wornItemIds.delete(itemId);
+        closetedItemIds.add(itemId);
+      });
     default:
       throw new Error(`unexpected action ${action}`);
   }