clients/extension/action/app.tsx

@@ -1,17 +1,18 @@
 import { useEffect, useState } from 'react'
 import { EXT_ACTIONS } from '../actions'
 import { ActionContainer } from '../components/action-container'
+import { sendMessage } from '../utilities/send-message'
 
-import type { ExtItem, ExtMessage, ExtPreview } from '../types'
+import type { ExtItem, ExtMessage } from '../types'
 import type { NoteEdge } from '@common/types/pocket'
 
 export function App() {
   const [isOpen, setIsOpen] = useState(false)
-  const [saveStatus, setSaveStatus] = useState('unsaved')
+  const [saveStatus, setSaveStatus] = useState('saving')
+  const [noteStatus, setNoteStatus] = useState<string | undefined>(undefined)
   const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined)
-  const [preview, setPreview] = useState<ExtPreview | undefined>(undefined)
-  const [tags, setTags] = useState<string[]>([])
-  const [notes, setNotes] = useState<NoteEdge[] | undefined>()
+  const [item, setItem] = useState<ExtItem | undefined>(undefined)
+  const [notes, setNotes] = useState<NoteEdge[] | []>([])
 
   /* Setup Listeners and show popup
   –––––––––––––––––––––––––––––––––––––––––––––––––– */
@@ -27,24 +28,21 @@ export function App() {
   /* Send a message on action activating
   –––––––––––––––––––––––––––––––––––––––––––––––––– */
   useEffect(() => {
-    if (isOpen) void chrome.runtime.sendMessage({ action: EXT_ACTIONS.BROWSER_ACTION })
+    if (isOpen) void sendMessage({ action: EXT_ACTIONS.BROWSER_ACTION })
   }, [isOpen])
 
   /* Handle incoming messages
   –––––––––––––––––––––––––––––––––––––––––––––––––– */
   function handleMessages(message: ExtMessage) {
     const { action = 'Unknown Action' } = message || {}
-    console.log('ACTION:', { message })
+
     switch (action) {
+      case EXT_ACTIONS.ADD_NOTE_SUCCESS:
       case EXT_ACTIONS.SAVE_TO_POCKET_SUCCESS: {
         const item = message?.item as ExtItem
-        const preview = item?.preview
-        const suggestedTags = item?.savedItem?.suggestedTags.map((tag) => tag.name) ?? []
-        const itemNotes = item?.savedItem?.notes
-
-        setPreview(preview)
-        setTags(suggestedTags)
-        setNotes(itemNotes)
+        setItem(item)
+        setNotes(item.savedItem.notes.edges)
+        setNoteStatus(undefined)
         setSaveStatus('saved')
         return
       }
@@ -56,6 +54,24 @@ export function App() {
         return
       }
 
+      case EXT_ACTIONS.ADD_NOTE_FAILURE: {
+        const { error } = message ?? 'Unknown error'
+        setNoteStatus(undefined)
+        setErrorMessage(error)
+        return
+      }
+
+      case EXT_ACTIONS.DELETE_NOTE_SUCCESS: {
+        const { noteId } = message
+        if (noteId) {
+          setNoteStatus(undefined)
+          setNotes((notes) => {
+            return notes.filter((note) => note?.node?.id !== noteId)
+          })
+        }
+        return
+      }
+
       case EXT_ACTIONS.REMOVE_ITEM_REQUEST: {
         setSaveStatus('removing')
         return
@@ -108,17 +124,18 @@ export function App() {
   const actionUnSave = () => {}
 
   const actionLogOut = () => {
-    void chrome.runtime.sendMessage({ action: EXT_ACTIONS.LOGGED_OUT_OF_POCKET })
+    void sendMessage({ action: EXT_ACTIONS.LOGGED_OUT_OF_POCKET })
   }
 
   return (
     <ActionContainer
       errorMessage={errorMessage}
       saveStatus={saveStatus}
-      isOpen={isOpen}
-      preview={preview}
-      tags={tags}
+      noteStatus={noteStatus}
       notes={notes}
+      setNoteStatus={setNoteStatus}
+      isOpen={isOpen}
+      item={item}
       actionUnSave={actionUnSave}
       actionLogOut={actionLogOut}
     />

clients/extension/actions.ts

@@ -1,30 +1,37 @@
 export enum EXT_ACTIONS {
-  BROWSER_ACTION = 'BROWSER_ACTION',
-  LOGGED_OUT_OF_POCKET = 'LOGGED_OUT_OF_POCKET',
-  OPEN_POCKET = 'OPEN_POCKET',
   AUTH_CODE_RECEIVED = 'AUTH_CODE_RECEIVED',
   AUTH_ERROR = 'AUTH_ERROR',
+  BROWSER_ACTION = 'BROWSER_ACTION',
   COLOR_MODE_CHANGE = 'COLOR_MODE_CHANGE',
+  LOGGED_OUT_OF_POCKET = 'LOGGED_OUT_OF_POCKET',
   OPEN_OPTIONS = 'OPEN_OPTIONS',
-  SAVE_TO_POCKET_REQUEST = 'SAVE_TO_POCKET_REQUEST',
-  SAVE_TO_POCKET_SUCCESS = 'SAVE_TO_POCKET_SUCCESS',
-  SAVE_TO_POCKET_FAILURE = 'SAVE_TO_POCKET_FAILURE',
-  RESAVE_ITEM = 'RESAVE_ITEM',
-  UPDATE_ITEM_PREVIEW = 'UPDATE_ITEM_PREVIEW',
+  OPEN_POCKET = 'OPEN_POCKET',
+  POPUP_CLOSED = 'POPUP_CLOSED',
   REMOVE_ITEM = 'REMOVE_ITEM',
+  REMOVE_ITEM_FAILURE = 'REMOVE_ITEM_FAILURE',
   REMOVE_ITEM_REQUEST = 'REMOVE_ITEM_REQUEST',
   REMOVE_ITEM_SUCCESS = 'REMOVE_ITEM_SUCCESS',
-  REMOVE_ITEM_FAILURE = 'REMOVE_ITEM_FAILURE',
-  SUGGESTED_TAGS_SUCCESS = 'SUGGESTED_TAGS_SUCCESS',
+  RESAVE_ITEM = 'RESAVE_ITEM',
+  SAVE_TO_POCKET_FAILURE = 'SAVE_TO_POCKET_FAILURE',
+  SAVE_TO_POCKET_REQUEST = 'SAVE_TO_POCKET_REQUEST',
+  SAVE_TO_POCKET_SUCCESS = 'SAVE_TO_POCKET_SUCCESS',
+  SELECTION_ADD = 'SELECTION_ADD',
+  SEND_TAG_ERROR = 'SEND_TAG_ERROR',
   SUGGESTED_TAGS_FAILURE = 'SUGGESTED_TAGS_FAILURE',
-  TAGS_SYNC = 'TAGS_SYNC',
+  SUGGESTED_TAGS_SUCCESS = 'SUGGESTED_TAGS_SUCCESS',
+  TAG_SYNC_FAILURE = 'TAG_SYNC_FAILURE',
   TAG_SYNC_REQUEST = 'TAG_SYNC_REQUEST',
   TAG_SYNC_SUCCESS = 'TAG_SYNC_SUCCESS',
-  TAG_SYNC_FAILURE = 'TAG_SYNC_FAILURE',
+  TAGS_SYNC = 'TAGS_SYNC',
+  UNKNOWN_ACTION = 'UNKNOWN_ACTION',
+  UPDATE_ITEM_PREVIEW = 'UPDATE_ITEM_PREVIEW',
   UPDATE_STORED_TAGS = 'UPDATE_STORED_TAGS',
-  SEND_TAG_ERROR = 'SEND_TAG_ERROR',
   UPDATE_TAG_ERROR = 'UPDATE_TAG_ERROR',
   USER_LOG_IN = 'USER_LOG_IN',
-  SELECTION_ADD = 'SELECTION_ADD',
-  UNKNOWN_ACTION = 'UNKNOWN_ACTION'
+  ADD_NOTE_REQUEST = 'ADD_NOTE_REQUEST',
+  ADD_NOTE_SUCCESS = 'ADD_NOTE_SUCCESS',
+  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/add-note.ts

@@ -0,0 +1,75 @@
+import { extensionRequest } from '../../utilities/request'
+import { verifySession } from '../auth'
+import { FRAGMENT_ITEM_PREVIEW } from './fragments/preview'
+import { FRAGMENT_SAVED_ITEM } from './fragments/saved-item'
+
+import type { ExtItem, ExtSavedItem } from '../../types'
+import type { CreateNoteMarkdownInput } from '@common/types/pocket'
+
+interface ExtCreateNoteMarkdown {
+  archived: boolean
+  contentPreview: string
+  createdAt: string
+  deleted: boolean
+  docMarkdown: boolean
+  id: string
+  source: string | undefined
+  title: string | undefined
+  updatedAt: string
+  savedItem: ExtSavedItem
+}
+
+const gql = String.raw
+const query = gql`
+  mutation CreateNoteMarkdown($input: CreateNoteMarkdownInput!) {
+    createNoteMarkdown(input: $input) {
+      archived
+      contentPreview
+      createdAt
+      deleted
+      docMarkdown
+      id
+      source
+      title
+      updatedAt
+      savedItem {
+        ...ItemSaved
+        item {
+          ... on Item {
+            preview {
+              ...ItemPreview
+            }
+          }
+        }
+      }
+    }
+  }
+
+  ${FRAGMENT_SAVED_ITEM}
+  ${FRAGMENT_ITEM_PREVIEW}
+`
+
+export async function addNote(input: CreateNoteMarkdownInput) {
+  // 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 }, query }
+
+  // Make the request and return it
+  const response = await extensionRequest<{ createNoteMarkdown: ExtCreateNoteMarkdown }>(
+    data,
+    token
+  )
+
+  const responseItem = response?.createNoteMarkdown?.savedItem
+  const { item, ...savedItem } = responseItem
+  const preview = item?.preview
+
+  // We have got a pending item back from the server ... we should handle it
+  if (!item || !preview) throw new Error(`Trouble creating note`)
+
+  const validItem: ExtItem = { savedItem, preview }
+  return validItem
+}

clients/extension/background/api/fragments/preview.ts

@@ -0,0 +1,30 @@
+const gql = String.raw
+
+export const FRAGMENT_ITEM_PREVIEW = gql`
+  fragment ItemPreview on PocketMetadata {
+    ... on ItemSummary {
+      previewId: id
+      id
+      image {
+        caption
+        credit
+        url
+        cachedImages(imageOptions: [{ width: 80, id: "ext", height: 80, fileType: PNG }]) {
+          url
+          id
+        }
+      }
+      excerpt
+      title
+      authors {
+        name
+      }
+      domain {
+        name
+      }
+      datePublished
+      url
+      source
+    }
+  }
+`

clients/extension/background/api/fragments/saved-item.ts

@@ -0,0 +1,30 @@
+const gql = String.raw
+
+export const FRAGMENT_SAVED_ITEM = gql`
+  fragment ItemSaved on SavedItem {
+    savedId: id
+    id
+    suggestedTags {
+      id
+      name
+    }
+    tags {
+      id
+      name
+    }
+    notes {
+      edges {
+        cursor
+        node {
+          archived
+          createdAt
+          deleted
+          id
+          updatedAt
+          title
+          contentPreview
+        }
+      }
+    }
+  }
+`

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/api/upsert.ts

@@ -1,6 +1,8 @@
 import { extensionRequest } from '../../utilities/request'
 import { verifySession } from '../auth'
 
+import { FRAGMENT_ITEM_PREVIEW } from './fragments/preview'
+import { FRAGMENT_SAVED_ITEM } from './fragments/saved-item'
 import type { ExtSave, ExtItemResponse, ExtItem } from '../../types'
 
 interface upsertSavedItem {
@@ -9,46 +11,23 @@ interface upsertSavedItem {
 
 const gql = String.raw
 const query = gql`
-  mutation ItemUpsert($input: SavedItemUpsertInput!, $imageOptions: [CachedImageInput!]!) {
+  mutation ItemUpsert($input: SavedItemUpsertInput!) {
     upsertSavedItem(input: $input) {
       item {
         ... on Item {
           preview {
-            image {
-              cachedImages(imageOptions: $imageOptions) {
-                url
-                id
-              }
-            }
-            title
-            excerpt
-            domain {
-              name
-            }
-            url
-            id
-            source
-            authors {
-              id
-              name
-            }
+            ...ItemPreview
           }
           savedItem {
-            suggestedTags {
-              name
-            }
-            notes {
-              edges {
-                node {
-                  contentPreview
-                }
-              }
-            }
+            ...ItemSaved
           }
         }
       }
     }
   }
+
+  ${FRAGMENT_SAVED_ITEM}
+  ${FRAGMENT_ITEM_PREVIEW}
 `
 
 export async function upsertItem(saveData: ExtSave) {
@@ -59,8 +38,7 @@ export async function upsertItem(saveData: ExtSave) {
   const token = await verifySession()
 
   // Set up the variables we need for this request
-  const imageOptions = [{ width: 80, id: 'ext', height: 80, fileType: 'PNG' }]
-  const data = { variables: { input: { url }, imageOptions }, query }
+  const data = { variables: { input: { url } }, query }
 
   // Make the request and return it
   const response = await extensionRequest<{ upsertSavedItem: upsertSavedItem }>(data, token)

clients/extension/background/icon-updates/index.ts

@@ -6,7 +6,8 @@ export async function setDefaultIcon() {
 }
 
 export async function setToolbarIcon(tabId: number, isSaved: boolean) {
-  const imageData = isSaved ? savedIcon() : inactiveIcon()
+  // const imageData = isSaved ? savedIcon() : inactiveIcon()
+  const imageData = inactiveIcon()
   await chrome.action.setIcon({ tabId, imageData })
 }