backoffice: fix: loans: ensure date filters can be changed

* previously changing the date filter just added another instance of the filter to the url

Author: JakobMiesner

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

@@ -19,11 +19,18 @@ export class _SearchDateRange extends Component {
     return [fromDate, toDate];
   }
 
-  onDateChange = (newFilter) => {
+  onDateChange = (field, value) => {
     const { currentQueryState, updateQueryState } = this.props;
-    const filters = currentQueryState.filters;
-    filters.push(newFilter);
-    return updateQueryState({ filters: filters });
+
+    const updatedFilters = currentQueryState.filters.filter(
+      ([name]) => name !== field
+    );
+
+    if (value !== '') {
+      updatedFilters.push([field, value]);
+    }
+
+    return updateQueryState({ filters: updatedFilters });
   };
 
   render() {
@@ -43,7 +50,7 @@ export class _SearchDateRange extends Component {
             defaultValue={fromDate}
             placeholder="From"
             handleDateChange={(value) =>
-              this.onDateChange(['loans_from_date', value])
+              this.onDateChange('loans_from_date', value)
             }
           />
         </Card.Content>
@@ -53,7 +60,7 @@ export class _SearchDateRange extends Component {
             defaultValue={toDate}
             placeholder="To"
             handleDateChange={(value) =>
-              this.onDateChange(['loans_to_date', value])
+              this.onDateChange('loans_to_date', value)
             }
           />
         </Card.Content>

src/lib/pages/backoffice/Loan/LoanSearch/SearchDateRange.test.js

@@ -10,7 +10,8 @@ jest.mock('@components/DatePicker', () => {
   };
 });
 
-const newFilter = ['loans_from_date', '2020-02-02'];
+const newFilterField = 'loans_from_date';
+const newFilterValue = '2020-02-02';
 const mockCurrentQueryState = { filters: [] };
 const mockUpdateQueryState = jest.fn();
 
@@ -39,7 +40,7 @@ describe('SearchDateRange tests', () => {
       />
     );
 
-    wrapper.instance().onDateChange(newFilter);
+    wrapper.instance().onDateChange(newFilterField, newFilterValue);
     const expected = { filters: [['loans_from_date', '2020-02-02']] };
     const mockFn = wrapper.instance().props.updateQueryState;
     expect(mockFn).toBeCalledWith(expected);
@@ -55,12 +56,9 @@ describe('SearchDateRange tests', () => {
         updateQueryState={mockUpdateQueryState}
       />
     );
-    wrapper.instance().onDateChange(newFilter);
+    wrapper.instance().onDateChange(newFilterField, newFilterValue);
     const expected = {
-      filters: [
-        ['loans_from_date', '2020-02-01'],
-        ['loans_from_date', '2020-02-02'],
-      ],
+      filters: [['loans_from_date', '2020-02-02']],
     };
     const mockFn = wrapper.instance().props.updateQueryState;
     expect(mockFn).toBeCalledWith(expected);
@@ -75,9 +73,12 @@ describe('SearchDateRange tests', () => {
         updateQueryState={mockUpdateQueryState}
       />
     );
-    wrapper.instance().onDateChange(newFilter);
+    wrapper.instance().onDateChange(newFilterField, newFilterValue);
     const expected = {
-      filters: mockCurrentQueryState.filters,
+      filters: [
+        ['loans_to_date', '2020-03-03'],
+        ['loans_from_date', '2020-02-02'],
+      ],
     };
     const mockFn = wrapper.instance().props.updateQueryState;
     expect(mockFn).toBeCalledWith(expected);