From f2596bbcbe5cc87ae226094fb9cb2565163f1d7b Mon Sep 17 00:00:00 2001
From: RAHUL SINGH <168329414+Kuzuri247@users.noreply.github.com>
Date: Fri, 6 Dec 2024 19:13:35 +0530
Subject: [PATCH] fix: upgrade to addEventListener (#1532)

* event listener

* Update src/components/Appbar.tsx

---------

Co-authored-by: Sargam <sargampoudel100@gmail.com>
---
 src/components/Appbar.tsx | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/components/Appbar.tsx b/src/components/Appbar.tsx
index ef9eaadd..6ad73c61 100644
--- a/src/components/Appbar.tsx
+++ b/src/components/Appbar.tsx
@@ -18,23 +18,31 @@ export const menuOptions = [
   { id: 5, name: 'Watch History', Component: History, href: '/watch-history' },
 ];
 
-// Custom hook for media query
-const useMediaQuery = (query: string) => {
-  const [matches, setMatches] = useState(false);
+//Added Eventlistener 
+const useMediaQuery = (query: string): boolean => {
+  const [matches, setMatches] = useState<boolean>(false);
 
   useEffect(() => {
     const media = window.matchMedia(query);
-    if (media.matches !== matches) {
-      setMatches(media.matches);
-    }
-    const listener = () => setMatches(media.matches);
-    media.addListener(listener);
-    return () => media.removeListener(listener);
-  }, [matches, query]);
+    const listener = (e: MediaQueryListEvent) => setMatches(e.matches);
+
+    // Use addEventListener instead of addListener
+    media.addEventListener("change", listener);
+    
+    // Set the initial match state
+    setMatches(media.matches);
+
+    // Cleanup function to remove the event listener
+    return () => {
+      media.removeEventListener("change", listener);
+    };
+  }, [query]);
 
   return matches;
 };
 
+export default useMediaQuery;
+
 export const Appbar = () => {
   const [isCollapsed, setIsCollapsed] = useState(true);
   const [isMounted, setIsMounted] = useState(false);