Revert "chore: map routes to tabs (#95)"

This reverts commit e5a0eb1.
wweitzel · Dec 19, 2023 · c2bf44d · c2bf44d
1 parent e5a0eb1
commit c2bf44d
Show file tree

Hide file tree

Showing 19 changed files with 308 additions and 384 deletions.
diff --git a/e2e/fixtures.cy.ts b/e2e/fixtures.cy.ts
@@ -1,9 +1,7 @@
 beforeEach(() => {
-  cy.visit('/fixtures');
+  cy.visit('/');
   cy.wait('@fixtures');
   cy.get('.nav-link').contains('Fixtures').click();
-
-  cy.get('@fixtures').should('have.property', 'state', 'Complete');
 });
 
 describe('fixtures', () => {
@@ -32,8 +30,8 @@ describe('fixtures', () => {
       expect(loc.pathname).to.eq('/fixtures/1049002');
     });
 
-    cy.wait(['@goals', '@goals']).then((interceptions) => {
-      const reqQuery = JSON.parse(interceptions[1].request.query.json as string);
+    cy.wait(['@goals', '@goals', '@goals']).then((interceptions) => {
+      const reqQuery = JSON.parse(interceptions[2].request.query.json as string);
       cy.wrap(reqQuery).its('filter').its('fixtureId').should('equal', 1049002);
     });
 

diff --git a/e2e/goals.cy.ts b/e2e/goals.cy.ts
@@ -13,6 +13,8 @@ describe('Goals', () => {
       expect(loc.pathname).to.eq('/goals');
     });
 
+    cy.get('@fixtures').should('have.property', 'state', 'Complete');
+    cy.get('@leagues').should('have.property', 'state', 'Complete');
     cy.get('@goals').should('have.property', 'state', 'Complete');
   });
 

diff --git a/e2e/settings.cy.ts b/e2e/settings.cy.ts
@@ -1,5 +1,5 @@
 beforeEach(() => {
-  cy.visit('/settings');
+  cy.visit('/');
 
   cy.get('.nav-link').contains('Settings').click();
 });

diff --git a/e2e/tabs.cy.ts b/e2e/tabs.cy.ts
@@ -3,25 +3,16 @@ describe('tabs', () => {
     cy.visit('/');
 
     cy.get('.nav-link.active').contains('Home');
-    cy.location().should((loc) => {
-      expect(loc.pathname).to.eq('/goals');
-    });
     cy.get('[aria-labelledby="home-tab"]').should('be.visible');
-    cy.get('[aria-labelledby="fixtures-tab"]').should('not.exist');
-    cy.get('[aria-labelledby="settings-tab"]').should('not.exist');
+    cy.get('[aria-labelledby="fixtures-tab"]').should('not.be.visible');
+    cy.get('[aria-labelledby="settings-tab"]').should('not.be.visible');
 
     cy.get('.nav-link').contains('Fixtures').click();
     cy.get('.nav-link.active').contains('Fixtures');
-    cy.location().should((loc) => {
-      expect(loc.pathname).to.eq('/fixtures');
-    });
     cy.get('[aria-labelledby="fixtures-tab"]').should('be.visible');
 
     cy.get('.nav-link').contains('Settings').click();
     cy.get('.nav-link.active').contains('Settings');
-    cy.location().should((loc) => {
-      expect(loc.pathname).to.eq('/settings');
-    });
     cy.get('[aria-labelledby="settings-tab"]').should('be.visible');
   });
 });
diff --git a/src/App.test.tsx b/src/App.test.tsx
@@ -1,8 +1,23 @@
-import './mocks/matchMedia.ts';
-
 import {render} from '@testing-library/react';
 import App from './App';
 
 test('renders the app with no errors', () => {
+  // window.matchMedia is not implemented in JSDOM so need to mock it
+  // https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: vi.fn(), // deprecated
+      removeListener: vi.fn(), // deprecated
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  });
+
   render(<App />);
 });
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,58 +1,35 @@
-import Header from './components/Header';
-import {ThemeProvider} from './hooks/useTheme';
 import Error from './pages/Error';
 import Fixture from './pages/Fixture';
-import Fixtures from './pages/Fixtures';
 import Goal from './pages/Goal';
 import Goals from './pages/Goals';
-import Settings from './pages/Settings';
 
 import {createBrowserRouter, Navigate, RouterProvider} from 'react-router-dom';
 
 const router = createBrowserRouter([
   {
-    element: <Header />,
-    children: [
-      {
-        path: '/',
-        element: <Navigate to="/goals" />,
-        errorElement: <Error />,
-      },
-      {
-        path: '/goals',
-        element: <Goals />,
-        errorElement: <Error />,
-      },
-      {
-        path: '/fixtures',
-        element: <Fixtures />,
-        errorElement: <Error />,
-      },
-      {
-        path: '/settings',
-        element: <Settings />,
-        errorElement: <Error />,
-      },
-      {
-        path: '/goals/:goalId',
-        element: <Goal />,
-        errorElement: <Error />,
-      },
-      {
-        path: '/fixtures/:fixtureId',
-        element: <Fixture />,
-        errorElement: <Error />,
-      },
-    ],
+    path: '/',
+    element: <Navigate to="/goals" />,
+    errorElement: <Error />,
+  },
+  {
+    path: '/goals',
+    element: <Goals />,
+    errorElement: <Error />,
+  },
+  {
+    path: '/goals/:goalId',
+    element: <Goal />,
+    errorElement: <Error />,
+  },
+  {
+    path: '/fixtures/:fixtureId',
+    element: <Fixture />,
+    errorElement: <Error />,
   },
 ]);
 
 function App() {
-  return (
-    <ThemeProvider>
-      <RouterProvider router={router} />
-    </ThemeProvider>
-  );
+  return <RouterProvider router={router} />;
 }
 
 export default App;
diff --git a/src/components/FixtureRow.tsx b/src/components/FixtureRow.tsx
@@ -36,8 +36,6 @@ function FixtureRow({fixture}: FixtureRowProps) {
                 src={fixture.teams.home.logo}
                 alt="Home team logo"
                 style={{maxWidth: '20px'}}
-                width={20}
-                height={20}
               ></img>
               <div>{fixture.teams.home.name}</div>
             </div>
@@ -47,8 +45,6 @@ function FixtureRow({fixture}: FixtureRowProps) {
                 src={fixture.teams.away.logo}
                 alt="Away team logo"
                 style={{maxWidth: '20px'}}
-                width={20}
-                height={20}
               ></img>
               <div>{fixture.teams.away.name}</div>
             </div>

diff --git a/src/components/FixturesList.tsx b/src/components/FixturesList.tsx
@@ -26,7 +26,7 @@ function FixturesList({fixtures, leagues}: FixturesListProps) {
       {filteredLeagues.map((league) => (
         <div key={league.id} className="w-100" data-cy="fixture-group">
           <div className="d-flex mb-3 mt-4 align-items-center">
-            <img src={league.logo} alt="League Logo" className="me-2" height={25} width={25}></img>
+            <img src={league.logo} alt="League Logo" className="me-2" height={25}></img>
             <div>{league.name}</div>
           </div>
           <>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,84 +1,26 @@
 import {useEffect, useState} from 'react';
 
-import {NavLink, Outlet, useMatch} from 'react-router-dom';
 import logoBlack from '../assets/top90logo-black.avif';
 import logoWhite from '../assets/top90logo-white.avif';
-import {useTheme} from '../hooks/useTheme';
 
-const DARK = 'dark';
-
-function getLogo(theme: string) {
-  return theme === DARK ? logoWhite : logoBlack;
+interface HeaderProps {
+  selectedTheme: string;
+  onClick?: () => void;
 }
 
-function Header() {
-  // Child components can attach a reset function to this state via the outlet context
-  // so that the header can reset some state that they control.
-  const [resetFn, setResetFn] = useState<() => void>();
-  const {theme} = useTheme();
-  const [logo, setLogo] = useState(getLogo(theme));
+const DARK = 'dark';
+
+function Header({selectedTheme, onClick}: HeaderProps) {
+  const [logo, setLogo] = useState(logoBlack);
 
   useEffect(() => {
-    const logoToDisplay = getLogo(theme);
+    const logoToDisplay = selectedTheme === DARK ? logoWhite : logoBlack;
     setLogo(logoToDisplay);
-  }, [theme]);
+  }, [selectedTheme]);
 
   return (
-    <div className="container d-flex justify-content-center">
-      <div className="top90-app-container">
-        <div className="d-flex justify-content-center">
-          <img height={250} src={logo} onClick={resetFn} alt="logo" role="button" />
-        </div>
-
-        <ul className="nav nav-tabs" role="tablist">
-          <li className="nav-item">
-            <NavLink
-              to="/goals"
-              className={({isActive}) => {
-                return `nav-link ${isActive ? 'active' : ''}`;
-              }}
-              id="home-tab"
-              type="button"
-              aria-controls="home"
-              aria-selected={Boolean(useMatch('/goals'))}
-            >
-              Home
-            </NavLink>
-          </li>
-          <li className="nav-item">
-            <NavLink
-              to="/fixtures"
-              className={({isActive}) => {
-                return `nav-link ${isActive ? 'active' : ''}`;
-              }}
-              id="fixtures-tab"
-              type="button"
-              aria-controls="fixtures"
-              aria-selected={Boolean(useMatch('/fixtures'))}
-            >
-              Fixtures
-            </NavLink>
-          </li>
-          <li className="nav-item">
-            <NavLink
-              to="/settings"
-              className={({isActive}) => {
-                return `nav-link ${isActive ? 'active' : ''}`;
-              }}
-              id="settings-tab"
-              type="button"
-              aria-controls="settings"
-              aria-selected={Boolean(useMatch('/settings'))}
-            >
-              Settings
-            </NavLink>
-          </li>
-        </ul>
-
-        <div className="tab-content">
-          <Outlet context={[resetFn, setResetFn]} />
-        </div>
-      </div>
+    <div className="d-flex justify-content-center">
+      <img height={250} src={logo} onClick={onClick} alt="logo" role="button" />
     </div>
   );
 }

diff --git a/src/components/ThemeSelect.tsx b/src/components/ThemeSelect.tsx
@@ -1,20 +1,21 @@
-import {Theme} from '../hooks/useTheme';
+import {getPreferredTheme} from '../lib/utils';
 import Select from './Select';
 
 interface ThemeSelectProps {
-  theme: Theme;
   onChange: (value: string) => void;
 }
 
-function ThemeSelect({theme, onChange}: ThemeSelectProps) {
+function ThemeSelect({onChange}: ThemeSelectProps) {
+  const preferredTheme = getPreferredTheme();
+
   return (
     <Select
       label="Theme"
       options={[
         {key: 'dark', value: 'dark', displayName: 'Dark'},
         {key: 'light', value: 'light', displayName: 'Light'},
       ]}
-      value={theme}
+      value={preferredTheme}
       onChange={onChange}
       showAllOption={false}
     />

diff --git a/src/hooks/useTheme.tsx b/src/hooks/useTheme.tsx
diff --git a/src/index.css b/src/index.css
@@ -33,16 +33,3 @@ body {
   width: 100%;
   max-width: 800px;
 }
-
-.fade-in {
-  animation: fadeIn 0.5s;
-}
-
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -1,16 +1,13 @@
-import {Theme} from '../hooks/useTheme';
-
-export function getPreferredTheme(): Theme {
+export function getPreferredTheme() {
   let storedTheme = localStorage.getItem('top90-theme');
   if (storedTheme) {
-    return storedTheme as Theme;
+    return storedTheme;
   }
 
   return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 }
 
-export function setDocumentTheme(theme: Theme) {
-  localStorage.setItem('top90-theme', theme);
+export function setTheme(theme: string) {
   document.documentElement.setAttribute('data-bs-theme', theme);
 }