Move all common data interfaces to utils

src/Components/MultiDayForecast/Component.tsx

@@ -1,20 +1,16 @@
 import * as React from 'react';
 import '../../../node_modules/open-weather-icons/dist/css/open-weather-icons.css';
 import './Component.css';
-import { Forecast5Days, ForecaseAtInstance } from '../WeatherApp';
+
 import { SingleDayForecast } from '../SingleDayForecast';
-import { Utils } from '../../Utils';
+import { Utils, Forecast5DaysMixed, Forecast5DaysSeperated } from '../../Utils';
 
 export interface MultiDayForecastProps {
-  forecast5Days: Forecast5Days;
+  forecast5DaysMixed: Forecast5DaysMixed;
 }
 
 export interface MultiDayForecastState {
-  forecastDay1: Array<ForecaseAtInstance>;
+  forecast5DaysSeperated: Forecast5DaysSeperated;
-  forecastDay2: Array<ForecaseAtInstance>;
-  forecastDay3: Array<ForecaseAtInstance>;
-  forecastDay4: Array<ForecaseAtInstance>;
-  forecastDay5: Array<ForecaseAtInstance>;
 }
 
 export class MultiDayForecast extends React.Component<MultiDayForecastProps, MultiDayForecastState> {
@@ -33,32 +29,46 @@ export class MultiDayForecast extends React.Component<MultiDayForecastProps, Mul
 
   extractStateFromProps(props: MultiDayForecastProps): MultiDayForecastState {
     const tempState: MultiDayForecastState = {
+      forecast5DaysSeperated: {
         forecastDay1: [],
         forecastDay2: [],
         forecastDay3: [],
         forecastDay4: [],
         forecastDay5: [],
+      }
     };
 
+    const forecast5DaysSeperated = tempState.forecast5DaysSeperated;
+
     const day1 = Utils.createTodayDateInIndiaTZ(),
       day2 = day1.clone().add(1, 'd'),
       day3 = day1.clone().add(2, 'd'),
       day4 = day1.clone().add(3, 'd'),
       day5 = day1.clone().add(4, 'd');
 
-    props.forecast5Days.list.forEach((forecastAtInstanceValue) => {
+    props.forecast5DaysMixed.list.forEach((forecastAtInstanceValue) => {
       const forecastDay = Utils.createDateFromEpochInIndiaTZ(forecastAtInstanceValue.dt);
 
       if (Utils.checkSameDayInSameTZ(forecastDay, day1)) {
-        tempState.forecastDay1.push(forecastAtInstanceValue);
+
+        forecast5DaysSeperated.forecastDay1.push(forecastAtInstanceValue);
+
       } else if (Utils.checkSameDayInSameTZ(forecastDay, day2)) {
-        tempState.forecastDay2.push(forecastAtInstanceValue);
+
+        forecast5DaysSeperated.forecastDay2.push(forecastAtInstanceValue);
+
       } else if (Utils.checkSameDayInSameTZ(forecastDay, day3)) {
-        tempState.forecastDay3.push(forecastAtInstanceValue);
+
+        forecast5DaysSeperated.forecastDay3.push(forecastAtInstanceValue);
+
       } else if (Utils.checkSameDayInSameTZ(forecastDay, day4)) {
-        tempState.forecastDay4.push(forecastAtInstanceValue);
+
+        forecast5DaysSeperated.forecastDay4.push(forecastAtInstanceValue);
+
       } else if (Utils.checkSameDayInSameTZ(forecastDay, day5)) {
-        tempState.forecastDay5.push(forecastAtInstanceValue);
+
+        forecast5DaysSeperated.forecastDay5.push(forecastAtInstanceValue);
+
       } else {
         // Because it is rolling 5 days, last few times can fall into (today + 5) th day
         // Just skip those values
@@ -70,13 +80,30 @@ export class MultiDayForecast extends React.Component<MultiDayForecastProps, Mul
   }
 
   render() {
+    const forecast5DaysSeperated = this.state.forecast5DaysSeperated;
+
     return (
       <div className="MultiDayForecast">
-        <SingleDayForecast forecastDay={this.state.forecastDay1} />
+        <SingleDayForecast
-        <SingleDayForecast forecastDay={this.state.forecastDay2} />
+          forecastCurrentDay={forecast5DaysSeperated.forecastDay1}
-        <SingleDayForecast forecastDay={this.state.forecastDay3} />
+          forecast5DaysSeperated={forecast5DaysSeperated}
-        <SingleDayForecast forecastDay={this.state.forecastDay4} />
+        />
-        <SingleDayForecast forecastDay={this.state.forecastDay5} />
+        <SingleDayForecast
+          forecastCurrentDay={forecast5DaysSeperated.forecastDay2}
+          forecast5DaysSeperated={forecast5DaysSeperated}
+        />
+        <SingleDayForecast
+          forecastCurrentDay={forecast5DaysSeperated.forecastDay3}
+          forecast5DaysSeperated={forecast5DaysSeperated}
+        />
+        <SingleDayForecast
+          forecastCurrentDay={forecast5DaysSeperated.forecastDay4}
+          forecast5DaysSeperated={forecast5DaysSeperated}
+        />
+        <SingleDayForecast
+          forecastCurrentDay={forecast5DaysSeperated.forecastDay5}
+          forecast5DaysSeperated={forecast5DaysSeperated}
+        />
       </div>
     );
   }

src/Components/SingleDayForecast/Component.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import './Component.css';
-import { ForecaseAtInstance } from '../WeatherApp';
+import { Forecast5DaysSeperated, ForecaseAtInstance } from '../../Utils';
 
 export interface SingleDayForecastProps {
-  forecastDay: Array<ForecaseAtInstance>;
+  forecastCurrentDay: Array<ForecaseAtInstance>;
+  forecast5DaysSeperated: Forecast5DaysSeperated;
 }
 
 export class SingleDayForecast extends React.Component<SingleDayForecastProps, {}> {
@@ -23,7 +24,12 @@ export class SingleDayForecast extends React.Component<SingleDayForecastProps, {
   render() {
     return (
       <div className="SingleDayForecast">
-        {JSON.stringify(this.props)};
+        <div className="forecast-summary">
+          {JSON.stringify(this.calcSummary())};
+        </div>
+        <div className="forecast-details">
+          BLANK
+        </div>
       </div>
     );
   }

src/Components/WeatherApp/App.tsx

@@ -2,47 +2,11 @@ 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';
 
-export interface ForecaseAtInstance {
-  dt: number;
-  main: {
-    temp: number;
-    temp_min: number;
-    temp_max: number;
-    pressure: number;
-    sea_level: number;
-    grnd_level: number;
-    humidity: number;
-    temp_kf: number;
-  };
-
-  weather: [{
-    id: number;
-    main: string; // Make enum
-    description: string;
-    icon: string;
-  }];
-
-  clouds: {
-    all: number;
-  };
-
-  wind: {
-    speed: number;
-    deg: number;
-  };
-
-  dt_txt: string;
-}
-
-export interface Forecast5Days {
-  cnt: number;
-  list: Array<ForecaseAtInstance>;
-}
-
 export interface WeatherDataState {
-  data: Forecast5Days | undefined;
+  data: Forecast5DaysMixed | undefined;
 }
 
 export class WeatherApp extends React.Component<{}, WeatherDataState> {
@@ -59,7 +23,7 @@ export class WeatherApp extends React.Component<{}, WeatherDataState> {
         return response.json();
       })
       .then((responseObject) => {
-        this.setState({ data: responseObject as Forecast5Days });
+        this.setState({ data: responseObject as Forecast5DaysMixed });
       });
   }
 
@@ -67,8 +31,8 @@ export class WeatherApp extends React.Component<{}, WeatherDataState> {
     return 'Still Loading';
   }
 
-  renderDates(forecast5Days: Forecast5Days): JSX.Element | string {
+  renderDates(forecast5DaysMixed: Forecast5DaysMixed): JSX.Element | string {
-    return <MultiDayForecast forecast5Days={forecast5Days} />;
+    return <MultiDayForecast forecast5DaysMixed={forecast5DaysMixed} />;
   }
 
   render() {

src/Components/WeatherApp/index.tsx

@@ -1 +1 @@
-export { WeatherApp, ForecaseAtInstance, Forecast5Days } from './App';
+export { WeatherApp } from './App';

src/Utils/index.ts

@@ -1 +1 @@
-export { Utils, IndiaTZName } from './utils';
+export { Utils, IndiaTZName, ForecaseAtInstance, Forecast5DaysMixed, Forecast5DaysSeperated } from './utils';

src/Utils/utils.ts

@@ -21,3 +21,48 @@ export class Utils {
         return (moment1.clone().startOf('day').format() == moment2.clone().startOf('day').format());
     }
 }
+
+export interface ForecaseAtInstance {
+    dt: number;
+    main: {
+        temp: number;
+        temp_min: number;
+        temp_max: number;
+        pressure: number;
+        sea_level: number;
+        grnd_level: number;
+        humidity: number;
+        temp_kf: number;
+    };
+
+    weather: [{
+        id: number;
+        main: string; // Make enum
+        description: string;
+        icon: string;
+    }];
+
+    clouds: {
+        all: number;
+    };
+
+    wind: {
+        speed: number;
+        deg: number;
+    };
+
+    dt_txt: string;
+}
+
+export interface Forecast5DaysMixed {
+    cnt: number;
+    list: Array<ForecaseAtInstance>;
+}
+
+export interface Forecast5DaysSeperated {
+    forecastDay1: Array<ForecaseAtInstance>;
+    forecastDay2: Array<ForecaseAtInstance>;
+    forecastDay3: Array<ForecaseAtInstance>;
+    forecastDay4: Array<ForecaseAtInstance>;
+    forecastDay5: Array<ForecaseAtInstance>;
+}