From a7bd66827a7385802b1659875357dee875b0d069 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Tue, 31 Jul 2018 21:24:34 +0200
Subject: [PATCH] Created reusable DateInput component

---
 src/common/DateContainer.scss      | 16 +++++++++++++++
 src/common/DateInput.js            | 31 ++++++++++++++++++++++++++++++
 src/short-urls/CreateShortUrl.js   | 14 ++++----------
 src/short-urls/CreateShortUrl.scss | 15 ---------------
 4 files changed, 51 insertions(+), 25 deletions(-)
 create mode 100644 src/common/DateContainer.scss
 create mode 100644 src/common/DateInput.js

diff --git a/src/common/DateContainer.scss b/src/common/DateContainer.scss
new file mode 100644
index 00000000..bdb61eb6
--- /dev/null
+++ b/src/common/DateContainer.scss
@@ -0,0 +1,16 @@
+@import "../utils/mixins/vertical-align";
+
+.date-input-container {
+  position: relative;
+}
+
+.date-input-container__input {
+  padding-right: 35px !important;
+  background-color: #fff !important;
+}
+
+.date-input-container__icon {
+  @include vertical-align();
+  right: 15px;
+  cursor: pointer;
+}
diff --git a/src/common/DateInput.js b/src/common/DateInput.js
new file mode 100644
index 00000000..34c8afb1
--- /dev/null
+++ b/src/common/DateInput.js
@@ -0,0 +1,31 @@
+import calendarIcon from '@fortawesome/fontawesome-free-regular/faCalendarAlt';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import React from 'react';
+import DatePicker from 'react-datepicker';
+import './DateContainer.scss';
+
+export default class DateInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.inputRef = React.createRef();
+  }
+
+  render() {
+    return (
+      <div className="date-input-container">
+        <DatePicker
+          {...this.props}
+          className="date-input-container__input form-control"
+          dateFormat="YYYY-MM-DD"
+          readOnly
+          ref={this.inputRef}
+        />
+        <FontAwesomeIcon
+          icon={calendarIcon}
+          className="date-input-container__icon"
+          onClick={() => this.inputRef.current.input.focus()}
+        />
+      </div>
+    );
+  }
+}
diff --git a/src/short-urls/CreateShortUrl.js b/src/short-urls/CreateShortUrl.js
index 291e0a16..94f61c27 100644
--- a/src/short-urls/CreateShortUrl.js
+++ b/src/short-urls/CreateShortUrl.js
@@ -1,14 +1,13 @@
-import calendarIcon from '@fortawesome/fontawesome-free-regular/faCalendarAlt';
 import downIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleDown';
 import upIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleUp';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import { assoc, dissoc, isNil, pick, pipe, pluck, replace } from 'ramda';
 import React from 'react';
-import DatePicker from 'react-datepicker';
 import { connect } from 'react-redux';
 import ReactTags from 'react-tag-autocomplete';
 import { Collapse } from 'reactstrap';
 import '../../node_modules/react-datepicker/dist/react-datepicker.css';
+import DateInput from '../common/DateInput';
 import './CreateShortUrl.scss';
 import CreateShortUrlResult from './helpers/CreateShortUrlResult';
 import { createShortUrl, resetCreateShortUrl } from './reducers/shortUrlCreationResult';
@@ -45,13 +44,10 @@ export class CreateShortUrl extends React.Component {
         {...props}
       />;
     const createDateInput = (id, placeholder, props = {}) =>
-      <DatePicker
+      <DateInput
         selected={this.state[id]}
-        className="form-control create-short-url__date-input"
         placeholderText={placeholder}
         onChange={date => this.setState({ [id]: date })}
-        dateFormat="YYYY-MM-DD"
-        readOnly
         {...props}
       />;
     const formatDate = date => isNil(date) ? date : date.format();
@@ -100,13 +96,11 @@ export class CreateShortUrl extends React.Component {
                 </div>
               </div>
               <div className="col-sm-6">
-                <div className="form-group create-short-url__date-container">
+                <div className="form-group">
                   {createDateInput('validSince', 'Enabled since...', { maxDate: this.state.validUntil })}
-                  <FontAwesomeIcon icon={calendarIcon} className="create-short-url__date-icon" />
                 </div>
-                <div className="form-group create-short-url__date-container">
+                <div className="form-group">
                   {createDateInput('validUntil', 'Enabled until...', { minDate: this.state.validSince })}
-                  <FontAwesomeIcon icon={calendarIcon} className="create-short-url__date-icon" />
                 </div>
               </div>
             </div>
diff --git a/src/short-urls/CreateShortUrl.scss b/src/short-urls/CreateShortUrl.scss
index c03b5af9..4c4199b9 100644
--- a/src/short-urls/CreateShortUrl.scss
+++ b/src/short-urls/CreateShortUrl.scss
@@ -1,26 +1,11 @@
 @import "../../node_modules/react-tag-autocomplete/example/styles.css";
 @import "../utils/mixins/box-shadow";
 @import "../utils/mixins/border-radius";
-@import "../utils/mixins/vertical-align";
 
 .create-short-url__btn:not(:first-child) {
   margin-left: 5px;
 }
 
-.create-short-url__date-container {
-  position: relative;
-}
-
-.create-short-url__date-input {
-  padding-right: 35px !important;
-  background-color: #fff !important;
-}
-
-.create-short-url__date-icon {
-  @include vertical-align();
-  right: 15px;
-}
-
 .react-tags {
   @include border-radius(.25rem);
   transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;