From 9134bd432947347982ee07063a863b8689da33bb Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Mon, 30 May 2022 16:46:46 +0300
Subject: [PATCH] fix: update voteBtn sparks container on resize

---
 src/Components/VoteButton/VoteButton.tsx |  7 ++++++-
 src/utils/hooks/useResizeListener.ts     | 18 ++++++++----------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/Components/VoteButton/VoteButton.tsx b/src/Components/VoteButton/VoteButton.tsx
index 4b4e888..f9bba46 100644
--- a/src/Components/VoteButton/VoteButton.tsx
+++ b/src/Components/VoteButton/VoteButton.tsx
@@ -1,6 +1,6 @@
 import { MdLocalFireDepartment } from 'react-icons/md'
 import Button from 'src/Components/Button/Button'
-import { useAppSelector, usePressHolder } from 'src/utils/hooks'
+import { useAppSelector, usePressHolder, useResizeListener } from 'src/utils/hooks'
 import { ComponentProps, useRef, useState } from 'react'
 import styles from './styles.module.scss'
 import { random, randomItem, numberFormatter } from 'src/utils/helperFunctions'
@@ -156,6 +156,10 @@ export default function VoteButton({
         setBtnBoundingRect(btnContainerRef.current.getBoundingClientRect())
     })
 
+    useResizeListener(() => {
+        setBtnBoundingRect(btnContainerRef.current.getBoundingClientRect())
+    }, { debounce: 300 })
+
     return (
         <button
             onMouseDown={handlePressDown}
@@ -215,6 +219,7 @@ export default function VoteButton({
 
             <Portal id='effects-container'>
                 <div
+                    className='absolute pointer-events-none'
                     style={btnBoundingRect && {
                         position: 'absolute',
                         top: btnBoundingRect.top + window.scrollY,
diff --git a/src/utils/hooks/useResizeListener.ts b/src/utils/hooks/useResizeListener.ts
index b043a12..c303468 100644
--- a/src/utils/hooks/useResizeListener.ts
+++ b/src/utils/hooks/useResizeListener.ts
@@ -1,19 +1,17 @@
-import { useEffect } from "react";
-import _throttle from "lodash.throttle";
+import { useDebouncedCallback, useMountEffect } from "@react-hookz/web";
 
 export const useResizeListener = (
   listener: () => void,
-  options: { throttleValue?: number } = {}
+  options: { debounce?: number } = {}
 ) => {
-  options.throttleValue = options.throttleValue ?? 250;
-  useEffect(() => {
-    const func = _throttle(listener, 250);
-    func();
+  options.debounce = options.debounce ?? 250;
 
-    window.addEventListener("resize", listener);
+  const func = useDebouncedCallback(listener, [], options.debounce)
+  useMountEffect(() => {
+    window.addEventListener("resize", func);
 
     return () => {
-      window.removeEventListener("resize", listener);
+      window.removeEventListener("resize", func);
     };
-  }, [listener]);
+  });
 };