From feafdf8fca89e4291f26d6fef4711e6ea82bd25a Mon Sep 17 00:00:00 2001
From: Tomasz <tsubik@gmail.com>
Date: Wed, 22 Apr 2020 11:20:11 +0200
Subject: [PATCH 1/7] change time range filter from/to into date of last change

---
 .../concerns/cclow/filter_controller.rb       |  2 +-
 app/javascript/components/TimeRangeFilter.js  | 36 +++++++++----------
 .../pages/cclow/LegislationAndPolicies.js     |  7 ++--
 app/javascript/components/pages/cclow/List.js | 19 +++++-----
 .../components/pages/cclow/LitigationCases.js |  7 ++--
 app/services/queries/cclow/common_filters.rb  | 12 +++----
 .../queries/cclow/legislation_query.rb        |  4 +--
 .../queries/cclow/litigation_query.rb         |  4 +--
 app/services/queries/cclow/target_query.rb    |  4 +--
 .../queries/cclow/legislation_query_spec.rb   |  8 ++---
 .../queries/cclow/litigation_query_spec.rb    | 10 +++---
 .../queries/cclow/target_query_spec.rb        |  2 +-
 12 files changed, 59 insertions(+), 56 deletions(-)

diff --git a/app/controllers/concerns/cclow/filter_controller.rb b/app/controllers/concerns/cclow/filter_controller.rb
index 8bbc040df..2e54ca735 100644
--- a/app/controllers/concerns/cclow/filter_controller.rb
+++ b/app/controllers/concerns/cclow/filter_controller.rb
@@ -97,7 +97,7 @@ def target_years_options
     end
 
     def filter_params
-      params.permit(:q, :from_date, :to_date, :recent, :ids,
+      params.permit(:q, :last_change_from, :last_change_to, :recent, :ids,
                     target_year: [], region: [], geography: [], jurisdiction: [],
                     status: [], type: [], keywords: [], responses: [],
                     frameworks: [], natural_hazards: [], party_type: [],
diff --git a/app/javascript/components/TimeRangeFilter.js b/app/javascript/components/TimeRangeFilter.js
index 64779823b..3f5fee2eb 100644
--- a/app/javascript/components/TimeRangeFilter.js
+++ b/app/javascript/components/TimeRangeFilter.js
@@ -40,8 +40,8 @@ class TimeRangeFilter extends Component {
     super(props);
     this.state = {
       isShowOptions: false,
-      from_date: null,
-      to_date: null,
+      last_change_from: null,
+      last_change_to: null,
       defFromDate: minDate,
       defToDate: maxDate
     };
@@ -71,10 +71,10 @@ class TimeRangeFilter extends Component {
 
   handleChange = (value) => {
     const {onChange} = this.props;
-    const {from_date, to_date} = this.state;
+    const {last_change_from, last_change_to} = this.state;
     onChange({
-      from_date,
-      to_date,
+      last_change_from,
+      last_change_to,
       ...value
     });
     this.setState(value);
@@ -82,9 +82,9 @@ class TimeRangeFilter extends Component {
 
   renderOptions = () => {
     const {filterName, minDate, maxDate} = this.props;
-    const {from_date, to_date, defFromDate, defToDate} = this.state;
-    const currentToDate = to_date || defToDate;
-    const currentFromDate = from_date || defFromDate;
+    const {last_change_from, last_change_to, defFromDate, defToDate} = this.state;
+    const currentToDate = last_change_to || defToDate;
+    const currentFromDate = last_change_from || defFromDate;
     return (
       <div className="options-container" ref={this.optionsContainer}>
         <div className="select-field" onClick={this.handleCloseOptions}>
@@ -106,9 +106,9 @@ class TimeRangeFilter extends Component {
                 { backgroundColor: redColor, border: 'none', height: '12px', width: '12px', marginTop: '-4px' },
                 { backgroundColor: redColor, border: 'none', height: '18px', width: '18px', marginTop: '-7px' }
               ]}
-              value={[from_date || defFromDate, to_date || defToDate]}
-              onChange={(e) => this.setState({from_date: e[0], to_date: e[1]})}
-              onAfterChange={(e) => this.handleChange({from_date: e[0], to_date: e[1]})}
+              value={[last_change_from || defFromDate, last_change_to || defToDate]}
+              onChange={(e) => this.setState({last_change_from: e[0], last_change_to: e[1]})}
+              onAfterChange={(e) => this.handleChange({last_change_from: e[0], last_change_to: e[1]})}
               railStyle={{ backgroundColor: greyColor, maxHeight: '2px', marginTop: '1px' }}
               activeDotStyle={{border: 'none'}}
             />
@@ -127,8 +127,8 @@ class TimeRangeFilter extends Component {
               }
               styles={customStyles}
               isSearchable={false}
-              value={{label: from_date || defFromDate, value: from_date || defFromDate}}
-              onChange={(e) => this.handleChange({from_date: e.value})}
+              value={{label: last_change_from || defFromDate, value: last_change_from || defFromDate}}
+              onChange={(e) => this.handleChange({last_change_from: e.value})}
               components={{IndicatorSeparator: () => null}}
             />
           </div>
@@ -141,8 +141,8 @@ class TimeRangeFilter extends Component {
               }
               styles={customStyles}
               isSearchable={false}
-              value={{label: to_date || defToDate, value: to_date || defToDate}}
-              onChange={(e) => this.handleChange({to_date: e.value})}
+              value={{label: last_change_to || defToDate, value: last_change_to || defToDate}}
+              onChange={(e) => this.handleChange({last_change_to: e.value})}
               components={{IndicatorSeparator: () => null}}
             />
           </div>
@@ -152,11 +152,11 @@ class TimeRangeFilter extends Component {
   };
 
   render() {
-    const {isShowOptions, from_date, to_date} = this.state;
+    const {isShowOptions, last_change_from, last_change_to} = this.state;
     const {filterName, className} = this.props;
     let selectedCount = 0;
-    if (from_date) selectedCount += 1;
-    if (to_date) selectedCount += 1;
+    if (last_change_from) selectedCount += 1;
+    if (last_change_to) selectedCount += 1;
 
     return (
       <div className={`filter-container ${className}`}>
diff --git a/app/javascript/components/pages/cclow/LegislationAndPolicies.js b/app/javascript/components/pages/cclow/LegislationAndPolicies.js
index 3e11e149c..6fbc6ccb0 100644
--- a/app/javascript/components/pages/cclow/LegislationAndPolicies.js
+++ b/app/javascript/components/pages/cclow/LegislationAndPolicies.js
@@ -39,12 +39,13 @@ function LegislationAndPolicies(props) {
       }
     },
     {
-      name: 'timeRange',
+      name: 'dateOfLastChange',
+      title: 'Date of last change',
       timeRange: true,
       mainFilter: true,
       params: {
-        from_date: paramInteger,
-        to_date: paramInteger
+        last_change_from: paramInteger,
+        last_change_to: paramInteger
       }
     },
     {
diff --git a/app/javascript/components/pages/cclow/List.js b/app/javascript/components/pages/cclow/List.js
index 678a32592..065ce7810 100644
--- a/app/javascript/components/pages/cclow/List.js
+++ b/app/javascript/components/pages/cclow/List.js
@@ -162,6 +162,7 @@ class List extends Component {
         <TimeRangeFilter
           key={`filter_${name}`}
           ref={this.filterRefs[name]}
+          filterName={title}
           className={className}
           onChange={this.handleFilterChange}
         />
@@ -229,11 +230,11 @@ class List extends Component {
 
   renderTagsGroup = (filterConfig) => {
     const { filters } = this.state;
-    const { name, options, timeRange } = filterConfig;
+    const { name, options, title, timeRange } = filterConfig;
     const activeTags = pick(filters, Object.keys(filterConfig.params));
     const filterEl = this.filterRefs[name];
 
-    if (timeRange) return this.renderTimeRangeTags(activeTags, filterEl);
+    if (timeRange) return this.renderTimeRangeTags(activeTags, title, filterEl);
 
     return Object.keys(activeTags).map((keyBlock) => (
       activeTags[keyBlock].filter(x => x).map((key, i) => (
@@ -245,24 +246,24 @@ class List extends Component {
     ));
   }
 
-  renderTimeRangeTags = (value, filterEl) => (
+  renderTimeRangeTags = (value, title, filterEl) => (
     <Fragment key="time-range-filters">
-      {value.from_date && (
+      {value.last_change_from && (
         <span key="tag-time-range-from" className="tag">
-          From {value.from_date}
+          {title} from {value.last_change_from}
           <button
             type="button"
-            onClick={() => filterEl.current.handleChange({from_date: null})}
+            onClick={() => filterEl.current.handleChange({last_change_from: null})}
             className="delete"
           />
         </span>
       )}
-      {value.to_date && (
+      {value.last_change_to && (
         <span key="tag-time-range-to" className="tag">
-          To {value.to_date}
+          {title} to {value.last_change_to}
           <button
             type="button"
-            onClick={() => filterEl.current.handleChange({to_date: null})}
+            onClick={() => filterEl.current.handleChange({last_change_to: null})}
             className="delete"
           />
         </span>
diff --git a/app/javascript/components/pages/cclow/LitigationCases.js b/app/javascript/components/pages/cclow/LitigationCases.js
index 5124a5e6d..476fd5e38 100644
--- a/app/javascript/components/pages/cclow/LitigationCases.js
+++ b/app/javascript/components/pages/cclow/LitigationCases.js
@@ -40,12 +40,13 @@ function LitigationCases(props) {
       }
     },
     {
-      name: 'timeRange',
+      name: 'dateOfLastChange',
+      title: 'Date of last change',
       timeRange: true,
       mainFilter: true,
       params: {
-        from_date: paramInteger,
-        to_date: paramInteger
+        last_change_from: paramInteger,
+        last_change_to: paramInteger
       }
     },
     {
diff --git a/app/services/queries/cclow/common_filters.rb b/app/services/queries/cclow/common_filters.rb
index 1a0262ab3..33253126b 100644
--- a/app/services/queries/cclow/common_filters.rb
+++ b/app/services/queries/cclow/common_filters.rb
@@ -41,16 +41,16 @@ def filter_by_tags
         scope.where(id: scope.unscoped.with_tags_by_id(tag_ids))
       end
 
-      def filter_by_from_date
-        return scope unless params[:from_date].present?
+      def filter_by_last_change_from
+        return scope unless params[:last_change_from].present?
 
-        scope.with_last_events.where('last_events.date >= (?)', Date.new(params[:from_date].to_i, 1, 1))
+        scope.with_last_events.where('last_events.date >= (?)', Date.new(params[:last_change_from].to_i, 1, 1))
       end
 
-      def filter_by_to_date
-        return scope unless params[:to_date].present?
+      def filter_by_last_change_to
+        return scope unless params[:last_change_to].present?
 
-        scope.with_last_events.where('last_events.date <= (?)', Date.new(params[:to_date].to_i, 12, 31))
+        scope.with_last_events.where('last_events.date <= (?)', Date.new(params[:last_change_to].to_i, 12, 31))
       end
 
       def filter_by_to_status
diff --git a/app/services/queries/cclow/legislation_query.rb b/app/services/queries/cclow/legislation_query.rb
index f881b45b2..ab94c13e8 100644
--- a/app/services/queries/cclow/legislation_query.rb
+++ b/app/services/queries/cclow/legislation_query.rb
@@ -20,8 +20,8 @@ def call(scope = Legislation.published)
           .merge(filter_by_tags)
           .merge(filter_by_instruments)
           .merge(filter_by_governances)
-          .merge(filter_by_from_date)
-          .merge(filter_by_to_date)
+          .merge(filter_by_last_change_from)
+          .merge(filter_by_last_change_to)
           .merge(filter_by_type)
           .merge(filter_recent)
           .merge(filter_by_sector)
diff --git a/app/services/queries/cclow/litigation_query.rb b/app/services/queries/cclow/litigation_query.rb
index 57fab8d85..a776da3a3 100644
--- a/app/services/queries/cclow/litigation_query.rb
+++ b/app/services/queries/cclow/litigation_query.rb
@@ -18,8 +18,8 @@ def call(scope = Litigation.published)
           .merge(full_text_filter)
           .merge(filter_by_geography_or_region)
           .merge(filter_by_tags)
-          .merge(filter_by_from_date)
-          .merge(filter_by_to_date)
+          .merge(filter_by_last_change_from)
+          .merge(filter_by_last_change_to)
           .merge(filter_by_to_status)
           .merge(filter_by_litigation_sides)
           .merge(filter_by_litigation_side_party_types)
diff --git a/app/services/queries/cclow/target_query.rb b/app/services/queries/cclow/target_query.rb
index 40cf24bf3..6fa773859 100644
--- a/app/services/queries/cclow/target_query.rb
+++ b/app/services/queries/cclow/target_query.rb
@@ -17,8 +17,8 @@ def call(scope = Target.published)
           .merge(filter_by_geography_or_region)
           .merge(filter_by_target_sector)
           .merge(filter_by_target_year)
-          .merge(filter_by_from_date)
-          .merge(filter_by_to_date)
+          .merge(filter_by_last_change_from)
+          .merge(filter_by_last_change_to)
           .merge(filter_by_to_type)
           .merge(filter_recent)
           .merge(order)
diff --git a/spec/services/queries/cclow/legislation_query_spec.rb b/spec/services/queries/cclow/legislation_query_spec.rb
index 108f55c46..8ca08fbc1 100644
--- a/spec/services/queries/cclow/legislation_query_spec.rb
+++ b/spec/services/queries/cclow/legislation_query_spec.rb
@@ -147,18 +147,18 @@
       expect(results).to contain_exactly(@legislation1, @legislation2, @legislation4)
     end
 
-    it 'should filter by from date' do
-      results = subject.new(from_date: '2011').call
+    it 'should filter by date of last change from' do
+      results = subject.new(last_change_from: '2011').call
       expect(results).to contain_exactly(@legislation1, @legislation2, @legislation3)
     end
 
     it 'should filter by to date' do
-      results = subject.new(to_date: '2013').call
+      results = subject.new(last_change_to: '2013').call
       expect(results).to contain_exactly(@legislation1, @legislation4)
     end
 
     it 'should filter by multiple params' do
-      results = subject.new(q: 'Nat', from_date: '2014', instrument: [@instrument3.id]).call
+      results = subject.new(q: 'Nat', last_change_from: '2014', instrument: [@instrument3.id]).call
       expect(results).to contain_exactly(@legislation3)
     end
 
diff --git a/spec/services/queries/cclow/litigation_query_spec.rb b/spec/services/queries/cclow/litigation_query_spec.rb
index 6a112e0cd..f83c7b9cb 100644
--- a/spec/services/queries/cclow/litigation_query_spec.rb
+++ b/spec/services/queries/cclow/litigation_query_spec.rb
@@ -130,13 +130,13 @@
       expect(results).to contain_exactly(@litigation1)
     end
 
-    it 'should filter by from date' do
-      results = subject.new(from_date: '2011').call
+    it 'should filter by date of last change from' do
+      results = subject.new(last_change_from: '2011').call
       expect(results).to contain_exactly(@litigation1, @litigation2, @litigation3)
     end
 
-    it 'should filter by to date' do
-      results = subject.new(to_date: '2013').call
+    it 'should filter by date of last change to' do
+      results = subject.new(last_change_to: '2013').call
       expect(results).to contain_exactly(@litigation1)
     end
 
@@ -188,7 +188,7 @@
     end
 
     it 'should filter by multiple params' do
-      results = subject.new(q: 'testing', from_date: '2011', side_a: ['Second Side A']).call
+      results = subject.new(q: 'testing', last_change_from: '2011', side_a: ['Second Side A']).call
       expect(results).to contain_exactly(@litigation2)
     end
 
diff --git a/spec/services/queries/cclow/target_query_spec.rb b/spec/services/queries/cclow/target_query_spec.rb
index cb363e5f9..db81205db 100644
--- a/spec/services/queries/cclow/target_query_spec.rb
+++ b/spec/services/queries/cclow/target_query_spec.rb
@@ -85,7 +85,7 @@
     end
 
     it 'should filter by multiple params' do
-      results = subject.new(q: 'risk', from_date: '2014').call
+      results = subject.new(q: 'risk', last_change_from: '2014').call
       expect(results).to contain_exactly(@target3)
     end
 

From e0bf841e090e006445ee1596c8740d1778c3a213 Mon Sep 17 00:00:00 2001
From: Tomasz <tsubik@gmail.com>
Date: Wed, 22 Apr 2020 12:01:45 +0200
Subject: [PATCH 2/7] fixing time range filter sync with query string

---
 app/javascript/components/TimeRangeFilter.js  | 224 ++++++++----------
 .../pages/cclow/LegislationAndPolicies.js     |   2 +
 app/javascript/components/pages/cclow/List.js |  69 +++---
 .../components/pages/cclow/LitigationCases.js |   2 +
 4 files changed, 146 insertions(+), 151 deletions(-)

diff --git a/app/javascript/components/TimeRangeFilter.js b/app/javascript/components/TimeRangeFilter.js
index 3f5fee2eb..7c3eb098b 100644
--- a/app/javascript/components/TimeRangeFilter.js
+++ b/app/javascript/components/TimeRangeFilter.js
@@ -1,10 +1,12 @@
-import React, { Component } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import Select from 'react-select';
 import { Range, Handle } from 'rc-slider';
-import minus from '../../assets/images/icons/dark-minus.svg';
-import plus from '../../assets/images/icons/dark-plus.svg';
 
+import { useOutsideClick } from 'shared/hooks';
+
+import minus from 'images/icons/dark-minus.svg';
+import plus from 'images/icons/dark-plus.svg';
 
 const blueDarkColor = '#2E3152';
 const redColor = '#ED3D48';
@@ -34,147 +36,119 @@ const customStyles = {
   })
 };
 
-class TimeRangeFilter extends Component {
-  constructor(props) {
-    const {minDate, maxDate} = props;
-    super(props);
-    this.state = {
-      isShowOptions: false,
-      last_change_from: null,
-      last_change_to: null,
-      defFromDate: minDate,
-      defToDate: maxDate
-    };
-
-    this.optionsContainer = React.createRef();
-  }
-
-  componentDidMount() {
-    document.addEventListener('mousedown', this.handleClickOutside);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('mousedown', this.handleClickOutside);
-  }
-
-  setShowOptions = value => this.setState({isShowOptions: value});
-
-  handleCloseOptions = () => {
-    this.setShowOptions(false);
-  };
+function TimeRangeFilter(props) {
+  const [showOptions, setShowOptions] = useState(false);
+  const [fromDate, setFromDate] = useState(props.fromDate);
+  const [toDate, setToDate] = useState(props.toDate);
 
-  handleClickOutside = (event) => {
-    if (this.optionsContainer.current && !this.optionsContainer.current.contains(event.target)) {
-      this.handleCloseOptions();
-    }
-  };
+  const { filterName, className, minDate, maxDate } = props;
+
+  const optionsContainer = useRef();
+
+  useOutsideClick(optionsContainer, () => setShowOptions(false));
+  useEffect(() => setFromDate(props.fromDate), [props.fromDate]);
+  useEffect(() => setToDate(props.toDate), [props.toDate]);
 
-  handleChange = (value) => {
-    const {onChange} = this.props;
-    const {last_change_from, last_change_to} = this.state;
-    onChange({
-      last_change_from,
-      last_change_to,
+  const handleChange = (value) => {
+    props.onChange({
+      fromDate,
+      toDate,
       ...value
     });
-    this.setState(value);
   };
 
-  renderOptions = () => {
-    const {filterName, minDate, maxDate} = this.props;
-    const {last_change_from, last_change_to, defFromDate, defToDate} = this.state;
-    const currentToDate = last_change_to || defToDate;
-    const currentFromDate = last_change_from || defFromDate;
-    return (
-      <div className="options-container" ref={this.optionsContainer}>
-        <div className="select-field" onClick={this.handleCloseOptions}>
-          <span>{filterName}</span><span className="toggle-indicator"><img src={minus} alt="" /></span>
+  let selectedCount = 0;
+
+  if (fromDate) selectedCount += 1;
+  if (toDate) selectedCount += 1;
+
+  const currentFromDate = fromDate || minDate;
+  const currentToDate = toDate || maxDate;
+
+  return (
+    <div className={`filter-container ${className}`}>
+      <div className="control-field" onClick={() => setShowOptions(true)}>
+        <div className="select-field">
+          <span>{filterName}</span><span className="toggle-indicator"><img src={plus} alt="" /></span>
         </div>
-        <div className="time-range-options">
-          <div className="slider-range-container">
-            <Range
-              className="slider-range"
-              min={minDate}
-              max={maxDate}
-              trackStyle={[{ backgroundColor: redColor }]}
-              handle={(handleProps) => (
-                <Handle {...handleProps} key={handleProps.index} dragging={handleProps.dragging.toString()}>
-                  <div className={`time-range-handle handle-${handleProps.index}`}>{handleProps.value}</div>
-                </Handle>
-              )}
-              handleStyle={[
-                { backgroundColor: redColor, border: 'none', height: '12px', width: '12px', marginTop: '-4px' },
-                { backgroundColor: redColor, border: 'none', height: '18px', width: '18px', marginTop: '-7px' }
-              ]}
-              value={[last_change_from || defFromDate, last_change_to || defToDate]}
-              onChange={(e) => this.setState({last_change_from: e[0], last_change_to: e[1]})}
-              onAfterChange={(e) => this.handleChange({last_change_from: e[0], last_change_to: e[1]})}
-              railStyle={{ backgroundColor: greyColor, maxHeight: '2px', marginTop: '1px' }}
-              activeDotStyle={{border: 'none'}}
-            />
-            <div className="values-row">
-              <span>{minDate}</span>
-              <span>{maxDate}</span>
-            </div>
+        {selectedCount !== 0 && <div className="selected-count">{selectedCount} selected</div>}
+      </div>
+      {showOptions && (
+        <div className="options-container" ref={optionsContainer}>
+          <div className="select-field" onClick={() => setShowOptions(false)}>
+            <span>{filterName}</span><span className="toggle-indicator"><img src={minus} alt="" /></span>
           </div>
-          <div className="filter-item">
-            <div className="caption">From</div>
-            <Select
-              options={
+          <div className="time-range-options">
+            <div className="slider-range-container">
+              <Range
+                className="slider-range"
+                min={minDate}
+                max={maxDate}
+                trackStyle={[{ backgroundColor: redColor }]}
+                handle={(handleProps) => (
+                  <Handle {...handleProps} key={handleProps.index} dragging={handleProps.dragging.toString()}>
+                    <div className={`time-range-handle handle-${handleProps.index}`}>{handleProps.value}</div>
+                  </Handle>
+                )}
+                handleStyle={[
+                  { backgroundColor: redColor, border: 'none', height: '12px', width: '12px', marginTop: '-4px' },
+                  { backgroundColor: redColor, border: 'none', height: '18px', width: '18px', marginTop: '-7px' }
+                ]}
+                value={[currentFromDate, currentToDate]}
+                onChange={(e) => {
+                  setFromDate(e[0]);
+                  setToDate(e[1]);
+                }}
+                onAfterChange={(e) => handleChange({fromDate: e[0], toDate: e[1]})}
+                railStyle={{ backgroundColor: greyColor, maxHeight: '2px', marginTop: '1px' }}
+                activeDotStyle={{border: 'none'}}
+              />
+              <div className="values-row">
+                <span>{minDate}</span>
+                <span>{maxDate}</span>
+              </div>
+            </div>
+            <div className="filter-item">
+              <div className="caption">From</div>
+              <Select
+                options={
                 [...new Array(currentToDate - minDate + 1)].map((v, i) => (
                   {value: currentToDate - i, label: currentToDate - i}
                 ))
-              }
-              styles={customStyles}
-              isSearchable={false}
-              value={{label: last_change_from || defFromDate, value: last_change_from || defFromDate}}
-              onChange={(e) => this.handleChange({last_change_from: e.value})}
-              components={{IndicatorSeparator: () => null}}
-            />
-          </div>
-          <div className="filter-item">
-            <div className="caption">To</div>
-            <Select
-              options={
+                }
+                styles={customStyles}
+                isSearchable={false}
+                value={{label: currentFromDate, value: currentFromDate}}
+                onChange={(e) => handleChange({fromDate: e.value})}
+                components={{IndicatorSeparator: () => null}}
+              />
+            </div>
+            <div className="filter-item">
+              <div className="caption">To</div>
+              <Select
+                options={
                 [...new Array(maxDate - currentFromDate + 1)].map((_, i) => (
                   {value: currentFromDate + i, label: currentFromDate + i})).reverse()
-              }
-              styles={customStyles}
-              isSearchable={false}
-              value={{label: last_change_to || defToDate, value: last_change_to || defToDate}}
-              onChange={(e) => this.handleChange({last_change_to: e.value})}
-              components={{IndicatorSeparator: () => null}}
-            />
-          </div>
-        </div>
-      </div>
-    );
-  };
-
-  render() {
-    const {isShowOptions, last_change_from, last_change_to} = this.state;
-    const {filterName, className} = this.props;
-    let selectedCount = 0;
-    if (last_change_from) selectedCount += 1;
-    if (last_change_to) selectedCount += 1;
-
-    return (
-      <div className={`filter-container ${className}`}>
-        <div className="control-field" onClick={() => this.setShowOptions(true)}>
-          <div className="select-field">
-            <span>{filterName}</span><span className="toggle-indicator"><img src={plus} alt="" /></span>
+                }
+                styles={customStyles}
+                isSearchable={false}
+                value={{label: currentToDate, value: currentToDate}}
+                onChange={(e) => handleChange({toDate: e.value})}
+                components={{IndicatorSeparator: () => null}}
+              />
+            </div>
           </div>
-          {selectedCount !== 0 && <div className="selected-count">{selectedCount} selected</div>}
         </div>
-        { isShowOptions && this.renderOptions()}
-      </div>
-    );
-  }
+      )}
+    </div>
+  );
 }
 
 TimeRangeFilter.defaultProps = {
   className: '',
   onChange: () => {},
+  fromDate: null,
+  toDate: null,
   filterName: 'Time range',
   minDate: 1990,
   maxDate: new Date().getUTCFullYear()
@@ -185,6 +159,8 @@ TimeRangeFilter.propTypes = {
   filterName: PropTypes.string,
   minDate: PropTypes.number,
   maxDate: PropTypes.number,
+  fromDate: PropTypes.number,
+  toDate: PropTypes.number,
   onChange: PropTypes.func
 };
 
diff --git a/app/javascript/components/pages/cclow/LegislationAndPolicies.js b/app/javascript/components/pages/cclow/LegislationAndPolicies.js
index 6fbc6ccb0..e51f029f9 100644
--- a/app/javascript/components/pages/cclow/LegislationAndPolicies.js
+++ b/app/javascript/components/pages/cclow/LegislationAndPolicies.js
@@ -43,6 +43,8 @@ function LegislationAndPolicies(props) {
       title: 'Date of last change',
       timeRange: true,
       mainFilter: true,
+      fromParam: 'last_change_from',
+      toParam: 'last_change_to',
       params: {
         last_change_from: paramInteger,
         last_change_to: paramInteger
diff --git a/app/javascript/components/pages/cclow/List.js b/app/javascript/components/pages/cclow/List.js
index 065ce7810..a4c2222c8 100644
--- a/app/javascript/components/pages/cclow/List.js
+++ b/app/javascript/components/pages/cclow/List.js
@@ -158,13 +158,24 @@ class List extends Component {
     const className = isHidden ? 'hidden' : '';
 
     if (filterConfig.timeRange) {
+      const { fromParam, toParam } = filterConfig;
+
+      const handleTimeRangeFilterChange = ({ fromDate, toDate }) => {
+        this.handleFilterChange({
+          [fromParam]: fromDate,
+          [toParam]: toDate
+        });
+      };
+
       return (
         <TimeRangeFilter
           key={`filter_${name}`}
           ref={this.filterRefs[name]}
           filterName={title}
           className={className}
-          onChange={this.handleFilterChange}
+          fromDate={filters[fromParam]}
+          toDate={filters[toParam]}
+          onChange={handleTimeRangeFilterChange}
         />
       );
     }
@@ -230,11 +241,11 @@ class List extends Component {
 
   renderTagsGroup = (filterConfig) => {
     const { filters } = this.state;
-    const { name, options, title, timeRange } = filterConfig;
+    const { name, options, timeRange } = filterConfig;
     const activeTags = pick(filters, Object.keys(filterConfig.params));
     const filterEl = this.filterRefs[name];
 
-    if (timeRange) return this.renderTimeRangeTags(activeTags, title, filterEl);
+    if (timeRange) return this.renderTimeRangeTags(activeTags, filterConfig);
 
     return Object.keys(activeTags).map((keyBlock) => (
       activeTags[keyBlock].filter(x => x).map((key, i) => (
@@ -246,30 +257,34 @@ class List extends Component {
     ));
   }
 
-  renderTimeRangeTags = (value, title, filterEl) => (
-    <Fragment key="time-range-filters">
-      {value.last_change_from && (
-        <span key="tag-time-range-from" className="tag">
-          {title} from {value.last_change_from}
-          <button
-            type="button"
-            onClick={() => filterEl.current.handleChange({last_change_from: null})}
-            className="delete"
-          />
-        </span>
-      )}
-      {value.last_change_to && (
-        <span key="tag-time-range-to" className="tag">
-          {title} to {value.last_change_to}
-          <button
-            type="button"
-            onClick={() => filterEl.current.handleChange({last_change_to: null})}
-            className="delete"
-          />
-        </span>
-      )}
-    </Fragment>
-  );
+  renderTimeRangeTags = (value, filterConfig) => {
+    const { fromParam, toParam, title } = filterConfig;
+
+    return (
+      <Fragment key="time-range-filters">
+        {value.last_change_from && (
+          <span key="tag-time-range-from" className="tag">
+            {title} from {value.last_change_from}
+            <button
+              type="button"
+              onClick={() => this.handleFilterChange({ [fromParam]: null })}
+              className="delete"
+            />
+          </span>
+        )}
+        {value.last_change_to && (
+          <span key="tag-time-range-to" className="tag">
+            {title} to {value.last_change_to}
+            <button
+              type="button"
+              onClick={() => this.handleFilterChange({ [toParam]: null })}
+              className="delete"
+            />
+          </span>
+        )}
+      </Fragment>
+    );
+  }
 
   renderNoItemsMessage() {
     const { title } = this.props;
diff --git a/app/javascript/components/pages/cclow/LitigationCases.js b/app/javascript/components/pages/cclow/LitigationCases.js
index 476fd5e38..186782788 100644
--- a/app/javascript/components/pages/cclow/LitigationCases.js
+++ b/app/javascript/components/pages/cclow/LitigationCases.js
@@ -44,6 +44,8 @@ function LitigationCases(props) {
       title: 'Date of last change',
       timeRange: true,
       mainFilter: true,
+      fromParam: 'last_change_from',
+      toParam: 'last_change_to',
       params: {
         last_change_from: paramInteger,
         last_change_to: paramInteger

From e5e57ac7a057adb0d3fd1e08eea4b4d110ecc72c Mon Sep 17 00:00:00 2001
From: Tomasz <tsubik@gmail.com>
Date: Wed, 22 Apr 2020 13:22:23 +0200
Subject: [PATCH 3/7] filter legislations by date of law passed

---
 .../legislation_and_policies_controller.rb    |  1 +
 .../concerns/cclow/filter_controller.rb       |  1 +
 .../pages/cclow/LegislationAndPolicies.js     | 12 ++++++++
 app/javascript/components/pages/cclow/List.js | 21 +++++++-------
 .../queries/cclow/legislation_query.rb        | 14 +++++++++
 .../queries/cclow/legislation_query_spec.rb   | 29 +++++++++++++++----
 6 files changed, 62 insertions(+), 16 deletions(-)

diff --git a/app/controllers/cclow/legislation_and_policies_controller.rb b/app/controllers/cclow/legislation_and_policies_controller.rb
index 0e6fe6236..e9f8b4862 100644
--- a/app/controllers/cclow/legislation_and_policies_controller.rb
+++ b/app/controllers/cclow/legislation_and_policies_controller.rb
@@ -1,6 +1,7 @@
 module CCLOW
   class LegislationAndPoliciesController < CCLOWController
     include FilterController
+
     def index
       add_breadcrumb('Climate Change Laws of the World', cclow_root_path)
       add_breadcrumb('Laws and policies', cclow_legislation_and_policies_path)
diff --git a/app/controllers/concerns/cclow/filter_controller.rb b/app/controllers/concerns/cclow/filter_controller.rb
index 2e54ca735..fc533d3c9 100644
--- a/app/controllers/concerns/cclow/filter_controller.rb
+++ b/app/controllers/concerns/cclow/filter_controller.rb
@@ -98,6 +98,7 @@ def target_years_options
 
     def filter_params
       params.permit(:q, :last_change_from, :last_change_to, :recent, :ids,
+                    :law_passed_from, :law_passed_to,
                     target_year: [], region: [], geography: [], jurisdiction: [],
                     status: [], type: [], keywords: [], responses: [],
                     frameworks: [], natural_hazards: [], party_type: [],
diff --git a/app/javascript/components/pages/cclow/LegislationAndPolicies.js b/app/javascript/components/pages/cclow/LegislationAndPolicies.js
index e51f029f9..1c0945e81 100644
--- a/app/javascript/components/pages/cclow/LegislationAndPolicies.js
+++ b/app/javascript/components/pages/cclow/LegislationAndPolicies.js
@@ -38,6 +38,18 @@ function LegislationAndPolicies(props) {
         region: paramIntegerArray
       }
     },
+    {
+      name: 'dateOfLawPassed',
+      title: 'Date of law passed',
+      timeRange: true,
+      mainFilter: true,
+      fromParam: 'law_passed_from',
+      toParam: 'law_passed_to',
+      params: {
+        law_passed_from: paramInteger,
+        law_passed_to: paramInteger
+      }
+    },
     {
       name: 'dateOfLastChange',
       title: 'Date of last change',
diff --git a/app/javascript/components/pages/cclow/List.js b/app/javascript/components/pages/cclow/List.js
index a4c2222c8..32d1afb51 100644
--- a/app/javascript/components/pages/cclow/List.js
+++ b/app/javascript/components/pages/cclow/List.js
@@ -170,7 +170,6 @@ class List extends Component {
       return (
         <TimeRangeFilter
           key={`filter_${name}`}
-          ref={this.filterRefs[name]}
           filterName={title}
           className={className}
           fromDate={filters[fromParam]}
@@ -257,14 +256,16 @@ class List extends Component {
     ));
   }
 
-  renderTimeRangeTags = (value, filterConfig) => {
-    const { fromParam, toParam, title } = filterConfig;
+  renderTimeRangeTags = (activeFilters, filterConfig) => {
+    const { name, fromParam, toParam, title } = filterConfig;
+    const fromDate = activeFilters[fromParam];
+    const toDate = activeFilters[toParam];
 
     return (
-      <Fragment key="time-range-filters">
-        {value.last_change_from && (
-          <span key="tag-time-range-from" className="tag">
-            {title} from {value.last_change_from}
+      <Fragment key={`${name}-filter-tag`}>
+        {fromDate && (
+          <span className="tag">
+            {title} from {fromDate}
             <button
               type="button"
               onClick={() => this.handleFilterChange({ [fromParam]: null })}
@@ -272,9 +273,9 @@ class List extends Component {
             />
           </span>
         )}
-        {value.last_change_to && (
-          <span key="tag-time-range-to" className="tag">
-            {title} to {value.last_change_to}
+        {toDate && (
+          <span className="tag">
+            {title} to {toDate}
             <button
               type="button"
               onClick={() => this.handleFilterChange({ [toParam]: null })}
diff --git a/app/services/queries/cclow/legislation_query.rb b/app/services/queries/cclow/legislation_query.rb
index ab94c13e8..b07738b43 100644
--- a/app/services/queries/cclow/legislation_query.rb
+++ b/app/services/queries/cclow/legislation_query.rb
@@ -22,6 +22,8 @@ def call(scope = Legislation.published)
           .merge(filter_by_governances)
           .merge(filter_by_last_change_from)
           .merge(filter_by_last_change_to)
+          .merge(filter_by_law_passed_from)
+          .merge(filter_by_law_passed_to)
           .merge(filter_by_type)
           .merge(filter_recent)
           .merge(filter_by_sector)
@@ -48,6 +50,18 @@ def filter_by_type
 
         scope.where(legislation_type: params[:type])
       end
+
+      def filter_by_law_passed_from
+        return scope unless params[:law_passed_from].present?
+
+        scope.passed.where('events.date >= (?)', Date.new(params[:law_passed_from].to_i, 1, 1))
+      end
+
+      def filter_by_law_passed_to
+        return scope unless params[:law_passed_to].present?
+
+        scope.passed.where('events.date <= (?)', Date.new(params[:law_passed_to].to_i, 1, 1))
+      end
     end
   end
 end
diff --git a/spec/services/queries/cclow/legislation_query_spec.rb b/spec/services/queries/cclow/legislation_query_spec.rb
index 8ca08fbc1..d9ec664cd 100644
--- a/spec/services/queries/cclow/legislation_query_spec.rb
+++ b/spec/services/queries/cclow/legislation_query_spec.rb
@@ -31,7 +31,7 @@
       responses: [@adaptation],
       instruments: [@instrument1, @instrument3],
       events: [
-        build(:event, event_type: 'law_passed', date: '2010-01-01'),
+        build(:event, event_type: 'law_passed', date: '2009-01-01'),
         build(:event, event_type: 'amended', date: '2013-03-01')
       ]
     )
@@ -59,7 +59,8 @@
       laws_sectors: [@sector3],
       title: 'Zimbabwe: National contingency plan 2012-2013',
       events: [
-        build(:event, event_type: 'law_passed', date: '2016-12-02')
+        build(:event, event_type: 'law_passed', date: '2016-12-02'),
+        build(:event, event_type: 'amended', date: '2019-03-01')
       ]
     )
 
@@ -72,7 +73,8 @@
       title: 'Some natural law',
       responses: [@adaptation],
       events: [
-        build(:event, event_type: 'law_passed', date: '2010-12-02')
+        build(:event, event_type: 'law_passed', date: '2010-12-02'),
+        build(:event, event_type: 'amended', date: '2018-03-01')
       ]
     )
 
@@ -149,14 +151,29 @@
 
     it 'should filter by date of last change from' do
       results = subject.new(last_change_from: '2011').call
-      expect(results).to contain_exactly(@legislation1, @legislation2, @legislation3)
+      expect(results).to contain_exactly(@legislation1, @legislation2, @legislation3, @legislation4)
     end
 
-    it 'should filter by to date' do
+    it 'should filter by date of last change to' do
       results = subject.new(last_change_to: '2013').call
+      expect(results).to contain_exactly(@legislation1)
+    end
+
+    it 'should filter by date of law passed from' do
+      results = subject.new(law_passed_from: '2011').call
+      expect(results).to contain_exactly(@legislation2, @legislation3)
+    end
+
+    it 'should filter by date of law passed to' do
+      results = subject.new(law_passed_to: '2013').call
       expect(results).to contain_exactly(@legislation1, @legislation4)
     end
 
+    it 'should filter by events dates' do
+      results = subject.new(law_passed_from: '2010', last_change_from: '2017').call
+      expect(results).to contain_exactly(@legislation3, @legislation4)
+    end
+
     it 'should filter by multiple params' do
       results = subject.new(q: 'Nat', last_change_from: '2014', instrument: [@instrument3.id]).call
       expect(results).to contain_exactly(@legislation3)
@@ -164,7 +181,7 @@
 
     it 'should be ordered by last event date' do
       results = subject.new({}).call
-      expect(results.map(&:id)).to eq([@legislation3.id, @legislation2.id, @legislation1.id, @legislation4.id])
+      expect(results.map(&:id)).to eq([@legislation3.id, @legislation4.id, @legislation2.id, @legislation1.id])
     end
   end
 end

From b3ab39a298ccba0cd73a2eda44f996480d9c26e7 Mon Sep 17 00:00:00 2001
From: Tomasz <tsubik@gmail.com>
Date: Wed, 22 Apr 2020 13:48:44 +0200
Subject: [PATCH 4/7] find out min date for law passed filter

---
 app/controllers/cclow/legislation_and_policies_controller.rb  | 1 +
 .../components/pages/cclow/LegislationAndPolicies.js          | 4 ++++
 app/javascript/components/pages/cclow/List.js                 | 3 ++-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/controllers/cclow/legislation_and_policies_controller.rb b/app/controllers/cclow/legislation_and_policies_controller.rb
index e9f8b4862..bddf2842d 100644
--- a/app/controllers/cclow/legislation_and_policies_controller.rb
+++ b/app/controllers/cclow/legislation_and_policies_controller.rb
@@ -14,6 +14,7 @@ def index
       respond_to do |format|
         format.html do
           render component: 'pages/cclow/LegislationAndPolicies', props: {
+            min_law_passed_year: Legislation.published.passed.minimum('events.date')&.year,
             geo_filter_options: region_geography_options,
             keywords_filter_options: tags_options('Legislation', 'Keyword'),
             responses_filter_options: tags_options('Legislation', 'Response'),
diff --git a/app/javascript/components/pages/cclow/LegislationAndPolicies.js b/app/javascript/components/pages/cclow/LegislationAndPolicies.js
index 1c0945e81..5cca2aae9 100644
--- a/app/javascript/components/pages/cclow/LegislationAndPolicies.js
+++ b/app/javascript/components/pages/cclow/LegislationAndPolicies.js
@@ -16,6 +16,7 @@ function LegislationAndPolicies(props) {
   const {
     legislations,
     count,
+    min_law_passed_year,
     geo_filter_options,
     keywords_filter_options,
     responses_filter_options,
@@ -45,6 +46,7 @@ function LegislationAndPolicies(props) {
       mainFilter: true,
       fromParam: 'law_passed_from',
       toParam: 'law_passed_to',
+      minDate: min_law_passed_year,
       params: {
         law_passed_from: paramInteger,
         law_passed_to: paramInteger
@@ -171,6 +173,7 @@ function LegislationAndPolicies(props) {
 
 LegislationAndPolicies.defaultProps = {
   count: 0,
+  min_law_passed_year: 1990,
   geo_filter_options: [],
   keywords_filter_options: [],
   responses_filter_options: [],
@@ -185,6 +188,7 @@ LegislationAndPolicies.defaultProps = {
 LegislationAndPolicies.propTypes = {
   legislations: PropTypes.array.isRequired,
   count: PropTypes.number,
+  min_law_passed_year: PropTypes.number,
   geo_filter_options: PropTypes.array,
   keywords_filter_options: PropTypes.array,
   responses_filter_options: PropTypes.array,
diff --git a/app/javascript/components/pages/cclow/List.js b/app/javascript/components/pages/cclow/List.js
index 32d1afb51..5903042c9 100644
--- a/app/javascript/components/pages/cclow/List.js
+++ b/app/javascript/components/pages/cclow/List.js
@@ -158,7 +158,7 @@ class List extends Component {
     const className = isHidden ? 'hidden' : '';
 
     if (filterConfig.timeRange) {
-      const { fromParam, toParam } = filterConfig;
+      const { fromParam, toParam, minDate } = filterConfig;
 
       const handleTimeRangeFilterChange = ({ fromDate, toDate }) => {
         this.handleFilterChange({
@@ -172,6 +172,7 @@ class List extends Component {
           key={`filter_${name}`}
           filterName={title}
           className={className}
+          minDate={minDate}
           fromDate={filters[fromParam]}
           toDate={filters[toParam]}
           onChange={handleTimeRangeFilterChange}

From 942f76235dc890c2dd5b1a0ecedb1b8190a6d83d Mon Sep 17 00:00:00 2001
From: Tomasz <tsubik@gmail.com>
Date: Wed, 22 Apr 2020 13:52:04 +0200
Subject: [PATCH 5/7] fix law passed to filter

---
 app/services/queries/cclow/legislation_query.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/services/queries/cclow/legislation_query.rb b/app/services/queries/cclow/legislation_query.rb
index b07738b43..956f1c222 100644
--- a/app/services/queries/cclow/legislation_query.rb
+++ b/app/services/queries/cclow/legislation_query.rb
@@ -60,7 +60,7 @@ def filter_by_law_passed_from
       def filter_by_law_passed_to
         return scope unless params[:law_passed_to].present?
 
-        scope.passed.where('events.date <= (?)', Date.new(params[:law_passed_to].to_i, 1, 1))
+        scope.passed.where('events.date <= (?)', Date.new(params[:law_passed_to].to_i, 12, 31))
       end
     end
   end

From d1506a5935920fa6e9efa53bb192840b7e8c95fd Mon Sep 17 00:00:00 2001
From: Tomasz <tsubik@gmail.com>
Date: Thu, 23 Apr 2020 14:00:48 +0200
Subject: [PATCH 6/7] add filter for case started date

---
 .../concerns/cclow/filter_controller.rb       |  2 +-
 .../components/pages/cclow/LitigationCases.js | 12 ++++++++++
 .../queries/cclow/litigation_query.rb         | 14 +++++++++++
 .../queries/cclow/litigation_query_spec.rb    | 24 +++++++++++++++++--
 4 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/app/controllers/concerns/cclow/filter_controller.rb b/app/controllers/concerns/cclow/filter_controller.rb
index fc533d3c9..8700f2f2f 100644
--- a/app/controllers/concerns/cclow/filter_controller.rb
+++ b/app/controllers/concerns/cclow/filter_controller.rb
@@ -98,7 +98,7 @@ def target_years_options
 
     def filter_params
       params.permit(:q, :last_change_from, :last_change_to, :recent, :ids,
-                    :law_passed_from, :law_passed_to,
+                    :law_passed_from, :law_passed_to, :case_started_from, :case_started_to,
                     target_year: [], region: [], geography: [], jurisdiction: [],
                     status: [], type: [], keywords: [], responses: [],
                     frameworks: [], natural_hazards: [], party_type: [],
diff --git a/app/javascript/components/pages/cclow/LitigationCases.js b/app/javascript/components/pages/cclow/LitigationCases.js
index 186782788..426da9eed 100644
--- a/app/javascript/components/pages/cclow/LitigationCases.js
+++ b/app/javascript/components/pages/cclow/LitigationCases.js
@@ -39,6 +39,18 @@ function LitigationCases(props) {
         region: paramIntegerArray
       }
     },
+    {
+      name: 'dateOfCaseStarted',
+      title: 'Date of case started',
+      timeRange: true,
+      mainFilter: true,
+      fromParam: 'case_started_from',
+      toParam: 'case_started_to',
+      params: {
+        case_started_from: paramInteger,
+        case_started_to: paramInteger
+      }
+    },
     {
       name: 'dateOfLastChange',
       title: 'Date of last change',
diff --git a/app/services/queries/cclow/litigation_query.rb b/app/services/queries/cclow/litigation_query.rb
index a776da3a3..e50edfc32 100644
--- a/app/services/queries/cclow/litigation_query.rb
+++ b/app/services/queries/cclow/litigation_query.rb
@@ -20,6 +20,8 @@ def call(scope = Litigation.published)
           .merge(filter_by_tags)
           .merge(filter_by_last_change_from)
           .merge(filter_by_last_change_to)
+          .merge(filter_by_case_started_from)
+          .merge(filter_by_case_started_to)
           .merge(filter_by_to_status)
           .merge(filter_by_litigation_sides)
           .merge(filter_by_litigation_side_party_types)
@@ -78,6 +80,18 @@ def filter_by_jurisdiction
 
         scope.where(jurisdiction: params[:jurisdiction])
       end
+
+      def filter_by_case_started_from
+        return scope unless params[:case_started_from].present?
+
+        scope.started.where('events.date >= (?)', Date.new(params[:case_started_from].to_i, 1, 1))
+      end
+
+      def filter_by_case_started_to
+        return scope unless params[:case_started_to].present?
+
+        scope.started.where('events.date <= (?)', Date.new(params[:case_started_to].to_i, 12, 31))
+      end
     end
   end
 end
diff --git a/spec/services/queries/cclow/litigation_query_spec.rb b/spec/services/queries/cclow/litigation_query_spec.rb
index f83c7b9cb..52bc3a1fe 100644
--- a/spec/services/queries/cclow/litigation_query_spec.rb
+++ b/spec/services/queries/cclow/litigation_query_spec.rb
@@ -34,6 +34,7 @@
       keywords: [@biodiversity, @cap_and_trade],
       events: [
         build(:event, event_type: 'case_started', date: '2010-01-01'),
+        build(:event, event_type: 'first_decision', date: '2012-03-01'),
         build(:event, event_type: 'case_decided', date: '2013-03-01')
       ]
     )
@@ -48,24 +49,28 @@
       litigation_sides: [@side_a2],
       keywords: [@business_risk, @cap_and_trade],
       events: [
-        build(:event, event_type: 'case_started', date: '2014-12-02')
+        build(:event, event_type: 'case_opened', date: '2014-12-02'),
+        build(:event, event_type: 'first_decision', date: '2016-03-01')
       ]
     )
 
     @litigation3 = create(
       :litigation,
       :published,
+      title: 'Friends of Earth vs Germany',
       geography: @geography3,
       laws_sectors: [@sector3],
       litigation_sides: [@side_c2],
       events: [
-        build(:event, event_type: 'case_started', date: '2016-12-02')
+        build(:event, event_type: 'case_started', date: '2016-12-02'),
+        build(:event, event_type: 'first_decision', date: '2019-03-01')
       ]
     )
 
     @litigation4 = create(
       :litigation,
       :published,
+      title: 'Friends vs DJ BOBO',
       geography: @geography1,
       laws_sectors: [@sector2]
     )
@@ -140,6 +145,21 @@
       expect(results).to contain_exactly(@litigation1)
     end
 
+    it 'should filter by date of case started from' do
+      results = subject.new(case_started_from: '2011').call
+      expect(results).to contain_exactly(@litigation2, @litigation3)
+    end
+
+    it 'should filter by date of case started to' do
+      results = subject.new(case_started_to: '2014').call
+      expect(results).to contain_exactly(@litigation1, @litigation2)
+    end
+
+    it 'should filter by events dates' do
+      results = subject.new(case_started_from: '2011', last_change_from: '2017').call
+      expect(results).to contain_exactly(@litigation3)
+    end
+
     it 'should filter by single litigaton side a' do
       results = subject.new(side_a: ['Side A']).call
       expect(results).to contain_exactly(@litigation1)

From 6b8620393c9436a80ac0aff24c5a894c65bfa576 Mon Sep 17 00:00:00 2001
From: Tomasz <tsubik@gmail.com>
Date: Thu, 23 Apr 2020 14:17:33 +0200
Subject: [PATCH 7/7] change selected count to selected title for time range
 filter

---
 app/javascript/components/TimeRangeFilter.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/app/javascript/components/TimeRangeFilter.js b/app/javascript/components/TimeRangeFilter.js
index 7c3eb098b..014c5a9fd 100644
--- a/app/javascript/components/TimeRangeFilter.js
+++ b/app/javascript/components/TimeRangeFilter.js
@@ -57,21 +57,26 @@ function TimeRangeFilter(props) {
     });
   };
 
-  let selectedCount = 0;
+  const capitalizeFirstLetter = (string) => {
+    if (typeof string !== 'string') return null;
 
-  if (fromDate) selectedCount += 1;
-  if (toDate) selectedCount += 1;
+    return string.charAt(0).toUpperCase() + string.slice(1);
+  };
 
   const currentFromDate = fromDate || minDate;
   const currentToDate = toDate || maxDate;
 
+  let selectedTitle = fromDate ? `from ${fromDate} ` : '';
+  selectedTitle += toDate ? `to ${toDate}` : '';
+  if (selectedTitle) selectedTitle = capitalizeFirstLetter(selectedTitle);
+
   return (
     <div className={`filter-container ${className}`}>
       <div className="control-field" onClick={() => setShowOptions(true)}>
         <div className="select-field">
           <span>{filterName}</span><span className="toggle-indicator"><img src={plus} alt="" /></span>
         </div>
-        {selectedCount !== 0 && <div className="selected-count">{selectedCount} selected</div>}
+        {selectedTitle && <div className="selected-count">{selectedTitle}</div>}
       </div>
       {showOptions && (
         <div className="options-container" ref={optionsContainer}>