Source: App.jsx

/** ========= REACT / REACT ROUTER ========= */
import { useMemo, useState } from 'react';
import { HashRouter, Route, Routes } from 'react-router-dom';

/** ========= COMPONENTS ========= */
import Header from './components/Header';
import GlobalSnackbar from './components/GlobalSnackbar';

/** ========= PAGES ========= */
import HomePage from './pages/HomePage';
import NotFoundPage from './pages/NotFoundPage';
import CreateTrade from './pages/CreateTrade';
import TempTradeDashboard from './pages/Dashboard';
import Profile from './pages/Profile';

/** ========= MUI IMPORTS ========= */
import CssBaseline from '@mui/material/CssBaseline';
import { ThemeProvider, createTheme } from '@mui/material/styles';

/** ========= FONT STYLES ========= */
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

/** ========= APP STYLES ========= */
import './App.css';
import FeedbackProvider from './contexts/FeedbackContext';
import AuthProvider from './contexts/AuthContext';
import TradeProvider from './contexts/TradeProvider';
import SalaryEstimator from './components/SalaryEstimator';
import CreateChatUI from './pages/CreateChat';
import ChatProvider from './contexts/ChatContext';
import ChatListUI from './pages/ChatList';
import ProtectedPage from './pages/ProtectedPage';
import ViewTrade from './pages/ViewTrade';

/** ========= THEME FOR THE APP ========= */
// TODO: Allow people to toggle between light/dark theme.
const lightTheme = createTheme({
	palette: {
		primary: {
			main: '#1976d2', //* Change this to whatever color you want
		},
		mode: 'light',
	},
});

const darkTheme = createTheme({
	palette: {
		primary: {
			main: '#1976d2', //* Change this to whatever color you want
		},
		mode: 'dark',
	},
});

function App() {
	const [mode, setMode] = useState(() => {
		const stored = localStorage.getItem('colorMode');
		return stored === 'light' ? 'light' : 'dark';
	});
	/**
	 * @param {String} newMode
	 */
	const toggleTheme = (newMode) => {
		setMode((prev) => {
			if (prev !== newMode) {
				localStorage.setItem('colorMode', newMode);
				return newMode;
			}
			return prev;
		});
	};
	const theme = useMemo(
		() => (mode === 'light' ? lightTheme : darkTheme),
		[mode]
	);
	return (
		<HashRouter>
			<ThemeProvider theme={theme}>
				<FeedbackProvider>
					<GlobalSnackbar />
					<AuthProvider>
						<TradeProvider>
							<ChatProvider>
								<CssBaseline />
								<Header mode={mode} toggleTheme={toggleTheme} />
								<Routes>
									<Route path="/" element={<HomePage />} />
									<Route
										path="/createTrade"
										element={
											<ProtectedPage>
												<CreateTrade />
											</ProtectedPage>
										}
									/>
									<Route
										path="/viewTrades"
										element={
											<ProtectedPage>
												<TempTradeDashboard />
											</ProtectedPage>
										}
									/>
									<Route
										path="/trade/:id"
										element={
											<ProtectedPage>
												<ViewTrade />
											</ProtectedPage>
										}
									/>
									<Route
										path="/createChat"
										element={
											<ProtectedPage>
												<CreateChatUI />
											</ProtectedPage>
										}
									/>
									<Route path="/salaryEstimate" element={<SalaryEstimator />} />
									<Route
										path="/profile"
										element={
											<ProtectedPage>
												<Profile />
											</ProtectedPage>
										}
									/>
									<Route
										path="/viewChat"
										element={
											<ProtectedPage>
												<ChatListUI />
											</ProtectedPage>
										}
									/>
									<Route path="*" element={<NotFoundPage />} />
								</Routes>
							</ChatProvider>
						</TradeProvider>
					</AuthProvider>
				</FeedbackProvider>
			</ThemeProvider>
		</HashRouter>
	);
}

export default App;