More typing and fixes

src/components/HelpModal/HelpSection.tsx

@@ -1,8 +1,9 @@
 import { Divider, Group } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
+import type { SearchShortcut } from 'types';
 import HintItem from './HintItem';
 
-function HelpSection({ name, items }: { name: string; items: object[] }) {
+function HelpSection({ name, items }: { name: string; items: SearchShortcut[] }) {
 	const { theme } = useCommonHooks();
 	return (
 		<>
@@ -30,8 +31,10 @@ function HelpSection({ name, items }: { name: string; items: object[] }) {
 				}}
 			>
 				{items
-					?.toSorted((a: any, b: any) => (a.command > b.command ? 1 : -1))
-					.map((item: any) => (
+					?.toSorted((a: SearchShortcut, b: SearchShortcut) =>
+						a.command > b.command ? 1 : -1,
+					)
+					.map((item: SearchShortcut) => (
 						<HintItem key={item.command} command={item.command} name={item.name} />
 					))}
 			</Group>

src/components/WeatherModal/CurrentWeather.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from 'react';
 import { FaLongArrowAltDown, FaLongArrowAltUp, FaWind } from 'react-icons/fa';
 import { WiBarometer, WiHumidity, WiSunrise, WiSunset } from 'react-icons/wi';
 import { themeIconClasses } from 'styles';
-import type { CurrentWeather as CW } from 'types';
+import type { CurrentWeather as CW, SunState } from 'types';
 import WeatherIcon from './WeatherIcon';
 
 export default function CurrentWeather({ current }: { current: CW }) {
@@ -15,12 +15,12 @@ export default function CurrentWeather({ current }: { current: CW }) {
 		lon: currentLocation.lon,
 	});
 
-	const [sunStates, setSunStates] = useState<any>([]);
+	const [sunStates, setSunStates] = useState<SunState[]>([]);
 
 	useEffect(() => {
 		if (sunStateData) {
 			setSunStates(
-				sunStateData.results.map((item: any) => {
+				sunStateData.results.map((item: SunState) => {
 					return {
 						date: item.date,
 						sunrise: item.sunrise,

src/components/WeatherModal/ExtendedForecastCard.tsx

@@ -1,11 +1,15 @@
 import { Group, Stack, Text } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { textClasses } from 'styles';
+import type { ExtendedForecast } from 'types';
 import WeatherIcon from './WeatherIcon';
 
-export default function ExtendedForecast({ forecast }: any) {
-	const day = forecast.slice(2, 14).filter((item: any) => item.isDaytime);
-	const night = forecast.slice(2, 14).filter((item: any) => !item.isDaytime);
+export default function ExtendedForecastCard({
+	forecast,
+}: { forecast: ExtendedForecast[] }) {
+	const day = forecast.slice(2, 14).filter((item: ExtendedForecast) => item.isDaytime);
+	const night = forecast.slice(2, 14).filter((item: ExtendedForecast) => !item.isDaytime);
+
 	const { isMobile } = useCommonHooks();
 	return (
 		<Stack
@@ -30,7 +34,7 @@ export default function ExtendedForecast({ forecast }: any) {
 				</Text>
 			</Group>
 			<Group w={'100%'} align='center' justify='space-between'>
-				{day.map((item: any, index: number) => {
+				{day.map((item: ExtendedForecast, index: number) => {
 					const short = item.shortForecast.includes('And')
 						? item.shortForecast.substring(0, item.shortForecast.indexOf('And'))
 						: item.shortForecast.includes('then')

src/components/WeatherModal/WeatherGraphs.tsx

@@ -10,8 +10,11 @@ import {
 	XAxis,
 	YAxis,
 } from 'recharts';
+import type { HourlyForecast } from 'types';
 
-export default function WeatherGraphs({ hourlyForecast }: any) {
+export default function WeatherGraphs({
+	hourlyForecast,
+}: { hourlyForecast: HourlyForecast[] }) {
 	function CustomTooltip({ payload, active }: any) {
 		if (active) {
 			return (
@@ -48,7 +51,7 @@ export default function WeatherGraphs({ hourlyForecast }: any) {
 					<XAxis
 						type='category'
 						stroke={'var(--color-text-pri)'}
-						dataKey={(data: any) => {
+						dataKey={(data: HourlyForecast) => {
 							return new Date(data.startTime).toLocaleTimeString('en-US', {
 								hour: 'numeric',
 								minute: 'numeric',
@@ -74,7 +77,7 @@ export default function WeatherGraphs({ hourlyForecast }: any) {
 						unit={'°F'}
 						type='monotone'
 						name='Dew Point'
-						dataKey={(data: any) => {
+						dataKey={(data: HourlyForecast) => {
 							return (data.dewpoint.value * 9) / 5 + 32;
 						}}
 						stroke={'var(--color-text-acc)'}
@@ -88,7 +91,7 @@ export default function WeatherGraphs({ hourlyForecast }: any) {
 					<XAxis
 						type='category'
 						stroke={'var(--color-text-pri)'}
-						dataKey={(data: any) => {
+						dataKey={(data: HourlyForecast) => {
 							return new Date(data.startTime).toLocaleTimeString('en-US', {
 								hour: 'numeric',
 								minute: 'numeric',
@@ -102,7 +105,7 @@ export default function WeatherGraphs({ hourlyForecast }: any) {
 						unit={'%'}
 						type='monotone'
 						name='Precipitation'
-						dataKey={(data: any) => {
+						dataKey={(data: HourlyForecast) => {
 							return data.probabilityOfPrecipitation.value;
 						}}
 						stroke={'var(--color-text-pri)'}
@@ -113,7 +116,7 @@ export default function WeatherGraphs({ hourlyForecast }: any) {
 						unit={'%'}
 						type='monotone'
 						name='Humidity'
-						dataKey={(data: any) => {
+						dataKey={(data: HourlyForecast) => {
 							return data.relativeHumidity.value;
 						}}
 						stroke={'var(--color-text-acc)'}

src/components/WeatherModal/WeatherModal.tsx

@@ -4,9 +4,9 @@ import { modalClasses } from 'styles';
 import { useCommonHooks, useWeatherAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 
-import type { CurrentWeather as CW, ExtendedForecast as EF } from 'types';
+import type { CurrentWeather as CW, ExtendedForecast, HourlyForecast } from 'types';
 import CurrentWeather from './CurrentWeather';
-import ExtendedForecast from './ExtendedForecast';
+import ExtendedForecastCard from './ExtendedForecastCard';
 import WeatherGraphs from './WeatherGraphs';
 
 export function WeatherModal({
@@ -19,7 +19,7 @@ export function WeatherModal({
 	closeWeatherModal,
 }: {
 	current: CW;
-	extendedForecast: EF[];
+	extendedForecast: ExtendedForecast[];
 	weatherModalOpened: boolean;
 	setSearchValue: (value: string) => void;
 	setProviderLabel: (label: string) => void;
@@ -33,14 +33,13 @@ export function WeatherModal({
 		x: currentLocation.x,
 		y: currentLocation.y,
 	});
-	const [hourlyForecast, setHourlyForecast] = useState<any>([]);
+	const [hourlyForecast, setHourlyForecast] = useState<HourlyForecast[]>([]);
 
 	useEffect(() => {
 		if (hourly) {
 			setHourlyForecast(hourly.properties.periods.slice(1, 25));
 		}
 	}, [hourly]);
-
 	return (
 		<Modal.Root
 			fullScreen={isMobile}
@@ -79,7 +78,7 @@ export function WeatherModal({
 						<Stack w={'100%'}>
 							<CurrentWeather current={current} />
 							<WeatherGraphs hourlyForecast={hourlyForecast} />
-							<ExtendedForecast forecast={extendedForecast} />
+							<ExtendedForecastCard forecast={extendedForecast} />
 						</Stack>
 					</Center>
 				</Modal.Body>