/* eslint import/no-unresolved: 0 */

import React, { Fragment, Component } from "react";

import Loading from "../../Loading";
import honeybadger from "../../utils/honeybadger";
import TimeParser from "../../utils/time_parser";


class BikeSearch extends Component {
  // loading states :
  // null before querying
  // true when loading
  // false when query complete

  state = {
    loading: null,
    results: []
  }

  componentDidMount() {
    this.resultsBeingFetched();
    this.props.fetchBikes(this.props.interpretedParams)
      .then(this.resultsFetched)
      .catch(this.handleError);
  }

  componentDidUpdate() {
    TimeParser().localize();
  }

  resultsBeingFetched = () => {
    this.setState({ loading: true });
  }

  resultsFetched = ({ bikes, error }) => {
    const results = bikes || [];
    const loading = (!results.length) ? null : false;
    this.setState({ results , loading });
    if (error) { this.handleError(error) }
  }

  handleError = error => {
    honeybadger.notify(error, { component: this.props.searchName });
  }

  render() {
    const stolenness = {
      "non": "abandoned",
      "all": "all",
      "stolen": "stolen",
    }[this.props.interpretedParams.stolenness];
    const { serial } = this.props.interpretedParams;

    if (this.state.loading === null) {
      return <div className="row">
               <div className="col-md-12">
                 <h3 className="no-exact-results">
                   {this.props.t("no_matches_found_html", { serial })}
                 </h3>
               </div>
             </div>

    }

    if (this.state.loading) {
      return <div className="row">
               <div className="col-md-12">
                 <h3 className="secondary-matches">
                   {this.props.t("searching_html", { serial })}
                 </h3>
                 <Loading />;
               </div>
             </div>
    }

    const Result = this.props.resultComponent;
    return (
      <div className="row">
        <div className="col-md-12">
          <h3 className="secondary-matches">
            {this.props.t("matches_found_html", { serial, stolenness })}
          </h3>
          <ul className="bike-boxes">
            {this.state.results.map(bike => <Result key={bike.id} bike={bike}/>)}
          </ul>
        </div>
      </div>
    )
  }
};

export default BikeSearch;

@@ -1070,153 +1070,8 @@
 ) %7B%0A
-    const stolenness = %7B%0A      %22non%22: %22abandoned%22,%0A      %22all%22: %22all%22,%0A      %22stolen%22: %22stolen%22,%0A    %7D%5Bthis.props.interpretedParams.stolenness%5D;%0A
     
@@ -1164,32 +1164,42 @@
  %7B%0A      return 
+(%0A        
 %3Cdiv className=%22
@@ -1196,37 +1196,32 @@
 lassName=%22row%22%3E%0A
-     
           %3Cdiv c
@@ -1246,37 +1246,32 @@
 2%22%3E%0A            
- 
-    
 %3Ch3 className=%22n
@@ -1284,29 +1284,24 @@
 t-results%22%3E%0A
-     
             
@@ -1366,32 +1366,22 @@
         
-   
-  
 %3C/h3%3E%0A
-     
         
@@ -1397,28 +1397,30 @@
         
-     
 %3C/div%3E%0A
+      )
 %0A    %7D%0A%0A
@@ -1462,16 +1462,26 @@
  return 
+(%0A        
 %3Cdiv cla
@@ -1490,29 +1490,24 @@
 Name=%22row%22%3E%0A
-     
           %3Cd
@@ -1540,29 +1540,24 @@
             
-   
-  
 %3Ch3 classNam
@@ -1575,29 +1575,24 @@
 y-matches%22%3E%0A
-     
             
@@ -1634,29 +1634,24 @@
  serial %7D)%7D%0A
-     
             
@@ -1672,21 +1672,16 @@
     
-     
 %3CLoading
  /%3E;
@@ -1680,18 +1680,11 @@
 ding
- 
 /%3E
-;%0A     
+%0A
     
@@ -1700,36 +1700,39 @@
 iv%3E%0A        
-     
 %3C/div%3E%0A
+      )%0A
     %7D%0A%0A    c
@@ -1773,16 +1773,162 @@
 ponent;%0A
+    const stolenness = %7B%0A      %22non%22: %22abandoned%22,%0A      %22all%22: %22all%22,%0A      %22stolen%22: %22stolen%22,%0A    %7D%5Bthis.props.interpretedParams.stolenness%5D;%0A%0A
     retu

Kill stray semicolon (#1394)