Refactored common hooks to reduce api calls

src/components/DataTable/DataTable.tsx

@@ -1,3 +1,8 @@
+import { ActionIcon, Button, Flex, Text, Tooltip } from '@mantine/core';
+import { modals } from '@mantine/modals';
+import { IconEdit, IconTrash } from '@tabler/icons-react';
+import { ThemeProvider } from 'components/ThemeProvider';
+import { useCommonHooks, useMutationAPI } from 'hooks';
 import {
 	type MRT_Row,
 	type MRT_TableOptions,
@@ -5,13 +10,8 @@ import {
 	useMantineReactTable,
 } from 'mantine-react-table';
 import { memo } from 'react';
-import '../../../src/dataTableStyles.css';
-import { ActionIcon, Button, Flex, Text } from '@mantine/core';
-import { modals } from '@mantine/modals';
-import { IconEdit, IconTrash } from '@tabler/icons-react';
-import { useCommonHooks, useMutationAPI } from 'hooks';
 import { FiPlus } from 'react-icons/fi';
-import { actionIconClasses, buttonClasses } from 'styles';
+import { actionIconClasses, buttonClasses, textInputClasses } from 'styles';
 
 export function DataTableComponent({
 	tableName,
@@ -48,10 +48,18 @@ export function DataTableComponent({
 	};
 	const openDeleteConfirmModal = (row: MRT_Row<any>) =>
 		modals.openConfirmModal({
-			title: 'Are you sure you want to delete this user?',
-			children: <Text>Are you sure?</Text>,
+			title: (
+				<Text c={theme.primaryColor}>Are you sure you want to delete this user?</Text>
+			),
+			children: <Text c={theme.primaryColor}>Are you sure?</Text>,
 			labels: { confirm: 'Delete', cancel: 'Cancel' },
-			confirmProps: { color: 'red' },
+			confirmProps: {
+				style: {
+					backgroundColor: 'var(--mantine-color-red-6)',
+					color: 'var(--mantine-color-white)',
+				},
+			},
+			cancelProps: { color: 'green' },
 			onConfirm: () =>
 				deleteRow({ method: 'DELETE', endpoint: endpoint, body: row.original }),
 		});
@@ -80,12 +88,17 @@ export function DataTableComponent({
 			columnVisibility: { id: false, categoryIndex: false },
 			showGlobalFilter: tableName !== 'Personalization',
 		},
-		mantineSearchTextInputProps: {},
+		mantineSearchTextInputProps: {
+			classNames: textInputClasses,
+			className: textInputClasses.default,
+		},
 		mantinePaperProps: {
-			className: 'root',
 			style: {
 				border: 'none',
 				boxShadow: 'none',
+				'--mrt-base-background-color': 'transparent',
+				'--mrt-row-hover-background-color': theme.searchColor,
+				color: 'var(--color-text-pri)',
 			},
 		},
 		mantineTableContainerProps: {
@@ -107,9 +120,46 @@ export function DataTableComponent({
 		},
 		mantineTableBodyRowProps: {
 			style: {
+				fontSize: '18px',
 				borderBottom: 'none',
 			},
 		},
+		mantineEditTextInputProps: {
+			styles: {
+				wrapper: {
+					display: 'flex',
+				},
+				input: {
+					width: '100%',
+					border: 'none',
+					backgroundColor: `${theme.searchColor}`,
+					color: 'var(--color-text-pri)',
+					fontSize: '18px',
+				},
+			},
+		},
+		mantineFilterTextInputProps: {
+			classNames: textInputClasses,
+			className: textInputClasses.default,
+		},
+		mantineEditSelectProps: {
+			styles: {
+				input: {
+					color: theme.primaryColor,
+					fontSize: '18px',
+					backgroundColor: theme.searchColor,
+					border: 'none',
+				},
+				option: {
+					color: theme.primaryColor,
+					fontSize: '18px',
+					backgroundColor: 'transparent',
+				},
+				dropdown: {
+					backgroundColor: `${theme.backgroundColor} !important`,
+				},
+			},
+		},
 		displayColumnDefOptions: {
 			'mrt-row-actions': {
 				header: '',
@@ -118,16 +168,28 @@ export function DataTableComponent({
 		},
 		renderRowActions: ({ row, table }) => (
 			<Flex gap='xs'>
-				<ActionIcon
-					className={actionIconClasses.editButton}
-					classNames={actionIconClasses}
-					onClick={() => table.setEditingRow(row)}
+				<Tooltip
+					color={theme.primaryColor}
+					bd={`solid 1px ${theme.borderColor}`}
+					label={'Edit'}
 				>
-					<IconEdit />
-				</ActionIcon>
-				<ActionIcon color='red' onClick={() => openDeleteConfirmModal(row)}>
-					<IconTrash />
-				</ActionIcon>
+					<ActionIcon
+						className={actionIconClasses.editButton}
+						classNames={actionIconClasses}
+						onClick={() => table.setEditingRow(row)}
+					>
+						<IconEdit />
+					</ActionIcon>
+				</Tooltip>
+				<Tooltip
+					color={theme.primaryColor}
+					bd={`solid 1px ${theme.borderColor}`}
+					label={'Delete'}
+				>
+					<ActionIcon color='red' onClick={() => openDeleteConfirmModal(row)}>
+						<IconTrash />
+					</ActionIcon>
+				</Tooltip>
 			</Flex>
 		),
 		mantineCreateRowModalProps: {
@@ -158,7 +220,11 @@ export function DataTableComponent({
 			);
 		},
 	});
-	return <MantineReactTable table={table} />;
+	return (
+		<ThemeProvider theme={theme}>
+			<MantineReactTable table={table} />
+		</ThemeProvider>
+	);
 }
 
 export const DataTable = memo(DataTableComponent);

src/components/WeatherModal/WeatherModal.tsx

@@ -3,27 +3,36 @@ import { modalClasses } from 'styles';
 import SmallOutlookCard from './SmallOutlookCard';
 import SmallWeatherCard from './SmallWeatherCard';
 
-import { useCommonHooks } from 'hooks';
+import { useCommonHooks, useQueryAPI, useWeatherAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import HourlyCard from './HourlyCard';
 
 export function WeatherModal({
 	current,
 	outlook,
+	points,
 	closeWeatherModal,
 	weatherModalOpened,
 }: any) {
+	const { data: personal, isFetched: personalIsFetched } = useQueryAPI({
+		endpoint: 'api/personalData',
+	});
+	const [personalData, setPersonalData] = useState<any>([]);
+	const { data: hourly } = useWeatherAPI({
+		endpoint: 'hourly',
+		office: points?.properties.gridId,
+		x: points?.properties.gridX,
+		y: points?.properties.gridY,
+	});
+	useEffect(() => {
+		if (personal && personalIsFetched) {
+			setPersonalData(personal);
+		}
+	}, [personal, personalIsFetched]);
 	const [hourlyForecast, setHourlyForecast] = useState<any>([]);
 	const [sunset, setSunset] = useState(100);
-	const {
-		theme,
-		isMobile,
-		hourly,
-		setProviderLabel,
-		setSearchValue,
-		setProviderURL,
-		personal,
-	} = useCommonHooks();
+	const { theme, isMobile, setProviderLabel, setSearchValue, setProviderURL } =
+		useCommonHooks();
 	useEffect(() => {
 		if (hourly) {
 			setHourlyForecast(hourly.properties.periods.slice(1, 13));
@@ -75,7 +84,7 @@ export function WeatherModal({
 								Weather Forecast for{' '}
 							</Text>
 							<Text fz={18} fw={600}>
-								{personal?.[0].physicalAddress}
+								{personalData?.[0]?.physicalAddress}
 							</Text>
 						</Group>
 					</Modal.Title>