Slight refactor

src/pages/settings/components/Applications.tsx

@@ -1,21 +1,11 @@
 import { Stack, Text } from '@mantine/core';
 import { ApplicationColumns, DataTable } from 'components';
-import { useQueryAPI } from 'hooks';
-import { useEffect, useState } from 'react';
+import { useCommonHooks } from 'hooks';
 import { textClasses } from 'styles';
 
 const ApplicationSettings = () => {
 	const endpoint = 'api/apps';
-	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
-		endpoint: endpoint,
-	});
-	const [applicationData, setApplicationData] = useState<any>([]);
-
-	useEffect(() => {
-		if (isFetched) {
-			setApplicationData(data);
-		}
-	}, [data, isFetching]);
+	const { isAppsFetching, isAppsLoading, applicationData } = useCommonHooks();
 
 	return (
 		<Stack>
@@ -26,8 +16,8 @@ const ApplicationSettings = () => {
 				tableName='Applications'
 				columns={ApplicationColumns()}
 				tableData={applicationData}
-				isFetching={isFetching}
-				isLoading={isLoading}
+				isFetching={isAppsFetching}
+				isLoading={isAppsLoading}
 				endpoint={endpoint}
 			/>
 		</Stack>

src/pages/settings/components/Bookmarks.tsx

@@ -1,31 +1,11 @@
 import { Stack, Text } from '@mantine/core';
 import { BookmarkColumns, DataTable } from 'components';
-import { useQueryAPI } from 'hooks';
-import { useEffect, useState } from 'react';
+import { useCommonHooks } from 'hooks';
 import { textClasses } from 'styles';
 const BookmarkSettings = () => {
 	const endpoint = 'api/links';
-	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
-		endpoint: endpoint,
-	});
-	const { data: groupData } = useQueryAPI({ endpoint: 'api/categories' });
-	const [bookmarkData, setBookmarkData] = useState<any>([]);
-	const [groups, setGroups] = useState([]);
+	const { groups, bookmarkData, linksIsFetching, linksIsLoading } = useCommonHooks();
 
-	useEffect(() => {
-		if (isFetched) {
-			setBookmarkData(data);
-		}
-	});
-
-	useEffect(() => {
-		if (groupData) {
-			const groupList = groupData?.map((category: any) => {
-				return category.categoryName;
-			});
-			setGroups(groupList);
-		}
-	}, [groupData]);
 	return (
 		<Stack>
 			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -35,8 +15,8 @@ const BookmarkSettings = () => {
 				tableName='Applications'
 				columns={BookmarkColumns(groups)}
 				tableData={bookmarkData}
-				isFetching={isFetching}
-				isLoading={isLoading}
+				isFetching={linksIsFetching}
+				isLoading={linksIsLoading}
 				endpoint={endpoint}
 			/>
 		</Stack>

src/pages/settings/components/Categories.tsx

@@ -1,21 +1,10 @@
 import { Stack, Text } from '@mantine/core';
 import { CategoryColumns, DataTable } from 'components';
-import { useEffect, useState } from 'react';
-import { useQueryAPI } from '../../../hooks/useAPI';
+import { useCommonHooks } from 'hooks';
 import { textClasses } from '../../../styles';
 const CategorySettings = () => {
 	const endpoint = 'api/categories';
-	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
-		endpoint: endpoint,
-	});
-	const [categoryData, setCategoryData] = useState<any>([]);
-
-	useEffect(() => {
-		if (data && isFetched) {
-			setCategoryData(data);
-		}
-	}, [data, isFetched]);
-
+	const { groupData, groupsIsFetching, groupsIsLoading } = useCommonHooks();
 	return (
 		<Stack>
 			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -24,9 +13,9 @@ const CategorySettings = () => {
 			<DataTable
 				tableName='Categories'
 				columns={CategoryColumns()}
-				tableData={categoryData}
-				isFetching={isFetching}
-				isLoading={isLoading}
+				tableData={groupData ?? []}
+				isFetching={groupsIsFetching}
+				isLoading={groupsIsLoading}
 				endpoint={endpoint}
 			/>
 		</Stack>

src/pages/settings/components/Messages.tsx

@@ -1,21 +1,10 @@
 import { Stack, Text } from '@mantine/core';
 import { DataTable, MessagesColumns } from 'components';
-import { useQueryAPI } from 'hooks';
-import { useEffect, useState } from 'react';
+import { useCommonHooks } from 'hooks';
 import { textClasses } from 'styles';
 const MessageSettings = () => {
 	const endpoint = 'api/messages';
-	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
-		endpoint: endpoint,
-	});
-	const [messageData, setMessageData] = useState<any>([]);
-
-	useEffect(() => {
-		if (isFetched) {
-			setMessageData(data);
-		}
-	});
-
+	const { messageData, isMessagesFetching, isMessagesLoading } = useCommonHooks();
 	return (
 		<Stack>
 			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -25,8 +14,8 @@ const MessageSettings = () => {
 				tableName='Messages'
 				columns={MessagesColumns()}
 				tableData={messageData}
-				isFetching={isFetching}
-				isLoading={isLoading}
+				isFetching={isMessagesFetching}
+				isLoading={isMessagesLoading}
 				endpoint={endpoint}
 			/>
 		</Stack>

src/pages/settings/components/Personalization.tsx

@@ -1,20 +1,10 @@
 import { Text } from '@mantine/core';
 import { DataTable, PersonalizationColumns } from 'components';
-import { useQueryAPI } from 'hooks';
-import { useEffect, useState } from 'react';
+import { useCommonHooks } from 'hooks';
 import { textClasses } from 'styles';
 const PersonalizationSettings = () => {
 	const endpoint = 'api/personalData';
-	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
-		endpoint: endpoint,
-	});
-	const [personalData, setPersonalData] = useState<any>([]);
-
-	useEffect(() => {
-		if (isFetched) {
-			setPersonalData(data);
-		}
-	});
+	const { personalData, personalIsFetching, personalIsLoading } = useCommonHooks();
 
 	return (
 		<>
@@ -25,8 +15,8 @@ const PersonalizationSettings = () => {
 				tableName='Personalization'
 				columns={PersonalizationColumns()}
 				tableData={personalData}
-				isFetching={isFetching}
-				isLoading={isLoading}
+				isFetching={personalIsFetching}
+				isLoading={personalIsLoading}
 				endpoint={endpoint}
 			/>
 		</>

src/pages/settings/components/SearchProviders.tsx

@@ -1,21 +1,11 @@
 import { Stack, Text } from '@mantine/core';
 import { DataTable, SearchProviderColumns } from 'components';
-import { useQueryAPI } from 'hooks';
-import { useEffect, useState } from 'react';
+import { useCommonHooks } from 'hooks';
 import { textClasses } from 'styles';
 
 const SearchProviderSettings = () => {
 	const endpoint = 'api/providers';
-	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
-		endpoint: endpoint,
-	});
-	const [providerData, setProviderData] = useState<any>([]);
-
-	useEffect(() => {
-		if (isFetched) {
-			setProviderData(data);
-		}
-	});
+	const { providerData, providersIsFetching, providersIsLoading } = useCommonHooks();
 
 	return (
 		<Stack>
@@ -26,8 +16,8 @@ const SearchProviderSettings = () => {
 				tableName='Categories'
 				columns={SearchProviderColumns()}
 				tableData={providerData}
-				isFetching={isFetching}
-				isLoading={isLoading}
+				isFetching={providersIsFetching}
+				isLoading={providersIsLoading}
 				endpoint={endpoint}
 			/>
 		</Stack>

src/pages/settings/components/ThemeCard.tsx

@@ -1,21 +1,14 @@
 import { ActionIcon, Box, Button, Group, Overlay, Stack, Text } from '@mantine/core';
+import { useCommonHooks } from 'hooks';
 import { useState } from 'react';
 import { FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
 import { actionIconClasses } from 'styles';
 
-function ThemeCard({
-	handleOpen,
-	handleDeleteTheme,
-	theme,
-	allThemes,
-	setTheme,
-	cardTheme,
-	currentTheme,
-	setValue,
-	createTheme,
-}: any) {
+function ThemeCard({ cardTheme, handleOpen, handleDeleteTheme, createTheme }: any) {
 	const [hover, setHover] = useState(false);
 	const [shift, setShift] = useState<number>(0);
+	const { handleThemeChange, currentTheme, setCurrentTheme, theme, allThemes } =
+		useCommonHooks();
 	return (
 		<Group
 			gap={0}
@@ -54,9 +47,8 @@ function ThemeCard({
 					backgroundColor: cardTheme.backgroundColor,
 					border: `solid ${cardTheme.borderColor}`,
 				}}
-				// data-cardTheme={cardTheme.name}
 				onClick={() => {
-					setValue(cardTheme.name);
+					setCurrentTheme(cardTheme.name);
 				}}
 			>
 				{hover && currentTheme !== 'random' && <Overlay opacity={0.5} zIndex={0} />}
@@ -174,15 +166,7 @@ function ThemeCard({
 				>
 					<FiShuffle
 						onClick={() => {
-							const enabled = allThemes
-								.filter((t: any) => t.randomEnabled)
-								.filter((t: any) => t.name !== theme.name);
-							if (enabled.length === 0) {
-								setTheme(allThemes[0]);
-							} else {
-								const index = Math.floor(Math.random() * enabled.length);
-								setTheme(enabled[index]);
-							}
+							handleThemeChange(allThemes, false);
 						}}
 						style={{
 							fontSize: '2em',

src/pages/settings/components/ThemeModal.tsx

@@ -13,6 +13,7 @@ import {
 	Text,
 	TextInput,
 } from '@mantine/core';
+import { useCommonHooks } from 'hooks';
 import { FiSave, FiX } from 'react-icons/fi';
 import { modalClasses, selectClasses, textClasses } from 'styles';
 import ThemeModalContent from './ThemeModalContent';
@@ -22,7 +23,6 @@ function ThemeModal({
 	handleClose,
 	selectedTheme,
 	setSelectedTheme,
-	theme,
 	setColorId,
 	colorId,
 	setColorValue,
@@ -33,6 +33,7 @@ function ThemeModal({
 	closePicker,
 	handleSaveTheme,
 }: any) {
+	const { theme } = useCommonHooks();
 	return (
 		<Modal.Root
 			size={'50%'}

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>