Added humidity option to weather widget

CHANGELOG.md

@@ -1,4 +1,5 @@
 ### v2.0.1 (TBA)
+- Added option to display humidity in the weather widget ([#136](https://github.com/pawelmalak/flame/issues/136))
 - Added option to set default theme for all new users ([#165](https://github.com/pawelmalak/flame/issues/165))
 - Fixed bug with custom icons not working with apps when "pin by default" was disabled
 

client/src/components/Settings/WeatherSettings/WeatherSettings.tsx

@@ -11,7 +11,7 @@ import { State } from '../../../store/reducers';
 import { ApiResponse, Weather, WeatherForm } from '../../../interfaces';
 
 // UI
-import { InputGroup, Button } from '../../UI';
+import { InputGroup, Button, SettingsHeadline } from '../../UI';
 
 // Utils
 import { inputHandler, weatherSettingsTemplate } from '../../../utility';
@@ -84,6 +84,8 @@ export const WeatherSettings = (): JSX.Element => {
 
   return (
     <form onSubmit={(e) => formSubmitHandler(e)}>
+      <SettingsHeadline text="API" />
+      {/* API KEY */}
       <InputGroup>
         <label htmlFor="WEATHER_API_KEY">API key</label>
         <input
@@ -104,8 +106,10 @@ export const WeatherSettings = (): JSX.Element => {
         </span>
       </InputGroup>
 
+      <SettingsHeadline text="Location" />
+      {/* LAT */}
       <InputGroup>
-        <label htmlFor="lat">Location latitude</label>
+        <label htmlFor="lat">Latitude</label>
         <input
           type="number"
           id="lat"
@@ -128,8 +132,9 @@ export const WeatherSettings = (): JSX.Element => {
         </span>
       </InputGroup>
 
+      {/* LONG */}
       <InputGroup>
-        <label htmlFor="long">Location longitude</label>
+        <label htmlFor="long">Longitude</label>
         <input
           type="number"
           id="long"
@@ -142,6 +147,8 @@ export const WeatherSettings = (): JSX.Element => {
         />
       </InputGroup>
 
+      <SettingsHeadline text="Other" />
+      {/* TEMPERATURE */}
       <InputGroup>
         <label htmlFor="isCelsius">Temperature unit</label>
         <select
@@ -155,6 +162,20 @@ export const WeatherSettings = (): JSX.Element => {
         </select>
       </InputGroup>
 
+      {/* WEATHER DATA */}
+      <InputGroup>
+        <label htmlFor="weatherData">Additional weather data</label>
+        <select
+          id="weatherData"
+          name="weatherData"
+          value={formData.weatherData}
+          onChange={(e) => inputChangeHandler(e)}
+        >
+          <option value="cloud">Cloud coverage</option>
+          <option value="humidity">Humidity</option>
+        </select>
+      </InputGroup>
+
       <Button>Save changes</Button>
     </form>
   );

client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx

@@ -13,22 +13,14 @@ import classes from './WeatherWidget.module.css';
 // UI
 import { WeatherIcon } from '../../UI';
 import { State } from '../../../store/reducers';
+import { weatherTemplate } from '../../../utility/templateObjects/weatherTemplate';
 
 export const WeatherWidget = (): JSX.Element => {
-  const { loading, config } = useSelector((state: State) => state.config);
+  const { loading: configLoading, config } = useSelector(
+    (state: State) => state.config
+  );
 
-  const [weather, setWeather] = useState<Weather>({
-    externalLastUpdate: '',
-    tempC: 0,
-    tempF: 0,
-    isDay: 1,
-    cloud: 0,
-    conditionText: '',
-    conditionCode: 1000,
-    id: -1,
-    createdAt: new Date(),
-    updatedAt: new Date(),
-  });
+  const [weather, setWeather] = useState<Weather>(weatherTemplate);
   const [isLoading, setIsLoading] = useState(true);
 
   // Initial request to get data
@@ -65,8 +57,7 @@ export const WeatherWidget = (): JSX.Element => {
 
   return (
     <div className={classes.WeatherWidget}>
-      {isLoading ||
-        loading ||
+      {configLoading ||
         (config.WEATHER_API_KEY && weather.id > 0 && (
           <Fragment>
             <div className={classes.WeatherIcon}>
@@ -76,12 +67,15 @@ export const WeatherWidget = (): JSX.Element => {
               />
             </div>
             <div className={classes.WeatherDetails}>
+              {/* TEMPERATURE */}
               {config.isCelsius ? (
                 <span>{weather.tempC}°C</span>
               ) : (
                 <span>{weather.tempF}°F</span>
               )}
-              <span>{weather.cloud}%</span>
+
+              {/* ADDITIONAL DATA */}
+              <span>{weather[config.weatherData]}%</span>
             </div>
           </Fragment>
         ))}

client/src/interfaces/Config.ts

@@ -1,3 +1,5 @@
+import { WeatherData } from '../types';
+
 export interface Config {
   WEATHER_API_KEY: string;
   lat: number;
@@ -26,4 +28,6 @@ export interface Config {
   monthSchema: string;
   showTime: boolean;
   defaultTheme: string;
+  isKilometer: boolean;
+  weatherData: WeatherData;
 }

client/src/interfaces/Forms.ts

@@ -1,8 +1,11 @@
+import { WeatherData } from '../types';
+
 export interface WeatherForm {
   WEATHER_API_KEY: string;
   lat: number;
   long: number;
   isCelsius: boolean;
+  weatherData: WeatherData;
 }
 
 export interface SearchForm {

client/src/interfaces/Weather.ts

@@ -8,4 +8,7 @@ export interface Weather extends Model {
   cloud: number;
   conditionText: string;
   conditionCode: number;
-}
+  humidity: number;
+  windK: number;
+  windM: number;
+}

client/src/types/WeatherData.ts

@@ -0,0 +1 @@
+export type WeatherData = 'cloud' | 'humidity';

client/src/types/index.ts

@@ -1 +1,2 @@
 export * from './ConfigFormData';
+export * from './WeatherData';

client/src/utility/templateObjects/configTemplate.ts

@@ -29,4 +29,6 @@ export const configTemplate: Config = {
     'January;February;March;April;May;June;July;August;September;October;November;December',
   showTime: false,
   defaultTheme: 'tron',
+  isKilometer: true,
+  weatherData: 'cloud',
 };

client/src/utility/templateObjects/settingsTemplate.ts

@@ -29,6 +29,7 @@ export const weatherSettingsTemplate: WeatherForm = {
   lat: 0,
   long: 0,
   isCelsius: true,
+  weatherData: 'cloud',
 };
 
 export const searchSettingsTemplate: SearchForm = {

client/src/utility/templateObjects/weatherTemplate.ts

@@ -0,0 +1,17 @@
+import { Weather } from '../../interfaces';
+
+export const weatherTemplate: Weather = {
+  externalLastUpdate: '',
+  tempC: 0,
+  tempF: 0,
+  isDay: 1,
+  cloud: 0,
+  conditionText: '',
+  conditionCode: 1000,
+  id: -1,
+  createdAt: new Date(),
+  updatedAt: new Date(),
+  humidity: 0,
+  windK: 0,
+  windM: 0,
+};