Bikes search switch to js

app/javascript/packs/bikes_search.js

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom";
 
 import ErrorBoundary from "@honeybadger-io/react";
 
-import SecondarySearches from "../scripts/bikes_search/SecondarySearches";
+import BikeSearches from "../scripts/bikes_search/bike_searches";
 import honeybadger from "../scripts/utils/honeybadger";
 
 document.addEventListener("DOMContentLoaded", () => {
@@ -14,7 +14,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
   ReactDOM.render(
     <ErrorBoundary honeybadger={honeybadger}>
-      <SecondarySearches interpretedParams={window.interpreted_params} />
+      <BikeSearches interpretedParams={window.interpreted_params} />
     </ErrorBoundary>,
     el
   );

app/javascript/scripts/api.js

@@ -4,10 +4,10 @@
 
 const url = urn => [process.env.BASE_URL, urn].join('/')
 
-const serialSearchUrl = serial => url(`api/v2/bikes_search?serial=${serial}`)
-
-const fuzzySearchUrl = serial =>
-  url(`api/v2/bikes_search/close_serials?serial=${serial}`)
+const searchUrl = params => {
+  const query = queryString(params)
+  return url(`api/v3/search?${query}`)
+}
 
 const partialMatchSerialSearchUrl = params => {
   const query = queryString(params)
@@ -58,13 +58,8 @@ const queryString = (passedParams = {}) => {
   Public
 */
 
-const fetchSerialResults = serial => {
-  const url = serialSearchUrl(serial)
-  return request(url)
-}
-
-const fetchFuzzyResults = serial => {
-  const url = fuzzySearchUrl(serial)
+const fetchMatches = interpretedParams => {
+  const url = searchUrl(interpretedParams)
   return request(url)
 }
 
@@ -84,8 +79,7 @@ const fetchSerialExternalSearch = ({ raw_serial }) => {
 }
 
 export default {
-  fetchSerialResults,
-  fetchFuzzyResults,
+  fetchMatches,
   fetchSerialExternalSearch,
   fetchSerialCloseSearch,
   fetchPartialMatchSearch

app/javascript/scripts/bikes_search/BikeSearch.jsx

@@ -79,7 +79,7 @@ class BikeSearch extends Component {
       return (
         <div className={wrapperClassName}>
           <div className='col-md-12'>
-            <h3 className='no-exact-results'>
+            <h3 className='no-exact-results uncap'>
               {this.props.t('no_matches_found_html', { serial })}
             </h3>
           </div>

app/javascript/scripts/bikes_search/BikeSearchResult.jsx

@@ -10,7 +10,7 @@ const BikeSerialSearchResult = ({bike}) => (
 
     <div className="bike-information multi-attr-lists">
       <h5 className="title-link">
-        <a href={bike.url} target="_blank">
+        <a href={bike.url}>
           <strong>
             {
               bike.manufacturer_name === "unknown_brand"
@@ -80,12 +80,12 @@ const LocationItem = ({bike}) => {
 
 const ResultImage = ({ bike }) => {
   if (!bike.thumb || bike.is_stock_img) {
-    return (<a className="bike-list-image" target="_blank" href={bike.url}>
+    return (<a className="bike-list-image" href={bike.url}>
               <img src={window.bike_placeholder_image} className="no-image"/>
             </a>);
   }
 
-  return (<a className="bike-list-image hover-expand" target="_blank" href={bike.url}>
+  return (<a className="bike-list-image hover-expand" href={bike.url}>
             <img alt={bike.title} src={bike.thumb}></img>
           </a>);
 }

app/javascript/scripts/bikes_search/bike_searches.jsx

@@ -0,0 +1,65 @@
+/* eslint import/no-unresolved: 0 */
+
+import React, { Fragment, Component } from 'react'
+
+import BikeSearch from './BikeSearch'
+import BikeSearchResult from './BikeSearchResult'
+import ExternalRegistrySearchResult from './ExternalRegistrySearchResult'
+
+import honeybadger from '../utils/honeybadger'
+import api from '../api'
+
+const t = window.BikeIndex.translator('bikes_search')
+
+const queries = ({ interpretedParams }) => {
+  const serialNumbers = interpretedParams.raw_serial
+    .split(/\s+|,/)
+    .map(s => s.trim())
+    .filter(s => /^\w+$/.test(s))
+
+  return serialNumbers.map(serial => ({
+    ...interpretedParams,
+    serial: serial,
+    raw_serial: serial
+  }))
+}
+
+const MultipleSerialSearchHeader = ({ serial, queriesCount }) =>
+  queriesCount === 1 ? (
+    <Fragment />
+  ) : (
+    <h2 className='secondary-matches uncap'>{t('serial_search', { serial })}</h2>
+  )
+
+const SecondarySearches = ({ interpretedParams }) =>
+  !interpretedParams.serial ? (
+      <Fragment />
+    ) : (
+
+      queries({ interpretedParams }).map((params, i, allQueries) => (
+        <Fragment key={params.serial}>
+          <MultipleSerialSearchHeader
+            serial={params.serial}
+            queriesCount={allQueries.length}
+          />
+        </Fragment>
+      ))
+    )
+
+
+const BikeSearches = ({ interpretedParams }) => {
+  return <Fragment>
+    <BikeSearch
+      fetchBikes={api.fetchMatches}
+      searchName='search'
+      resultComponent={BikeSearchResult}
+      interpretedParams={interpretedParams}
+      t={window.BikeIndex.translator(
+        'bikes_search.search'
+      )}
+    />
+    <SecondarySearches interpretedParams={interpretedParams} />
+  </Fragment>
+}
+
+export default BikeSearches

app/javascript/scripts/multi_serial_search/MultiSerialSearch.jsx

@@ -35,7 +35,7 @@ const MultiSerialSearch = () => {
         parallel request serials
       */
       const all = await Promise.all(
-        uniqSerials.map(serial => api.fetchSerialResults(serial))
+        uniqSerials.map(serial => api.fetchMatches({serial: serial}))
       )
       const results = all.map(({ bikes }, index) => {
         const serial = uniqSerials[index]
@@ -70,7 +70,7 @@ const MultiSerialSearch = () => {
         parallel request fuzzy serials and merge
       */
       const fuzzyAll = await Promise.all(
-        serialResults.map(({ serial }) => api.fetchFuzzyResults(serial))
+        serialResults.map(({ serial }) => api.fetchSerialCloseSearch({serial: serial}))
       )
       const updatedResults = fuzzyAll.map(({ bikes: fuzzyBikes }, index) => {
         const serialResult = serialResults[index]