120 lines
3.2 KiB
TypeScript
120 lines
3.2 KiB
TypeScript
import {
|
|
DEFAULT_THEME,
|
|
MantineProvider,
|
|
createTheme,
|
|
mergeMantineTheme,
|
|
} from '@mantine/core';
|
|
import { useCommonHooks, useQueryAPI } from 'hooks';
|
|
import { useEffect, useState } from 'react';
|
|
import {
|
|
Navigate,
|
|
Route,
|
|
RouterProvider,
|
|
createBrowserRouter,
|
|
createRoutesFromElements,
|
|
} from 'react-router-dom';
|
|
import { Loading, MainLayout, ThemeProvider } from './components';
|
|
import '@mantine/core/styles.css';
|
|
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
|
|
import './index.css';
|
|
import { Homepage, Settings } from 'pages';
|
|
import { ToastContainer } from 'react-toastify';
|
|
import type { Theme, ThemePlaylist } from 'types';
|
|
|
|
function App() {
|
|
const { data: allThemes, isFetched: isAllThemesFetched } = useQueryAPI({
|
|
endpoint: 'api/themes',
|
|
});
|
|
const { data: themePlaylists, isFetched: isThemePlaylistsFetched } = useQueryAPI({
|
|
endpoint: 'api/themePlaylists',
|
|
});
|
|
const { theme, setTheme, themeName, handleThemeChange, currentThemePlaylist } =
|
|
useCommonHooks();
|
|
const [loaded, setLoaded] = useState<boolean>(false);
|
|
const overrides = createTheme({
|
|
white: theme?.backgroundColor,
|
|
fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif',
|
|
});
|
|
const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides);
|
|
|
|
const router = createBrowserRouter(
|
|
createRoutesFromElements(
|
|
<Route>
|
|
<Route path='' element={<MainLayout />}>
|
|
<Route
|
|
path='/'
|
|
element={<Navigate to={`/${import.meta.env.VITE_BASE_URL}`} />}
|
|
/>
|
|
<Route path={`/${import.meta.env.VITE_BASE_URL}`} element={<Homepage />} />
|
|
<Route
|
|
path={`/${import.meta.env.VITE_BASE_URL}/settings`}
|
|
element={<Settings />}
|
|
/>
|
|
<Route
|
|
path={`/${import.meta.env.VITE_BASE_URL}/settings/:tabValue`}
|
|
element={<Settings />}
|
|
/>
|
|
</Route>
|
|
</Route>,
|
|
),
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (allThemes && themeName) {
|
|
if (currentThemePlaylist === 'All') {
|
|
if (themeName !== 'random') {
|
|
const temp = allThemes.find((t: Theme) => t.name === themeName);
|
|
setTheme(temp);
|
|
setLoaded(true);
|
|
} else {
|
|
handleThemeChange(allThemes, false);
|
|
setLoaded(true);
|
|
}
|
|
} else if (currentThemePlaylist === 'Time of Day') {
|
|
const themeList = JSON.parse(
|
|
themePlaylists.find((t: ThemePlaylist) => t.name === currentThemePlaylist)
|
|
.themeList,
|
|
);
|
|
setTheme(
|
|
allThemes.find(
|
|
(t: Theme) =>
|
|
t.id === Number(themeList[Math.floor(new Date().getHours() / 6)]),
|
|
),
|
|
);
|
|
setLoaded(true);
|
|
} else {
|
|
const themeList = JSON.parse(
|
|
themePlaylists.find((t: ThemePlaylist) => t.name === currentThemePlaylist)
|
|
.themeList,
|
|
);
|
|
const filteredThemes = allThemes.filter((t: Theme) => themeList.includes(t.id));
|
|
setTheme('random');
|
|
setLoaded(true);
|
|
handleThemeChange(filteredThemes, false);
|
|
}
|
|
}
|
|
}, [
|
|
isAllThemesFetched,
|
|
themeName,
|
|
allThemes,
|
|
currentThemePlaylist,
|
|
isThemePlaylistsFetched,
|
|
]);
|
|
return (
|
|
<>
|
|
{theme && (
|
|
<MantineProvider theme={mantineTheme}>
|
|
<ThemeProvider theme={theme}>
|
|
<ToastContainer />
|
|
<Loading loaded={loaded} />
|
|
<RouterProvider router={router} />
|
|
<ReactQueryDevtools initialIsOpen={false} />
|
|
</ThemeProvider>
|
|
</MantineProvider>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default App;
|