Refactored common hooks to reduce api calls

src/pages/settings/components/Applications.tsx

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

src/pages/settings/components/Bookmarks.tsx

@@ -1,10 +1,38 @@
 import { Stack, Text } from '@mantine/core';
 import { BookmarkColumns, DataTable } from 'components';
-import { useCommonHooks } from 'hooks';
+import { useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 const BookmarkSettings = () => {
 	const endpoint = 'api/links';
-	const { groups, bookmarkData, linksIsFetching, linksIsLoading } = useCommonHooks();
+	const {
+		data: linkData,
+		isFetched: linksIsFetched,
+		isFetching: linksIsFetching,
+		isLoading: linksIsLoading,
+	} = useQueryAPI({
+		endpoint: 'api/links',
+	});
+	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
+		endpoint: 'api/categories',
+	});
+	const [bookmarkData, setBookmarkData] = useState<any>([]);
+
+	const [groups, setGroups] = useState([]);
+	useEffect(() => {
+		if (linkData && linksIsFetched) {
+			setBookmarkData(linkData);
+		}
+	}, [linksIsFetched, linkData]);
+
+	useEffect(() => {
+		if (groupData && groupsIsFetched) {
+			const groupList = groupData?.map((category: any) => {
+				return category.categoryName;
+			});
+			setGroups(groupList);
+		}
+	}, [groupData, groupsIsFetched]);
 
 	return (
 		<Stack>
@@ -12,7 +40,7 @@ const BookmarkSettings = () => {
 				Bookmarks
 			</Text>
 			<DataTable
-				tableName='Applications'
+				tableName='Bookmarks'
 				columns={BookmarkColumns(groups)}
 				tableData={bookmarkData}
 				isFetching={linksIsFetching}

src/pages/settings/components/Categories.tsx

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

src/pages/settings/components/Messages.tsx

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

src/pages/settings/components/Personalization.tsx

@@ -1,11 +1,24 @@
 import { Text } from '@mantine/core';
 import { DataTable, PersonalizationColumns } from 'components';
-import { useCommonHooks } from 'hooks';
+import { useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 const PersonalizationSettings = () => {
 	const endpoint = 'api/personalData';
-	const { personalData, personalIsFetching, personalIsLoading } = useCommonHooks();
-
+	const {
+		data: personalData,
+		isFetched: personalIsFetched,
+		isFetching: personalIsFetching,
+		isLoading: personalIsLoading,
+	} = useQueryAPI({
+		endpoint: endpoint,
+	});
+	const [personal, setPersonal] = useState<any>([]);
+	useEffect(() => {
+		if (personalData && personalIsFetched) {
+			setPersonal(personalData);
+		}
+	}, [personalData, personalIsFetched]);
 	return (
 		<>
 			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -14,7 +27,7 @@ const PersonalizationSettings = () => {
 			<DataTable
 				tableName='Personalization'
 				columns={PersonalizationColumns()}
-				tableData={personalData}
+				tableData={personal}
 				isFetching={personalIsFetching}
 				isLoading={personalIsLoading}
 				endpoint={endpoint}

src/pages/settings/components/SearchProviders.tsx

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

src/pages/settings/components/ThemeCard.tsx

@@ -4,11 +4,16 @@ import { useState } from 'react';
 import { FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
 import { actionIconClasses } from 'styles';
 
-function ThemeCard({ cardTheme, handleOpen, handleDeleteTheme, createTheme }: any) {
+function ThemeCard({
+	cardTheme,
+	handleOpen,
+	handleDeleteTheme,
+	createTheme,
+	allThemes,
+}: any) {
 	const [hover, setHover] = useState(false);
 	const [shift, setShift] = useState<number>(0);
-	const { handleThemeChange, currentTheme, setCurrentTheme, theme, allThemes } =
-		useCommonHooks();
+	const { handleThemeChange, currentTheme, setCurrentTheme, theme } = useCommonHooks();
 	return (
 		<Group
 			gap={0}
@@ -51,7 +56,7 @@ function ThemeCard({ cardTheme, handleOpen, handleDeleteTheme, createTheme }: an
 					setCurrentTheme(cardTheme.name);
 				}}
 			>
-				{hover && currentTheme !== 'random' && <Overlay opacity={0.5} zIndex={0} />}
+				{hover && currentTheme !== 'random' && <Overlay opacity={0.5} zIndex={1} />}
 				<Group w={'100%'} gap={0} display={'flex'} align='center' justify='center'>
 					<Stack align='center'>
 						<Box
@@ -179,6 +184,7 @@ function ThemeCard({ cardTheme, handleOpen, handleDeleteTheme, createTheme }: an
 				<Stack
 					gap={0}
 					style={{
+						zIndex: 2,
 						padding: '4px',
 						paddingRight: '0px',
 						position: 'absolute',
@@ -224,7 +230,7 @@ function ThemeCard({ cardTheme, handleOpen, handleDeleteTheme, createTheme }: an
 						{cardTheme.randomEnabled ? <FiShuffle color='green' /> : <FiX color='red' />}
 					</ActionIcon>
 					<ActionIcon
-						className={actionIconClasses.editButton}
+						className={actionIconClasses.themeEditButton}
 						classNames={actionIconClasses}
 						onClick={() => handleOpen(cardTheme)}
 						mb={2}
@@ -232,7 +238,7 @@ function ThemeCard({ cardTheme, handleOpen, handleDeleteTheme, createTheme }: an
 						<FiEdit color='green' />
 					</ActionIcon>
 					<ActionIcon
-						className={actionIconClasses.editButton}
+						className={actionIconClasses.themeEditButton}
 						classNames={actionIconClasses}
 						onClick={() => handleDeleteTheme(cardTheme)}
 					>

src/pages/settings/components/ThemeModal.tsx

@@ -7,7 +7,6 @@ import {
 	Group,
 	Image,
 	Modal,
-	OptionalPortal,
 	Select,
 	Stack,
 	Text,
@@ -153,35 +152,32 @@ function ThemeModal({
 								/>
 							</Group>
 							<Group justify='space-between'>
-								<OptionalPortal withinPortal={false}>
-									<Select
-										data={backgroundList}
-										className={selectClasses.select}
-										classNames={selectClasses}
-										label='Background Image'
-										value={selectedTheme.backgroundImage}
-										renderOption={(value) => {
-											return (
-												<Group h={'100%'} w={'100%'} justify='space-between'>
-													{value.option.value}
-													{value.option.value && value.option.value !== 'None' && (
-														<Image
-															h={'28px'}
-															w={'50px'}
-															src={`/backgrounds/${value.option.value}`}
-														/>
-													)}
-												</Group>
-											);
-										}}
-										onChange={(value) =>
-											setSelectedTheme({
-												...selectedTheme,
-												backgroundImage: value,
-											})
-										}
-									/>
-								</OptionalPortal>
+								<Select
+									data={backgroundList}
+									classNames={selectClasses}
+									label='Background Image'
+									value={selectedTheme.backgroundImage}
+									renderOption={(value) => {
+										return (
+											<Group h={'100%'} w={'100%'} justify='space-between'>
+												{value.option.value}
+												{value.option.value && value.option.value !== 'None' && (
+													<Image
+														h={'28px'}
+														w={'50px'}
+														src={`/backgrounds/${value.option.value}`}
+													/>
+												)}
+											</Group>
+										);
+									}}
+									onChange={(value) =>
+										setSelectedTheme({
+											...selectedTheme,
+											backgroundImage: value,
+										})
+									}
+								/>
 							</Group>
 						</Stack>
 						<Stack h={'100%'} w={'50%'} align='center' justify='center'>

src/pages/settings/components/Themes.tsx

@@ -1,6 +1,6 @@
 import { Box, Button, Group, Overlay, Stack, Switch, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { useCommonHooks, useMutationAPI } from 'hooks';
+import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FiChevronRight, FiPlus } from 'react-icons/fi';
 import '@mantine/core/styles/ModalBase.css';
@@ -10,6 +10,12 @@ import { buttonClasses, textClasses } from 'styles';
 import ThemeCard from './ThemeCard';
 import ThemeModal from './ThemeModal';
 function ThemesSettings() {
+	const { data: allThemes } = useQueryAPI({
+		endpoint: 'api/themes',
+	});
+	const { data: backgroundData, isFetched: isBackgroundFetched } = useQueryAPI({
+		endpoint: 'api/backgrounds',
+	});
 	const [opened, { open, close }] = useDisclosure(false);
 	const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
 	const [colorId, setColorId] = useState<string>('');
@@ -20,21 +26,13 @@ function ThemesSettings() {
 	const { mutateAsync: createTheme } = useMutationAPI();
 	const { mutateAsync: deleteTheme } = useMutationAPI();
 
-	const {
-		currentTheme,
-		setCurrentTheme,
-		backgrounds,
-		isBackgroundFetched,
-		isMobile,
-		theme,
-		allThemes,
-	} = useCommonHooks();
+	const { currentTheme, setCurrentTheme, isMobile, theme } = useCommonHooks();
 
 	useEffect(() => {
-		if (backgrounds && isBackgroundFetched) {
-			setBackgroundList(['None', ...backgrounds]);
+		if (backgroundData && isBackgroundFetched) {
+			setBackgroundList(['None', ...backgroundData]);
 		}
-	}, [backgrounds, isBackgroundFetched]);
+	}, [backgroundData, isBackgroundFetched]);
 
 	const handleOpen = (theme: any) => {
 		setSelectedTheme(theme);
@@ -162,6 +160,7 @@ function ThemesSettings() {
 								}}
 							>
 								<ThemeCard
+									allThemes={allThemes}
 									cardTheme={cardTheme}
 									handleOpen={handleOpen}
 									handleDeleteTheme={handleDeleteTheme}

src/pages/settings/components/WolClients.tsx

@@ -1,11 +1,26 @@
 import { Stack, Text } from '@mantine/core';
 import { DataTable, WolClientColumns } from 'components';
-import { useCommonHooks } from 'hooks';
+import { useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
 import { textClasses } from 'styles';
 
 const WolClientSettings = () => {
 	const endpoint = 'api/wolClients';
-	const { wolClientsData, wolClientsIsFetching, wolClientsIsLoading } = useCommonHooks();
+	const {
+		data: wolClientsData,
+		isFetched: wolClientsIsFetched,
+		isFetching: wolClientsIsFetching,
+		isLoading: wolClientsIsLoading,
+	} = useQueryAPI({
+		endpoint: endpoint,
+	});
+	const [wolClients, setWolClients] = useState<any>([]);
+
+	useEffect(() => {
+		if (wolClientsData && wolClientsIsFetched) {
+			setWolClients(wolClientsData);
+		}
+	}, [wolClientsData, wolClientsIsFetched]);
 
 	return (
 		<Stack>
@@ -15,7 +30,7 @@ const WolClientSettings = () => {
 			<DataTable
 				tableName='WoL Clients'
 				columns={WolClientColumns()}
-				tableData={wolClientsData}
+				tableData={wolClients}
 				isFetching={wolClientsIsFetching}
 				isLoading={wolClientsIsLoading}
 				endpoint={endpoint}