Slight refactor

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>