feat(extension): add loader for note adding

Author: collectedmind

clients/extension/action/app.tsx

@@ -8,6 +8,7 @@ import type { ExtItem, ExtMessage } from '../types'
 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)
 
@@ -38,6 +39,7 @@ export function App() {
       case EXT_ACTIONS.SAVE_TO_POCKET_SUCCESS: {
         const item = message?.item as ExtItem
         setItem(item)
+        setNoteStatus(undefined)
         setSaveStatus('saved')
         return
       }
@@ -51,6 +53,7 @@ export function App() {
 
       case EXT_ACTIONS.ADD_NOTE_FAILURE: {
         const { error } = message ?? 'Unknown error'
+        setNoteStatus(undefined)
         setErrorMessage(error)
         return
       }
@@ -114,6 +117,8 @@ export function App() {
     <ActionContainer
       errorMessage={errorMessage}
       saveStatus={saveStatus}
+      noteStatus={noteStatus}
+      setNoteStatus={setNoteStatus}
       isOpen={isOpen}
       item={item}
       actionUnSave={actionUnSave}

clients/extension/background/index.ts

@@ -79,7 +79,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 && tab?.url) await saveNote(noteData, tab.url)
       return true
     }
 

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

@@ -1,22 +1,27 @@
 import { useState } from 'react'
 import { ExtensionError } from '../action-error'
 import { ExtensionHeader } from '../action-header'
+import { ActionLoader } from '../action-loader'
 import { Notes } from '../notes'
 import { SavedScreen } from '../saved'
-import { SavedLoader } from '../saved-loader'
 
 // Types
 import type { ExtItem } from '../../types'
+import type { Dispatch, SetStateAction } from 'react'
 
 export function ActionContainer({
   isOpen = false,
   errorMessage,
+  noteStatus,
+  setNoteStatus,
   item
 }: {
   isOpen: boolean
   errorMessage?: string
   saveStatus?: string
+  noteStatus?: string
   item?: ExtItem
+  setNoteStatus: Dispatch<SetStateAction<string | undefined>>
   actionLogOut: () => void
   actionUnSave: () => void
 }) {
@@ -34,7 +39,13 @@ export function ActionContainer({
       {item?.preview ? (
         <>
           {showNotes ? (
-            <Notes notes={notes?.edges} setShowNotes={setShowNotes} setErrorText={setErrorText} />
+            <Notes
+              noteStatus={noteStatus}
+              notes={notes?.edges}
+              setShowNotes={setShowNotes}
+              setNoteStatus={setNoteStatus}
+              setErrorText={setErrorText}
+            />
           ) : (
             <SavedScreen
               preview={preview!}
@@ -45,7 +56,7 @@ export function ActionContainer({
           )}
         </>
       ) : (
-        <SavedLoader />
+        <ActionLoader />
       )}
       {errorText ? <ExtensionError errorMessage={errorText} /> : null}
     </div>

clients/extension/components/saved-loader/component.story.tsx clients/extension/components/action-loader/component.story.tsx

@@ -1,18 +1,18 @@
 // Components
-import { SavedLoader as Component } from '.'
+import { ActionLoader as Component } from '.'
 
 // Types
 import type { Meta, StoryObj } from '@storybook/react'
 
 // Storybook Meta
 const meta: Meta<typeof Component> = {
-  title: 'Saved - Loader ',
+  title: 'Action - Loader ',
   component: Component
 }
 export default meta
 
 // Stories
-export const SavedLoader: StoryObj<typeof Component> = {
+export const ActionLoader: StoryObj<typeof Component> = {
   render: () => {
     return <Component />
   },

clients/extension/components/saved-loader/index.tsx clients/extension/components/action-loader/index.tsx

@@ -1,6 +1,6 @@
 import style from './style.module.css'
 
-export function SavedLoader() {
+export function ActionLoader() {
   return (
     <div className={style.container}>
       <div className={style.loader}></div>

clients/extension/components/saved-loader/style.module.css clients/extension/components/action-loader/style.module.css

@@ -1,19 +1,27 @@
 import style from './style.module.css'
 
+import { ActionLoader } from '../action-loader'
 import type { RefObject } from 'react'
 import type { Dispatch, SetStateAction } from 'react'
 
 export function NotesAdd({
   textRef,
+  noteStatus,
   setErrorText
 }: {
   textRef?: RefObject<HTMLTextAreaElement | null>
+  noteStatus?: string
   setErrorText: Dispatch<SetStateAction<string | undefined>>
 }) {
   const resetError = () => setErrorText(undefined)
+
   return (
     <div className={style.container}>
-      <textarea onFocus={resetError} name="note" id="note" ref={textRef}></textarea>
+      {noteStatus ? (
+        <ActionLoader />
+      ) : (
+        <textarea onFocus={resetError} name="note" id="note" ref={textRef}></textarea>
+      )}
     </div>
   )
 }

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

@@ -7,19 +7,23 @@ import type { Dispatch, SetStateAction } from 'react'
 
 export function NotesFooter({
   setShowNotes,
+  noteStatus,
   handleAddNote = () => {}
 }: {
   setShowNotes: Dispatch<SetStateAction<boolean>>
+  noteStatus: string | undefined
   handleAddNote: () => void
 }) {
   const handleBackClick = () => setShowNotes(false)
   const handleAddClick = () => handleAddNote()
+  const isLoading = Boolean(noteStatus)
+
   return (
     <footer className={style.footer}>
       <button onClick={handleBackClick}>
         <ChevronLeftIcon className={style.backIcon} /> Back
       </button>
-      <button onClick={handleAddClick}>
+      <button onClick={handleAddClick} disabled={isLoading}>
         <AddNoteIcon /> Add Note
       </button>
     </footer>

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

@@ -12,14 +12,19 @@ import type { Dispatch, SetStateAction } from 'react'
 
 export function Notes({
   notes,
+  noteStatus,
+  setNoteStatus,
   setShowNotes,
   setErrorText
 }: {
   notes?: NoteEdge[]
+  noteStatus?: string | undefined
+  setNoteStatus: Dispatch<SetStateAction<string | undefined>>
   setErrorText: Dispatch<SetStateAction<string | undefined>>
   setShowNotes: Dispatch<SetStateAction<boolean>>
 }) {
   const textRef = useRef<HTMLTextAreaElement | null>(null)
+
   const handleAddNote = () => {
     // Get the value of our textarea
     if (!textRef.current) return
@@ -31,17 +36,22 @@ export function Notes({
       return setErrorText('Text is require to create a note')
     }
 
-    void sendMessage({ action: EXT_ACTIONS.ADD_NOTE_REQUEST, noteData: { docMarkdown } })
     textRef.current.value = ''
+    setNoteStatus('saving note')
+    void sendMessage({ action: EXT_ACTIONS.ADD_NOTE_REQUEST, noteData: { docMarkdown } })
   }
 
   return (
     <div>
       <div className={style.container}>
         <NotesList notes={notes} />
-        <NotesAdd textRef={textRef} setErrorText={setErrorText} />
+        <NotesAdd noteStatus={noteStatus} textRef={textRef} setErrorText={setErrorText} />
       </div>
-      <NotesFooter setShowNotes={setShowNotes} handleAddNote={handleAddNote} />
+      <NotesFooter
+        noteStatus={noteStatus}
+        setShowNotes={setShowNotes}
+        handleAddNote={handleAddNote}
+      />
     </div>
   )
 }