Save draft for each reply

PrimalHQ · Jan 30, 2024 · 2215e1b · 2215e1b
1 parent 2fe4304
commit 2215e1b
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 25 deletions.
diff --git a/src/components/EmojiPickModal/EmojiPickPopover.tsx b/src/components/EmojiPickModal/EmojiPickPopover.tsx
@@ -22,6 +22,7 @@ const EmojiPickPopover: Component<{
   const [showPreset, setShowPreset] = createSignal(true);
 
   const onKey = (e: KeyboardEvent) => {
+    e.stopPropagation();
     if (e.code === 'Escape') {
       props.onClose(e);
       return;
@@ -59,13 +60,13 @@ const EmojiPickPopover: Component<{
       setEmojiSearchTerm(() => defaultTerm);
       setFocusInput(() => true);
       setFocusInput(() => false);
-      window.addEventListener('keydown', onKey);
+      window.addEventListener('keyup', onKey);
       window.addEventListener('click', onClickOutside);
     }, 10);
   });
 
   onCleanup(() => {
-    window.removeEventListener('keydown', onKey);
+    window.removeEventListener('keyup', onKey);
     window.removeEventListener('click', onClickOutside);
   });
 

diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -13,6 +13,7 @@ const Modal: Component<{
 }> = (props) => {
 
   const onKey = (e: KeyboardEvent) => {
+    e.stopPropagation();
     if (e.code === 'Escape') {
       props.onClose && props.onClose(e);
       return;
@@ -21,10 +22,10 @@ const Modal: Component<{
 
   createEffect(() => {
     if (props.open) {
-      window.addEventListener('keydown', onKey);
+      window.addEventListener('keyup', onKey);
     }
     else {
-      window.removeEventListener('keydown', onKey);
+      window.removeEventListener('keyup', onKey);
     }
   });
 

diff --git a/src/components/NewNote/EditBox/EditBox.tsx b/src/components/NewNote/EditBox/EditBox.tsx
@@ -434,22 +434,22 @@ const EditBox: Component<{
   onMount(() => {
     // @ts-expect-error TODO: fix types here
     editWrap?.addEventListener('input', onExpandableTextareaInput);
-    editWrap?.addEventListener('keydown', onKeyDown);
+    editWrap?.addEventListener('keyup', onKeyDown);
     // editWrap?.addEventListener('drop', onDrop, false);
   });
 
   onCleanup(() => {
     // @ts-expect-error TODO: fix types here
     editWrap?.removeEventListener('input', onExpandableTextareaInput);
-    editWrap?.removeEventListener('keydown', onKeyDown);
+    editWrap?.removeEventListener('keyup', onKeyDown);
     // editWrap?.removeEventListener('drop', onDrop, false);
   });
 
   createEffect(() => {
-    editWrap?.removeEventListener('keydown', onEscape);
+    editWrap?.removeEventListener('keyup', onEscape);
 
     if (!isPickingEmoji()) {
-      editWrap?.addEventListener('keydown', onEscape);
+      editWrap?.addEventListener('keyup', onEscape);
     }
   });
 
@@ -493,8 +493,8 @@ const EditBox: Component<{
   });
 
   createEffect(() => {
-    if (props.open && !props.replyToNote) {
-      const draft = readNoteDraft(account?.publicKey);
+    if (props.open) {
+      const draft = readNoteDraft(account?.publicKey, props.replyToNote?.post.noteId);
 
       setMessage(draft);
       if (textArea)
@@ -503,12 +503,18 @@ const EditBox: Component<{
   })
 
   const onEscape = (e: KeyboardEvent) => {
+    if (isConfirmEditorClose()) return;
+
+    e.stopPropagation();
     if (e.code === 'Escape') {
       if (isPickingEmoji()) return;
 
-      !isMentioning() && !isEmojiInput() ?
-        closeEditor() :
+      if (isMentioning() || isEmojiInput()) {
         closeEmojiAndMentions();
+        return;
+      }
+
+      closeEditor();
     }
   };
 
@@ -525,17 +531,12 @@ const EditBox: Component<{
   };
 
   const closeEditor = () => {
-    if (props.replyToNote) {
-      clearEditor();
-      return;
-    }
-
     if (message().trim().length > 0) {
       setConfirmEditorClose(true);
       return;
     }
 
-    saveNoteDraft(account?.publicKey, '');
+    saveNoteDraft(account?.publicKey, '', props.replyToNote?.post.noteId);
     clearEditor();
   };
 
@@ -547,7 +548,7 @@ const EditBox: Component<{
   };
 
   const persistNote = (note: string) => {
-    saveNoteDraft(account?.publicKey, note);
+    saveNoteDraft(account?.publicKey, note, props.replyToNote?.post.noteId);
     clearEditor();
   };
 

diff --git a/src/lib/localStore.ts b/src/lib/localStore.ts
@@ -18,7 +18,7 @@ export type LocalStore = {
     stats: Record<string, UserStats>,
   },
   emojiHistory: EmojiOption[],
-  noteDraft: string,
+  noteDraft: Record<string, string>,
 };
 
 export const emptyStorage = {
@@ -35,7 +35,7 @@ export const emptyStorage = {
   userProfile: undefined,
   recomended: { profiles: [], stats: {} },
   emojiHistory: [],
-  noteDraft: '',
+  noteDraft: {},
 }
 
 export const storageName = (pubkey?: string) => {
@@ -204,26 +204,38 @@ export const readEmojiHistory = (pubkey: string | undefined) => {
   return emojis || [];
 }
 
-export const saveNoteDraft = (pubkey: string | undefined, draft: string) => {
+export const saveNoteDraft = (pubkey: string | undefined, draft: string, replyTo?: string) => {
   if (!pubkey) {
     return;
   }
 
   const store = getStorage(pubkey);
 
-  store.noteDraft = draft;
+  const key = replyTo || 'root';
+
+  if (!store.noteDraft || typeof store.noteDraft === 'string') {
+    store.noteDraft = {};
+  }
+
+  store.noteDraft[key] = draft;
 
   setStorage(pubkey, store);
 }
 
-export const readNoteDraft = (pubkey: string | undefined) => {
+export const readNoteDraft = (pubkey: string | undefined, replyTo?: string) => {
   if (!pubkey) {
     return '';
   }
 
   const store = getStorage(pubkey);
 
-  return store.noteDraft || '';
+  if (!store.noteDraft || typeof store.noteDraft === 'string') {
+    store.noteDraft = {};
+  }
+
+  const key = replyTo || 'root';
+
+  return store.noteDraft[key] || '';
 }
 
 export const saveHomeSidebarSelection = (pubkey: string | undefined, selection: SelectionOption | undefined) => {