Add tomorrow status container

src/Components/IsNiftyOpenApp/App.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Switch, Route, Redirect } from 'react-router-dom';
 import './App.css';
 import { OpenXDay } from '../OpenXDay';
+import { OpenXDayMini } from '../OpenXDayMini';
 import { allHolidays } from '../../Data';
 import { Utils } from "../../Utils";
 
@@ -20,13 +21,25 @@ class IsNiftyOpenApp extends React.Component {
       question = OpenXDay.OpenOrClose.Close;
     }
 
+    const xDay = Utils.createTodayDateInIndiaTZ();
+    const XPlusOneDay = xDay.add(1, "d");
+
     return (
-      <div className="OpenXDay-container">
-        <OpenXDay
-          question={question}
-          xDay={Utils.createTodayDateInIndiaTZ()}
-          allHolidays={allHolidays}
-        />
+      <div className="IsNiftyOpenApp">
+        <div className="OpenXDay-container">
+          <OpenXDay
+            question={question}
+            xDay={xDay}
+            allHolidays={allHolidays}
+          />
+        </div>
+        <div className="OpenXPlusOneDay-container">
+          <OpenXDayMini
+            xDay={XPlusOneDay}
+            dateDescription={"tomorrow"}
+            allHolidays={allHolidays}
+          />
+        </div>
       </div>
     );
   }

src/Components/OpenXDayMini/Component.css

@@ -0,0 +1,16 @@
+@import "../../Utils/utils.css";
+
+.OpenXDayMini {
+    width: 100%;
+    height: 100%;
+    font-size: 4em;
+    background-color: rgba(0, 0, 0, 0.75);
+}
+
+.OpenXDayMini.green {
+    background-color: #2ECC40;
+}
+
+.OpenXDayMini.red {
+    background-color: #FF4136;
+}

src/Components/OpenXDayMini/Component.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import * as moment from 'moment-timezone';
+import * as Linq from 'linq';
+import * as classnames from 'classnames';
+import "./Component.css";
+import { Holiday, HolidayList, getWeekendHoliday } from '../../Data/index';
+
+export interface OpenXDayProps {
+    xDay: moment.Moment;
+    dateDescription: string;
+    allHolidays: HolidayList;
+}
+
+export class OpenXDayMini extends React.Component<OpenXDayProps, {}> {
+    xDay: moment.Moment;
+    dateDescription: string;
+    allHolidays: HolidayList;
+
+    answer: { open: boolean, holiday: Holiday | undefined };
+
+    static checkSameDayInSameTZ(moment1: moment.Moment, moment2: moment.Moment, raiseErrorTZMismatch: boolean = true) {
+        // tslint:disable-next-line:triple-equals
+        if (raiseErrorTZMismatch && (moment1.tz() != moment2.tz())) {
+            throw new Error("Timezones don't match");
+        }
+
+        // tslint:disable-next-line:triple-equals
+        return (moment1.startOf("day").format() == moment2.startOf("day").format());
+    }
+
+    constructor(props: OpenXDayProps) {
+        super(props);
+        this.xDay = props.xDay;
+        this.dateDescription = props.dateDescription;
+        this.allHolidays = props.allHolidays;
+
+        this.processAnswer();
+    }
+
+    processAnswer(): void {
+        {
+            const matchingHoliday = Linq
+                .from<Holiday>(this.allHolidays)
+                .firstOrDefault(
+                    (eachHoliday, _tmp) => OpenXDayMini.checkSameDayInSameTZ(this.xDay, eachHoliday.Date)
+                );
+
+            if (matchingHoliday === null) {
+                this.answer = { open: true, holiday: undefined };
+            } else {
+                this.answer = { open: false, holiday: matchingHoliday };
+            }
+        }
+
+        {
+            const weekendHoliday = getWeekendHoliday(this.xDay);
+
+            if (typeof weekendHoliday !== "undefined") {
+                this.answer = { open: false, holiday: weekendHoliday };
+            }
+        }
+    }
+
+    render() {
+        const bgColorClass = (this.answer.open ? "green" : "red");
+
+        return (
+            <div className={classnames([bgColorClass, "OpenXDayMini"])} >
+                <div className="OpenXDayMini-inner">
+                    <div className="openOrCloseText">
+                        {this.answer.open ? "Open" : "Closed"}
+                    </div>
+                    <div className="dateDescription">
+                        {this.dateDescription}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export module OpenXDayMini {
+    export enum OpenOrClose {
+        Open = 'open',
+        Close = 'closed'
+    }
+}

src/Components/OpenXDayMini/index.tsx

@@ -0,0 +1 @@
+export { OpenXDayMini } from './Component';