From 32ec9d560b79119891d067fdd5de72df50554839 Mon Sep 17 00:00:00 2001
From: Abhas Bhattacharya <abhasbhattacharya2@gmail.com>
Date: Mon, 2 Apr 2018 02:31:15 +0530
Subject: [PATCH] Add SingleInstanceForecast

---
 .../SingleInstanceForecast/Component.css      | 23 +++++++
 .../SingleInstanceForecast/Component.tsx      | 63 +++++++++++++++++++
 .../SingleInstanceForecast/index.tsx          |  1 +
 3 files changed, 87 insertions(+)
 create mode 100644 src/Components/SingleInstanceForecast/Component.css
 create mode 100644 src/Components/SingleInstanceForecast/Component.tsx
 create mode 100644 src/Components/SingleInstanceForecast/index.tsx

diff --git a/src/Components/SingleInstanceForecast/Component.css b/src/Components/SingleInstanceForecast/Component.css
new file mode 100644
index 0000000..6b0e70d
--- /dev/null
+++ b/src/Components/SingleInstanceForecast/Component.css
@@ -0,0 +1,23 @@
+.SingleInstanceForecast {
+  position: relative;
+
+  margin: 1em 0;
+  padding-bottom: 0.25em;
+
+  font-size: 0.75em;
+}
+
+
+.SingleInstanceForecast .weather-icon-container {
+  padding: .25em 0;
+}
+
+.SingleInstanceForecast .bottom-dividor{
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  width: 1em;
+  height: 2px;
+  background-color: black;
+  transform: translateX(-50%);
+}
\ No newline at end of file
diff --git a/src/Components/SingleInstanceForecast/Component.tsx b/src/Components/SingleInstanceForecast/Component.tsx
new file mode 100644
index 0000000..8c2f0fb
--- /dev/null
+++ b/src/Components/SingleInstanceForecast/Component.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import './Component.css';
+import '../../../node_modules/open-weather-icons/dist/css/open-weather-icons.css';
+import { ForecaseAtInstance, Utils } from '../../Utils';
+
+export interface SingleInstanceForecastProps {
+  forecastAtInstance: ForecaseAtInstance;
+}
+
+export class SingleInstanceForecast extends React.Component<SingleInstanceForecastProps, {}> {
+
+  constructor(props: SingleInstanceForecastProps) {
+    super(props);
+
+    this.props = props;
+
+    // this.state = { data: undefined };
+  }
+
+  componentWillUpdate(nextProps: SingleInstanceForecastProps) {
+    this.props = this.props;
+  }
+
+  render() {
+    const day = Utils.createDateFromEpochInIndiaTZ(this.props.forecastAtInstance.dt);
+    const forecastAtInstance = this.props.forecastAtInstance;
+    const defaultWeather = forecastAtInstance.weather[0];
+
+    return (
+      <div className="SingleInstanceForecast">
+        <div className="date">
+          At {day.format('h A')}
+        </div>
+
+        <div className="weather-icon-container">
+          <div className={`weather-icon owi owi-2x owi-${defaultWeather.icon}`} />
+        </div>
+
+        <div className="weather-description">
+          {Utils.stringToNormalCase(defaultWeather.description)}
+        </div>
+
+        <div className="temp" title={`Temperature : ${forecastAtInstance.main.temp.toFixed(0)}°C`}>
+          
+          <div className="temp-value">
+            {forecastAtInstance.main.temp.toFixed(0)}&deg;C
+          </div>
+          <div className="clearfix" />
+        </div>
+
+        <div className="humidity" title={`Humidity : ${forecastAtInstance.main.humidity.toFixed(0)} %`}>
+          
+          <div className="humidity-value">
+            {forecastAtInstance.main.humidity.toFixed(0)} %
+          </div>
+          <div className="clearfix" />
+        </div>
+
+        <div className="bottom-dividor" />
+      </div>
+    );
+  }
+}
diff --git a/src/Components/SingleInstanceForecast/index.tsx b/src/Components/SingleInstanceForecast/index.tsx
new file mode 100644
index 0000000..c70ccea
--- /dev/null
+++ b/src/Components/SingleInstanceForecast/index.tsx
@@ -0,0 +1 @@
+export { SingleDayForecast } from './Component';
\ No newline at end of file