Dynamic WeatherIcon with weatherStatusCode mapping

client/src/components/Home/Home.tsx

@@ -48,10 +48,10 @@ const Home = (props: ComponentProps): JSX.Element => {
     const now = new Date().getHours();
     let msg: string;
 
-    if (now > 18) msg = 'Good evening!';
-    else if (now > 12) msg = 'Good afternoon!';
-    else if (now > 6) msg = 'Good morning!';
-    else if (now > 0) msg = 'Good night!';
+    if (now >= 18) msg = 'Good evening!';
+    else if (now >= 12) msg = 'Good afternoon!';
+    else if (now >= 6) msg = 'Good morning!';
+    else if (now >= 0) msg = 'Good night!';
     else msg = 'Hello!';
 
     return msg;

client/src/components/Settings/Settings.tsx

@@ -31,11 +31,10 @@ const Settings = (props: ComponentProps): JSX.Element => {
             activeClassName={classes.SettingsNavLinkActive}
             exact
             to='/settings/nothig'>
-            Nothing
+            Weather
           </NavLink>
         </nav>
         <section className={classes.SettingsContent}>
-          {/* <Themer /> */}
           <Switch>
             <Route exact path='/settings' component={Themer} />
           </Switch>

client/src/components/UI/Icons/WeatherIcon/IconMapping.ts

@@ -0,0 +1,369 @@
+import { IconKey } from 'skycons-ts';
+
+export interface WeatherCondition {
+  code: number;
+  icon: {
+    day: IconKey;
+    night: IconKey;
+  }
+}
+
+export enum TimeOfDay {
+  day,
+  night
+}
+
+export class IconMapping {
+  private conditions: WeatherCondition[] = [
+    {
+      code: 1000,
+      icon: {
+        day: 'clear-day',
+        night: 'clear-night'
+      }
+    },
+    {
+      code: 1003,
+      icon: {
+        day: 'partly-cloudy-day',
+        night: 'partly-cloudy-night'
+      }
+    },
+    {
+      code: 1006,
+      icon: {
+        day: 'cloudy',
+        night: 'cloudy'
+      }
+    },
+    {
+      code: 1009,
+      icon: {
+        day: 'cloudy',
+        night: 'cloudy'
+      }
+    },
+    {
+      code: 1030,
+      icon: {
+        day: 'fog',
+        night: 'fog'
+      }
+    },
+    {
+      code: 1063,
+      icon: {
+        day: 'rain-day',
+        night: 'rain-night'
+      }
+    },
+    {
+      code: 1066,
+      icon: {
+        day: 'snow-day',
+        night: 'snow-night'
+      }
+    },
+    {
+      code: 1069,
+      icon: {
+        day: 'rain-snow-day',
+        night: 'rain-snow-night'
+      }
+    },
+    {
+      code: 1072,
+      icon: {
+        day: 'sleet',
+        night: 'sleet'
+      }
+    },
+    {
+      code: 1087,
+      icon: {
+        day: 'thunder-day',
+        night: 'thunder-night'
+      }
+    },
+    {
+      code: 1114,
+      icon: {
+        day: 'snow',
+        night: 'snow'
+      }
+    },
+    {
+      code: 1117,
+      icon: {
+        day: 'snow',
+        night: 'snow'
+      }
+    },
+    {
+      code: 1135,
+      icon: {
+        day: 'fog',
+        night: 'fog'
+      }
+    },
+    {
+      code: 1147,
+      icon: {
+        day: 'fog',
+        night: 'fog'
+      }
+    },
+    {
+      code: 1150,
+      icon: {
+        day: 'rain',
+        night: 'rain'
+      }
+    },
+    {
+      code: 1153,
+      icon: {
+        day: 'rain',
+        night: 'rain'
+      }
+    },
+    {
+      code: 1168,
+      icon: {
+        day: 'sleet',
+        night: 'sleet'
+      }
+    },
+    {
+      code: 1171,
+      icon: {
+        day: 'sleet',
+        night: 'sleet'
+      }
+    },
+    {
+      code: 1180,
+      icon: {
+        day: 'rain-day',
+        night: 'rain-night'
+      }
+    },
+    {
+      code: 1183,
+      icon: {
+        day: 'rain',
+        night: 'rain'
+      }
+    },
+    {
+      code: 1186,
+      icon: {
+        day: 'rain-day',
+        night: 'rain-night'
+      }
+    },
+    {
+      code: 1189,
+      icon: {
+        day: 'rain',
+        night: 'rain'
+      }
+    },
+    {
+      code: 1192,
+      icon: {
+        day: 'rain-day',
+        night: 'rain-night'
+      }
+    },
+    {
+      code: 1195,
+      icon: {
+        day: 'rain',
+        night: 'rain'
+      }
+    },
+    {
+      code: 1198,
+      icon: {
+        day: 'sleet',
+        night: 'sleet'
+      }
+    },
+    {
+      code: 1201,
+      icon: {
+        day: 'sleet',
+        night: 'sleet'
+      }
+    },
+    {
+      code: 1204,
+      icon: {
+        day: 'rain-snow',
+        night: 'rain-snow'
+      }
+    },
+    {
+      code: 1207,
+      icon: {
+        day: 'rain-snow',
+        night: 'rain-snow'
+      }
+    },
+    {
+      code: 1210,
+      icon: {
+        day: 'snow-day',
+        night: 'snow-night'
+      }
+    },
+    {
+      code: 1213,
+      icon: {
+        day: 'snow',
+        night: 'snow'
+      }
+    },
+    {
+      code: 1216,
+      icon: {
+        day: 'snow-day',
+        night: 'snow-night'
+      }
+    },
+    {
+      code: 1219,
+      icon: {
+        day: 'snow',
+        night: 'snow'
+      }
+    },
+    {
+      code: 1222,
+      icon: {
+        day: 'snow-day',
+        night: 'snow-night'
+      }
+    },
+    {
+      code: 1225,
+      icon: {
+        day: 'snow',
+        night: 'snow'
+      }
+    },
+    {
+      code: 1237,
+      icon: {
+        day: 'hail',
+        night: 'hail'
+      }
+    },
+    {
+      code: 1240,
+      icon: {
+        day: 'rain-day',
+        night: 'rain-night'
+      }
+    },
+    {
+      code: 1243,
+      icon: {
+        day: 'rain-day',
+        night: 'rain-night'
+      }
+    },
+    {
+      code: 1246,
+      icon: {
+        day: 'rain-day',
+        night: 'rain-night'
+      }
+    },
+    {
+      code: 1249,
+      icon: {
+        day: 'rain-snow-day',
+        night: 'rain-snow-night'
+      }
+    },
+    {
+      code: 1252,
+      icon: {
+        day: 'rain-snow-day',
+        night: 'rain-snow-night'
+      }
+    },
+    {
+      code: 1255,
+      icon: {
+        day: 'snow-day',
+        night: 'snow-night'
+      }
+    },
+    {
+      code: 1258,
+      icon: {
+        day: 'snow-day',
+        night: 'snow-night'
+      }
+    },
+    {
+      code: 1261,
+      icon: {
+        day: 'hail',
+        night: 'hail'
+      }
+    },
+    {
+      code: 1264,
+      icon: {
+        day: 'hail',
+        night: 'hail'
+      }
+    },
+    {
+      code: 1273,
+      icon: {
+        day: 'thunder-rain-day',
+        night: 'thunder-rain-night'
+      }
+    },
+    {
+      code: 1276,
+      icon: {
+        day: 'thunder-rain',
+        night: 'thunder-rain'
+      }
+    },
+    {
+      code: 1279,
+      icon: {
+        day: 'thunder-day',
+        night: 'thunder-night'
+      }
+    },
+    {
+      code: 1282,
+      icon: {
+        day: 'thunder',
+        night: 'thunder'
+      }
+    }
+  ];
+
+  mapIcon(weatherStatusCode: number, timeOfDay: TimeOfDay): IconKey {
+    const mapping = this.conditions.find((condition: WeatherCondition) => condition.code === weatherStatusCode);
+
+    if (mapping) {
+      if (timeOfDay === TimeOfDay.day) {
+        return mapping.icon.day;
+      } else if (timeOfDay === TimeOfDay.night) {
+        return mapping.icon.night;
+      }
+    }
+
+    return 'clear-day';
+  }
+}

client/src/components/UI/Icons/WeatherIcon/WeatherIcon.tsx

@@ -1,19 +1,21 @@
 import { useEffect } from 'react';
 import { connect } from 'react-redux';
-import { IconKey, Skycons } from 'skycons-ts';
+import { Skycons } from 'skycons-ts';
 import { GlobalState, Theme } from '../../../../interfaces';
+import { IconMapping, TimeOfDay } from './IconMapping';
 
 interface ComponentProps {
   theme: Theme;
-  icon: IconKey
+  weatherStatusCode: number;
 }
 
 const WeatherIcon = (props: ComponentProps): JSX.Element => {
-  const randomId = `icon-${Math.floor(Math.random() * 1000)}`;
+  const icon = (new IconMapping).mapIcon(props.weatherStatusCode, TimeOfDay.day);
+
   useEffect(() => {
     const delay = setTimeout(() => {
       const skycons = new Skycons({'color': props.theme.colors.accent});
-      skycons.add(`weather-icon-${randomId}`, props.icon);
+      skycons.add(`weather-icon`, icon);
       skycons.play();
     }, 1);
 
@@ -22,7 +24,7 @@ const WeatherIcon = (props: ComponentProps): JSX.Element => {
     }
   }, []);
 
-  return <canvas id={`weather-icon-${randomId}`} width='50' height='50'></canvas>
+  return <canvas id={`weather-icon`} width='50' height='50'></canvas>
 }
 
 const mapStateToProps = (state: GlobalState) => {