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,
+ })
+ }
>
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}`);
}