Added filtering by date to short URLs list

src/utils/DateInput.js

@@ -4,6 +4,7 @@ import DatePicker from 'react-datepicker';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCalendarAlt as calendarIcon } from '@fortawesome/free-regular-svg-icons';
 import * as PropTypes from 'prop-types';
+import classNames from 'classnames';
 import './DateInput.scss';
 
 const propTypes = {
@@ -21,7 +22,7 @@ const DateInput = (props) => {
     <div className="date-input-container">
       <DatePicker
         {...props}
-        className={`date-input-container__input form-control ${className || ''}`}
+        className={classNames('date-input-container__input form-control', className)}
         dateFormat="YYYY-MM-DD"
         readOnly
         ref={ref}

src/utils/DateRangeRow.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import DateInput from './DateInput';
+import './DateRangeRow.scss';
+
+const dateType = PropTypes.oneOfType([ PropTypes.string, PropTypes.object ]);
+const propTypes = {
+  startDate: dateType,
+  endDate: dateType,
+  onStartDateChane: PropTypes.func.isRequired,
+  onEndDateChange: PropTypes.func.isRequired,
+};
+
+const DateRangeRow = ({ startDate, endDate, onStartDateChane, onEndDateChange }) => (
+  <div className="row">
+    <div className="col-xl-3 col-lg-4 col-md-6 offset-xl-6 offset-lg-4">
+      <DateInput
+        selected={startDate}
+        placeholderText="Since"
+        isClearable
+        maxDate={endDate}
+        onChange={onStartDateChane}
+      />
+    </div>
+    <div className="col-xl-3 col-lg-4 col-md-6">
+      <DateInput
+        className="date-range-row__date-input"
+        selected={endDate}
+        placeholderText="Until"
+        isClearable
+        minDate={startDate}
+        onChange={onEndDateChange}
+      />
+    </div>
+  </div>
+);
+
+DateRangeRow.propTypes = propTypes;
+
+export default DateRangeRow;

src/utils/DateRangeRow.scss

@@ -0,0 +1,7 @@
+@import '../utils/base';
+
+.date-range-row__date-input {
+  @media (max-width: $smMax) {
+    margin-top: .5rem;
+  }
+}

src/utils/SearchField.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSearch as searchIcon } from '@fortawesome/free-solid-svg-icons';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
+import classNames from 'classnames';
 import './SearchField.scss';
 
 const DEFAULT_SEARCH_INTERVAL = 500;
@@ -44,7 +44,7 @@ export default class SearchField extends React.Component {
     const { className, placeholder } = this.props;
 
     return (
-      <div className={classnames('search-field', className)}>
+      <div className={classNames('search-field', className)}>
         <input
           type="text"
           className="form-control form-control-lg search-field__input"

src/utils/services/ShlinkApiClient.js

@@ -1,5 +1,5 @@
 import qs from 'qs';
-import { isEmpty, isNil, reject } from 'ramda';
+import { isEmpty, isNil, pipe, reject } from 'ramda';
 import PropTypes from 'prop-types';
 
 export const apiErrorType = PropTypes.shape({
@@ -21,9 +21,10 @@ export default class ShlinkApiClient {
     this._apiKey = apiKey || '';
   }
 
-  listShortUrls = (options = {}) =>
-    this._performRequest('/short-urls', 'GET', options)
-      .then((resp) => resp.data.shortUrls);
+  listShortUrls = pipe(
+    (options = {}) => reject(isNil, options),
+    (options = {}) => this._performRequest('/short-urls', 'GET', options).then((resp) => resp.data.shortUrls)
+  );
 
   createShortUrl = (options) => {
     const filteredOptions = reject((value) => isEmpty(value) || isNil(value), options);

src/utils/utils.js

@@ -68,3 +68,5 @@ export const versionIsValidSemVer = (version) => {
     return false;
   }
 };
+
+export const formatDate = (format = 'YYYY-MM-DD') => (date) => date && date.format ? date.format(format) : date;