From 6ab0c5a97f17740b99f0420ac840e80fde9a42d1 Mon Sep 17 00:00:00 2001 From: Jake Jarvis Date: Tue, 26 Apr 2022 12:48:38 -0400 Subject: [PATCH] more deprecated `addListener`s --- components/ThemeScript/script.js | 2 +- contexts/ThemeContext.tsx | 15 +++------------ hooks/use-prefers-reduced-motion.ts | 13 ++----------- 3 files changed, 6 insertions(+), 24 deletions(-) diff --git a/components/ThemeScript/script.js b/components/ThemeScript/script.js index 6aee8a29..9c0ebe2a 100644 --- a/components/ThemeScript/script.js +++ b/components/ThemeScript/script.js @@ -10,7 +10,7 @@ export const clientScript = () => { var dark = "dark"; var newTheme; // user's saved preference - var pref = localStorage.getItem("__STORAGE_KEY__"); + var pref = window.localStorage.getItem("__STORAGE_KEY__"); // map of theme -> classname var classNames = "__CLASS_NAMES__"; // the list of 's current class(es)... diff --git a/contexts/ThemeContext.tsx b/contexts/ThemeContext.tsx index 6c526c26..f0622114 100644 --- a/contexts/ThemeContext.tsx +++ b/contexts/ThemeContext.tsx @@ -74,21 +74,12 @@ export const ThemeProvider = ({ const handler = (...args: any) => mediaListener.current(...args); const media = window.matchMedia(darkModeQuery); - if (media.addEventListener) { - media.addEventListener("change", handler); - } else { - // support deprecated listener API - media.addListener(handler); - } - + media.addEventListener("change", handler); handler(media); + // clean up the event listener return () => { - if (media.removeEventListener) { - media.removeEventListener("change", handler); - } else { - media.removeListener(handler); - } + media.removeEventListener("change", handler); }; }, []); diff --git a/hooks/use-prefers-reduced-motion.ts b/hooks/use-prefers-reduced-motion.ts index 7c9ad07b..59297df6 100644 --- a/hooks/use-prefers-reduced-motion.ts +++ b/hooks/use-prefers-reduced-motion.ts @@ -19,20 +19,11 @@ export const usePrefersReducedMotion = (): boolean => { }; const mediaQueryList = window.matchMedia(QUERY); - if (mediaQueryList.addEventListener) { - mediaQueryList.addEventListener("change", listener); - } else { - // support deprecated listener API - mediaQueryList.addListener(listener); - } + mediaQueryList.addEventListener("change", listener); // clean up the event listener return () => { - if (mediaQueryList.removeEventListener) { - mediaQueryList.removeEventListener("change", listener); - } else { - mediaQueryList.removeListener(listener); - } + mediaQueryList.removeEventListener("change", listener); }; }, [setPrefersReducedMotion]);