Summary calc in SIngleDay + Remove icon css from App

src/Components/SingleDayForecast/Component.tsx

@@ -1,12 +1,15 @@
 import * as React from 'react';
 import './Component.css';
-import { Forecast5DaysSeperated, ForecaseAtInstance } from '../../Utils';
+import '../../../node_modules/open-weather-icons/dist/css/open-weather-icons.css';
+import { Forecast5DaysSeperated, ForecaseAtInstance, Utils } from '../../Utils';
 
 export interface SingleDayForecastProps {
   forecastCurrentDay: Array<ForecaseAtInstance>;
   forecast5DaysSeperated: Forecast5DaysSeperated;
 }
 
+type numberOrString = number | string;
+
 export class SingleDayForecast extends React.Component<SingleDayForecastProps, {}> {
 
   constructor(props: SingleDayForecastProps) {
@@ -21,7 +24,12 @@ export class SingleDayForecast extends React.Component<SingleDayForecastProps, {
     this.props = this.props;
   }
 
-  calcSummary(): { avgTemp: number, avgHumidity: number } {
+  calcSummary(): {
+    avgTemp: number,
+    avgHumidity: number,
+    modeWeatherDescription: string,
+    modeWeatherIcon: string
+  } {
     let avgTemp: number, avgHumidity: number;
     {
       const sumTemp = this.props.forecastCurrentDay.reduce(
@@ -40,17 +48,89 @@ export class SingleDayForecast extends React.Component<SingleDayForecastProps, {
       avgHumidity = sumHumidity / this.props.forecastCurrentDay.length;
     }
 
-    return { avgTemp, avgHumidity };
+    const allWeatherDescriptions = this.props.forecastCurrentDay.map(
+      (forecastInstance) =>
+        forecastInstance.weather[0].description
+    );
+
+    const allWeatherIcons = this.props.forecastCurrentDay.map(
+      (forecastInstance) =>
+        forecastInstance.weather[0].icon
+    );
+
+    const modeWeatherDescription = this.mode(allWeatherDescriptions) as string;
+    const modeWeatherIcon = this.mode(allWeatherIcons) as string;
+
+    return { avgTemp, avgHumidity, modeWeatherDescription, modeWeatherIcon };
+  }
+
+  mode<T extends numberOrString>(elements: Array<T>): T | null {
+    if (elements.length === 0) {
+      return null;
+    }
+
+    var modeMap: { [key: string]: number } = {};
+
+    var maxEl = elements[0], maxCount = 0;
+
+    for (var i = 0; i < elements.length; i++) {
+      const tmpElement = elements[i];
+      const tmpElementString = tmpElement.toString();
+
+      modeMap[tmpElementString] = (modeMap[tmpElementString] || 0) + 1;
+
+      if (modeMap[tmpElementString] > maxCount) {
+        maxEl = tmpElement;
+        maxCount = modeMap[tmpElementString];
+      }
+    }
+    return maxEl;
   }
 
   render() {
+    const day = Utils.createDateFromEpochInIndiaTZ(this.props.forecastCurrentDay[0].dt);
+    const summary = this.calcSummary();
+
     return (
       <div className="SingleDayForecast">
-        <div className="forecast-summary">
-          {JSON.stringify(this.calcSummary())};
+        <div className="SingleDayForecast-inner">
+          <div className="forecast-summary">
+
+            <div className="summary-weather-icon-container">
+              <div className={`summary-weather-icon owi owi-3x owi-${summary.modeWeatherIcon}`} />
+            </div>
+
+            <div className="summary-date">
+              {day.format('Do MMM')}
+            </div>
+
+            <div className="summary-weather-description">
+              {Utils.stringToNormalCase(summary.modeWeatherDescription)}
+            </div>
+
+            <div className="summary-temp" title={`Temperature : ${summary.avgTemp.toFixed(0)}°C`}>
+              <div className="temp-desc">
+                T :
+              </div>
+              <div className="temp-value">
+                {summary.avgTemp.toFixed(0)}&deg;C
+              </div>
+              <div className="clearfix"/>
+            </div>
+
+            <div className="summary-humidity" title={`Humidity : ${summary.avgHumidity.toFixed(0)} %`}>
+              <div className="humidity-desc">
+                H :
+              </div>
+              <div className="humidity-value">
+                {summary.avgHumidity.toFixed(0)} %
+              </div>
+              <div className="clearfix"/>
+            </div>
+          </div>
+          <div className="forecast-details">
+            BLANK
         </div>
-        <div className="forecast-details">
-          BLANK
         </div>
       </div>
     );

src/Components/WeatherApp/App.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 // import * as moment from 'moment';
-import '../../../node_modules/open-weather-icons/dist/css/open-weather-icons.css';
 import './App.css';
 import { Forecast5DaysMixed } from '../../Utils';
 import { MultiDayForecast } from '../MultiDayForecast';
@@ -18,7 +17,8 @@ export class WeatherApp extends React.Component<{}, WeatherDataState> {
   }
 
   componentDidMount() {
-    fetch('https://api.openweathermap.org/data/2.5/forecast?q=kolkata&appid=d65cee3c5866168080fa1c4177fdb4a8')
+    // tslint:disable-next-line:max-line-length
+    fetch('https://api.openweathermap.org/data/2.5/forecast?q=kolkata&units=metric&appid=d65cee3c5866168080fa1c4177fdb4a8')
       .then((response) => {
         return response.json();
       })

src/Utils/utils.ts

@@ -20,6 +20,22 @@ export class Utils {
         // tslint:disable-next-line:triple-equals
         return (moment1.clone().startOf('day').format() == moment2.clone().startOf('day').format());
     }
+
+    static numberToMaxFixed(originalNumber: number, maxAfterDecimal: number = 2): number {
+        return parseFloat(originalNumber.toFixed(maxAfterDecimal));
+    }
+
+    static stringToNormalCase(originalString: string): string {
+        if (originalString.length > 0) {
+            const firstChar = originalString[0];
+
+            const firstCharUpper = firstChar.toUpperCase();
+            const restString = originalString.slice(1, originalString.length);
+            return [firstCharUpper, restString].join('');
+        } else {
+            return originalString;
+        }
+    }
 }
 
 export interface ForecaseAtInstance {