From 6a5618eb8217ab0667e59d49bd29e835c00957a6 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 16 Jan 2023 13:43:42 +0800
Subject: [PATCH 1/2] When notes are added/removed from notebook, refresh
 reader

---
 .../components/templates/article/HighlightsLayer.tsx  | 11 +++++------
 .../components/templates/article/HighlightsModal.tsx  | 11 ++++++++++-
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/web/components/templates/article/HighlightsLayer.tsx b/packages/web/components/templates/article/HighlightsLayer.tsx
index 75d2de534..38acad310 100644
--- a/packages/web/components/templates/article/HighlightsLayer.tsx
+++ b/packages/web/components/templates/article/HighlightsLayer.tsx
@@ -69,18 +69,16 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
   >([])
   const focusedHighlightMousePos = useRef({ pageX: 0, pageY: 0 })
 
-  const [focusedHighlight, setFocusedHighlight] = useState<
-    Highlight | undefined
-  >(undefined)
+  const [focusedHighlight, setFocusedHighlight] =
+    useState<Highlight | undefined>(undefined)
 
   const [selectionData, setSelectionData] = useSelection(
     highlightLocations,
     false //noteModal.open,
   )
 
-  const [labelsTarget, setLabelsTarget] = useState<Highlight | undefined>(
-    undefined
-  )
+  const [labelsTarget, setLabelsTarget] =
+    useState<Highlight | undefined>(undefined)
 
   const canShareNative = useCanShareNative()
 
@@ -649,6 +647,7 @@ export function HighlightsLayer(props: HighlightsLayerProps): JSX.Element {
         deleteHighlightAction={(highlightId: string) => {
           removeHighlightCallback(highlightId)
         }}
+        updateHighlight={updateHighlightsCallback}
       />
     )
   }
diff --git a/packages/web/components/templates/article/HighlightsModal.tsx b/packages/web/components/templates/article/HighlightsModal.tsx
index 9dba75ab6..e507652ba 100644
--- a/packages/web/components/templates/article/HighlightsModal.tsx
+++ b/packages/web/components/templates/article/HighlightsModal.tsx
@@ -31,6 +31,7 @@ import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
 type HighlightsModalProps = {
   highlights: Highlight[]
   scrollToHighlight?: (arg: string) => void
+  updateHighlight: (highlight: Highlight) => void
   deleteHighlightAction?: (highlightId: string) => void
   onOpenChange: (open: boolean) => void
 }
@@ -70,6 +71,7 @@ export function HighlightsModal(props: HighlightsModalProps): JSX.Element {
                     props.deleteHighlightAction(highlight.id)
                   }
                 }}
+                updateHighlight={props.updateHighlight}
               />
             ))}
             {props.highlights.length === 0 && (
@@ -127,6 +129,7 @@ type ModalHighlightViewProps = {
   showDelete: boolean
   scrollToHighlight?: (arg: string) => void
   deleteHighlightAction: () => void
+  updateHighlight: (highlight: Highlight) => void
 
   setSetLabelsTarget: (highlight: Highlight) => void
   setShowConfirmDeleteHighlightId: (id: string | undefined) => void
@@ -192,8 +195,9 @@ function ModalHighlightView(props: ModalHighlightViewProps): JSX.Element {
         ) : null}
         {isEditing && (
           <TextEditArea
-            highlight={props.highlight}
             setIsEditing={setIsEditing}
+            highlight={props.highlight}
+            updateHighlight={props.updateHighlight}
           />
         )}
         <SpanBox css={{ mt: '$2', mb: '$4' }} />
@@ -205,6 +209,7 @@ function ModalHighlightView(props: ModalHighlightViewProps): JSX.Element {
 type TextEditAreaProps = {
   setIsEditing: (editing: boolean) => void
   highlight: Highlight
+  updateHighlight: (highlight: Highlight) => void
 }
 
 const TextEditArea = (props: TextEditAreaProps): JSX.Element => {
@@ -254,16 +259,20 @@ const TextEditArea = (props: TextEditAreaProps): JSX.Element => {
           onClick={async (e) => {
             e.preventDefault()
 
+            console.log('updating highlight')
             try {
               const result = await updateHighlightMutation({
                 highlightId: props.highlight.id,
                 annotation: noteContent,
               })
+              console.log('result: ' + result)
+
               if (!result) {
                 showErrorToast('There was an error updating your highlight.')
               } else {
                 showSuccessToast('Note saved')
                 props.highlight.annotation = noteContent
+                props.updateHighlight(props.highlight)
               }
             } catch (err) {
               console.log('error updating annoation', err)

From ca1de74da829b748471b780028cbeb05af62254d Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 16 Jan 2023 13:55:12 +0800
Subject: [PATCH 2/2] Add updateHighlight call to the PdfReader

---
 .../templates/article/PdfArticleContainer.tsx        | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/web/components/templates/article/PdfArticleContainer.tsx b/packages/web/components/templates/article/PdfArticleContainer.tsx
index 7238328f7..a222fcdae 100644
--- a/packages/web/components/templates/article/PdfArticleContainer.tsx
+++ b/packages/web/components/templates/article/PdfArticleContainer.tsx
@@ -29,13 +29,11 @@ export default function PdfArticleContainer(
   props: PdfArticleContainerProps
 ): JSX.Element {
   const containerRef = useRef<HTMLDivElement | null>(null)
-  const [shareTarget, setShareTarget] = useState<Highlight | undefined>(
-    undefined
-  )
+  const [shareTarget, setShareTarget] =
+    useState<Highlight | undefined>(undefined)
   const [noteTarget, setNoteTarget] = useState<Highlight | undefined>(undefined)
-  const [noteTargetPageIndex, setNoteTargetPageIndex] = useState<
-    number | undefined
-  >(undefined)
+  const [noteTargetPageIndex, setNoteTargetPageIndex] =
+    useState<number | undefined>(undefined)
 
   const highlightsRef = useRef<Highlight[]>([])
   const canShareNative = useCanShareNative()
@@ -428,6 +426,8 @@ export default function PdfArticleContainer(
         <HighlightsModal
           highlights={highlightsRef.current}
           onOpenChange={() => props.setShowHighlightsModal(false)}
+          /* eslint-disable @typescript-eslint/no-empty-function */
+          updateHighlight={() => {}}
         />
       )}
     </Box>