refactor: delete local storage theme migration code

Author: adamalston

Diff for: src/App/App.tsx

@@ -9,29 +9,16 @@ export const App = () => {
   const [isReady, setIsReady] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
 
-  const init = () => {
-    if (
-      window.matchMedia(
+  useEffect(() => {
+    const init = () => {
+      const matchesMobileQuery = window.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');
-    }
+      )?.matches;
 
-    setIsReady(true);
-  };
+      setIsMobile(matchesMobileQuery);
+      setIsReady(true);
+    };
 
-  useEffect(() => {
     if (!isReady) init();
   }, [isReady]);
 
@@ -46,6 +33,6 @@ export const App = () => {
       </main>
     </AppProvider>
   ) : (
-    <></>
+    <div>Loading...</div>
   );
 };

Diff for: src/Index.test.tsx

@@ -145,14 +145,14 @@ describe('application tests', () => {
 
     // site should default to the dark theme
     expect(toggle).toBeChecked();
-    expect(particles).toHaveStyle({ backgroundColor: '#000' });
+    expect(particles).toHaveStyle('background-color: #000');
 
     // click the toggle
     fireEvent.click(toggle);
 
     // the light theme should be visible
     expect(toggle).not.toBeChecked();
-    expect(particles).toHaveStyle({ backgroundColor: '#fff' });
+    expect(particles).toHaveStyle('background-color: #fff');
   });
 
   it('should render full footer on desktop', () => {
@@ -180,7 +180,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', () => {
@@ -203,29 +202,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(async () => 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(async () => 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 } = render(<App />);
@@ -238,7 +214,7 @@ describe('local storage tests', () => {
     const particles = screen.getByTestId('particles');
 
     expect(localStorage.getItem('theme')).toEqual('light');
-    expect(particles).toHaveStyle({ backgroundColor: '#fff' });
+    expect(particles).toHaveStyle('background-color: #fff');
   });
 
   it('should change local storage value when toggle is clicked', async () => {
@@ -251,6 +227,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');
   });
 });