Add next open/close day panel + refactor common funcs to util

src/Components/IsNiftyOpenApp/App.css

@@ -36,7 +36,7 @@
   }
 }
 
-@media screen and (max-width: 320px){
+@media screen and (max-width: 320px) {
   .App {
     font-size: 0.3em;
   }
@@ -47,7 +47,34 @@
   height: 100%;
 }
 
+.App .upper-half {
+  width: 100%;
+  height: 80vh;
+}
+
+.App .lower-half {
+  width: 100%;
+  height: 20vh;
+  border-top: 5px solid antiquewhite;
+}
+
 .App .OpenXDay-container {
   width: 100%;
   height: 100%;
+}
+
+.App .OpenXPlusOneDay-container {
+  float: left;
+  width: 40%;
+  height: 100%;
+}
+
+.App .OpenXPlusOneDay-container .OpenXDayMini {
+  border-right: 5px solid rgba(255, 255, 255, 0.5);
+}
+
+.App .NextOpenClose-container {
+  float: right;
+  width: 60%;
+  height: 100%;
 }

src/Components/IsNiftyOpenApp/App.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { Switch, Route, Redirect } from 'react-router-dom';
+import * as moment from 'moment-timezone';
 import './App.css';
 import { OpenXDay } from '../OpenXDay';
 import { OpenXDayMini } from '../OpenXDayMini';
+import { NextOpenCloseMini } from '../NextOpenCloseMini';
 import { allHolidays } from '../../Data';
-import { Utils } from "../../Utils";
+import { Utils, OpenOrClose } from "../../Utils";
 
 enum OpenOrCloseOrClosed {
   Open = "open",
@@ -13,32 +15,49 @@ enum OpenOrCloseOrClosed {
 }
 
 class IsNiftyOpenApp extends React.Component {
+  calcOpenOrCloseForOpenCloseMini(xDay: moment.Moment) {
+    var isTodayEventHoliday = Utils.getEventHolidayOnDate(xDay, allHolidays) !== undefined;
+
+    return isTodayEventHoliday ? OpenOrClose.Open : OpenOrClose.Close;
+  }
+
   renderOpenXDay(questionString: OpenOrCloseOrClosed): React.ReactElement<{}> {
-    var question: OpenXDay.OpenOrClose;
+    var question: OpenOrClose;
     if (questionString === OpenOrCloseOrClosed.Open) {
-      question = OpenXDay.OpenOrClose.Open;
+      question = OpenOrClose.Open;
     } else {
-      question = OpenXDay.OpenOrClose.Close;
+      question = OpenOrClose.Close;
     }
 
     const xDay = Utils.createTodayDateInIndiaTZ();
-    const XPlusOneDay = xDay.add(1, "d");
+    const xPlusOneDay = xDay.clone().add(1, "d");
 
     return (
       <div className="IsNiftyOpenApp">
-        <div className="OpenXDay-container">
-          <OpenXDay
-            question={question}
-            xDay={xDay}
-            allHolidays={allHolidays}
-          />
+        <div className="upper-half">
+          <div className="OpenXDay-container">
+            <OpenXDay
+              question={question}
+              xDay={xDay}
+              allHolidays={allHolidays}
+            />
+          </div>
         </div>
-        <div className="OpenXPlusOneDay-container">
-          <OpenXDayMini
-            xDay={XPlusOneDay}
-            dateDescription={"tomorrow"}
-            allHolidays={allHolidays}
-          />
+        <div className="lower-half">
+          <div className="OpenXPlusOneDay-container">
+            <OpenXDayMini
+              xDay={xPlusOneDay}
+              dateDescription={"tomorrow"}
+              allHolidays={allHolidays}
+            />
+          </div>
+          <div className="NextOpenClose-container">
+            <NextOpenCloseMini
+              xDay={xDay}
+              openOrClose={this.calcOpenOrCloseForOpenCloseMini(xDay)}
+              allHolidays={allHolidays}
+            />
+          </div>
         </div>
       </div>
     );