feat: add media query event listeners

adamalston · Jan 20, 2025 · aec14a7 · aec14a7
1 parent 103f326
commit aec14a7
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 53 deletions.
diff --git a/src/App/App.tsx b/src/App/App.tsx
@@ -7,36 +7,27 @@ import { AppProvider } from './AppContext';
 import { config } from './config';
 
 export const App = () => {
-  const [isReady, setIsReady] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
 
-  const init = () => {
-    if (
-      matchMedia(
-        '(max-device-width: 820px) and (-webkit-min-device-pixel-ratio: 2)',
-      ).matches
-    ) {
-      setIsMobile(true);
-    }
-
-    // before the state refactoring, 'theme' had a boolean-ish ('true', 'false')
-    // value in localStorage, now 'theme' has a theme value ('dark', 'light'),
-    // to prevent the site from breaking, older 'theme' entries should be updated
-    const localStorageTheme = localStorage.getItem('theme');
-    if (localStorageTheme === 'true') {
-      localStorage.setItem('theme', 'dark');
-    } else if (localStorageTheme === 'false') {
-      localStorage.setItem('theme', 'light');
-    }
-
-    setIsReady(true);
-  };
-
   useEffect(() => {
-    if (!isReady) init();
-  }, [isReady]);
+    const mediaQuery =
+      '(max-device-width: 820px) and (-webkit-min-device-pixel-ratio: 2)';
+    const mediaQueryList = window.matchMedia(mediaQuery);
+
+    const updateIsMobile = () => {
+      setIsMobile(mediaQueryList.matches);
+    };
+
+    updateIsMobile();
+
+    mediaQueryList.addEventListener('change', updateIsMobile);
+
+    return () => {
+      mediaQueryList.removeEventListener('change', updateIsMobile);
+    };
+  }, []);
 
-  return isReady ? (
+  return (
     <AppProvider config={config} isMobile={isMobile}>
       <main className="app">
         <Toggle />
@@ -46,7 +37,5 @@ export const App = () => {
         <Particles />
       </main>
     </AppProvider>
-  ) : (
-    <></>
   );
 };
diff --git a/src/Index.test.tsx b/src/Index.test.tsx
@@ -181,7 +181,6 @@ describe('app context tests', () => {
     const footer = screen.getByTestId('footer');
 
     expect(footer).toHaveTextContent(/^Designed and built by Adam Alston$/);
-    expect(footer).not.toHaveTextContent(/Source/);
   });
 
   describe('reducer tests', () => {
@@ -204,29 +203,6 @@ describe('local storage tests', () => {
     localStorage.clear();
   });
 
-  it("should show the dark theme when 'theme' is set to 'true' in local storage", async () => {
-    // set local storage item and render the app
-    localStorage.setItem('theme', 'true');
-    await act(() => render(<App />));
-
-    // check that the local storage item has been updated correctly
-    expect(localStorage.getItem('theme')).toEqual('dark');
-    const particles = screen.getByTestId('particles');
-    expect(particles).toHaveStyle({ backgroundColor: '#000' });
-  });
-
-  it("should show the light theme when 'theme' is set to 'false' in local storage", async () => {
-    // set local storage item and render the app
-    localStorage.setItem('theme', 'false');
-    await act(() => render(<App />));
-
-    // check that the local storage item has been updated correctly
-    expect(localStorage.getItem('theme')).toEqual('light');
-
-    const particles = screen.getByTestId('particles');
-    expect(particles).toHaveStyle({ backgroundColor: '#fff' });
-  });
-
   // https://testing-library.com/docs/react-testing-library/api/#rerender
   it('should persist the light theme through an app re-render', async () => {
     const { rerender } = await act(() => render(<App />));
@@ -254,6 +230,6 @@ describe('local storage tests', () => {
     fireEvent.click(toggle);
 
     // check that the local storage item has been changed
-    expect(localStorage.getItem('theme')).not.toEqual('light');
+    expect(localStorage.getItem('theme')).toEqual('dark');
   });
 });