Slight refactor

src/pages/settings/components/Themes.tsx

@@ -1,6 +1,6 @@
 import { Box, Button, Group, Overlay, Stack, Switch, Text } from '@mantine/core';
-import { useDisclosure, useLocalStorage } from '@mantine/hooks';
-import { useMutationAPI, useQueryAPI } from 'hooks';
+import { useDisclosure } from '@mantine/hooks';
+import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FiChevronRight, FiPlus } from 'react-icons/fi';
 import '@mantine/core/styles/ModalBase.css';
@@ -9,23 +9,26 @@ import { modals } from '@mantine/modals';
 import { buttonClasses, textClasses } from 'styles';
 import ThemeCard from './ThemeCard';
 import ThemeModal from './ThemeModal';
-function ThemesSettings({ theme, setTheme, allThemes }: any) {
+function ThemesSettings() {
 	const [opened, { open, close }] = useDisclosure(false);
 	const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
 	const [colorId, setColorId] = useState<string>('');
 	const [colorValue, setColorValue] = useState('#000000');
-	const [currentTheme, setValue] = useLocalStorage<any>({
-		key: 'theme',
-		defaultValue: 'blackboard',
-	});
-	const { data: backgrounds, isFetched: isBackgroundFetched } = useQueryAPI({
-		endpoint: 'api/backgrounds',
-	});
+
 	const [backgroundList, setBackgroundList] = useState<any>(['None']);
 	const [selectedTheme, setSelectedTheme] = useState<any>({});
 	const { mutateAsync: createTheme } = useMutationAPI();
 	const { mutateAsync: deleteTheme } = useMutationAPI();
-	const isMobile = window.matchMedia('(max-width: 600px)').matches;
+
+	const {
+		currentTheme,
+		setCurrentTheme,
+		backgrounds,
+		isBackgroundFetched,
+		isMobile,
+		theme,
+		allThemes,
+	} = useCommonHooks();
 
 	useEffect(() => {
 		if (backgrounds && isBackgroundFetched) {
@@ -114,7 +117,7 @@ function ThemesSettings({ theme, setTheme, allThemes }: any) {
 						labelPosition='left'
 						checked={currentTheme === 'random'}
 						onChange={(e) => {
-							setValue(e.target.checked ? 'random' : theme.name);
+							setCurrentTheme(e.target.checked ? 'random' : theme.name);
 						}}
 						color={theme.primaryColor}
 					/>
@@ -158,14 +161,9 @@ function ThemesSettings({ theme, setTheme, allThemes }: any) {
 								}}
 							>
 								<ThemeCard
-									theme={theme}
-									allThemes={allThemes}
-									setTheme={setTheme}
 									cardTheme={cardTheme}
-									currentTheme={currentTheme}
 									handleOpen={handleOpen}
 									handleDeleteTheme={handleDeleteTheme}
-									setValue={setValue}
 									createTheme={createTheme}
 								/>
 							</Box>