Slight refactor

src/components/DataTable/DataTable.tsx

@@ -9,9 +9,7 @@ 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 { appTheme } from 'contexts';
-import { useMutationAPI } from 'hooks';
-import { useAtom } from 'jotai';
+import { useCommonHooks, useMutationAPI } from 'hooks';
 import { FiPlus } from 'react-icons/fi';
 import { actionIconClasses, buttonClasses } from 'styles';
 
@@ -30,7 +28,7 @@ export function DataTableComponent({
 	isLoading: boolean;
 	endpoint: string;
 }) {
-	const [theme, _] = useAtom(appTheme);
+	const { theme } = useCommonHooks();
 	const { mutateAsync: createRow } = useMutationAPI();
 	const { mutateAsync: editRow } = useMutationAPI();
 	const { mutateAsync: deleteRow } = useMutationAPI();
@@ -112,7 +110,6 @@ export function DataTableComponent({
 				},
 			},
 		},
-		renderCreateRowModalContent: ({ row }) => undefined,
 		renderTopToolbarCustomActions: ({ table }) => {
 			return (
 				<>

src/components/HelpModal/HelpModal.tsx

@@ -1,17 +1,11 @@
 import { Divider, Group, Modal, Stack, Text } from '@mantine/core';
-import { appTheme } from 'contexts';
-import { useAtom } from 'jotai';
+import { useCommonHooks } from 'hooks';
 import { modalClasses } from 'styles';
 
-export function HelpModal({
-	setValue,
-	setProviderLabel,
-	setProviderURL,
-	providers,
-	providerModalOpened,
-	closeProviderModal,
-}: any) {
-	const [theme, _] = useAtom(appTheme);
+export function HelpModal({ providerModalOpened, closeProviderModal }: any) {
+	const { theme, providers, setSearchValue, setProviderLabel, setProviderURL } =
+		useCommonHooks();
+
 	return (
 		<Modal.Root
 			size={'60%'}
@@ -20,7 +14,7 @@ export function HelpModal({
 			opened={providerModalOpened}
 			onClose={() => {
 				closeProviderModal();
-				setValue('');
+				setSearchValue('');
 				setProviderLabel('Google Search');
 				setProviderURL('https://www.google.com/search?q=');
 			}}

src/components/MainLayout.tsx

@@ -1,7 +1,9 @@
 import { Box } from '@mantine/core';
+import { useCommonHooks } from 'hooks';
 import { Outlet } from 'react-router-dom';
 
-export function MainLayout({ theme }: any) {
+export function MainLayout() {
+	const { theme } = useCommonHooks();
 	return (
 		<Box
 			style={{

src/components/WeatherModal/HourlyCard.tsx

@@ -1,5 +1,6 @@
 import { Icon } from '@iconify/react/dist/iconify.js';
 import { Box, Card, Center, Group, Image, Stack, Text } from '@mantine/core';
+import { useCommonHooks } from 'hooks';
 
 export enum WindDirection {
 	N = 0,
@@ -12,7 +13,8 @@ export enum WindDirection {
 	NW = 315,
 }
 
-export default function HourlyCard({ weather, isMobile }: any) {
+export default function HourlyCard({ weather }: any) {
+	const { isMobile } = useCommonHooks();
 	return (
 		<Stack gap={0} align='center' mx={isMobile ? '.25rem' : 0}>
 			<Card

src/components/WeatherModal/WeatherModal.tsx

@@ -1,28 +1,22 @@
 import { Box, Center, Divider, Group, Modal, Stack } from '@mantine/core';
-import { useAtom } from 'jotai';
 import { modalClasses } from 'styles';
 import SmallOutlookCard from './SmallOutlookCard';
 import SmallWeatherCard from './SmallWeatherCard';
 
+import { useCommonHooks } from 'hooks';
 import { useEffect, useState } from 'react';
-import { appTheme } from '../../contexts/theme';
 import HourlyCard from './HourlyCard';
 
 export function WeatherModal({
 	current,
 	outlook,
-	hourly,
 	closeWeatherModal,
 	weatherModalOpened,
-	setProviderLabel,
-	setProviderURL,
-	setValue,
-	isMobile,
 }: any) {
-	const [theme, _] = useAtom(appTheme);
 	const [hourlyForecast, setHourlyForecast] = useState<any>([]);
 	const [sunset, setSunset] = useState(100);
-
+	const { theme, isMobile, hourly, setProviderLabel, setSearchValue, setProviderURL } =
+		useCommonHooks();
 	useEffect(() => {
 		if (hourly) {
 			setHourlyForecast(hourly.properties.periods.slice(1, 13));
@@ -51,7 +45,7 @@ export function WeatherModal({
 			onClose={() => {
 				closeWeatherModal();
 				setProviderLabel('Google Search');
-				setValue('');
+				setSearchValue('');
 				setProviderURL('https://www.google.com/search?q=');
 			}}
 			style={{
@@ -119,9 +113,7 @@ export function WeatherModal({
 								>
 									{hourlyForecast.length > 0 &&
 										hourlyForecast.map((h: any) => {
-											return (
-												<HourlyCard key={h.number} weather={h} isMobile={isMobile} />
-											);
+											return <HourlyCard key={h.number} weather={h} />;
 										})}
 								</Box>
 							</Group>