From 15a0b3d3f10d07488edd1e2d4f3e1dc2f0fc744f Mon Sep 17 00:00:00 2001
From: Bojan Mojsilovic <bmojsilovic@itekako.com>
Date: Fri, 19 Apr 2024 18:09:47 +0200
Subject: [PATCH] Fix note zapping state managment

---
 src/components/Note/Note.tsx                  | 18 +++++----
 src/components/Note/NoteFooter/NoteFooter.tsx | 37 +++++++++++--------
 2 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/src/components/Note/Note.tsx b/src/components/Note/Note.tsx
index 3932902..7a31e87 100644
--- a/src/components/Note/Note.tsx
+++ b/src/components/Note/Note.tsx
@@ -1,5 +1,5 @@
 import { A } from '@solidjs/router';
-import { batch, Component, createMemo, For, Match, Show, Switch } from 'solid-js';
+import { batch, Component, createEffect, createMemo, For, Match, Show, Switch } from 'solid-js';
 import { PrimalNote, ZapOption } from '../../types/primal';
 import ParsedNote from '../ParsedNote/ParsedNote';
 import NoteFooter from './NoteFooter/NoteFooter';
@@ -82,7 +82,7 @@ const Note: Component<{
     app?.actions.closeCustomZapModal();
     batch(() => {
       updateFooterState('zappedAmount', () => zapOption.amount || 0);
-      updateFooterState('zappedNow', () => true);
+      // updateFooterState('zappedNow', () => true);
       updateFooterState('zapped', () => true);
       updateFooterState('showZapAnim', () => true)
     });
@@ -91,8 +91,10 @@ const Note: Component<{
   const onSuccessZap = (zapOption: ZapOption) => {
     app?.actions.closeCustomZapModal();
     batch(() => {
+      updateFooterState('zapCount', (z) => z + 1);
+      // updateFooterState('satsZapped', (z) => z + (zapOption.amount || 0));
       updateFooterState('isZapping', () => false);
-      updateFooterState('zappedNow', () => false);
+      // updateFooterState('zappedNow', () => false);
       updateFooterState('showZapAnim', () => false);
       updateFooterState('hideZapIcon', () => false);
       updateFooterState('zapped', () => true);
@@ -103,8 +105,9 @@ const Note: Component<{
     app?.actions.closeCustomZapModal();
     batch(() => {
       updateFooterState('zappedAmount', () => -(zapOption.amount || 0));
+      updateFooterState('satsZapped', (z) => z - (zapOption.amount || 0));
       updateFooterState('isZapping', () => false);
-      updateFooterState('zappedNow', () => true);
+      // updateFooterState('zappedNow', () => true);
       updateFooterState('showZapAnim', () => false);
       updateFooterState('hideZapIcon', () => false);
       updateFooterState('zapped', () => props.note.post.noteActions.zapped);
@@ -115,8 +118,9 @@ const Note: Component<{
     app?.actions.closeCustomZapModal();
     batch(() => {
       updateFooterState('zappedAmount', () => -(zapOption.amount || 0));
+      updateFooterState('satsZapped', (z) => z - (zapOption.amount || 0));
       updateFooterState('isZapping', () => false);
-      updateFooterState('zappedNow', () => true);
+      // updateFooterState('zappedNow', () => true);
       updateFooterState('showZapAnim', () => false);
       updateFooterState('hideZapIcon', () => false);
       updateFooterState('zapped', () => props.note.post.noteActions.zapped);
@@ -153,9 +157,9 @@ const Note: Component<{
   }
 
   const reactionSum = () => {
-    const { likes, zaps, reposts } = props.note.post;
+    const { likes, zapCount, reposts } = footerState;
 
-    return (likes || 0) + (zaps || 0) + (reposts || 0);
+    return (likes || 0) + (zapCount || 0) + (reposts || 0);
   };
 
   const firstZap = createMemo(() => (threadContext?.topZaps[props.note.post.id] || [])[0]);
diff --git a/src/components/Note/NoteFooter/NoteFooter.tsx b/src/components/Note/NoteFooter/NoteFooter.tsx
index 2b27650..5ecb2ea 100644
--- a/src/components/Note/NoteFooter/NoteFooter.tsx
+++ b/src/components/Note/NoteFooter/NoteFooter.tsx
@@ -234,6 +234,7 @@ const NoteFooter: Component<{
         batch(() => {
           props.updateState('showZapAnim', () => false);
           props.updateState('hideZapIcon', () => false);
+          props.updateState('zapped', () => true);
         });
         medZapAnimation?.removeEventListener('complete', onAnimDone);
       }
@@ -258,24 +259,39 @@ const NoteFooter: Component<{
       return;
     }
 
+    const amount = settings?.defaultZap.amount || 10;
+    const message = settings?.defaultZap.message || '';
+    const emoji = settings?.defaultZap.emoji;
+
     batch(() => {
-      props.updateState('zappedAmount', () => settings?.defaultZap.amount || 0);
-      props.updateState('zappedNow', () => true);
+      props.updateState('isZapping', () => true);
       props.updateState('showZapAnim', () => true);
+      props.updateState('satsZapped', (z) => z + amount);
     });
-    const success = await zapNote(props.note, account.publicKey, settings?.defaultZap.amount || 10, settings?.defaultZap.message || '', account.relays);
+
+    const success = await zapNote(props.note, account.publicKey, amount, message, account.relays);
 
     props.updateState('isZapping', () => false);
 
     if (success) {
+      props.customZapInfo.onSuccess({
+        emoji,
+        amount,
+        message,
+      });
       return;
     }
 
     batch(() => {
-      props.updateState('zappedAmount', () => -(settings?.defaultZap.amount || 0));
-      props.updateState('zappedNow', () => true);
+      props.updateState('zappedAmount', () => -amount);
       props.updateState('zapped', () => props.note.post.noteActions.zapped);
     });
+
+    props.customZapInfo.onFail({
+      emoji,
+      amount,
+      message,
+    });
   }
 
   const buttonTypeClasses: Record<string, string> = {
@@ -285,17 +301,6 @@ const NoteFooter: Component<{
     repost: styles.repostType,
   };
 
-  createEffect(() => {
-    if (props.state.zappedNow) {
-      batch(() => {
-        props.updateState('zapCount', (z) => z + 1);
-        props.updateState('satsZapped', (z) => z + props.state.zappedAmount);
-        props.updateState('zapped', () => true);
-      });
-      props.updateState('zappedNow', () => false);
-    }
-  });
-
   createEffect(() => {
     if (props.state.showZapAnim) {
       animateZap();