Fullscreen test

src/components/WeatherModal/CurrentWeather.tsx

@@ -6,7 +6,7 @@ import { FaLongArrowAltDown, FaLongArrowAltUp, FaWind } from 'react-icons/fa';
 import { WiBarometer, WiHumidity, WiSunrise, WiSunset } from 'react-icons/wi';
 import WeatherIcon from './WeatherIcon';
 
-export default function CurrentWeather({ weather }: any) {
+export default function CurrentWeather({ current }: any) {
 	const { currentLocation } = useCommonHooks();
 	const { data: sunStateData } = useSunStateAPI({
 		lat: currentLocation.lat,
@@ -28,184 +28,192 @@ export default function CurrentWeather({ weather }: any) {
 			);
 		}
 	}, [sunStateData]);
+
 	return (
-		<Stack
-			gap={0}
-			w={'100%'}
-			justify='space-between'
-			style={{
-				backgroundColor: 'var(--color-search-background)',
-				padding: '1rem',
-				borderRadius: '8px',
-				paddingBottom: '.5rem',
-			}}
-		>
-			<Group gap={0} px={16} w={'100%'} justify='space-between'>
-				<Text
-					c={'var(--color-text-pri)'}
+		<>
+			{current ? (
+				<Stack
+					gap={0}
+					w={'100%'}
+					justify='space-between'
 					style={{
-						fontSize: '1.375rem',
-						textAlign: 'right',
+						backgroundColor: 'var(--color-search-background)',
+						padding: '1rem',
+						borderRadius: '8px',
+						paddingBottom: '.5rem',
 					}}
+					c={'var(--color-text-pri)'}
 				>
-					Current Weather
-				</Text>
-			</Group>
-			<Group gap={8} w={'100%'} justify='space-between'>
-				<Stack gap={0} w={'45%'}>
-					<Group gap={0} justify='flex-end'>
-						<WeatherIcon
-							textDescription={`${
-								weather.textDescription.includes('and')
-									? weather.textDescription.substring(
-											0,
-											weather.textDescription.indexOf('and'),
-										)
-									: weather.textDescription.includes('then')
-										? weather.textDescription.substring(
-												0,
-												weather.textDescription.indexOf('then'),
-											)
-										: weather.textDescription
-							}`}
-						/>
-						<Text fz={'7rem'} fw={200}>
-							{weather.temperature}°<sup style={{ fontSize: '3rem' }}>F</sup>
+					<Group gap={0} px={16} w={'100%'} justify='space-between'>
+						<Text
+							c={'var(--color-text-pri)'}
+							style={{
+								fontSize: '1.375rem',
+								textAlign: 'right',
+							}}
+						>
+							Current Weather
 						</Text>
 					</Group>
-					<Text
-						c={'var(--color-text-pri)'}
-						style={{
-							fontSize: '1.375rem',
-							textAlign: 'right',
-							marginTop: -32,
-							marginLeft: 16,
-						}}
-					>
-						{weather.textDescription}
-					</Text>
-				</Stack>
-				<Stack gap={4} w={'45%'}>
-					<Text>
-						Feels like {weather.heatIndex ?? weather.windChill ?? weather.temperature}°
-						<sup>F</sup>
-					</Text>
-					<Grid align='center'>
-						<Grid.Col span={1}>
-							<ThemeIcon
-								h={'auto'}
-								w={'auto'}
-								variant='subtle'
+					<Group gap={8} w={'100%'} justify='space-between'>
+						<Stack gap={0} w={'45%'}>
+							<Group gap={0} justify='flex-end'>
+								<WeatherIcon
+									textDescription={`${
+										current.textDescription.includes('and')
+											? current.textDescription.substring(
+													0,
+													current.textDescription.indexOf('and'),
+												)
+											: current.textDescription.includes('then')
+												? current.textDescription.substring(
+														0,
+														current.textDescription.indexOf('then'),
+													)
+												: current.textDescription
+									}`}
+								/>
+								<Text fz={'7rem'} fw={200}>
+									{current.temperature}°<sup style={{ fontSize: '3rem' }}>F</sup>
+								</Text>
+							</Group>
+							<Text
 								c={'var(--color-text-pri)'}
+								style={{
+									fontSize: '1.375rem',
+									textAlign: 'right',
+									marginTop: -32,
+									marginLeft: 16,
+								}}
 							>
-								<FaLongArrowAltUp size={32} />
-							</ThemeIcon>
-						</Grid.Col>
-						<Grid.Col span={3}>
-							<Text>
-								{weather.highTemp}°<sup>F</sup>
+								{current.textDescription}
 							</Text>
-						</Grid.Col>
-						<Grid.Col span={1}>
-							<ThemeIcon
-								h={'auto'}
-								w={'auto'}
-								variant='subtle'
-								c={'var(--color-text-pri)'}
-							>
-								<FaLongArrowAltDown size={32} />
-							</ThemeIcon>
-						</Grid.Col>
-						<Grid.Col span={1}>
+						</Stack>
+						<Stack gap={4} w={'45%'}>
 							<Text>
-								{weather.lowTemp}°<sup>F</sup>
+								Feels like {current.heatIndex ?? current.windChill ?? current.temperature}
+								°<sup>F</sup>
 							</Text>
-						</Grid.Col>
-					</Grid>
-					<Grid align='center'>
-						<Grid.Col span={1}>
-							<ThemeIcon
-								h={'auto'}
-								w={'auto'}
-								variant='subtle'
-								c={'var(--color-text-pri)'}
-							>
-								<WiSunrise size={32} />
-							</ThemeIcon>
-						</Grid.Col>
-						<Grid.Col span={3}>
-							<Text>{sunStates[0]?.sunrise}</Text>
-						</Grid.Col>
-						<Grid.Col span={1}>
-							<ThemeIcon
-								h={'auto'}
-								w={'auto'}
-								variant='subtle'
-								c={'var(--color-text-pri)'}
-							>
-								<WiSunset size={32} />
-							</ThemeIcon>
-						</Grid.Col>
-						<Grid.Col span={3}>
-							<Text>{sunStates[0]?.sunset}</Text>
-						</Grid.Col>
-					</Grid>
-					<Grid align='center'>
-						<Grid.Col span={1}>
-							<ThemeIcon
-								h={'auto'}
-								w={'auto'}
-								variant='subtle'
-								c={'var(--color-text-pri)'}
-							>
-								<WiHumidity size={32} />
-							</ThemeIcon>
-						</Grid.Col>
-						<Grid.Col span={3}>
-							<Text>Humidity</Text>
-						</Grid.Col>
-						<Grid.Col span={2}>
-							<Text>{weather.humidity}%</Text>
-						</Grid.Col>
-					</Grid>
-					<Grid align='center'>
-						<Grid.Col span={1}>
-							<ThemeIcon
-								h={'auto'}
-								w={'auto'}
-								variant='subtle'
-								c={'var(--color-text-pri)'}
-							>
-								<FaWind size={32} />
-							</ThemeIcon>
-						</Grid.Col>
-						<Grid.Col span={3}>
-							<Text>Wind</Text>
-						</Grid.Col>
-						<Grid.Col span={2}>
-							<Text>{weather.windSpeed}mph</Text>
-						</Grid.Col>
-					</Grid>
-					<Grid align='center'>
-						<Grid.Col span={1}>
-							<ThemeIcon
-								h={'auto'}
-								w={'auto'}
-								variant='subtle'
-								c={'var(--color-text-pri)'}
-							>
-								<WiBarometer size={32} />
-							</ThemeIcon>
-						</Grid.Col>
-						<Grid.Col span={3}>
-							<Text>Pressure</Text>
-						</Grid.Col>
-						<Grid.Col span={2}>
-							<Text>{weather.pressure} in</Text>
-						</Grid.Col>
-					</Grid>
+							<Grid align='center'>
+								<Grid.Col span={1}>
+									<ThemeIcon
+										h={'auto'}
+										w={'auto'}
+										variant='subtle'
+										c={'var(--color-text-pri)'}
+									>
+										<FaLongArrowAltUp size={32} />
+									</ThemeIcon>
+								</Grid.Col>
+								<Grid.Col span={3}>
+									<Text>
+										{current.highTemp}°<sup>F</sup>
+									</Text>
+								</Grid.Col>
+								<Grid.Col span={1}>
+									<ThemeIcon
+										h={'auto'}
+										w={'auto'}
+										variant='subtle'
+										c={'var(--color-text-pri)'}
+									>
+										<FaLongArrowAltDown size={32} />
+									</ThemeIcon>
+								</Grid.Col>
+								<Grid.Col span={1}>
+									<Text>
+										{current.lowTemp}°<sup>F</sup>
+									</Text>
+								</Grid.Col>
+							</Grid>
+							<Grid align='center'>
+								<Grid.Col span={1}>
+									<ThemeIcon
+										h={'auto'}
+										w={'auto'}
+										variant='subtle'
+										c={'var(--color-text-pri)'}
+									>
+										<WiSunrise size={32} />
+									</ThemeIcon>
+								</Grid.Col>
+								<Grid.Col span={3}>
+									<Text>{sunStates[0]?.sunrise}</Text>
+								</Grid.Col>
+								<Grid.Col span={1}>
+									<ThemeIcon
+										h={'auto'}
+										w={'auto'}
+										variant='subtle'
+										c={'var(--color-text-pri)'}
+									>
+										<WiSunset size={32} />
+									</ThemeIcon>
+								</Grid.Col>
+								<Grid.Col span={3}>
+									<Text>{sunStates[0]?.sunset}</Text>
+								</Grid.Col>
+							</Grid>
+							<Grid align='center'>
+								<Grid.Col span={1}>
+									<ThemeIcon
+										h={'auto'}
+										w={'auto'}
+										variant='subtle'
+										c={'var(--color-text-pri)'}
+									>
+										<WiHumidity size={32} />
+									</ThemeIcon>
+								</Grid.Col>
+								<Grid.Col span={3}>
+									<Text>Humidity</Text>
+								</Grid.Col>
+								<Grid.Col span={2}>
+									<Text>{current.humidity}%</Text>
+								</Grid.Col>
+							</Grid>
+							<Grid align='center'>
+								<Grid.Col span={1}>
+									<ThemeIcon
+										h={'auto'}
+										w={'auto'}
+										variant='subtle'
+										c={'var(--color-text-pri)'}
+									>
+										<FaWind size={32} />
+									</ThemeIcon>
+								</Grid.Col>
+								<Grid.Col span={3}>
+									<Text>Wind</Text>
+								</Grid.Col>
+								<Grid.Col span={2}>
+									<Text>{current.windSpeed}mph</Text>
+								</Grid.Col>
+							</Grid>
+							<Grid align='center'>
+								<Grid.Col span={1}>
+									<ThemeIcon
+										h={'auto'}
+										w={'auto'}
+										variant='subtle'
+										c={'var(--color-text-pri)'}
+									>
+										<WiBarometer size={32} />
+									</ThemeIcon>
+								</Grid.Col>
+								<Grid.Col span={3}>
+									<Text>Pressure</Text>
+								</Grid.Col>
+								<Grid.Col span={2}>
+									<Text>{current.pressure} in</Text>
+								</Grid.Col>
+							</Grid>
+						</Stack>
+					</Group>
 				</Stack>
-			</Group>
-		</Stack>
+			) : (
+				<></>
+			)}
+		</>
 	);
 }

src/components/WeatherModal/WeatherModal.tsx

@@ -79,7 +79,7 @@ export function WeatherModal({
 				<Modal.Body m={0}>
 					<Center w={'100%'}>
 						<Stack w={'100%'}>
-							<CurrentWeather weather={current} />
+							<CurrentWeather current={current} />
 							<WeatherGraphs hourlyForecast={hourlyForecast} />
 							<ExtendedForecast forecast={extendedForecast} />
 						</Stack>