Slight refactor

src/App.tsx

@@ -4,9 +4,8 @@ import {
 	createTheme,
 	mergeMantineTheme,
 } from '@mantine/core';
-import { useLocalStorage } from '@mantine/hooks';
 import { ModalsProvider } from '@mantine/modals';
-import { useQueryAPI } from 'hooks';
+import { useCommonHooks, useQueryAPI } from 'hooks';
 import { useEffect } from 'react';
 import {
 	Navigate,
@@ -20,66 +19,47 @@ import '@mantine/core/styles.css'; //import Mantine V7 styles needed by MRT
 import '@mantine/dates/styles.css'; //if using mantine date picker features
 import 'mantine-react-table/styles.css'; //import MRT styles
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import { appTheme } from 'contexts';
-import { useAtom } from 'jotai';
 import './index.css';
 import { Homepage, Settings } from 'pages';
 
 function App() {
-	const { data, isFetched } = useQueryAPI({
+	const { data: allThemes, isFetched: isAllThemesFetched } = useQueryAPI({
 		endpoint: 'api/themes',
 	});
-
-	const [themeName, _] = useLocalStorage<any>({
-		key: 'theme',
-		defaultValue: 'blackboard',
-	});
-
-	const [theme, setTheme] = useAtom(appTheme);
+	const { theme, setTheme, themeName, handleThemeChange } = useCommonHooks();
 	useEffect(() => {
-		if (data && themeName) {
+		if (allThemes && themeName) {
 			if (themeName !== 'random') {
-				const temp = data.find((t: any) => t.name === themeName);
+				const temp = allThemes.find((t: any) => t.name === themeName);
 				setTheme(temp);
 			} else {
-				const enabled = data.filter((t: any) => t.randomEnabled);
-				if (enabled.length === 0) {
-					setTheme(data[0]);
-				} else {
-					const index = Math.floor(Math.random() * enabled.length);
-					setTheme(enabled[index]);
-				}
+				handleThemeChange(allThemes, false);
 			}
 		}
-	}, [isFetched, themeName]);
-
+	}, [isAllThemesFetched, themeName]);
 	const router = createBrowserRouter(
 		createRoutesFromElements(
 			<Route>
-				<Route path='' element={<MainLayout theme={theme} />}>
+				<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 theme={theme} />}
-					/>
+					<Route path={`/${import.meta.env.VITE_BASE_URL}`} element={<Homepage />} />
 					<Route
 						path={`/${import.meta.env.VITE_BASE_URL}/settings`}
-						element={<Settings theme={theme} setTheme={setTheme} allThemes={data} />}
+						element={<Settings />}
 					/>
 				</Route>
 			</Route>,
 		),
 	);
-
 	const overrides = createTheme({
 		white: theme?.backgroundColor,
 		fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif',
 	});
-
 	const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides);
+
 	return (
 		<>
 			{theme && (