From b6c82da25098d70fa7b740c80d0de4ae2a33706e Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 21 Jul 2018 19:27:00 +0200
Subject: [PATCH] Improved date pickers in create URL form

---
 src/short-urls/CreateShortUrl.js   | 38 +++++++++++++++++-------------
 src/short-urls/CreateShortUrl.scss | 15 ++++++++++++
 2 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/src/short-urls/CreateShortUrl.js b/src/short-urls/CreateShortUrl.js
index 74af103e..26655013 100644
--- a/src/short-urls/CreateShortUrl.js
+++ b/src/short-urls/CreateShortUrl.js
@@ -1,22 +1,23 @@
-import React from 'react';
+import calendarIcon from '@fortawesome/fontawesome-free-solid/faCalendarAlt';
 import downIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleDown';
 import upIcon from '@fortawesome/fontawesome-free-solid/faAngleDoubleUp';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
-import DatePicker from 'react-datepicker';
-import { Collapse } from 'reactstrap';
-import ReactTags from 'react-tag-autocomplete';
 import { assoc, replace } from 'ramda';
+import React from 'react';
+import DatePicker from 'react-datepicker';
+import ReactTags from 'react-tag-autocomplete';
+import { Collapse } from 'reactstrap';
+import '../../node_modules/react-datepicker/dist/react-datepicker.css';
 import './CreateShortUrl.scss';
-import '../../node_modules/react-datepicker/dist/react-datepicker.css'
 
 export default class CreateShortUrl extends React.Component {
   state = {
     longUrl: '',
     tags: [],
-    customSlug: null,
-    validSince: null,
-    validUntil: null,
-    maxVisits: null,
+    customSlug: undefined,
+    validSince: undefined,
+    validUntil: undefined,
+    maxVisits: undefined,
     moreOptionsVisible: false
   };
 
@@ -38,11 +39,15 @@ export default class CreateShortUrl extends React.Component {
         onChange={e => this.setState({ [id]: e.target.value })}
         {...props}
       />;
-      const createDateInput = (id, placeholder) =>
+      const createDateInput = (id, placeholder, props = {}) =>
         <DatePicker
           selected={this.state[id]}
-          className="form-control"
+          className="form-control create-short-url__date-input"
           placeholderText={placeholder}
+          onChange={date => this.setState({ [id]: date })}
+          dateFormat="YYYY-MM-DD"
+          readOnly
+          {...props}
         />;
 
     return (
@@ -63,7 +68,6 @@ export default class CreateShortUrl extends React.Component {
             <div className="form-group">
               <ReactTags
                 tags={this.state.tags}
-                classNames={{}}
                 handleAddition={addTag}
                 handleDelete={removeTag}
                 allowNew={true}
@@ -81,11 +85,13 @@ export default class CreateShortUrl extends React.Component {
                 </div>
               </div>
               <div className="col-sm-6">
-                <div className="form-group">
-                  {createDateInput('validSince', 'Enabled since...')}
+                <div className="form-group create-short-url__date-container">
+                  {createDateInput('validSince', 'Enabled since...', { maxDate: this.state.validUntil })}
+                  <FontAwesomeIcon icon={calendarIcon} className="create-short-url__date-icon" />
                 </div>
-                <div className="form-group">
-                  {createDateInput('validUntil', 'Enabled until...')}
+                <div className="form-group create-short-url__date-container">
+                  {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 4c4199b9..c03b5af9 100644
--- a/src/short-urls/CreateShortUrl.scss
+++ b/src/short-urls/CreateShortUrl.scss
@@ -1,11 +1,26 @@
 @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;