feat(extension): note management / form

Author: collectedmind

clients/extension/action/app.tsx

@@ -4,13 +4,15 @@ import { ActionContainer } from '../components/action-container'
 import { sendMessage } from '../utilities/send-message'
 
 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('saving')
   const [noteStatus, setNoteStatus] = useState<string | undefined>(undefined)
   const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined)
   const [item, setItem] = useState<ExtItem | undefined>(undefined)
+  const [notes, setNotes] = useState<NoteEdge[] | []>([])
 
   /* Setup Listeners and show popup
   –––––––––––––––––––––––––––––––––––––––––––––––––– */
@@ -39,6 +41,7 @@ export function App() {
       case EXT_ACTIONS.SAVE_TO_POCKET_SUCCESS: {
         const item = message?.item as ExtItem
         setItem(item)
+        setNotes(item.savedItem.notes.edges)
         setNoteStatus(undefined)
         setSaveStatus('saved')
         return
@@ -58,6 +61,17 @@ export function App() {
         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
@@ -118,6 +132,7 @@ export function App() {
       errorMessage={errorMessage}
       saveStatus={saveStatus}
       noteStatus={noteStatus}
+      notes={notes}
       setNoteStatus={setNoteStatus}
       isOpen={isOpen}
       item={item}

clients/extension/background/index.ts

@@ -51,8 +51,6 @@ 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
@@ -82,7 +80,7 @@ async function messageHandler(message: ExtMessage, sender: chrome.runtime.Messag
 
     case EXT_ACTIONS.ADD_NOTE_REQUEST: {
       const { noteData } = message
-      if (noteData && tab?.url) await saveNote(noteData, tab.url)
+      if (noteData) await saveNote(noteData, tab?.url)
       return true
     }
 
@@ -167,6 +165,8 @@ async function save(saveData: ExtSave) {
 
 async function saveNote(noteData: ExtNote, source?: string) {
   try {
+    if (!source) throw new Error('Error attaching note!')
+
     // Let's add our note
     const item = await addNote({ ...noteData, source })
 
@@ -182,6 +182,8 @@ async function saveNote(noteData: ExtNote, source?: string) {
 
 async function deleteNote(noteId: string) {
   try {
+    if (!noteId) throw new Error('Error finding noteId')
+
     await removeNote(noteId)
     // send a message so the popup can display the preview
     sendMessage({ action: EXT_ACTIONS.DELETE_NOTE_SUCCESS, noteId })

clients/extension/components/action-container/index.tsx

@@ -7,20 +7,23 @@ import { SavedScreen } from '../saved'
 
 // Types
 import type { ExtItem } from '../../types'
+import type { NoteEdge } from '@common/types/pocket'
 import type { Dispatch, SetStateAction } from 'react'
 
 export function ActionContainer({
   isOpen = false,
   errorMessage,
   noteStatus,
   setNoteStatus,
+  notes,
   item
 }: {
   isOpen: boolean
   errorMessage?: string
   saveStatus?: string
   noteStatus?: string
   item?: ExtItem
+  notes: NoteEdge[] | []
   setNoteStatus: Dispatch<SetStateAction<string | undefined>>
   actionLogOut: () => void
   actionUnSave: () => void
@@ -29,7 +32,6 @@ export function ActionContainer({
   const [errorText, setErrorText] = useState<string | undefined>(errorMessage)
 
   const preview = item?.preview
-  const notes = item?.savedItem?.notes
   const tags = item?.savedItem?.tags
   const suggestedTags = item?.savedItem?.suggestedTags
 
@@ -41,7 +43,7 @@ export function ActionContainer({
           {showNotes ? (
             <Notes
               noteStatus={noteStatus}
-              notes={notes?.edges}
+              notes={notes}
               setShowNotes={setShowNotes}
               setNoteStatus={setNoteStatus}
               setErrorText={setErrorText}

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

@@ -6,9 +6,11 @@ import type { Dispatch, SetStateAction } from 'react'
 
 export function NotesAdd({
   textRef,
+  titleRef,
   noteStatus,
   setErrorText
 }: {
+  titleRef?: RefObject<HTMLInputElement | null>
   textRef?: RefObject<HTMLTextAreaElement | null>
   noteStatus?: string
   setErrorText: Dispatch<SetStateAction<string | undefined>>
@@ -20,7 +22,16 @@ export function NotesAdd({
       {noteStatus ? (
         <ActionLoader />
       ) : (
-        <textarea onFocus={resetError} name="note" id="note" ref={textRef}></textarea>
+        <>
+          <input
+            type="text"
+            ref={titleRef}
+            name="noteTitle"
+            id="noteTitle"
+            placeholder="Title (optional)"
+          />
+          <textarea onFocus={resetError} name="note" id="note" ref={textRef}></textarea>
+        </>
       )}
     </div>
   )

clients/extension/components/notes-add/style.module.css

@@ -1,3 +1,10 @@
 .container {
   padding: 1rem;
+  input,
+  textarea {
+    background-color: var(--color-canvas-darker);
+  }
+  input[type='text'] {
+    margin-bottom: 0.5rem;
+  }
 }

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

@@ -40,6 +40,12 @@ function Note({
   const node = note?.node
   const noteId = node?.id
   const title = node?.title
+  const date = new Date(node?.createdAt as string)
+  const dateString = date.toLocaleString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  })
   const contentPreview = node?.contentPreview as string
 
   const handleDeleteClick = () => {
@@ -57,6 +63,7 @@ function Note({
     <div className={`${style.container} ${confirmDelete && style.active}`} ref={noteRef}>
       <div className={style.note}>
         {title ? <h3>{title}</h3> : null}
+        <div className={style.date}>{dateString}</div>
         <ReactMarkdown allowedElements={['div']} unwrapDisallowed={true}>
           {contentPreview}
         </ReactMarkdown>

clients/extension/components/notes-list/style.module.css

@@ -18,6 +18,8 @@
     border-bottom: none;
   }
   .actions {
+    display: flex;
+    align-items: center;
     visibility: hidden;
     color: var(--color-text-secondary);
     button {
@@ -78,3 +80,10 @@
     width: 100%;
   }
 }
+
+.date {
+  font-size: 0.75rem;
+  font-style: italic;
+  padding: 0 0 0.5rem 0;
+  color: var(--color-text-secondary);
+}

clients/extension/components/notes/index.tsx

@@ -24,21 +24,32 @@ export function Notes({
   setShowNotes: Dispatch<SetStateAction<boolean>>
 }) {
   const textRef = useRef<HTMLTextAreaElement | null>(null)
+  const titleRef = useRef<HTMLInputElement | null>(null)
 
   const handleAddNote = () => {
     // Get the value of our textarea
     if (!textRef.current) return
     const docMarkdown = textRef.current.value.trim()
 
+    // Let's sort out the optional title
+    const title = titleRef.current ? titleRef.current.value.trim() : false
+
     // Let's not add empty notes
     if (!docMarkdown?.length) {
       textRef.current.value = '' // gets rid of space only values
       return setErrorText('Text is require to create a note')
     }
 
+    // Need to reset the input fields
+    if (titleRef.current) titleRef.current.value = ''
     textRef.current.value = ''
+
+    // Let's
     setNoteStatus('saving note')
-    void sendMessage({ action: EXT_ACTIONS.ADD_NOTE_REQUEST, noteData: { docMarkdown } })
+    void sendMessage({
+      action: EXT_ACTIONS.ADD_NOTE_REQUEST,
+      noteData: { docMarkdown, ...(title && { title }) }
+    })
   }
 
   const handleNoteDelete = (id: string) => {
@@ -50,7 +61,12 @@ export function Notes({
     <div>
       <div className={style.container}>
         <NotesList notes={notes} handleNoteDelete={handleNoteDelete} />
-        <NotesAdd noteStatus={noteStatus} textRef={textRef} setErrorText={setErrorText} />
+        <NotesAdd
+          noteStatus={noteStatus}
+          textRef={textRef}
+          titleRef={titleRef}
+          setErrorText={setErrorText}
+        />
       </div>
       <NotesFooter
         noteStatus={noteStatus}

clients/extension/public/styles/global.css

@@ -21,6 +21,7 @@
 
   --color-canvas: #ffffff;
   --color-canvas-active: hsl(0, 0%, 90%);
+  --color-canvas-darker: hsl(0, 0%, 95%);
   --color-loader: #42414d;
   --color-text-primary: #15141a;
   --color-text-secondary: #333;
@@ -38,6 +39,7 @@
   @media (prefers-color-scheme: dark) {
     --color-canvas: #42414d;
     --color-canvas-active: hsl(245, 8%, 38%);
+    --color-canvas-darker: hsl(245, 8%, 24%);
     --color-loader: #15141a;
     --color-text-primary: #fbfbfe;
     --color-text-secondary: var(--color-grey85);
@@ -57,6 +59,7 @@
     .colormode-light {
       --color-canvas: #ffffff;
       --color-canvas-active: hsl(0, 0%, 90%);
+      --color-canvas-darker: hsl(0, 0%, 95%);
       --color-loader: #42414d;
       --color-text-primary: #15141a;
       --color-text-secondary: #333;