From b0603cff522fd4598cd7ecffbcf4ceca34aa3fd3 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Tue, 17 May 2022 12:26:58 +0300
Subject: [PATCH] fix: make shake work on hold

---
 src/Components/VoteButton/VoteButton.tsx | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/Components/VoteButton/VoteButton.tsx b/src/Components/VoteButton/VoteButton.tsx
index 1cb1c20..c13a893 100644
--- a/src/Components/VoteButton/VoteButton.tsx
+++ b/src/Components/VoteButton/VoteButton.tsx
@@ -33,6 +33,7 @@ export default function VoteButton({
     ...props }: Props) {
     const [voteCnt, setVoteCnt] = useState(0)
     const voteCntRef = useRef(0);
+    const btnContainerRef = useRef<HTMLDivElement>(null!!)
     const [sparks, setSparks] = useState<Particle[]>([]);
     const [wasActive, setWasActive] = useState(false);
     const [incrementsCount, setIncrementsCount] = useState(0);
@@ -91,7 +92,14 @@ export default function VoteButton({
             }, 2 * 1000)
         }
 
-
+        const btn = btnContainerRef.current;
+        if (btn.classList.contains(styles.clicked_2)) {
+            btn.classList.remove(styles.clicked_2)
+            btn.classList.add(styles.clicked_1)
+        } else {
+            btn.classList.remove(styles.clicked_1)
+            btn.classList.add(styles.clicked_2)
+        }
 
         doVote();
     }
@@ -136,20 +144,12 @@ export default function VoteButton({
         >
 
             <div
+                ref={btnContainerRef}
                 className={`
                 ${styles.btn_content} 
                 relative p-10 rounded-lg text-gray-600 bg-white hover:bg-gray-50 
                  ${incrementsCount && 'outline'} active:outline outline-1 outline-red-500  `}
-                onClick={e => {
-                    const btn = e.currentTarget
-                    if (btn.classList.contains(styles.clicked_2)) {
-                        btn.classList.remove(styles.clicked_2)
-                        btn.classList.add(styles.clicked_1)
-                    } else {
-                        btn.classList.remove(styles.clicked_1)
-                        btn.classList.add(styles.clicked_2)
-                    }
-                }}
+
             >
                 <div
                     className={`