feat(notes): add note creation

Author: collectedmind

clients/extension/action/app.tsx

@@ -1,17 +1,15 @@
 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 { NoteEdge } from '@common/types/pocket'
+import type { ExtItem, ExtMessage } from '../types'
 
 export function App() {
   const [isOpen, setIsOpen] = useState(false)
   const [saveStatus, setSaveStatus] = useState('saving')
   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)
 
   /* Setup Listeners and show popup
   –––––––––––––––––––––––––––––––––––––––––––––––––– */
@@ -27,24 +25,19 @@ 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)
         setSaveStatus('saved')
         return
       }
@@ -56,6 +49,12 @@ export function App() {
         return
       }
 
+      case EXT_ACTIONS.ADD_NOTE_FAILURE: {
+        const { error } = message ?? 'Unknown error'
+        setErrorMessage(error)
+        return
+      }
+
       case EXT_ACTIONS.REMOVE_ITEM_REQUEST: {
         setSaveStatus('removing')
         return
@@ -108,17 +107,15 @@ 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}
-      notes={notes}
+      item={item}
       actionUnSave={actionUnSave}
       actionLogOut={actionLogOut}
     />

clients/extension/actions.ts

@@ -27,5 +27,8 @@ export enum EXT_ACTIONS {
   UPDATE_ITEM_PREVIEW = 'UPDATE_ITEM_PREVIEW',
   UPDATE_STORED_TAGS = 'UPDATE_STORED_TAGS',
   UPDATE_TAG_ERROR = 'UPDATE_TAG_ERROR',
-  USER_LOG_IN = 'USER_LOG_IN'
+  USER_LOG_IN = 'USER_LOG_IN',
+  ADD_NOTE_REQUEST = 'ADD_NOTE_REQUEST',
+  ADD_NOTE_SUCCESS = 'ADD_NOTE_SUCCESS',
+  ADD_NOTE_FAILURE = 'ADD_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/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/index.ts

@@ -1,15 +1,17 @@
 import { EXT_ACTIONS } from '../actions'
 import { POCKET_SAVES, POCKET_HOME } from '../constants'
+import { getErrorMessage } from '../utilities/error'
 import { isSystemPage } from '../utilities/is-system'
 import { sendMessage } from '../utilities/send-message'
 import { getSetting } from '../utilities/storage'
+import { addNote } from './api/add-note'
 import { upsertItem } from './api/upsert'
 import { setAuth, logIn } from './auth'
 import { setDefaultIcon, setToolbarIcon } from './icon-updates'
 
 // Types
-import { getErrorMessage } from '../utilities/error'
 import type { ExtMessage, ExtSave } from '../types'
+import type { ExtNote } from '../types/note'
 
 let saveQueue: ExtSave | null = null
 
@@ -38,7 +40,6 @@ chrome.runtime.onMessage.addListener(messageHandler)
 async function messageHandler(message: ExtMessage, sender: chrome.runtime.MessageSender) {
   const { action = EXT_ACTIONS.UNKNOWN_ACTION } = message || {}
 
-  console.log(message)
   // Messages from `popup action` don't have a sender so we need to query the active tab
   const activeTab = await chrome.tabs.query({ active: true, lastFocusedWindow: true })
 
@@ -76,6 +77,12 @@ async function messageHandler(message: ExtMessage, sender: chrome.runtime.Messag
       return true
     }
 
+    case EXT_ACTIONS.ADD_NOTE_REQUEST: {
+      const { noteData } = message
+      if (noteData && tab.url) await saveNote(noteData, tab.url)
+      return true
+    }
+
     case EXT_ACTIONS.AUTH_CODE_RECEIVED: {
       try {
         const { auth } = message
@@ -140,11 +147,6 @@ async function save(saveData: ExtSave) {
 
     // send a message so the popup can display the preview
     sendMessage({ action: EXT_ACTIONS.SAVE_TO_POCKET_SUCCESS, item })
-
-    // Set the toolbar icon to saved
-    // ?? Since we generally can't track this, it feels problematic to
-    // ?? maintain it in a reasonable fashion.  However, it is the way at the moment.
-    await setToolbarIcon(id, true)
   } catch (error) {
     // Things have gone awry.  Let's send the error along
     const message = getErrorMessage(error)
@@ -154,6 +156,21 @@ async function save(saveData: ExtSave) {
   }
 }
 
+async function saveNote(noteData: ExtNote, source?: string) {
+  try {
+    // Let's add our note
+    const item = await addNote({ ...noteData, source })
+
+    // send a message so the popup can display the preview
+    sendMessage({ action: EXT_ACTIONS.ADD_NOTE_SUCCESS, item })
+  } catch (error) {
+    // Things have gone awry.  Let's send the error along
+    const message = getErrorMessage(error)
+    sendMessage({ action: EXT_ACTIONS.ADD_NOTE_FAILURE, error: message })
+    return false
+  }
+}
+
 export function openPocket() {
   void chrome.tabs.create({ url: POCKET_SAVES })
 }