feat(extension): add note delete logic

Author: collectedmind

clients/extension/actions.ts

@@ -30,5 +30,8 @@ export enum EXT_ACTIONS {
   USER_LOG_IN = 'USER_LOG_IN',
   ADD_NOTE_REQUEST = 'ADD_NOTE_REQUEST',
   ADD_NOTE_SUCCESS = 'ADD_NOTE_SUCCESS',
-  ADD_NOTE_FAILURE = 'ADD_NOTE_FAILURE'
+  ADD_NOTE_FAILURE = 'ADD_NOTE_FAILURE',
+  DELETE_NOTE_REQUEST = 'DELETE_NOTE_REQUEST',
+  DELETE_NOTE_SUCCESS = 'DELETE_NOTE_SUCCESS',
+  DELETE_NOTE_FAILURE = 'DELETE_NOTE_FAILURE'
 }

clients/extension/background/api/remove-note.ts

@@ -0,0 +1,23 @@
+import { extensionRequest } from '../../utilities/request'
+import { verifySession } from '../auth'
+
+const gql = String.raw
+const query = gql`
+  mutation DeleteNote($input: DeleteNoteInput!) {
+    deleteNote(input: $input)
+  }
+`
+
+export async function removeNote(noteId: string) {
+  // We need a token to save. This will create a session if need be
+  // be requesting a new bearer if the current one is expired
+  const token = await verifySession()
+
+  // Set up the variables we need for this request
+  const data = { variables: { input: { id: noteId } }, query }
+
+  // Make the request and return it
+  const response = await extensionRequest<{ deleteNote: boolean }>(data, token)
+
+  return response
+}

clients/extension/background/index.ts

@@ -5,6 +5,7 @@ import { isSystemPage } from '../utilities/is-system'
 import { sendMessage } from '../utilities/send-message'
 import { getSetting } from '../utilities/storage'
 import { addNote } from './api/add-note'
+import { removeNote } from './api/remove-note'
 import { upsertItem } from './api/upsert'
 import { setAuth, logIn } from './auth'
 import { setDefaultIcon, setToolbarIcon } from './icon-updates'
@@ -50,6 +51,8 @@ async function messageHandler(message: ExtMessage, sender: chrome.runtime.Messag
   const tab = senderTab ?? activeTab[0]
   const tabId = tab?.id
 
+  console.log({ message })
+
   switch (action) {
     case EXT_ACTIONS.BROWSER_ACTION: {
       // No tab was sent
@@ -83,6 +86,12 @@ async function messageHandler(message: ExtMessage, sender: chrome.runtime.Messag
       return true
     }
 
+    case EXT_ACTIONS.DELETE_NOTE_REQUEST: {
+      const { noteId } = message
+      if (noteId) await deleteNote(noteId)
+      return true
+    }
+
     case EXT_ACTIONS.AUTH_CODE_RECEIVED: {
       try {
         const { auth } = message
@@ -171,6 +180,19 @@ async function saveNote(noteData: ExtNote, source?: string) {
   }
 }
 
+async function deleteNote(noteId: string) {
+  try {
+    await removeNote(noteId)
+    // send a message so the popup can display the preview
+    sendMessage({ action: EXT_ACTIONS.DELETE_NOTE_SUCCESS, noteId })
+  } catch (error) {
+    // Things have gone awry.  Let's send the error along
+    const message = getErrorMessage(error)
+    sendMessage({ action: EXT_ACTIONS.DELETE_NOTE_FAILURE, error: message })
+    return false
+  }
+}
+
 export function openPocket() {
   void chrome.tabs.create({ url: POCKET_SAVES })
 }

clients/extension/components/notes-list/index.tsx

@@ -6,23 +6,39 @@ import ReactMarkdown from 'react-markdown'
 // Types
 import type { Note, NoteEdge } from '@common/types/pocket'
 
-export function NotesList({ notes }: { notes?: NoteEdge[] }) {
+export function NotesList({
+  notes,
+  handleNoteDelete
+}: {
+  notes?: NoteEdge[]
+  handleNoteDelete: (id: string) => void
+}) {
+  const validNotes = notes?.filter((note) => !note?.node?.deleted) ?? []
   return (
     <div className={style.notes}>
       {Array.isArray(notes) && notes.length ? (
-        notes.map((note) => <Note key={note?.cursor} note={note} />)
+        validNotes.map((note) => (
+          <Note key={note?.cursor} note={note} handleNoteDelete={handleNoteDelete} />
+        ))
       ) : (
         <NoNotes />
       )}
     </div>
   )
 }
 
-function Note({ note }: { note?: NoteEdge }) {
+function Note({
+  note,
+  handleNoteDelete
+}: {
+  note?: NoteEdge
+  handleNoteDelete: (id: string) => void
+}) {
   const [confirmDelete, setConfirmDelete] = useState<boolean>(false)
   const noteRef = useRef<HTMLDivElement>(null)
 
   const node = note?.node
+  const noteId = node?.id
   const title = node?.title
   const contentPreview = node?.contentPreview as string
 
@@ -32,6 +48,11 @@ function Note({ note }: { note?: NoteEdge }) {
   }
   const handleCancelClick = () => setConfirmDelete(false)
 
+  const handleConfirmClick = () => {
+    setConfirmDelete(false)
+    if (noteId) handleNoteDelete(noteId)
+  }
+
   return contentPreview ? (
     <div className={`${style.container} ${confirmDelete && style.active}`} ref={noteRef}>
       <div className={style.note}>
@@ -47,15 +68,26 @@ function Note({ note }: { note?: NoteEdge }) {
           </button>
         ) : null}
       </div>
-      {confirmDelete ? <NoteDeleteConfirm handleCancelClick={handleCancelClick} /> : null}
+      {confirmDelete ? (
+        <NoteDeleteConfirm
+          handleCancelClick={handleCancelClick}
+          handleConfirmClick={handleConfirmClick}
+        />
+      ) : null}
     </div>
   ) : null
 }
 
-function NoteDeleteConfirm({ handleCancelClick }: { handleCancelClick: () => void }) {
+function NoteDeleteConfirm({
+  handleCancelClick,
+  handleConfirmClick
+}: {
+  handleCancelClick: () => void
+  handleConfirmClick: () => void
+}) {
   return (
     <div className={style.confirm}>
-      <button>Delete this note</button>
+      <button onClick={handleConfirmClick}>Delete this note</button>
       <button onClick={handleCancelClick}>Cancel</button>
     </div>
   )

clients/extension/components/notes/index.tsx

@@ -41,10 +41,15 @@ export function Notes({
     void sendMessage({ action: EXT_ACTIONS.ADD_NOTE_REQUEST, noteData: { docMarkdown } })
   }
 
+  const handleNoteDelete = (id: string) => {
+    setNoteStatus('deleting note')
+    void sendMessage({ action: EXT_ACTIONS.DELETE_NOTE_REQUEST, noteId: id })
+  }
+
   return (
     <div>
       <div className={style.container}>
-        <NotesList notes={notes} />
+        <NotesList notes={notes} handleNoteDelete={handleNoteDelete} />
         <NotesAdd noteStatus={noteStatus} textRef={textRef} setErrorText={setErrorText} />
       </div>
       <NotesFooter

clients/extension/types/message.ts

@@ -12,4 +12,5 @@ export interface ExtMessage {
   error?: string
   saveData?: ExtSave
   noteData?: ExtNote
+  noteId?: string
 }