Add weather info to city info local forecast

components/CCIcon.tsx

@@ -10,10 +10,8 @@ const CCIcon = ({ iconCode, windData }: CCIconProps) => {
     const [icon, setIcon] = React.useState<Icons2010>(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 (

components/Display.tsx

@@ -69,6 +69,7 @@ const Display = ({ isReady, winSize, location, language, setMainVol }: DisplayPr
 
     const [locInfo, setLocInfo] = React.useState<Partial<Location>>(defaults);
     const [currentInfo, setCurrentInfo] = React.useState<Partial<CurrentCond>>(currentDefaults);
+    const [extraInfo, setExtraInfo] = React.useState<Map<string, Partial<CurrentCond>>>(new Map<string, Partial<CurrentCond>>());
 
     const [alerts, setAlerts] = React.useState<Alert[]>([]);
     const [focusedAlert, setFocusedAlert] = React.useState<Alert>(null);
@@ -152,7 +153,7 @@ const Display = ({ isReady, winSize, location, language, setMainVol }: DisplayPr
         <div id="main" ref={mainRef} className="relative top-1/2 left-1/2 overflow-hidden w-main h-main">
             <img className="block max-h-full max-w-full" src="/images/template-4k.png" alt="background" />
             <SlideBg />
-            {isReady && <SlidesContainer setMainVol={setMainVol} />}
+            {isReady && <SlidesContainer setMainVol={setMainVol} currentCityInfo={currentInfo} />}
             {locInfo.timezone !== "" && <DateTime tz={locInfo.timezone} />}
             {locInfo.city !== "" && <div
                 id="city"

components/Slides/Containers/Slides/CityInfo/Detailed.tsx

@@ -1,11 +1,22 @@
 import * as React from "react";
+import type { CurrentCond } from "../../../../../hooks/useWeather";
 import { Icons2010, getIcon } from "../../../../../hooks/useIconMap";
 import { motion } from "framer-motion";
 import FrostPane from "../FrostPane";
 
-const Detailed = () => {
+interface DetailedProps {
+    city?: string
+    info?: Partial<CurrentCond>
+}
+
+const Detailed = ({ city, info }: DetailedProps) => {
     const [icon, setIcon] = React.useState<Icons2010>(Icons2010.UNK);
 
+    React.useEffect(() => {
+        const mapped = getIcon(info.icon, info.windSpeed);
+        setIcon(mapped);
+    }, [info]);
+
     return (
         <>
             <motion.div
@@ -21,7 +32,7 @@ const Detailed = () => {
                 <span
                     id="subhead-city"
                     className="font-frutiger text-subhead-city pt-0 transform -translate-y-43-5 scale-x-105-9 scale-y-100 origin-right right-subhead-city-r font-stretch-semi-exp absolute top-1/2"
-                >N/A</span>
+                >{city}</span>
             </motion.div>
             <motion.div
                 initial={{ opacity: 0 }}
@@ -63,19 +74,19 @@ const Detailed = () => {
                         <br />
                         Wind Chill
                     </div>
-                    <div id="frost-pane-data" className="absolute pt-[5px] leading-[182.5%] font-frutiger57-cond transform scale-x-113-5 scale-y-100 origin-right right-[10%] text-[37.5px] text-right">
-                        82%
+                    {info && <div id="frost-pane-data" className="absolute pt-[5px] leading-[182.5%] font-frutiger57-cond transform scale-x-113-5 scale-y-100 origin-right right-[10%] text-[37.5px] text-right">
+                        {`${info.humidity}%`}
                         <br />
-                        39
+                        {info.dewpt}
                         <br />
-                        30.22
+                        {info.pres}
                         <br/>
-                        S 7
+                        {info.wind}
                         <br/>
                         none
                         <br />
-                        40
-                    </div>
+                        {info.chill.toString()}
+                    </div>}
                 </FrostPane>
                 <FrostPane
                     id="right"
@@ -90,14 +101,16 @@ const Detailed = () => {
                         className="bg-no-repeat bg-cover bg-info-icon w-[212px] h-[212px] transform -translate-y-[5px]"
                         style={{ backgroundImage: `url(/images/icons2010/${icon}.png)` }}
                     />
-                    <div
-                        id="conditions"
-                        className="flex items-center justify-center absolute text-[36px] font-medium leading-[110%] top-[220px] text-center capitalize break-word w-[25%] h-[50px] transform -translate-x-[11px] translate-y-0 scale-x-[104.5%] scale-y-100"
-                    >N/A</div>
-                    <div
-                        id="temp"
-                        className="font-frutigerbold-cn text-[69px] font-bold absolute top-[323px] tracking-[2.5px] transform -translate-x-6px translate-y-0 scale-x-102-5 scale-y-100 origin-left"
-                    >NaN</div>
+                    {info && <>
+                        <div
+                            id="conditions"
+                            className="flex items-center justify-center absolute text-[36px] font-medium leading-[110%] top-[220px] text-center capitalize break-word w-[25%] h-[50px] transform -translate-x-[11px] translate-y-0 scale-x-[104.5%] scale-y-100"
+                        >{info.phrase}</div>
+                        <div
+                            id="temp"
+                            className="font-frutigerbold-cn text-[69px] font-bold absolute top-[323px] tracking-[2.5px] transform -translate-x-6px translate-y-0 scale-x-102-5 scale-y-100 origin-left"
+                        >{info.temp}</div>
+                    </>}
                 </FrostPane>
             </motion.div>
         </>

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</motion.div>;
             case 2:
-                return <Detailed />;
+                return <Detailed info={currentCityInfo} />;
             default:
                 return null;
         }

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<React.SetStateAction<number>>
+    currentCityInfo?: Partial<CurrentCond>
 }
 
-const SlidesContainer = ({ setMainVol }: SlidesContainerProps) => {    
+const SlidesContainer = ({ setMainVol, currentCityInfo }: SlidesContainerProps) => {    
     const [slideState, slideDispatch] = React.useReducer(SlideshowReducer, { index: 0 });
     const [vocal, setVocal] = React.useState<VocalMale | VocalFemale>(VocalFemale.CURRENT_COND);
     const [headerWillUpdate, setHeaderUpdate] = React.useState<boolean>(false);
@@ -37,7 +39,7 @@ const SlidesContainer = ({ setMainVol }: SlidesContainerProps) => {
             case Slides.INTRO:
                 return <CityIntro next={SlideCallback} />;
             case Slides.INFO:
-                return <CityInfo next={SlideCallback} />;
+                return <CityInfo next={SlideCallback} currentCityInfo={currentCityInfo} />;
             default:
                 return null;
         }

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) {

hooks/useSlides.ts

@@ -1,9 +1,12 @@
+import type { CurrentCond } from "./useWeather";
+
 export const enum Slides {
     INTRO,
     INFO
 }
 
 export interface SlideProps {
+    currentCityInfo?: Partial<CurrentCond>
     next?: () => void
 }
 

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<WeatherAPILocation>
 }
 
+interface WeatherAPIExtraLocResponse {
+    location: Partial<WeatherAPIExtraLoc>
+}
+
 // 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 => {