From 508c034276b522bcbed023ac75c1a0fddfc22ff0 Mon Sep 17 00:00:00 2001
From: Abhas Bhattacharya <abhasbhattacharya2@gmail.com>
Date: Fri, 23 Mar 2018 00:39:49 +0530
Subject: [PATCH] All components - update correctly on both prop create and
 update

---
 src/Components/ClosedReason/Component.tsx     |  9 +++++-
 .../NextOpenCloseMini/Component.tsx           |  8 +++++
 src/Components/OpenXDay/Component.tsx         |  8 +++++
 src/Components/OpenXDayMini/Component.tsx     | 29 +++++++++++++------
 4 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/src/Components/ClosedReason/Component.tsx b/src/Components/ClosedReason/Component.tsx
index 490b4b6..17282ed 100644
--- a/src/Components/ClosedReason/Component.tsx
+++ b/src/Components/ClosedReason/Component.tsx
@@ -9,9 +9,16 @@ export class ClosedReason extends React.Component<ObjectWithHoliday, {}> {
 
     constructor(props: ObjectWithHoliday) {
         super(props);
-        this.holiday = props.holiday;
+        this.updateFromProps(props);
     }
 
+    componentWillUpdate(nextProps: ObjectWithHoliday, nextState: {}) {
+        this.updateFromProps(nextProps);
+    }
+
+    updateFromProps(props: ObjectWithHoliday) {
+        this.holiday = props.holiday;
+    }
     render() {
         return (
             <div className="ClosedReason">
diff --git a/src/Components/NextOpenCloseMini/Component.tsx b/src/Components/NextOpenCloseMini/Component.tsx
index 6c0803f..0bb25af 100644
--- a/src/Components/NextOpenCloseMini/Component.tsx
+++ b/src/Components/NextOpenCloseMini/Component.tsx
@@ -19,6 +19,14 @@ export class NextOpenCloseMini extends React.Component<NextOpenCloseMiniProps, {
 
     constructor(props: NextOpenCloseMiniProps) {
         super(props);
+        this.updateFromProps(props);
+    }
+
+    componentWillUpdate(nextProps: NextOpenCloseMiniProps, nextState: {}) {
+        this.updateFromProps(nextProps);
+    }
+
+    updateFromProps(props: NextOpenCloseMiniProps) {
         this.xDay = props.xDay;
         this.openOrClose = props.openOrClose;
         this.allHolidays = props.allHolidays;
diff --git a/src/Components/OpenXDay/Component.tsx b/src/Components/OpenXDay/Component.tsx
index 82dd900..d272d86 100644
--- a/src/Components/OpenXDay/Component.tsx
+++ b/src/Components/OpenXDay/Component.tsx
@@ -21,6 +21,14 @@ export class OpenXDay extends React.Component<OpenXDayProps, {}> {
 
     constructor(props: OpenXDayProps) {
         super(props);
+        this.updateFromProps(props);
+    }
+
+    componentWillUpdate(nextProps: OpenXDayProps, nextState: {}) {
+        this.updateFromProps(nextProps);
+    }
+
+    updateFromProps(props: OpenXDayProps) {
         this.question = props.question;
         this.xDay = props.xDay;
         this.allHolidays = props.allHolidays;
diff --git a/src/Components/OpenXDayMini/Component.tsx b/src/Components/OpenXDayMini/Component.tsx
index 2781adf..20597c7 100644
--- a/src/Components/OpenXDayMini/Component.tsx
+++ b/src/Components/OpenXDayMini/Component.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as moment from 'moment-timezone';
 import * as classnames from 'classnames';
+import { Link } from 'react-router-dom';
 import "./Component.css";
 import { HolidayList } from '../../Data';
 import { Utils, HolidayAnswer } from "../../Utils";
@@ -20,11 +21,19 @@ export class OpenXDayMini extends React.Component<OpenXDayMiniProps, {}> {
 
     constructor(props: OpenXDayMiniProps) {
         super(props);
+        this.updateFromProps(props);
+    }
+    
+    componentWillUpdate(nextProps: OpenXDayMiniProps, nextState: {}) {
+        this.updateFromProps(nextProps);
+    }
+    
+    updateFromProps(props: OpenXDayMiniProps) {
         this.xDay = props.xDay;
         this.dateDescription = props.dateDescription;
         this.allHolidays = props.allHolidays;
-
-        this.answer = Utils.getHolidayAnswerOnDate(this.xDay, this.allHolidays);
+    
+        this.answer = Utils.getHolidayAnswerOnDate(this.xDay, this.allHolidays);    
     }
 
     render() {
@@ -32,14 +41,16 @@ export class OpenXDayMini extends React.Component<OpenXDayMiniProps, {}> {
 
         return (
             <div className={"OpenXDayMini"} >
-                <div className="OpenXDayMini-inner">
-                    <div className={classnames([textColorClass, "openOrCloseText"])}>
-                        {this.answer.open ? "Open" : "Closed"}
+                <Link to={`./${this.xDay.format("YYYY-MM-DD")}`}>
+                    <div className="OpenXDayMini-inner">
+                        <div className={classnames([textColorClass, "openOrCloseText"])}>
+                            {this.answer.open ? "Open" : "Closed"}
+                        </div>
+                        <div className="dateDescription">
+                            {this.dateDescription}
+                        </div>
                     </div>
-                    <div className="dateDescription">
-                        {this.dateDescription}
-                    </div>
-                </div>
+                </Link>
             </div>
         );
     }