fix(pricesRange): fill the form according to the current refinement (#1126)

fixes #1009

Author: vvo

src/components/PriceRanges/PriceRanges.js

@@ -8,7 +8,6 @@ import isEqual from 'lodash/lang/isEqual';
 class PriceRanges extends React.Component {
   componentWillMount() {
     this.refine = this.refine.bind(this);
-    this.form = this.getForm();
   }
 
   shouldComponentUpdate(nextProps) {
@@ -21,9 +20,20 @@ class PriceRanges extends React.Component {
       ...this.props.labels
     };
 
+    let currentRefinement;
+    if (this.props.facetValues.length === 1) {
+      currentRefinement = {
+        from: this.props.facetValues[0].from !== undefined ? this.props.facetValues[0].from : '',
+        to: this.props.facetValues[0].to !== undefined ? this.props.facetValues[0].to : ''
+      };
+    } else {
+      currentRefinement = {from: '', to: ''};
+    }
+
     return (
       <PriceRangesForm
         cssClasses={this.props.cssClasses}
+        currentRefinement={currentRefinement}
         labels={labels}
         refine={this.refine}
       />
@@ -67,7 +77,7 @@ class PriceRanges extends React.Component {
             return this.getItemFromFacetValue(facetValue);
           })}
         </div>
-        {this.form}
+        {this.getForm()}
       </div>
     );
   }

src/components/PriceRanges/PriceRangesForm.js

@@ -1,26 +1,45 @@
 import React from 'react';
 
 class PriceRangesForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      from: props.currentRefinement.from,
+      to: props.currentRefinement.to
+    };
+  }
+
   componentWillMount() {
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
-  shouldComponentUpdate() {
-    return false;
+  componentWillReceiveProps(props) {
+    this.setState({
+      from: props.currentRefinement.from,
+      to: props.currentRefinement.to
+    });
   }
 
   getInput(type) {
     return (
       <label className={this.props.cssClasses.label}>
         <span className={this.props.cssClasses.currency}>{this.props.labels.currency} </span>
-        <input className={this.props.cssClasses.input} ref={type} type="number" />
+        <input
+          className={this.props.cssClasses.input}
+          onChange={e => this.setState({[type]: e.target.value})}
+          ref={type}
+          type="number"
+          value={this.state[type]}
+        />
       </label>
     );
   }
 
   handleSubmit(event) {
-    let from = +this.refs.from.value || undefined;
-    let to = +this.refs.to.value || undefined;
+    let from = this.refs.from.value !== '' ?
+      parseInt(this.refs.from.value, 10) : undefined;
+    let to = this.refs.to.value !== '' ?
+      parseInt(this.refs.to.value, 10) : undefined;
     this.props.refine(from, to, event);
   }
 
@@ -48,6 +67,10 @@ PriceRangesForm.propTypes = {
     label: React.PropTypes.string,
     separator: React.PropTypes.string
   }),
+  currentRefinement: React.PropTypes.shape({
+    from: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
+    to: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number])
+  }),
   labels: React.PropTypes.shape({
     button: React.PropTypes.string,
     currency: React.PropTypes.string,
@@ -64,4 +87,3 @@ PriceRangesForm.defaultProps = {
 
 
 export default PriceRangesForm;
-

src/components/PriceRanges/__tests__/PriceRanges-test.js

@@ -139,7 +139,8 @@ describe('PriceRanges', () => {
           cssClasses: 'cssClasses',
           labels: {button: 'hello'},
           currency: '$',
-          refine: 'refine'
+          refine: 'refine',
+          facetValues: [{from: 0, to: 10}, {from: 10, to: 20}]
         };
         let component = getComponentWithMockRendering(props);
 
@@ -150,6 +151,7 @@ describe('PriceRanges', () => {
         expect(form).toEqualJSX(
           <PriceRangesForm
             cssClasses={props.cssClasses}
+            currentRefinement={{from: '', to: ''}}
             labels={{button: 'hello', currency: '$'}}
             refine={() => {}}
           />

src/components/PriceRanges/__tests__/PriceRangesForm-test.js

@@ -45,18 +45,22 @@ describe('PriceRangesForm', () => {
           currency: 'currency',
           separator: 'separator',
           button: 'button'
+        },
+        currentRefinement: {
+          from: 10,
+          to: 20
         }
       });
       expect(out).toEqualJSX(
         <form className="form" onSubmit={() => {}} ref="form">
           <label className="label">
             <span className="currency">$ </span>
-            <input className="input" ref="from" type="number" />
+            <input className="input" onChange={() => {}} ref="from" type="number" value={10} />
           </label>
           <span className="separator"> to </span>
           <label className="label">
             <span className="currency">$ </span>
-            <input className="input" ref="to" type="number" />
+            <input className="input" onChange={() => {}} ref="to" type="number" value={20} />
           </label>
           <button className="button" type="submit">Go</button>
         </form>
@@ -69,7 +73,15 @@ describe('PriceRangesForm', () => {
       // Given
       let refine = sinon.spy();
       let handleSubmitMock = sinon.spy(PriceRangesForm.prototype, 'handleSubmit');
-      let component = TestUtils.renderIntoDocument(<PriceRangesForm refine={refine} />);
+      let component = TestUtils.renderIntoDocument(
+        <PriceRangesForm
+          currentRefinement={{
+            from: 10,
+            to: 20
+          }}
+          refine={refine}
+        />
+      );
 
       // When
       component.refs.from.value = 10;