diff --git a/components/CCIcon.tsx b/components/CCIcon.tsx index eb5e8ea..eb645ae 100644 --- a/components/CCIcon.tsx +++ b/components/CCIcon.tsx @@ -10,10 +10,8 @@ const CCIcon = ({ iconCode, windData }: CCIconProps) => { const [icon, setIcon] = React.useState(Icons2010.UNK); React.useEffect(() => { - if (typeof iconCode === "number" && typeof windData === "number") { - const mapped = getIcon(iconCode, windData); - setIcon(mapped); - } + const mapped = getIcon(iconCode, windData); + setIcon(mapped); }, [iconCode, windData]); return ( diff --git a/components/Display.tsx b/components/Display.tsx index 9bc3f3e..8a8b7b1 100644 --- a/components/Display.tsx +++ b/components/Display.tsx @@ -69,6 +69,7 @@ const Display = ({ isReady, winSize, location, language, setMainVol }: DisplayPr const [locInfo, setLocInfo] = React.useState>(defaults); const [currentInfo, setCurrentInfo] = React.useState>(currentDefaults); + const [extraInfo, setExtraInfo] = React.useState>>(new Map>()); const [alerts, setAlerts] = React.useState([]); const [focusedAlert, setFocusedAlert] = React.useState(null); @@ -152,7 +153,7 @@ const Display = ({ isReady, winSize, location, language, setMainVol }: DisplayPr
background - {isReady && } + {isReady && } {locInfo.timezone !== "" && } {locInfo.city !== "" &&
{ +interface DetailedProps { + city?: string + info?: Partial +} + +const Detailed = ({ city, info }: DetailedProps) => { const [icon, setIcon] = React.useState(Icons2010.UNK); + React.useEffect(() => { + const mapped = getIcon(info.icon, info.windSpeed); + setIcon(mapped); + }, [info]); + return ( <> { N/A + >{city} {
Wind Chill
-
- 82% + {info &&
+ {`${info.humidity}%`}
- 39 + {info.dewpt}
- 30.22 + {info.pres}
- S 7 + {info.wind}
none
- 40 -
+ {info.chill.toString()} +
} { className="bg-no-repeat bg-cover bg-info-icon w-[212px] h-[212px] transform -translate-y-[5px]" style={{ backgroundImage: `url(/images/icons2010/${icon}.png)` }} /> -
N/A
-
NaN
+ {info && <> +
{info.phrase}
+
{info.temp}
+ }
diff --git a/components/Slides/Containers/Slides/CityInfo/index.tsx b/components/Slides/Containers/Slides/CityInfo/index.tsx index 69c938c..018969d 100644 --- a/components/Slides/Containers/Slides/CityInfo/index.tsx +++ b/components/Slides/Containers/Slides/CityInfo/index.tsx @@ -5,7 +5,7 @@ import { motion, AnimatePresence } from "framer-motion"; import Forecast from "./Forecast"; import Detailed from "./Detailed"; -const SlideCityInfo = ({ next }: SlideProps) => { +const SlideCityInfo = ({ next, currentCityInfo }: SlideProps) => { const [slideState, slideDispatch] = React.useReducer(SlideshowReducer, { index: 0 }); const currentSlide = React.useMemo(() => { @@ -32,7 +32,7 @@ const SlideCityInfo = ({ next }: SlideProps) => { className="transform translate-x-0 translate-y-60px scale-x-114-5 scale-y-100 origin-left absolute whitespace-nowrap font-frutiger57-cond pt-noreport-t pl-tempunavailable-l text-white text-tempunavailable text-shadow z-noreport" >Temporarily Unavailable; case 2: - return ; + return ; default: return null; } diff --git a/components/Slides/Containers/SlidesContainer.tsx b/components/Slides/Containers/SlidesContainer.tsx index 4f6b220..ca131b2 100644 --- a/components/Slides/Containers/SlidesContainer.tsx +++ b/components/Slides/Containers/SlidesContainer.tsx @@ -1,4 +1,5 @@ import * as React from "react"; +import type { CurrentCond } from "../../../hooks/useWeather"; import SlideHeader from "./Headers/SlideHeader"; import { AudioPlayerProvider } from "react-use-audio-player"; import { VocalMale, VocalFemale } from "../../../components/VocalAudio"; @@ -10,9 +11,10 @@ import CityInfo from "./Slides/CityInfo"; interface SlidesContainerProps { setMainVol: React.Dispatch> + currentCityInfo?: Partial } -const SlidesContainer = ({ setMainVol }: SlidesContainerProps) => { +const SlidesContainer = ({ setMainVol, currentCityInfo }: SlidesContainerProps) => { const [slideState, slideDispatch] = React.useReducer(SlideshowReducer, { index: 0 }); const [vocal, setVocal] = React.useState(VocalFemale.CURRENT_COND); const [headerWillUpdate, setHeaderUpdate] = React.useState(false); @@ -37,7 +39,7 @@ const SlidesContainer = ({ setMainVol }: SlidesContainerProps) => { case Slides.INTRO: return ; case Slides.INFO: - return ; + return ; default: return null; } diff --git a/hooks/useIconMap.ts b/hooks/useIconMap.ts index 26527fa..674a909 100644 --- a/hooks/useIconMap.ts +++ b/hooks/useIconMap.ts @@ -102,7 +102,7 @@ const Icons2010CodeMap = Object.freeze([ Icons2010.THUNDER_NIGHT // 47 ]); -export const getIcon = (iconCode: number, windData: number) : number => { +export const getIcon = (iconCode: number, windData: number) : Icons2010 => { let icon = Icons2010CodeMap[iconCode]; if (windData >= 20) { if (icon === Icons2010.HEAVY_SNOW || icon === Icons2010.SNOW || icon === Icons2010.SNOW_ALT) { diff --git a/hooks/useSlides.ts b/hooks/useSlides.ts index e9a0b4a..56fa25f 100644 --- a/hooks/useSlides.ts +++ b/hooks/useSlides.ts @@ -1,9 +1,12 @@ +import type { CurrentCond } from "./useWeather"; + export const enum Slides { INTRO, INFO } export interface SlideProps { + currentCityInfo?: Partial next?: () => void } diff --git a/hooks/useWeather.ts b/hooks/useWeather.ts index 8df9607..d8a7fa6 100644 --- a/hooks/useWeather.ts +++ b/hooks/useWeather.ts @@ -23,10 +23,24 @@ interface WeatherAPILocation { ianaTimeZone: string[] } +interface WeatherAPIExtraLoc { + city: string + adminDistrict: string + country: string + countryCode: string + latitude: number + longitude: number + ianaTimeZone: string +} + interface WeatherAPILocResponse { location: Partial } +interface WeatherAPIExtraLocResponse { + location: Partial +} + // ip-api.com enum IPAPIStatus { SUCCESS = "success", @@ -67,6 +81,7 @@ export interface CurrentCond { humidity: number dewpt: number pres: number + chill: number } export const currentDefaults: CurrentCond = Object.freeze({ @@ -79,7 +94,8 @@ export const currentDefaults: CurrentCond = Object.freeze({ phrase: "", humidity: 0, dewpt: 0, - pres: 0 + pres: 0, + chill: NaN }); const memoAsync = (cb) => { @@ -149,8 +165,10 @@ export const getClosestLocation = async () => { export const getExtraLocations = async (lat: number, lon: number) => { return memoizedFetch(`https://api.weather.com/v3/location/near?geocode=${lat},${lon}&product=observation&format=json&apiKey=${process.env.NEXT_PUBLIC_WEATHER_API_KEY}`) - .then(res => { - + .then(async (res: Response) => { + return res.json().then((data: WeatherAPIExtraLocResponse) => { + const dataLoc = data.location; + }); }); }; @@ -172,6 +190,7 @@ export const getCurrentCond = async (lat: number, lon: number, language?: string current.humidity = dataLoc.relativeHumidity; current.dewpt = dataLoc.temperatureDewPoint; current.pres = dataLoc.pressureAltimeter.toFixed(2); + current.chill = dataLoc.temperatureWindChill; return current; }).catch(err => {