From 9a4a4e89d329e7854fd4d89d7ecafa50ad8d8d4b Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 19 Apr 2023 11:06:03 +0800
Subject: [PATCH] Fix delete article note not being displayed

---
 .../components/templates/article/Notebook.tsx | 28 +++++++++++++------
 .../templates/article/NotebookModal.tsx       | 14 ++++++----
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/packages/web/components/templates/article/Notebook.tsx b/packages/web/components/templates/article/Notebook.tsx
index e657356d2..de2bc0b74 100644
--- a/packages/web/components/templates/article/Notebook.tsx
+++ b/packages/web/components/templates/article/Notebook.tsx
@@ -40,6 +40,9 @@ type NotebookProps = {
     highlights: Highlight[],
     deletedAnnotations: Highlight[]
   ) => void
+
+  showConfirmDeleteNote?: boolean
+  setShowConfirmDeleteNote?: (show: boolean) => void
 }
 
 export const getHighlightLocation = (patch: string): number | undefined => {
@@ -61,13 +64,16 @@ type AnnotationInfo = {
 export function Notebook(props: NotebookProps): JSX.Element {
   const [showConfirmDeleteHighlightId, setShowConfirmDeleteHighlightId] =
     useState<undefined | string>(undefined)
-  const [labelsTarget, setLabelsTarget] =
-    useState<Highlight | undefined>(undefined)
-  const [showConfirmDeleteNote, setShowConfirmDeleteNote] = useState(false)
-  const [notesEditMode, setNotesEditMode] =
-    useState<'edit' | 'preview'>('preview')
+  const [labelsTarget, setLabelsTarget] = useState<Highlight | undefined>(
+    undefined
+  )
+  const [notesEditMode, setNotesEditMode] = useState<'edit' | 'preview'>(
+    'preview'
+  )
   const [, updateState] = useState({})
 
+  console.log('props.showConfirmDeleteNote', props.showConfirmDeleteNote)
+
   const annotationsReducer = (
     state: AnnotationInfo,
     action: {
@@ -398,15 +404,21 @@ export function Notebook(props: NotebookProps): JSX.Element {
           }}
         />
       )}
-      {showConfirmDeleteNote && (
+      {props.showConfirmDeleteNote && (
         <ConfirmationModal
           message="Are you sure you want to delete the note from this document?"
           acceptButtonLabel="Delete"
           onAccept={() => {
             deleteDocumentNote()
-            setShowConfirmDeleteNote(false)
+            if (props.setShowConfirmDeleteNote) {
+              props.setShowConfirmDeleteNote(false)
+            }
+          }}
+          onOpenChange={() => {
+            if (props.setShowConfirmDeleteNote) {
+              props.setShowConfirmDeleteNote(false)
+            }
           }}
-          onOpenChange={() => setShowConfirmDeleteNote(false)}
         />
       )}
     </VStack>
diff --git a/packages/web/components/templates/article/NotebookModal.tsx b/packages/web/components/templates/article/NotebookModal.tsx
index f7a272689..93fa62701 100644
--- a/packages/web/components/templates/article/NotebookModal.tsx
+++ b/packages/web/components/templates/article/NotebookModal.tsx
@@ -40,10 +40,12 @@ export const getHighlightLocation = (patch: string): number | undefined => {
 export function NotebookModal(props: NotebookModalProps): JSX.Element {
   const [sizeMode, setSizeMode] = useState<'normal' | 'maximized'>('normal')
   const [showConfirmDeleteNote, setShowConfirmDeleteNote] = useState(false)
-  const [allAnnotations, setAllAnnotations] =
-    useState<Highlight[] | undefined>(undefined)
-  const [deletedAnnotations, setDeletedAnnotations] =
-    useState<Highlight[] | undefined>(undefined)
+  const [allAnnotations, setAllAnnotations] = useState<Highlight[] | undefined>(
+    undefined
+  )
+  const [deletedAnnotations, setDeletedAnnotations] = useState<
+    Highlight[] | undefined
+  >(undefined)
 
   const handleClose = useCallback(() => {
     props.onClose(allAnnotations ?? [], deletedAnnotations ?? [])
@@ -136,7 +138,7 @@ export function NotebookModal(props: NotebookModalProps): JSX.Element {
                 onSelect={() => {
                   setShowConfirmDeleteNote(true)
                 }}
-                title="Delete Document Note"
+                title="Delete Article Note"
               />
             </Dropdown>
             <CloseButton close={handleClose} />
@@ -147,6 +149,8 @@ export function NotebookModal(props: NotebookModalProps): JSX.Element {
           sizeMode={sizeMode}
           viewInReader={viewInReader}
           onAnnotationsChanged={handleAnnotationsChange}
+          showConfirmDeleteNote={showConfirmDeleteNote}
+          setShowConfirmDeleteNote={setShowConfirmDeleteNote}
         />
       </ModalContent>
     </ModalRoot>