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

src/Components/OpenXDayMini/Component.css

@@ -1,16 +1,34 @@
 @import "../../Utils/utils.css";
-
 .OpenXDayMini {
     width: 100%;
     height: 100%;
-    font-size: 4em;
     background-color: rgba(0, 0, 0, 0.75);
+
+    color: rgba(255, 255, 255, 0.60);
+    
+    font-size: 2em;
+    position: relative;
 }
 
-.OpenXDayMini.green {
-    background-color: #2ECC40;
+@media screen and (max-width: 600px) {
+    .OpenXDayMini {
+        font-size: 3em;
+    }
 }
 
-.OpenXDayMini.red {
-    background-color: #FF4136;
+.OpenXDayMini-inner {
+    position: absolute;
+    text-align: right;
+    right: 1em;
+    top: 50%;
+    width: 80%;
+    transform: translate(0, -50%);
 }
+
+.OpenXDayMini .green-text {
+    color: rgba(46, 204, 64, 0.75);
+}
+
+.OpenXDayMini .red-text {
+    color: rgba(255, 64, 54, 0.75);
+}

src/Components/OpenXDayMini/Component.tsx

@@ -1,73 +1,39 @@
 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';
+import { HolidayList } from '../../Data';
+import { Utils, HolidayAnswer } from "../../Utils";
 
-export interface OpenXDayProps {
+export interface OpenXDayMiniProps {
     xDay: moment.Moment;
     dateDescription: string;
     allHolidays: HolidayList;
 }
 
-export class OpenXDayMini extends React.Component<OpenXDayProps, {}> {
+export class OpenXDayMini extends React.Component<OpenXDayMiniProps, {}> {
     xDay: moment.Moment;
     dateDescription: string;
     allHolidays: HolidayList;
 
-    answer: { open: boolean, holiday: Holiday | undefined };
+    answer: HolidayAnswer;
 
-    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) {
+    constructor(props: OpenXDayMiniProps) {
         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 };
-            }
-        }
+        this.answer = Utils.getHolidayAnswerOnDate(this.xDay, this.allHolidays);
     }
 
     render() {
-        const bgColorClass = (this.answer.open ? "green" : "red");
+        const textColorClass = (this.answer.open ? "green-text" : "red-text");
 
         return (
-            <div className={classnames([bgColorClass, "OpenXDayMini"])} >
+            <div className={"OpenXDayMini"} >
                 <div className="OpenXDayMini-inner">
-                    <div className="openOrCloseText">
+                    <div className={classnames([textColorClass, "openOrCloseText"])}>
                         {this.answer.open ? "Open" : "Closed"}
                     </div>
                     <div className="dateDescription">