From f060a0d4df4472a95bed8bf2907c43b6f9496c31 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 29 Dec 2022 15:37:50 +0800
Subject: [PATCH 01/10] Add some debugging for set labels on highlights

---
 .../templates/article/SetLabelsControl.tsx      | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/web/components/templates/article/SetLabelsControl.tsx b/packages/web/components/templates/article/SetLabelsControl.tsx
index 34e4306e6..09cb65b7f 100644
--- a/packages/web/components/templates/article/SetLabelsControl.tsx
+++ b/packages/web/components/templates/article/SetLabelsControl.tsx
@@ -258,6 +258,8 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element {
 
   const toggleLabel = useCallback(
     async (label: Label) => {
+      console.log('toggling label: ', label)
+
       let newSelectedLabels = [...selectedLabels]
       if (isSelected(label)) {
         newSelectedLabels = selectedLabels.filter((other) => {
@@ -268,12 +270,17 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element {
       }
       setSelectedLabels(newSelectedLabels)
 
-      const result = await props.save(newSelectedLabels)
-      if (result) {
-        props.provider.labels = result
-        if (props.onLabelsChanged) {
-          props.onLabelsChanged(result)
+      try {
+        const result = await props.save(newSelectedLabels)
+        console.log(' -- result of setting labels: ', result)
+        if (result) {
+          props.provider.labels = result
+          if (props.onLabelsChanged) {
+            props.onLabelsChanged(result)
+          }
         }
+      } catch (err) {
+        console.log(' -- error setting labels: ', err)
       }
 
       revalidate()

From 49bca60e2bb0c45ee01050d5e8f699ca2df5d394 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 29 Dec 2022 15:55:54 +0800
Subject: [PATCH 02/10] More debugging

---
 packages/web/components/templates/article/SetLabelsModal.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/web/components/templates/article/SetLabelsModal.tsx b/packages/web/components/templates/article/SetLabelsModal.tsx
index ed7edac6b..90d26b130 100644
--- a/packages/web/components/templates/article/SetLabelsModal.tsx
+++ b/packages/web/components/templates/article/SetLabelsModal.tsx
@@ -21,13 +21,18 @@ export function SetLabelsModal(props: SetLabelsModalProps): JSX.Element {
   const [selectedLabels, setSelectedLabels] = useState(props.provider.labels)
   const onOpenChange = useCallback(
     async (open: boolean) => {
+      console.log('SetLabelsModal::onOpenChange: ', open, selectedLabels)
       if (selectedLabels) {
         const result = await props.save(selectedLabels)
+        console.log('SetLabelsModal::onOpenChange: ', result)
+
         if (result) {
           props.onLabelsChanged(result)
         } else {
           showErrorToast('Error updating labels')
         }
+      } else {
+        console.log('SetLabelsModal::onOpenChange: no selectedLabels')
       }
       props.onOpenChange(open)
     },

From 2c6b6ef3ccd7345b7939a9cce6ecd009590defc9 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 29 Dec 2022 16:42:22 +0800
Subject: [PATCH 03/10] Set labels before making API call

---
 .../components/templates/article/SetLabelsControl.tsx  | 10 ++++------
 .../components/templates/article/SetLabelsModal.tsx    |  1 +
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/web/components/templates/article/SetLabelsControl.tsx b/packages/web/components/templates/article/SetLabelsControl.tsx
index 09cb65b7f..4e4fa529e 100644
--- a/packages/web/components/templates/article/SetLabelsControl.tsx
+++ b/packages/web/components/templates/article/SetLabelsControl.tsx
@@ -269,16 +269,14 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element {
         newSelectedLabels = [...selectedLabels, label]
       }
       setSelectedLabels(newSelectedLabels)
+      props.provider.labels = newSelectedLabels
+      if (props.onLabelsChanged) {
+        props.onLabelsChanged(newSelectedLabels)
+      }
 
       try {
         const result = await props.save(newSelectedLabels)
         console.log(' -- result of setting labels: ', result)
-        if (result) {
-          props.provider.labels = result
-          if (props.onLabelsChanged) {
-            props.onLabelsChanged(result)
-          }
-        }
       } catch (err) {
         console.log(' -- error setting labels: ', err)
       }
diff --git a/packages/web/components/templates/article/SetLabelsModal.tsx b/packages/web/components/templates/article/SetLabelsModal.tsx
index 90d26b130..0a37a9817 100644
--- a/packages/web/components/templates/article/SetLabelsModal.tsx
+++ b/packages/web/components/templates/article/SetLabelsModal.tsx
@@ -41,6 +41,7 @@ export function SetLabelsModal(props: SetLabelsModalProps): JSX.Element {
 
   const handleSave = useCallback(
     (labels: Label[]) => {
+      console.log('setting selected labels: ', labels)
       setSelectedLabels(labels)
       return Promise.resolve(labels)
     },

From e03da2475dad5108089a621fdaa68b7bf75f5934 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 29 Dec 2022 17:37:52 +0800
Subject: [PATCH 04/10] Update setlabels to save on close, always use the modal

---
 .../templates/article/ArticleActionsMenu.tsx  | 98 +++++++++++++------
 .../templates/article/HighlightsLayer.tsx     |  2 -
 .../templates/article/HighlightsModal.tsx     |  2 +-
 .../templates/article/SetLabelsControl.tsx    | 47 +++------
 .../templates/article/SetLabelsModal.tsx      | 41 +++-----
 .../templates/homeFeed/HomeFeedContainer.tsx  |  2 +-
 .../web/pages/[username]/[slug]/index.tsx     |  2 +-
 7 files changed, 102 insertions(+), 92 deletions(-)

diff --git a/packages/web/components/templates/article/ArticleActionsMenu.tsx b/packages/web/components/templates/article/ArticleActionsMenu.tsx
index 195f176ff..d1037a957 100644
--- a/packages/web/components/templates/article/ArticleActionsMenu.tsx
+++ b/packages/web/components/templates/article/ArticleActionsMenu.tsx
@@ -20,6 +20,7 @@ import { useReaderSettings } from '../../../lib/hooks/useReaderSettings'
 import { useRef } from 'react'
 import { setLabelsMutation } from '../../../lib/networking/mutations/setLabelsMutation'
 import { Label } from '../../../lib/networking/fragments/labelFragment'
+import { SetLabelsModal } from './SetLabelsModal'
 
 export type ArticleActionsMenuLayout = 'top' | 'side'
 
@@ -102,12 +103,7 @@ export function ArticleActionsMenu(
                 tooltipContent="Adjust Display Settings"
                 tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
               >
-                <SpanBox ref={displaySettingsButtonRef}>
-                  <TextAa
-                    size={24}
-                    color={theme.colors.readerFont.toString()}
-                  />
-                </SpanBox>
+                <TextAa size={24} color={theme.colors.readerFont.toString()} />
               </TooltipWrapped>
             </Button>
             <MenuSeparator layout={props.layout} />
@@ -122,37 +118,56 @@ export function ArticleActionsMenu(
           }}
         >
           {props.article ? (
-            <ActionDropdown
-              layout={props.layout}
-              triggerElement={
+            <>
+              <Button
+                style="articleActionIcon"
+                onClick={() => readerSettings.setShowSetLabelsModal(true)}
+              >
                 <TooltipWrapped
                   tooltipContent="Edit labels"
                   tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
                 >
-                  <TagSimple
-                    size={24}
-                    color={theme.colors.readerFont.toString()}
-                  />
+                  <SpanBox ref={displaySettingsButtonRef}>
+                    <TagSimple
+                      size={24}
+                      color={theme.colors.readerFont.toString()}
+                    />
+                  </SpanBox>
                 </TooltipWrapped>
-              }
-            >
-              <SetLabelsControl
-                provider={props.article}
-                save={(labels: Label[]) => {
-                  if (props.article?.id) {
-                    return setLabelsMutation(
-                      props.article?.id,
-                      labels.map((label) => label.id)
-                    )
-                  }
-                  return Promise.resolve(undefined)
-                }}
-                onLabelsChanged={(labels) => {
-                  props.articleActionHandler('refreshLabels', labels)
-                }}
-              />
-            </ActionDropdown>
+              </Button>
+              <MenuSeparator layout={props.layout} />
+            </>
           ) : (
+            // <ActionDropdown
+            //   layout={props.layout}
+            //   triggerElement={
+            //     <TooltipWrapped
+            //       tooltipContent="Edit labels"
+            //       tooltipSide={props.layout == 'side' ? 'right' : 'bottom'}
+            //     >
+            //       <TagSimple
+            //         size={24}
+            //         color={theme.colors.readerFont.toString()}
+            //       />
+            //     </TooltipWrapped>
+            //   }
+            // >
+            //   <SetLabelsControl
+            //     provider={props.article}
+            //     save={(labels: Label[]) => {
+            //       if (props.article?.id) {
+            //         return setLabelsMutation(
+            //           props.article?.id,
+            //           labels.map((label) => label.id)
+            //         )
+            //       }
+            //       return Promise.resolve(undefined)
+            //     }}
+            //     onLabelsChanged={(labels) => {
+            //       props.articleActionHandler('refreshLabels', labels)
+            //     }}
+            //   />
+            // </ActionDropdown>
             <Button
               style="articleActionIcon"
               css={{
@@ -254,6 +269,27 @@ export function ArticleActionsMenu(
           }
         />
       )}
+
+      {props.article && readerSettings.showSetLabelsModal && (
+        <SetLabelsModal
+          provider={props.article}
+          onOpenChange={(open: boolean) => {}}
+          onLabelsUpdated={(labels: Label[]) => {
+            props.articleActionHandler('refreshLabels', labels)
+          }}
+          save={(labels: Label[]) => {
+            if (props.article?.id) {
+              return (
+                setLabelsMutation(
+                  props.article?.id,
+                  labels.map((l) => l.id)
+                ) ?? []
+              )
+            }
+            return Promise.resolve(labels)
+          }}
+        />
+      )}
     </>
   )
 }
diff --git a/packages/web/components/templates/article/HighlightsLayer.tsx b/packages/web/components/templates/article/HighlightsLayer.tsx
index ec70d9f63..75d2de534 100644
--- a/packages/web/components/templates/article/HighlightsLayer.tsx
+++ b/packages/web/components/templates/article/HighlightsLayer.tsx
@@ -584,8 +584,6 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
         onOpenChange={function (open: boolean): void {
           setLabelsTarget(undefined)
         }}
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onLabelsChanged={function (labels: Label[]): void {}}
         save={function (labels: Label[]): Promise<Label[] | undefined> {
           const result = setLabelsForHighlight(
             labelsTarget.id,
diff --git a/packages/web/components/templates/article/HighlightsModal.tsx b/packages/web/components/templates/article/HighlightsModal.tsx
index 7bce504bf..e6e5bdd61 100644
--- a/packages/web/components/templates/article/HighlightsModal.tsx
+++ b/packages/web/components/templates/article/HighlightsModal.tsx
@@ -105,7 +105,7 @@ export function HighlightsModal(props: HighlightsModalProps): JSX.Element {
           onOpenChange={function (open: boolean): void {
             setLabelsTarget(undefined)
           }}
-          onLabelsChanged={function (labels: Label[]): void {
+          onLabelsUpdated={function (labels: Label[]): void {
             updateState({})
           }}
           save={function (labels: Label[]): Promise<Label[] | undefined> {
diff --git a/packages/web/components/templates/article/SetLabelsControl.tsx b/packages/web/components/templates/article/SetLabelsControl.tsx
index 4e4fa529e..e8b71cb9f 100644
--- a/packages/web/components/templates/article/SetLabelsControl.tsx
+++ b/packages/web/components/templates/article/SetLabelsControl.tsx
@@ -20,8 +20,11 @@ export interface LabelsProvider {
 
 type SetLabelsControlProps = {
   provider: LabelsProvider
-  onLabelsChanged: (labels: Label[]) => void
-  save: (labels: Label[]) => Promise<Label[] | undefined>
+
+  selectedLabels: Label[]
+  setSelectedLabels: (labels: Label[]) => void
+
+  onLabelsUpdated?: (labels: Label[]) => void
 }
 
 type HeaderProps = {
@@ -239,9 +242,6 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element {
   const router = useRouter()
   const [filterText, setFilterText] = useState('')
   const { labels, revalidate } = useGetLabelsQuery()
-  const [selectedLabels, setSelectedLabels] = useState<Label[]>(
-    props.provider.labels ?? []
-  )
 
   useEffect(() => {
     setFocusedIndex(undefined)
@@ -249,41 +249,33 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element {
 
   const isSelected = useCallback(
     (label: Label): boolean => {
-      return selectedLabels.some((other) => {
+      return props.selectedLabels.some((other) => {
         return other.id === label.id
       })
     },
-    [selectedLabels]
+    [props.selectedLabels]
   )
 
   const toggleLabel = useCallback(
     async (label: Label) => {
-      console.log('toggling label: ', label)
-
-      let newSelectedLabels = [...selectedLabels]
+      let newSelectedLabels = [...props.selectedLabels]
       if (isSelected(label)) {
-        newSelectedLabels = selectedLabels.filter((other) => {
+        newSelectedLabels = props.selectedLabels.filter((other) => {
           return other.id !== label.id
         })
       } else {
-        newSelectedLabels = [...selectedLabels, label]
+        newSelectedLabels = [...props.selectedLabels, label]
       }
-      setSelectedLabels(newSelectedLabels)
+      props.setSelectedLabels(newSelectedLabels)
       props.provider.labels = newSelectedLabels
-      if (props.onLabelsChanged) {
-        props.onLabelsChanged(newSelectedLabels)
-      }
 
-      try {
-        const result = await props.save(newSelectedLabels)
-        console.log(' -- result of setting labels: ', result)
-      } catch (err) {
-        console.log(' -- error setting labels: ', err)
+      if (props.onLabelsUpdated) {
+        props.onLabelsUpdated(newSelectedLabels)
       }
 
       revalidate()
     },
-    [isSelected, selectedLabels, setSelectedLabels]
+    [isSelected, props]
   )
 
   const filteredLabels = useMemo(() => {
@@ -354,14 +346,7 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element {
         }
       }
     },
-    [
-      filterText,
-      filteredLabels,
-      focusedIndex,
-      isSelected,
-      selectedLabels,
-      setSelectedLabels,
-    ]
+    [filterText, filteredLabels, focusedIndex, isSelected, props]
   )
 
   const createLabelFromFilterText = useCallback(async () => {
@@ -378,7 +363,7 @@ export function SetLabelsControl(props: SetLabelsControlProps): JSX.Element {
     } else {
       showErrorToast('Failed to create label', { position: 'bottom-right' })
     }
-  }, [filterText, selectedLabels, setSelectedLabels, toggleLabel])
+  }, [filterText, props, toggleLabel])
 
   return (
     <VStack
diff --git a/packages/web/components/templates/article/SetLabelsModal.tsx b/packages/web/components/templates/article/SetLabelsModal.tsx
index 0a37a9817..22ff445a2 100644
--- a/packages/web/components/templates/article/SetLabelsModal.tsx
+++ b/packages/web/components/templates/article/SetLabelsModal.tsx
@@ -12,40 +12,30 @@ import { LabelsProvider, SetLabelsControl } from './SetLabelsControl'
 
 type SetLabelsModalProps = {
   provider: LabelsProvider
+
+  onLabelsUpdated?: (labels: Label[]) => void
   onOpenChange: (open: boolean) => void
-  onLabelsChanged: (labels: Label[]) => void
   save: (labels: Label[]) => Promise<Label[] | undefined>
 }
 
 export function SetLabelsModal(props: SetLabelsModalProps): JSX.Element {
-  const [selectedLabels, setSelectedLabels] = useState(props.provider.labels)
+  const [selectedLabels, setSelectedLabels] = useState(
+    props.provider.labels ?? []
+  )
+
   const onOpenChange = useCallback(
     async (open: boolean) => {
-      console.log('SetLabelsModal::onOpenChange: ', open, selectedLabels)
-      if (selectedLabels) {
-        const result = await props.save(selectedLabels)
-        console.log('SetLabelsModal::onOpenChange: ', result)
+      const result = await props.save(selectedLabels)
+      if (props.onLabelsUpdated) {
+        props.onLabelsUpdated(selectedLabels)
+      }
 
-        if (result) {
-          props.onLabelsChanged(result)
-        } else {
-          showErrorToast('Error updating labels')
-        }
-      } else {
-        console.log('SetLabelsModal::onOpenChange: no selectedLabels')
+      if (!result) {
+        showErrorToast('Error updating labels')
       }
       props.onOpenChange(open)
     },
-    [props.onOpenChange]
-  )
-
-  const handleSave = useCallback(
-    (labels: Label[]) => {
-      console.log('setting selected labels: ', labels)
-      setSelectedLabels(labels)
-      return Promise.resolve(labels)
-    },
-    [selectedLabels, setSelectedLabels]
+    [props, selectedLabels, setSelectedLabels]
   )
 
   return (
@@ -64,8 +54,9 @@ export function SetLabelsModal(props: SetLabelsModalProps): JSX.Element {
           </SpanBox>
           <SetLabelsControl
             provider={props.provider}
-            save={handleSave}
-            onLabelsChanged={props.onLabelsChanged}
+            selectedLabels={selectedLabels}
+            setSelectedLabels={setSelectedLabels}
+            onLabelsUpdated={props.onLabelsUpdated}
           />
         </VStack>
       </ModalContent>
diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index bd80bb54d..cd2fb681a 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -1205,7 +1205,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
       {props.labelsTarget?.node.id && (
         <SetLabelsModal
           provider={props.labelsTarget.node}
-          onLabelsChanged={(labels: Label[]) => {
+          onLabelsUpdated={(labels: Label[]) => {
             if (props.labelsTarget) {
               props.labelsTarget.node.labels = labels
               updateState({})
diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx
index 8cf4f0226..eb9647df4 100644
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@@ -368,7 +368,7 @@ export default function Home(): JSX.Element {
       {article && readerSettings.showSetLabelsModal && (
         <SetLabelsModal
           provider={article}
-          onLabelsChanged={(labels: Label[]) => {
+          onLabelsUpdated={(labels: Label[]) => {
             actionHandler('refreshLabels', labels)
           }}
           save={(labels: Label[]) => {

From 3040a35203ea43000ceb76c23d91bfd51a8b8680 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 29 Dec 2022 17:44:46 +0800
Subject: [PATCH 05/10] Reset modal on close

---
 .../web/components/templates/article/ArticleActionsMenu.tsx   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/web/components/templates/article/ArticleActionsMenu.tsx b/packages/web/components/templates/article/ArticleActionsMenu.tsx
index d1037a957..21ca539e9 100644
--- a/packages/web/components/templates/article/ArticleActionsMenu.tsx
+++ b/packages/web/components/templates/article/ArticleActionsMenu.tsx
@@ -273,7 +273,9 @@ export function ArticleActionsMenu(
       {props.article && readerSettings.showSetLabelsModal && (
         <SetLabelsModal
           provider={props.article}
-          onOpenChange={(open: boolean) => {}}
+          onOpenChange={(open: boolean) => {
+            readerSettings.setShowSetLabelsModal(false)
+          }}
           onLabelsUpdated={(labels: Label[]) => {
             props.articleActionHandler('refreshLabels', labels)
           }}

From dba672a9d54d5dd5ae73fade94738c53f5e2a820 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 30 Dec 2022 11:20:05 +0800
Subject: [PATCH 06/10] Set labels on toggle

---
 .../templates/article/SetLabelsModal.tsx      | 54 +++++++++++++++----
 .../mutations/setLabelsForHighlight.ts        |  7 +++
 2 files changed, 52 insertions(+), 9 deletions(-)

diff --git a/packages/web/components/templates/article/SetLabelsModal.tsx b/packages/web/components/templates/article/SetLabelsModal.tsx
index 22ff445a2..a9071fefe 100644
--- a/packages/web/components/templates/article/SetLabelsModal.tsx
+++ b/packages/web/components/templates/article/SetLabelsModal.tsx
@@ -1,6 +1,6 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { Label } from '../../../lib/networking/fragments/labelFragment'
-import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
+import { showErrorToast } from '../../../lib/toastHelpers'
 import { SpanBox, VStack } from '../../elements/LayoutPrimitives'
 import {
   ModalRoot,
@@ -19,25 +19,61 @@ type SetLabelsModalProps = {
 }
 
 export function SetLabelsModal(props: SetLabelsModalProps): JSX.Element {
+  const [previousSelectedLabels, setPreviousSelectedLabels] = useState(
+    props.provider.labels ?? []
+  )
   const [selectedLabels, setSelectedLabels] = useState(
     props.provider.labels ?? []
   )
 
+  const labelsEqual = (left: Label[], right: Label[]) => {
+    if (left.length !== right.length) {
+      return false
+    }
+
+    for (var label of left) {
+      if (!right.find((r) => label.id == r.id)) {
+        return false
+      }
+    }
+
+    return true
+  }
+
   const onOpenChange = useCallback(
     async (open: boolean) => {
-      const result = await props.save(selectedLabels)
-      if (props.onLabelsUpdated) {
-        props.onLabelsUpdated(selectedLabels)
+      // Only make API call if the labels have been modified
+      if (!labelsEqual(selectedLabels, previousSelectedLabels)) {
+        const result = await props.save(selectedLabels)
+        if (props.onLabelsUpdated) {
+          props.onLabelsUpdated(selectedLabels)
+        }
+
+        if (!result) {
+          showErrorToast('Error updating labels')
+        }
       }
 
-      if (!result) {
-        showErrorToast('Error updating labels')
-      }
       props.onOpenChange(open)
     },
-    [props, selectedLabels, setSelectedLabels]
+    [props, selectedLabels, previousSelectedLabels, setSelectedLabels]
   )
 
+  useEffect(() => {
+    if (labelsEqual(selectedLabels, previousSelectedLabels)) {
+      return
+    }
+
+    props
+      .save(selectedLabels)
+      .then((result) => {
+        setPreviousSelectedLabels(result ?? [])
+      })
+      .catch((err) => {
+        console.log('error saving labels: ', err)
+      })
+  }, [selectedLabels, setPreviousSelectedLabels])
+
   return (
     <ModalRoot defaultOpen onOpenChange={onOpenChange}>
       <ModalOverlay />
diff --git a/packages/web/lib/networking/mutations/setLabelsForHighlight.ts b/packages/web/lib/networking/mutations/setLabelsForHighlight.ts
index c9547670f..a2c4521eb 100644
--- a/packages/web/lib/networking/mutations/setLabelsForHighlight.ts
+++ b/packages/web/lib/networking/mutations/setLabelsForHighlight.ts
@@ -31,6 +31,13 @@ export async function setLabelsForHighlight(
     ${labelFragment}
   `
 
+  console.log(
+    'setting label for highlight id: ',
+    highlightId,
+    'labelIds',
+    labelIds
+  )
+
   try {
     const data = (await gqlFetcher(mutation, {
       input: { highlightId, labelIds },

From 194d93912cc597ad27318c003608b080ee88193c Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 30 Dec 2022 11:21:41 +0800
Subject: [PATCH 07/10] Use let instead of var

---
 packages/web/components/templates/article/SetLabelsModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/components/templates/article/SetLabelsModal.tsx b/packages/web/components/templates/article/SetLabelsModal.tsx
index a9071fefe..db31d68d9 100644
--- a/packages/web/components/templates/article/SetLabelsModal.tsx
+++ b/packages/web/components/templates/article/SetLabelsModal.tsx
@@ -31,7 +31,7 @@ export function SetLabelsModal(props: SetLabelsModalProps): JSX.Element {
       return false
     }
 
-    for (var label of left) {
+    for (let label of left) {
       if (!right.find((r) => label.id == r.id)) {
         return false
       }

From c3084d668eb6caae165a010c0fda598995e48cda Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 30 Dec 2022 11:22:49 +0800
Subject: [PATCH 08/10] Why didnt i use const here?

---
 packages/web/components/templates/article/SetLabelsModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/components/templates/article/SetLabelsModal.tsx b/packages/web/components/templates/article/SetLabelsModal.tsx
index db31d68d9..a59bd3f2d 100644
--- a/packages/web/components/templates/article/SetLabelsModal.tsx
+++ b/packages/web/components/templates/article/SetLabelsModal.tsx
@@ -31,7 +31,7 @@ export function SetLabelsModal(props: SetLabelsModalProps): JSX.Element {
       return false
     }
 
-    for (let label of left) {
+    for (const label of left) {
       if (!right.find((r) => label.id == r.id)) {
         return false
       }

From 1668f4c8bc394314059d707979e626edded2ec56 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 30 Dec 2022 11:40:39 +0800
Subject: [PATCH 09/10] Add some more debug

---
 packages/web/lib/networking/queries/useGetLabelsQuery.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web/lib/networking/queries/useGetLabelsQuery.tsx b/packages/web/lib/networking/queries/useGetLabelsQuery.tsx
index 211c53178..b7a602c3b 100644
--- a/packages/web/lib/networking/queries/useGetLabelsQuery.tsx
+++ b/packages/web/lib/networking/queries/useGetLabelsQuery.tsx
@@ -35,6 +35,7 @@ export function useGetLabelsQuery(): LabelsQueryResponse {
   `
 
   const { data, mutate, error, isValidating } = useSWR(query, publicGqlFetcher)
+  console.log(' getting labels: ', isValidating)
 
   try {
     if (data) {

From 2329a4c85ee134fb0e8c5bdc770d7f62ef7f3bea Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 30 Dec 2022 12:01:41 +0800
Subject: [PATCH 10/10] Remove some unneeded debug

---
 packages/web/lib/networking/queries/useGetLabelsQuery.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web/lib/networking/queries/useGetLabelsQuery.tsx b/packages/web/lib/networking/queries/useGetLabelsQuery.tsx
index b7a602c3b..211c53178 100644
--- a/packages/web/lib/networking/queries/useGetLabelsQuery.tsx
+++ b/packages/web/lib/networking/queries/useGetLabelsQuery.tsx
@@ -35,7 +35,6 @@ export function useGetLabelsQuery(): LabelsQueryResponse {
   `
 
   const { data, mutate, error, isValidating } = useSWR(query, publicGqlFetcher)
-  console.log(' getting labels: ', isValidating)
 
   try {
     if (data) {