Added filtering by date to short URLs list

src/short-urls/SearchBar.js

@@ -1,10 +1,13 @@
 import { faTags as tagsIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
-import { isEmpty } from 'ramda';
+import { isEmpty, pipe } from 'ramda';
 import PropTypes from 'prop-types';
+import moment from 'moment';
 import SearchField from '../utils/SearchField';
 import Tag from '../tags/helpers/Tag';
+import DateRangeRow from '../utils/DateRangeRow';
+import { formatDate } from '../utils/utils';
 import { shortUrlsListParamsType } from './reducers/shortUrlsListParams';
 import './SearchBar.scss';
 
@@ -13,19 +16,35 @@ const propTypes = {
   shortUrlsListParams: shortUrlsListParamsType,
 };
 
+const dateOrUndefined = (date) => date ? moment(date) : undefined;
+
 const SearchBar = (colorGenerator) => {
   const SearchBar = ({ listShortUrls, shortUrlsListParams }) => {
     const selectedTags = shortUrlsListParams.tags || [];
+    const setDate = (dateName) => pipe(
+      formatDate(),
+      (date) => listShortUrls({ ...shortUrlsListParams, [dateName]: date })
+    );
 
     return (
-      <div className="serach-bar-container">
-        <SearchField onChange={
-          (searchTerm) => listShortUrls({ ...shortUrlsListParams, searchTerm })
-        }
+      <div className="search-bar-container">
+        <SearchField
+          onChange={
+            (searchTerm) => listShortUrls({ ...shortUrlsListParams, searchTerm })
+          }
         />
 
+        <div className="mt-3">
+          <DateRangeRow
+            startDate={dateOrUndefined(shortUrlsListParams.startDate)}
+            endDate={dateOrUndefined(shortUrlsListParams.endDate)}
+            onStartDateChane={setDate('startDate')}
+            onEndDateChange={setDate('endDate')}
+          />
+        </div>
+
         {!isEmpty(selectedTags) && (
-          <h4 className="search-bar__selected-tag mt-2">
+          <h4 className="search-bar__selected-tag mt-3">
             <FontAwesomeIcon icon={tagsIcon} className="search-bar__tags-icon" />
             &nbsp;
             {selectedTags.map((tag) => (

src/short-urls/ShortUrlsList.js

@@ -40,12 +40,15 @@ const ShortUrlsList = (ShortUrlsRow) => class ShortUrlsList extends React.Compon
       ...extraParams,
     });
   };
+
   handleOrderBy = (orderField, orderDir) => {
     this.setState({ orderField, orderDir });
     this.refreshList({ orderBy: { [orderField]: orderDir } });
   };
+
   orderByColumn = (columnName) => () =>
     this.handleOrderBy(columnName, determineOrderDir(columnName, this.state.orderField, this.state.orderDir));
+
   renderOrderIcon = (field) => {
     if (this.state.orderField !== field) {
       return null;
@@ -77,8 +80,9 @@ const ShortUrlsList = (ShortUrlsRow) => class ShortUrlsList extends React.Compon
   componentDidMount() {
     const { match: { params }, location, shortUrlsListParams } = this.props;
     const query = qs.parse(location.search, { ignoreQueryPrefix: true });
+    const tags = query.tag ? [ query.tag ] : shortUrlsListParams.tags;
 
-    this.refreshList({ page: params.page, tags: query.tag ? [ query.tag ] : shortUrlsListParams.tags });
+    this.refreshList({ page: params.page, tags });
   }
 
   componentWillUnmount() {

src/short-urls/helpers/ShortUrlsRow.scss

@@ -51,7 +51,3 @@
     right: calc(100% + 10px);
   }
 }
-
-.short-urls-row__max-visits-control {
-  cursor: help;
-}

src/short-urls/reducers/shortUrlsListParams.js

@@ -8,6 +8,9 @@ export const shortUrlsListParamsType = PropTypes.shape({
   page: PropTypes.string,
   tags: PropTypes.arrayOf(PropTypes.string),
   searchTerm: PropTypes.string,
+  startDate: PropTypes.string,
+  endDate: PropTypes.string,
+  orderBy: PropTypes.object,
 });
 
 const initialState = { page: '1' };