- 
+
<>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 2a0a2a0..80895c6 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,26 +1,84 @@
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';
-
-interface HeaderProps {
- selectedTheme: string;
- onClick?: () => void;
-}
+import {useTheme} from '../hooks/useTheme';
const DARK = 'dark';
-function Header({selectedTheme, onClick}: HeaderProps) {
- const [logo, setLogo] = useState(logoBlack);
+function getLogo(theme: string) {
+ return theme === DARK ? logoWhite : logoBlack;
+}
+
+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));
useEffect(() => {
- const logoToDisplay = selectedTheme === DARK ? logoWhite : logoBlack;
+ const logoToDisplay = getLogo(theme);
setLogo(logoToDisplay);
- }, [selectedTheme]);
+ }, [theme]);
return (
- {league.name}
- 
+ ({theme: currentTheme, setTheme: () => null});
+
+export const ThemeProvider = ({children}: {children: React.ReactNode}) => {
+ const [theme, setTheme] = useState(currentTheme);
+
+ function setGlobalTheme(theme: Theme) {
+ setTheme(theme);
+ setDocumentTheme(theme);
+ }
+
+ return (
+
+ {children}
+
+ );
+};
+
+export const useTheme = () => {
+ return useContext(ThemeContext);
+};
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 100b317..46ba95e 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,13 +1,14 @@
-export function getPreferredTheme() {
+export function getPreferredTheme(): Theme {
let storedTheme = localStorage.getItem('top90-theme');
if (storedTheme) {
- return storedTheme;
+ return storedTheme as Theme;
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
-export function setTheme(theme: string) {
+export function setDocumentTheme(theme: Theme) {
+ localStorage.setItem('top90-theme', theme);
document.documentElement.setAttribute('data-bs-theme', theme);
}
diff --git a/src/mocks/matchMedia.ts b/src/mocks/matchMedia.ts
new file mode 100644
index 0000000..49086ab
--- /dev/null
+++ b/src/mocks/matchMedia.ts
@@ -0,0 +1,16 @@
+// 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(),
+ removeListener: vi.fn(),
+ addEventListener: vi.fn(),
+ removeEventListener: vi.fn(),
+ dispatchEvent: vi.fn(),
+ })),
+});
diff --git a/src/pages/Fixture.tsx b/src/pages/Fixture.tsx
index 2dfe6c8..b24e2cd 100644
--- a/src/pages/Fixture.tsx
+++ b/src/pages/Fixture.tsx
@@ -1,23 +1,16 @@
import {useEffect, useState} from 'react';
-import {useNavigate, useParams} from 'react-router-dom';
+import {NavLink, useParams} from 'react-router-dom';
import FixtureRow from '../components/FixtureRow';
-import Header from '../components/Header';
import Video from '../components/Video';
import {getFixture, GetFixtureResponse} from '../lib/api/fixtures';
import {getGoals, GetGoalsResponse} from '../lib/api/goals';
-import {getPreferredTheme} from '../lib/utils';
function Fixture() {
const {fixtureId} = useParams();
- const navigate = useNavigate();
const [getFixtureResponse, setGetFixtureResponse] = useState();
const [getGoalsResponse, setGetGoalsResponse] = useState();
- function navigateHome() {
- navigate('/');
- }
-
useEffect(() => {
if (fixtureId) {
getFixture(fixtureId).then((data) => {
@@ -34,35 +27,29 @@ function Fixture() {
}
return (
-
+
);
}
diff --git a/src/components/ThemeSelect.tsx b/src/components/ThemeSelect.tsx
index 1196d2a..08f4e53 100644
--- a/src/components/ThemeSelect.tsx
+++ b/src/components/ThemeSelect.tsx
@@ -1,13 +1,11 @@
-import {getPreferredTheme} from '../lib/utils';
import Select from './Select';
interface ThemeSelectProps {
+ theme: Theme;
onChange: (value: string) => void;
}
-function ThemeSelect({onChange}: ThemeSelectProps) {
- const preferredTheme = getPreferredTheme();
-
+function ThemeSelect({theme, onChange}: ThemeSelectProps) {
return (
diff --git a/src/hooks/useTheme.tsx b/src/hooks/useTheme.tsx
new file mode 100644
index 0000000..2bce35c
--- /dev/null
+++ b/src/hooks/useTheme.tsx
@@ -0,0 +1,30 @@
+import {createContext, useContext, useState} from 'react';
+import {getPreferredTheme, setDocumentTheme} from '../lib/utils';
+
+interface ThemeContext {
+ theme: Theme;
+ setTheme: (theme: Theme) => void;
+}
+
+const currentTheme = getPreferredTheme();
+
+const ThemeContext = createContext
+
+
+
+
+ -
+
-
+
{ + return `nav-link ${isActive ? 'active' : ''}`; + }} + id="home-tab" + type="button" + aria-controls="home" + aria-selected={Boolean(useMatch('/goals'))} + > + Home + +
+ -
+
{ + return `nav-link ${isActive ? 'active' : ''}`; + }} + id="fixtures-tab" + type="button" + aria-controls="fixtures" + aria-selected={Boolean(useMatch('/fixtures'))} + > + Fixtures + +
+ -
+
{ + return `nav-link ${isActive ? 'active' : ''}`; + }} + id="settings-tab" + type="button" + aria-controls="settings" + aria-selected={Boolean(useMatch('/settings'))} + > + Settings + +
+
+
+
-
- ();
+ const [getLeaguesResponse, setGetLeaguesResponse] = useState();
+
+ useEffect(() => {
+ getFixtures({todayOnly: true}).then((data) => {
+ setGetFixturesResponse(data);
+ });
+ getLeagues().then((data) => {
+ setGetLeaguesResponse(data);
+ });
+ }, []);
+
+ return (
+
diff --git a/src/pages/Goals.tsx b/src/pages/Goals.tsx
index 3090f4d..1f02678 100644
--- a/src/pages/Goals.tsx
+++ b/src/pages/Goals.tsx
@@ -1,19 +1,14 @@
import 'bootstrap/js/dist/tab';
import {useEffect, useState} from 'react';
import ReactPaginate from 'react-paginate';
-import FixturesList from '../components/FixturesList';
-import Header from '../components/Header';
+import {useOutletContext} from 'react-router-dom';
import Input from '../components/Input';
import Select from '../components/Select';
-import ThemeSelect from '../components/ThemeSelect';
import Video from '../components/Video';
import {Pagination} from '../lib/api/core';
-import {getFixtures, GetFixturesResponse} from '../lib/api/fixtures';
import {getGoals, GetGoalsFilter, GetGoalsResponse} from '../lib/api/goals';
-import {getLeagues, GetLeaguesResponse} from '../lib/api/leagues';
import {Player, searchPlayers, SearchPlayersResponse} from '../lib/api/players';
import {getTeams, GetTeamsResponse} from '../lib/api/teams';
-import {getPreferredTheme, setTheme} from '../lib/utils';
const defaultPagination: Pagination = {skip: 0, limit: 5};
@@ -24,24 +19,29 @@ function Goals() {
const [selectedTeamId, setSelectedTeamId] = useState();
const [selectedPlayer, setSelectedPlayer] = useState();
const [searchInput, setSearchInput] = useState('');
- const [selectedTheme, setSelectedTheme] = useState(getPreferredTheme());
const [getGoalsResponse, setGetGoalsResponse] = useState();
const [getTeamsResponse, setGetTeamsResponse] = useState();
- const [getFixturesResponse, setGetFixturesResponse] = useState();
- const [getLeaguesResponse, setGetLeaguesResponse] = useState();
- const [searchPlayesResponse, setSearchPlayersResponse] = useState();
+ const [searchPlayersResponse, setSearchPlayersResponse] = useState();
+ const [_, setResetFn] = useOutletContext<[Function, React.Dispatch]>();
const pageCount = Math.ceil(
(getGoalsResponse ? getGoalsResponse.total : 0) / (pagination.limit || defaultPagination.limit)
);
+ function reset() {
+ setGetGoalsResponse(undefined);
+ getGoals().then((data) => setGetGoalsResponse(data));
+
+ setSelectedLeagueId(undefined);
+ setSelectedTeamId(undefined);
+ setSelectedPlayer(undefined);
+ setSearchInput('');
+ setCurrentPage(0);
+ setPagination(defaultPagination);
+ }
+
useEffect(() => {
- getFixtures({todayOnly: true}).then((data) => {
- setGetFixturesResponse(data);
- });
- getLeagues().then((data) => {
- setGetLeaguesResponse(data);
- });
+ setResetFn(() => () => reset());
getGoals().then((data) => {
setGetGoalsResponse(data);
});
@@ -138,203 +138,108 @@ function Goals() {
});
}
- function reset() {
- setGetGoalsResponse(undefined);
- getGoals().then((data) => setGetGoalsResponse(data));
-
- setSelectedLeagueId(undefined);
- setSelectedTeamId(undefined);
- setSelectedPlayer(undefined);
- setSearchInput('');
- setCurrentPage(0);
- setPagination(defaultPagination);
- }
-
- function changeTheme(value: string) {
- const selectedTheme = value;
- localStorage.setItem('top90-theme', selectedTheme);
- setTheme(selectedTheme);
- setSelectedTheme(selectedTheme);
- }
-
return (
-
-
+
);
}
diff --git a/src/pages/Fixtures.tsx b/src/pages/Fixtures.tsx
new file mode 100644
index 0000000..af07e2a
--- /dev/null
+++ b/src/pages/Fixtures.tsx
@@ -0,0 +1,31 @@
+import {useEffect, useState} from 'react';
+import FixturesList from '../components/FixturesList';
+import {getFixtures, GetFixturesResponse} from '../lib/api/fixtures';
+import {getLeagues, GetLeaguesResponse} from '../lib/api/leagues';
+
+function Fixtures() {
+ const [getFixturesResponse, setGetFixturesResponse] = useState
-
+
+
-
-
- {getGoalsResponse?.goals?.map((goal) => (
-
-
-
- ))}
+ <>
+
+
+ ))}
-
+
- {(!getGoalsResponse?.goals || getGoalsResponse.goals.length === 0) && (
- No goals found for this fixture.
- )}
+ {getGoalsResponse?.goals?.map((goal) => (
+
+
-
-
-
+ {(!getGoalsResponse?.goals || getGoalsResponse.goals.length === 0) && (
+ No goals found for this fixture.
+ )}
+
+
+ Back to homepage
+
-
+
+ );
+}
+
+export default Fixtures;
diff --git a/src/pages/Goal.tsx b/src/pages/Goal.tsx
index 85a3bc3..06fc2e2 100644
--- a/src/pages/Goal.tsx
+++ b/src/pages/Goal.tsx
@@ -4,8 +4,6 @@ import {getGoal, GetGoalResponse} from '../lib/api/goals';
import {useEffect, useState} from 'react';
import {useNavigate, useParams} from 'react-router-dom';
-import Header from '../components/Header';
-import {getPreferredTheme} from '../lib/utils';
function Goal() {
const {goalId} = useParams();
@@ -29,7 +27,6 @@ function Goal() {
+
+
-
-
-
-
-
- - - -
- - - -
- - - -
-
-
+
+ +
);
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
new file mode 100644
index 0000000..fdd9446
--- /dev/null
+++ b/src/pages/Settings.tsx
@@ -0,0 +1,16 @@
+import ThemeSelect from '../components/ThemeSelect';
+import {useTheme} from '../hooks/useTheme';
+
+function Settings() {
+ const {theme, setTheme} = useTheme();
+
+ return (
+
-
- -
-
+
-
-
-
-
-
- - -
-
-
-
-
-
- -
+
-
+
+ +
-
+
+
-
+
+
+
+
- {getGoalsResponse?.goals?.map((goal) => (
-
-
-
- ))}
+ + +
+
-
+
+
+ -
+
+
-
-
-
-
-
-
-
-
-
+ {getGoalsResponse?.goals?.map((goal) => (
+
-
-
+
+ ))}
+
+ +
+ +
+ {getGoalsResponse?.goals && getGoalsResponse?.goals.length > 0 && (
+
+
+ )}
+
+ );
+}
+
+export default Settings;
diff --git a/src/types.d.ts b/src/types.d.ts
index e2937d4..a022b26 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -1 +1,3 @@
declare module '*.png';
+
+type Theme = 'dark' | 'light';
+ setTheme(value as Theme)}>
+
+