From 6ce8a5aea27b8ccf4bdf9474012b3e58f8c3d409 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 30 Nov 2021 16:52:29 -0800
Subject: [PATCH] Update lists after click item page own/want button

This is a bit hacky, but I want to ship and I'm not in a mood for a refactor :P

Before this change, you could see a bug by doing the following:

1. Click "I own this" to own an item.
2. Click "Add a list" and add it to a list.
3. Click "I own this" to un-own the item. (This deletes it from all lists.)
4. Observe that the "Add a list" dropdown disappears.
5. Click "I own this" to own it again.
6. Observe that, before this change, the dropdown would reappear, but incorrectly say it was still in the old list. After this change, it appears with the blank "Add to list", as intended.
---
 src/app/ItemPage.js | 78 ++++++++++++++++++++++++++++++++-------------
 1 file changed, 56 insertions(+), 22 deletions(-)

diff --git a/src/app/ItemPage.js b/src/app/ItemPage.js
index daca92c..e759010 100644
--- a/src/app/ItemPage.js
+++ b/src/app/ItemPage.js
@@ -144,29 +144,31 @@ function ItemPageDescription({ description, isEmbedded }) {
   );
 }
 
-function ItemPageOwnWantButtons({ itemId }) {
-  const { loading, error, data } = useQuery(
-    gql`
-      query ItemPageOwnWantButtons($itemId: ID!) {
-        item(id: $itemId) {
-          id
-          name
-          currentUserOwnsThis
-          currentUserWantsThis
-        }
-        currentUser {
-          closetLists {
-            id
-            name
-            isDefaultList
-            ownsOrWantsItems
-            hasItem(itemId: $itemId)
-          }
-        }
+const ITEM_PAGE_OWN_WANT_BUTTONS_QUERY = gql`
+  query ItemPageOwnWantButtons($itemId: ID!) {
+    item(id: $itemId) {
+      id
+      name
+      currentUserOwnsThis
+      currentUserWantsThis
+    }
+    currentUser {
+      closetLists {
+        id
+        name
+        isDefaultList
+        ownsOrWantsItems
+        hasItem(itemId: $itemId)
       }
-    `,
-    { variables: { itemId }, context: { sendAuth: true } }
-  );
+    }
+  }
+`;
+
+function ItemPageOwnWantButtons({ itemId }) {
+  const { loading, error, data } = useQuery(ITEM_PAGE_OWN_WANT_BUTTONS_QUERY, {
+    variables: { itemId },
+    context: { sendAuth: true },
+  });
 
   if (error) {
     return <Box color="red.400">{error.message}</Box>;
@@ -423,6 +425,14 @@ function ItemPageOwnButton({ itemId, isChecked }) {
           currentUserOwnsThis: true,
         },
       },
+      // TODO: Refactor the mutation result to include closet lists
+      refetchQueries: [
+        {
+          query: ITEM_PAGE_OWN_WANT_BUTTONS_QUERY,
+          variables: { itemId },
+          context: { sendAuth: true },
+        },
+      ],
     }
   );
 
@@ -446,6 +456,14 @@ function ItemPageOwnButton({ itemId, isChecked }) {
           currentUserOwnsThis: false,
         },
       },
+      // TODO: Refactor the mutation result to include closet lists
+      refetchQueries: [
+        {
+          query: ITEM_PAGE_OWN_WANT_BUTTONS_QUERY,
+          variables: { itemId },
+          context: { sendAuth: true },
+        },
+      ],
     }
   );
 
@@ -533,6 +551,14 @@ function ItemPageWantButton({ itemId, isChecked }) {
           currentUserWantsThis: true,
         },
       },
+      // TODO: Refactor the mutation result to include closet lists
+      refetchQueries: [
+        {
+          query: ITEM_PAGE_OWN_WANT_BUTTONS_QUERY,
+          variables: { itemId },
+          context: { sendAuth: true },
+        },
+      ],
     }
   );
 
@@ -556,6 +582,14 @@ function ItemPageWantButton({ itemId, isChecked }) {
           currentUserWantsThis: false,
         },
       },
+      // TODO: Refactor the mutation result to include closet lists
+      refetchQueries: [
+        {
+          query: ITEM_PAGE_OWN_WANT_BUTTONS_QUERY,
+          variables: { itemId },
+          context: { sendAuth: true },
+        },
+      ],
     }
   );