Removed hardcoded urls

src/pages/homepage/components/Header.tsx

@@ -1,7 +1,7 @@
 import { Group, Stack, Text } from '@mantine/core';
 import { useEffect, useState } from 'react';
-import { textClasses } from '../../../styles';
 import { useWeatherAPI } from '../../../hooks';
+import { textClasses } from '../../../styles';
 
 function Header({ greet, date, isMobile }: any) {
 	const [time, setTime] = useState(new Date());
@@ -105,32 +105,28 @@ function Header({ greet, date, isMobile }: any) {
 						width: '100%',
 						gap: 0,
 					}}
-				>	
+				>
 					{!isMobile && (
 						<Group gap={0} align='end' style={{ display: 'flex' }}>
-						<Text
-							component='h2'
-							mr={4}
-							className={textClasses.dateTime}
-							classNames={textClasses}
-						>
-							{current.temperature}°F
-						</Text>
-						<Text
-							mb={6}
-							className={textClasses.dateTime}
-							classNames={textClasses}
-							fz={14}
-						>
-							{current.highTemp}°F/{current.lowTemp}°F
-						</Text>
-					</Group>
+							<Text
+								component='h2'
+								mr={4}
+								className={textClasses.dateTime}
+								classNames={textClasses}
+							>
+								{current.temperature}°F
+							</Text>
+							<Text
+								mb={6}
+								className={textClasses.dateTime}
+								classNames={textClasses}
+								fz={14}
+							>
+								{current.highTemp}°F/{current.lowTemp}°F
+							</Text>
+						</Group>
 					)}
-					<Text
-						component='h2'
-						className={textClasses.dateTime}
-						classNames={textClasses}
-					>
+					<Text component='h2' className={textClasses.dateTime} classNames={textClasses}>
 						{`${
 							time.getHours() === 0
 								? 12

src/pages/homepage/components/HelpModal.tsx

@@ -0,0 +1,59 @@
+import { Divider, Group, Modal, Stack, Text } from '@mantine/core';
+import { useAtom } from 'jotai';
+import { appTheme } from '../../../contexts/theme';
+import { modalClasses } from '../../../styles';
+
+export default function HelpModal({
+	setValue,
+	setProviderLabel,
+	setProviderURL,
+	providers,
+	providerModalOpened,
+	closeProviderModal,
+}: any) {
+	const [theme, setTheme] = useAtom(appTheme);
+	return (
+		<Modal.Root
+			size={'50%'}
+			className={modalClasses.helpModal}
+			classNames={modalClasses}
+			opened={providerModalOpened}
+			onClose={() => {
+				closeProviderModal();
+				setValue('');
+				setProviderLabel('Google Search');
+				setProviderURL('https://www.google.com/search?q=');
+			}}
+			style={{
+				'--color-text-pri': theme.primaryColor,
+				'--color-text-acc': theme.accentColor,
+				'--color-background': theme.backgroundColor,
+				'--color-border': theme.borderColor,
+				'--color-search-background': theme.searchColor,
+				'--image-background': `url(${theme.backgroundImage})`,
+			}}
+			closeOnEscape
+			closeOnClickOutside
+		>
+			<Modal.Overlay />
+			<Modal.Content>
+				<Modal.Header>
+					<Modal.Title>Help info</Modal.Title>
+					<Modal.CloseButton />
+				</Modal.Header>
+				<Modal.Body pb={'2rem'}>
+					<Stack gap={0} w={'100%'} align='center'>
+						<h3 style={{ padding: 0, margin: 0 }}>Search Providers</h3>
+						<Divider py={8} w={'65%'} color={theme.accentColor} />
+						{providers?.map((provider: any) => (
+							<Group key={provider.prefix} gap={0} w={'50%'} justify='space-between'>
+								<Text>{provider.prefix}</Text>
+								<Text>{provider.name}</Text>
+							</Group>
+						))}
+					</Stack>
+				</Modal.Body>
+			</Modal.Content>
+		</Modal.Root>
+	);
+}

src/pages/homepage/components/Search.tsx

@@ -1,12 +1,10 @@
-import { Center, Divider, Group, Modal, Stack, Text, TextInput } from '@mantine/core';
+import { Stack, TextInput } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { useAtom } from 'jotai';
 import { useEffect, useState } from 'react';
-import { appTheme } from '../../../contexts/theme';
 import { useQueryAPI, useWeatherAPI } from '../../../hooks';
-import { modalClasses, textInputClasses } from '../../../styles';
-import SmallWeatherCard from './SmallWeatherCard';
-import SmallOutlookCard from './SmallOutlookCard';
+import { textInputClasses } from '../../../styles';
+import HelpModal from './HelpModal';
+import WeatherModal from './WeatherModal';
 
 export default function Search() {
 	const { data: providers } = useQueryAPI({ endpoint: 'api/providers' });
@@ -31,8 +29,8 @@ export default function Search() {
 			temperature: 0,
 			precipitation: 0,
 			windSpeed: '0 mph',
-			windDirection: 'N'
-		}
+			windDirection: 'N',
+		},
 	]);
 	const { data: forecast } = useWeatherAPI({ endpoint: 'forecast' });
 	const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] =
@@ -42,7 +40,6 @@ export default function Search() {
 	const [providerLabel, setProviderLabel] = useState('Google Search');
 	const [providerURL, setProviderURL] = useState('https://www.google.com/search?q=');
 	const [value, setValue] = useState('');
-	const [theme, setTheme] = useAtom(appTheme);
 	const handleKeyPress = (item: any) => {
 		let option = '';
 		let subtext = '';
@@ -93,7 +90,6 @@ export default function Search() {
 
 	useEffect(() => {
 		if (weather && basicWeather) {
-			console.log(weather.features[0])
 			setCurrent({
 				icon: weather.features[0].properties.icon?.replace('medium', 'large') || '',
 				temperature: Math.round(
@@ -125,22 +121,26 @@ export default function Search() {
 					icon: forecast.properties.periods[0].icon.replace('medium', 'large'),
 					isDayTime: forecast.properties.periods[0].isDaytime,
 					temperature: forecast.properties.periods[0].temperature,
-					precipitation: Math.round(forecast.properties.periods[0].probabilityOfPrecipitation.value),
+					precipitation: Math.round(
+						forecast.properties.periods[0].probabilityOfPrecipitation.value,
+					),
 					windSpeed: forecast.properties.periods[0].windSpeed,
-					windDirection: forecast.properties.periods[0].windDirection
+					windDirection: forecast.properties.periods[0].windDirection,
 				},
 				{
 					name: forecast.properties.periods[1].name,
 					icon: forecast.properties.periods[1].icon.replace('medium', 'large'),
 					isDayTime: forecast.properties.periods[1].isDaytime,
 					temperature: forecast.properties.periods[1].temperature,
-					precipitation: Math.round(forecast.properties.periods[1].probabilityOfPrecipitation.value),
+					precipitation: Math.round(
+						forecast.properties.periods[1].probabilityOfPrecipitation.value,
+					),
 					windSpeed: forecast.properties.periods[1].windSpeed,
-					windDirection: forecast.properties.periods[1].windDirection
-				}
+					windDirection: forecast.properties.periods[1].windDirection,
+				},
 			]);
 		}
-	}, [forecast])
+	}, [forecast]);
 	return (
 		<Stack
 			style={{
@@ -190,99 +190,23 @@ export default function Search() {
 					}
 				}}
 			/>
-			<Modal.Root
-				size={'50%'}
-				className={modalClasses.helpModal}
-				classNames={modalClasses}
-				opened={providerModalOpened}
-				onClose={() => {
-					closeProviderModal();
-					setValue('');
-					setProviderLabel('Google Search');
-					setProviderURL('https://www.google.com/search?q=');
-				}}
-				style={{
-					'--color-text-pri': theme.primaryColor,
-					'--color-text-acc': theme.accentColor,
-					'--color-background': theme.backgroundColor,
-					'--color-border': theme.borderColor,
-					'--color-search-background': theme.searchColor,
-					'--image-background': `url(${theme.backgroundImage})`,
-				}}
-				closeOnEscape
-				closeOnClickOutside
-			>
-				<Modal.Overlay />
-				<Modal.Content>
-					<Modal.Header>
-						<Modal.Title>Help info</Modal.Title>
-						<Modal.CloseButton />
-					</Modal.Header>
-					<Modal.Body pb={'2rem'}>
-						<Stack gap={0} w={'100%'} align='center'>
-							<h3 style={{ padding: 0, margin: 0 }}>Search Providers</h3>
-							<Divider py={8} w={'65%'} color={theme.accentColor} />
-							{providers?.map((provider: any) => (
-								<Group key={provider.prefix} gap={0} w={'50%'} justify='space-between'>
-									<Text>{provider.prefix}</Text>
-									<Text>{provider.name}</Text>
-								</Group>
-							))}
-						</Stack>
-					</Modal.Body>
-				</Modal.Content>
-			</Modal.Root>
-			<Modal.Root
-				size={'50%'}
-				className={modalClasses.helpModal}
-				classNames={modalClasses}
-				opened={weatherModalOpened}
-				onClose={() => {
-					closeWeatherModal();
-					setValue('');
-					setProviderLabel('Google Search');
-					setProviderURL('https://www.google.com/search?q=');
-				}}
-				style={{
-					'--color-text-pri': theme.primaryColor,
-					'--color-text-acc': theme.accentColor,
-					'--color-background': theme.backgroundColor,
-					'--color-border': theme.borderColor,
-					'--color-search-background': theme.searchColor,
-					'--image-background': `url(${theme.backgroundImage})`,
-				}}
-				closeOnEscape
-				closeOnClickOutside
-			>
-				<Modal.Overlay />
-				<Modal.Content>
-					<Modal.Header>
-						<Modal.Title>Weather Forecast</Modal.Title>
-						<Modal.CloseButton />
-					</Modal.Header>
-					<Modal.Body pb={'2rem'}>
-						<Center w={'100%'}>
-							<Stack gap={0} align='center'>
-								<h3 style={{ padding: 0, margin: 0 }}>Currently</h3>
-								<Stack>
-									<SmallWeatherCard weather={current} />
-								</Stack>
-							</Stack>
-							<Divider orientation='vertical' mx={8} color={theme.accentColor} />
-							<Group gap={0}>
-								{outlook.map((o: any) => (
-									<Stack key={o.name} gap={0} align='center'>
-										<h3 style={{ padding: 0, margin: 0 }}>{o.name}</h3>
-										<Stack>
-											<SmallOutlookCard weather={o} />
-										</Stack>
-									</Stack>
-								))}
-							</Group>
-						</Center>
-					</Modal.Body>
-				</Modal.Content>
-			</Modal.Root>
+			<HelpModal
+				providers={providers}
+				providerModalOpened={providerModalOpened}
+				closeProviderModal={closeProviderModal}
+				setValue={setValue}
+				setProviderLabel={setProviderLabel}
+				setProviderURL={setProviderURL}
+			/>
+			<WeatherModal
+				current={current}
+				outlook={outlook}
+				closeWeatherModal={closeWeatherModal}
+				weatherModalOpened={weatherModalOpened}
+				setValue={setValue}
+				setProviderLabel={setProviderLabel}
+				setProviderURL={setProviderURL}
+			/>
 		</Stack>
 	);
 }

src/pages/homepage/components/SmallWeatherCard.tsx

@@ -14,9 +14,9 @@ export default function SmallWeatherCard({ weather }: any) {
 				/>
 			</Box>
 			<Stack h={'124px'} w={'124px'} gap={0} pos={'absolute'}>
-                <Text mb={-8} p={0} fz={12}>
-                    {weather.highTemp}°F/{weather.lowTemp}°F
-                </Text>
+				<Text mb={-8} p={0} fz={12}>
+					{weather.highTemp}°F/{weather.lowTemp}°F
+				</Text>
 				<Stack gap={0} align='center' pos={'absolute'} right={0} top={0}>
 					{weather.precipitation !== 'N/A' && (
 						<Group gap={0}>

src/pages/homepage/components/WeatherModal.tsx

@@ -0,0 +1,72 @@
+import { 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 { appTheme } from '../../../contexts/theme';
+
+export default function WeatherModal({
+	current,
+	outlook,
+	closeWeatherModal,
+	weatherModalOpened,
+	setValue,
+	setProviderLabel,
+	setProviderURL,
+}: any) {
+	const [theme, setTheme] = useAtom(appTheme);
+	return (
+		<Modal.Root
+			size={'50%'}
+			className={modalClasses.helpModal}
+			classNames={modalClasses}
+			opened={weatherModalOpened}
+			onClose={() => {
+				closeWeatherModal();
+				setValue('');
+				setProviderLabel('Google Search');
+				setProviderURL('https://www.google.com/search?q=');
+			}}
+			style={{
+				'--color-text-pri': theme.primaryColor,
+				'--color-text-acc': theme.accentColor,
+				'--color-background': theme.backgroundColor,
+				'--color-border': theme.borderColor,
+				'--color-search-background': theme.searchColor,
+				'--image-background': `url(${theme.backgroundImage})`,
+			}}
+			closeOnEscape
+			closeOnClickOutside
+		>
+			<Modal.Overlay />
+			<Modal.Content>
+				<Modal.Header>
+					<Modal.Title>Weather Forecast</Modal.Title>
+					<Modal.CloseButton />
+				</Modal.Header>
+				<Modal.Body pb={'2rem'}>
+					<Center w={'100%'}>
+						<Stack gap={0} align='center'>
+							<h3 style={{ padding: 0, margin: 0 }}>Currently</h3>
+							<Stack>
+								<SmallWeatherCard weather={current} />
+							</Stack>
+						</Stack>
+						<Divider orientation='vertical' mx={8} color={theme.accentColor} />
+						<Group gap={8}>
+							{outlook.map((o: any) => (
+								<Stack key={o.name} gap={0} align='center'>
+									<h3 style={{ padding: 0, margin: 0 }}>{o.name}</h3>
+									<Stack>
+										<SmallOutlookCard weather={o} />
+									</Stack>
+								</Stack>
+							))}
+						</Group>
+					</Center>
+				</Modal.Body>
+			</Modal.Content>
+		</Modal.Root>
+	);
+}

src/pages/homepage/types/weather.d.ts

@@ -1,4 +1,4 @@
-interface CurrentWeather{
+interface CurrentWeather {
 	icon: string;
 	temperature: number;
 	highTemp: number;
@@ -10,7 +10,7 @@ interface CurrentWeather{
 	windDirection: number;
 }
 
-interface OutlookWeather{
+interface OutlookWeather {
 	name: string;
 	icon: string;
 	isDayTime: boolean;
@@ -18,4 +18,4 @@ interface OutlookWeather{
 	precipitation: number;
 	windSpeed: string;
 	windDirection: string;
-}
+}