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] 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 },