From 70ebb0362a3c98652ccdc2093d87a96765bf64d4 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Thu, 1 Nov 2018 09:16:18 +0100
Subject: [PATCH] Converted DateInput into functional component

---
 src/utils/DateInput.js       | 59 +++++++++++++++++++-----------------
 test/utils/DateInput.test.js |  7 +----
 2 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/utils/DateInput.js b/src/utils/DateInput.js
index e7f32b07..9df330df 100644
--- a/src/utils/DateInput.js
+++ b/src/utils/DateInput.js
@@ -3,35 +3,40 @@ import { isNil } from 'ramda';
 import DatePicker from 'react-datepicker';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import calendarIcon from '@fortawesome/fontawesome-free-regular/faCalendarAlt';
+import * as PropTypes from 'prop-types';
 import './DateInput.scss';
 
-export default class DateInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.inputRef = props.ref || React.createRef();
-  }
+const propTypes = {
+  className: PropTypes.string,
+  isClearable: PropTypes.bool,
+  selected: PropTypes.oneOfType([ PropTypes.string, PropTypes.object ]),
+  ref: PropTypes.object,
+};
 
-  render() {
-    const { className, isClearable, selected } = this.props;
-    const showCalendarIcon = !isClearable || isNil(selected);
+const DateInput = (props) => {
+  const { className, isClearable, selected, ref = React.createRef() } = props;
+  const showCalendarIcon = !isClearable || isNil(selected);
 
-    return (
-      <div className="date-input-container">
-        <DatePicker
-          {...this.props}
-          className={`date-input-container__input form-control ${className || ''}`}
-          dateFormat="YYYY-MM-DD"
-          readOnly
-          ref={this.inputRef}
+  return (
+    <div className="date-input-container">
+      <DatePicker
+        {...props}
+        className={`date-input-container__input form-control ${className || ''}`}
+        dateFormat="YYYY-MM-DD"
+        readOnly
+        ref={ref}
+      />
+      {showCalendarIcon && (
+        <FontAwesomeIcon
+          icon={calendarIcon}
+          className="date-input-container__icon"
+          onClick={() => ref.current.input.focus()}
         />
-        {showCalendarIcon && (
-          <FontAwesomeIcon
-            icon={calendarIcon}
-            className="date-input-container__icon"
-            onClick={() => this.inputRef.current.input.focus()}
-          />
-        )}
-      </div>
-    );
-  }
-}
+      )}
+    </div>
+  );
+};
+
+DateInput.propTypes = propTypes;
+
+export default DateInput;
diff --git a/test/utils/DateInput.test.js b/test/utils/DateInput.test.js
index d562b2d0..172713ae 100644
--- a/test/utils/DateInput.test.js
+++ b/test/utils/DateInput.test.js
@@ -13,12 +13,7 @@ describe('<DateInput />', () => {
     return wrapped;
   };
 
-  afterEach(() => {
-    if (wrapped !== undefined) {
-      wrapped.unmount();
-      wrapped = undefined;
-    }
-  });
+  afterEach(() => wrapped && wrapped.unmount());
 
   it('wrapps a DatePicker', () => {
     wrapped = createComponent();