working date filters

ui/package.json

@@ -30,7 +30,7 @@
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.4.0",
     "react-scroll": "^1.7.16",
-    "react-searchkit": "^0.17.0",
+    "react-searchkit": "^0.18.0",
     "react-show-more": "^2.0.0",
     "react-tagcloud": "^2.0.0",
     "redux": "^4.0.4",

ui/src/components/SearchControls/components/index.js

@@ -1,6 +1,5 @@
 export { SearchAggregationsCards } from './SearchAggregations';
 export { SearchAggregationsMenu } from './SearchAggregations';
-export { SearchDateRange } from './SearchDateRange';
 export { SearchFooter } from './SearchFooter';
 export { SearchPagination } from './SearchPagination';
 export { SearchEmptyResults } from './SearchEmptyResults';

ui/src/pages/backoffice/Loan/LoanSearch/LoanSearch.js

@@ -23,7 +23,7 @@ import {
   SearchAggregationsCards,
 } from '@components/SearchControls';
 
-import { SearchDateRange } from '@components/SearchControls/components';
+import { SearchDateRange } from './SearchDateRange';
 
 export class LoanSearch extends Component {
   searchApi = new InvenioSearchApi({
@@ -78,11 +78,7 @@ export class LoanSearch extends Component {
       <>
         <Header as="h2">Loans and requests</Header>
 
-        <ReactSearchKit
-          searchApi={this.searchApi}
-          history={history}
-          eventListenerEnabled={true}
-        >
+        <ReactSearchKit searchApi={this.searchApi} history={history}>
           <Container fluid className="spaced">
             <SearchBar renderElement={this.renderSearchBar} />
           </Container>

ui/src/pages/backoffice/Loan/LoanSearch/SearchDateRange.js

@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import { Card } from 'semantic-ui-react';
+import { DatePicker } from '@components';
+import { withState } from 'react-searchkit';
+import _isEmpty from 'lodash/isEmpty';
+
+class _SearchDateRange extends Component {
+  getCurrentDates() {
+    const { filters } = this.props.currentQueryState;
+    let loans_from_date = '';
+    let loans_to_date = '';
+
+    filters.forEach(([name, value]) => {
+      if (name === 'loans_from_date') loans_from_date = value;
+      if (name === 'loans_to_date') loans_to_date = value;
+    });
+    return [loans_from_date, loans_to_date];
+  }
+
+  onDateChange = newFilter => {
+    const [name, value] = newFilter;
+    let result = newFilter;
+
+    if (_isEmpty(value)) {
+      this.props.updateQueryState({ filters: result });
+      return;
+    }
+
+    const { filters } = this.props.currentQueryState;
+    const existingFilters = filters.filter(filter => filter[0] === name);
+
+    if (!_isEmpty(existingFilters)) {
+      result = existingFilters.push(newFilter);
+    }
+    // NOTE: react-searchkit allows having the same filter multiple times.
+    // For the range dates filters we want each filter one time only so we have
+    // to we have to add also the existing filters we want to remove.
+    this.props.updateQueryState({ filters: result });
+  };
+
+  render() {
+    const [fromDate, toDate] = this.getCurrentDates();
+
+    return (
+      <Card>
+        <Card.Content>
+          <Card.Header>Date</Card.Header>
+          <Card.Meta>
+            <span>*Loan start date</span>
+          </Card.Meta>
+        </Card.Content>
+        <Card.Content>
+          <DatePicker
+            maxDate={toDate}
+            defaultValue={fromDate}
+            placeholder="From"
+            handleDateChange={value =>
+              this.onDateChange(['loans_from_date', value])
+            }
+          />
+        </Card.Content>
+        <Card.Content>
+          <DatePicker
+            minDate={fromDate}
+            defaultValue={toDate}
+            placeholder="To"
+            handleDateChange={value =>
+              this.onDateChange(['loans_to_date', value])
+            }
+          />
+        </Card.Content>
+      </Card>
+    );
+  }
+}
+
+export const SearchDateRange = withState(_SearchDateRange);