From f1ecfbcca44c6b08de4f156b2eb74f5af2387bbf Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Sat, 18 Mar 2023 15:33:28 +0700
Subject: [PATCH] updated counter components

---
 src/components/note/content/metadata.tsx               | 4 ++--
 src/components/note/{content => }/counter/comments.tsx | 0
 src/components/note/{content => }/counter/likes.tsx    | 7 +++++--
 3 files changed, 7 insertions(+), 4 deletions(-)
 rename src/components/note/{content => }/counter/comments.tsx (100%)
 rename src/components/note/{content => }/counter/likes.tsx (94%)

diff --git a/src/components/note/content/metadata.tsx b/src/components/note/content/metadata.tsx
index ac52b140..b63c7055 100644
--- a/src/components/note/content/metadata.tsx
+++ b/src/components/note/content/metadata.tsx
@@ -1,6 +1,6 @@
 import { RelayContext } from '@components/contexts/relay';
-import { CommentsCounter } from '@components/note/content/counter/comments';
-import { LikesCounter } from '@components/note/content/counter/likes';
+import { CommentsCounter } from '@components/note/counter/comments';
+import { LikesCounter } from '@components/note/counter/likes';
 
 import { useLocalStorage } from '@rehooks/local-storage';
 import { useContext, useMemo, useState } from 'react';
diff --git a/src/components/note/content/counter/comments.tsx b/src/components/note/counter/comments.tsx
similarity index 100%
rename from src/components/note/content/counter/comments.tsx
rename to src/components/note/counter/comments.tsx
diff --git a/src/components/note/content/counter/likes.tsx b/src/components/note/counter/likes.tsx
similarity index 94%
rename from src/components/note/content/counter/likes.tsx
rename to src/components/note/counter/likes.tsx
index e0da83d5..3813cd15 100644
--- a/src/components/note/content/counter/likes.tsx
+++ b/src/components/note/counter/likes.tsx
@@ -21,6 +21,7 @@ export const LikesCounter = memo(function LikesCounter({
   const [currentUser]: any = useLocalStorage('current-user');
 
   const [isReact, setIsReact] = useState(false);
+  const [count, setCount] = useState(likes);
 
   const handleLike = useCallback(
     (e: any) => {
@@ -42,8 +43,10 @@ export const LikesCounter = memo(function LikesCounter({
       relayPool.publish(event, relays);
       // update state to change icon to filled heart
       setIsReact(true);
+      // update counter
+      setCount(count + 1);
     },
-    [currentUser.id, currentUser.privkey, eventID, eventPubkey, relayPool, relays]
+    [currentUser.id, currentUser.privkey, eventID, eventPubkey, count, relayPool, relays]
   );
 
   return (
@@ -75,7 +78,7 @@ export const LikesCounter = memo(function LikesCounter({
           </svg>
         )}
       </div>
-      <span>{likes}</span>
+      <span>{count}</span>
     </button>
   );
 });