feat: cache picture draft post

src/components/PostEditor/NormalPostContent.tsx

@@ -41,19 +41,21 @@ export default function NormalPostContent({
   const canPost = !!content && !posting
 
   useEffect(() => {
-    const cachedContent = postContentCache.get({ defaultContent, parentEvent })
+    const cachedContent = postContentCache.getNormalPostCache({ defaultContent, parentEvent })
     if (cachedContent) {
       setContent(cachedContent)
     }
     if (defaultContent) {
       setCursorOffset(defaultContent.length)
     }
+    setTimeout(() => {
       initializedRef.current = true
+    }, 100)
   }, [defaultContent, parentEvent])
 
   useEffect(() => {
     if (!initializedRef.current) return
-    postContentCache.set({ defaultContent, parentEvent }, content)
+    postContentCache.setNormalPostCache({ defaultContent, parentEvent }, content)
   }, [content])
 
   const post = async (e: React.MouseEvent) => {

src/components/PostEditor/PicturePostContent.tsx

@@ -3,8 +3,9 @@ import { useToast } from '@/hooks/use-toast'
 import { createPictureNoteDraftEvent } from '@/lib/draft-event'
 import { cn } from '@/lib/utils'
 import { useNostr } from '@/providers/NostrProvider'
+import postContentCache from '@/services/post-content-cache.service'
 import { ChevronDown, Loader, LoaderCircle, Plus, X } from 'lucide-react'
-import { Dispatch, SetStateAction, useState } from 'react'
+import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Image from '../Image'
 import TextareaWithMentions from '../TextareaWithMentions.tsx'
@@ -24,8 +25,23 @@ export default function PicturePostContent({ close }: { close: () => void }) {
   const [addClientTag, setAddClientTag] = useState(false)
   const [mentions, setMentions] = useState<string[]>([])
   const [specifiedRelayUrls, setSpecifiedRelayUrls] = useState<string[] | undefined>(undefined)
+  const initializedRef = useRef(false)
   const canPost = !!content && !posting && pictureInfos.length > 0
 
+  useEffect(() => {
+    const { content, pictureInfos } = postContentCache.getPicturePostCache()
+    setContent(content)
+    setPictureInfos(pictureInfos)
+    setTimeout(() => {
+      initializedRef.current = true
+    }, 100)
+  }, [])
+
+  useEffect(() => {
+    if (!initializedRef.current) return
+    postContentCache.setPicturePostCache(content, pictureInfos)
+  }, [content, pictureInfos])
+
   const post = async (e: React.MouseEvent) => {
     e.stopPropagation()
     checkLogin(async () => {
@@ -45,6 +61,7 @@ export default function PicturePostContent({ close }: { close: () => void }) {
         })
         await publish(draftEvent, { specifiedRelayUrls })
         setContent('')
+        setPictureInfos([])
         close()
       } catch (error) {
         if (error instanceof AggregateError) {

src/services/post-content-cache.service.ts

@@ -3,7 +3,11 @@ import { Event } from 'nostr-tools'
 class PostContentCacheService {
   static instance: PostContentCacheService
 
-  private cache: Map<string, string> = new Map()
+  private normalPostCache: Map<string, string> = new Map()
+  private picturePostCache: {
+    content: string
+    pictureInfos: { url: string; tags: string[][] }[]
+  } = { content: '', pictureInfos: [] }
 
   constructor() {
     if (!PostContentCacheService.instance) {
@@ -12,15 +16,28 @@ class PostContentCacheService {
     return PostContentCacheService.instance
   }
 
-  get({ defaultContent, parentEvent }: { defaultContent?: string; parentEvent?: Event } = {}) {
+  getNormalPostCache({
-    return this.cache.get(this.generateCacheKey(defaultContent, parentEvent)) ?? defaultContent
+    defaultContent,
+    parentEvent
+  }: { defaultContent?: string; parentEvent?: Event } = {}) {
+    return (
+      this.normalPostCache.get(this.generateCacheKey(defaultContent, parentEvent)) ?? defaultContent
+    )
   }
 
-  set(
+  setNormalPostCache(
     { defaultContent, parentEvent }: { defaultContent?: string; parentEvent?: Event },
     content: string
   ) {
-    this.cache.set(this.generateCacheKey(defaultContent, parentEvent), content)
+    this.normalPostCache.set(this.generateCacheKey(defaultContent, parentEvent), content)
+  }
+
+  getPicturePostCache() {
+    return this.picturePostCache
+  }
+
+  setPicturePostCache(content: string, pictureInfos: { url: string; tags: string[][] }[]) {
+    this.picturePostCache = { content, pictureInfos }
   }
 
   generateCacheKey(defaultContent: string = '', parentEvent?: Event): string {