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