feat(notes): add draft to note submit textarea

src/components/Notes/NoteSubmit.tsx

@@ -1,12 +1,13 @@
 import { NDKSubscriptionCacheUsage } from '@nostr-dev-kit/ndk'
 import { FALLBACK_PROFILE_IMAGE } from '../../constants'
-import { useAppSelector } from 'hooks'
+import { useAppSelector, useLocalCache } from 'hooks'
 import { useProfile } from 'hooks/useProfile'
 import { Navigate, useNavigation, useSubmit } from 'react-router-dom'
 import { appRoutes } from 'routes'
 import { useEffect, useRef, useState } from 'react'
-import { adjustTextareaHeight } from 'utils'
+import { adjustTextareaHeight, NOTE_DRAFT_CACHE_KEY } from 'utils'
 import { NotePreview } from './NotePreview'
+import { NoteSubmitForm } from 'types'
 
 interface NoteSubmitProps {
   initialContent?: string | undefined
@@ -22,19 +23,27 @@ export const NoteSubmit = ({
   const profile = useProfile(userState.user?.pubkey as string | undefined, {
     cacheUsage: NDKSubscriptionCacheUsage.PARALLEL
   })
-  const [content, setContent] = useState(initialContent ?? '')
-  const [nsfw, setNsfw] = useState(false)
+  const [cache, setCache] = useLocalCache<NoteSubmitForm>(NOTE_DRAFT_CACHE_KEY)
+  const [content, setContent] = useState(initialContent ?? cache?.content ?? '')
+  const [nsfw, setNsfw] = useState(cache?.nsfw ?? false)
   const [showPreview, setShowPreview] = useState(!!initialContent)
   const image = profile?.image || FALLBACK_PROFILE_IMAGE
   const ref = useRef<HTMLTextAreaElement>(null)
   const submit = useSubmit()
 
   useEffect(() => {
-    if (ref.current && !!initialContent) {
+    if (ref.current && (!!initialContent || !!cache?.content)) {
       adjustTextareaHeight(ref.current)
       ref.current.focus()
     }
-  }, [initialContent])
+  }, [cache?.content, initialContent])
+
+  useEffect(() => {
+    setCache({
+      content,
+      nsfw
+    })
+  }, [content, nsfw, setCache])
 
   const handleContentChange = (
     event: React.ChangeEvent<HTMLTextAreaElement>

src/pages/feed/action.ts

@@ -5,7 +5,13 @@ import { toast } from 'react-toastify'
 import { getFeedNotePageRoute } from 'routes'
 import { store } from 'store'
 import { NoteSubmitForm, NoteSubmitFormErrors } from 'types'
-import { log, LogType, now } from 'utils'
+import {
+  log,
+  LogType,
+  NOTE_DRAFT_CACHE_KEY,
+  now,
+  removeLocalStorageItem
+} from 'utils'
 
 export const feedPostRouteAction =
   (ndkContext: NDKContextType) =>
@@ -62,6 +68,7 @@ export const feedPostRouteAction =
         return null
       } else {
         toast.success('Note published successfully')
+        removeLocalStorageItem(NOTE_DRAFT_CACHE_KEY)
         return redirect(getFeedNotePageRoute(note1))
       }
     } catch (error) {

src/utils/comments.ts

@@ -104,3 +104,5 @@ export function handleCommentSubmit(
     }
   }
 }
+
+export const NOTE_DRAFT_CACHE_KEY = 'draft-note'