Nrthugu

I try to open a new page /search/ when the user chooses an offer in the home page, where the search page contains offers related to the keyword selected in the Datasearch.

I am using a Datasearch in the home page header, where the user writes or select an existing offer then when he press Ok / Enter he'll be redirected to next page contain ResultCards contain a selection of offers related to that Keywords:

Here my Datasearch on Homepage:

    constructor (props) {

    super(props);

    this.state = {

      SearchQuery: "",

      queryChanged: false,

      value: "",

      redirect: false 



    };



  }



  render() {

    const { value } = this.props;

    const { redirect } = this.state;

    if (redirect) {

      return <Redirect to={`search/${this.state.SearchQuery}`}/>;

    }

    return (     

      <div className="header-header-search-bar-input">     

        <DataSearch

          componentId="SearchSensor"

          dataField={['modele', 'marque', 'titre']}

          fieldWeights={[2, 1]}

          categoryField="titre.keyword"

          placeholder="Trouvez une voiture..."

          react={{

            and: ['result_card', 'carsmodel', 'carsbrand', 'cardate', 'drivenrange', 'ratingsSensor', 'pricerange'],

          }}

          showFilter

          showClear

          filterLabel="Recherche"

          className="headerTopSearch"

          queryFormat="and"

          URLParams={true}

          innerRef={this.innerRef}



          onQueryChange={

            function(prevQuery, nextQuery) {



            console.log('prevQuery', prevQuery);

            console.log('nextQuery', nextQuery);



          }}

          onValueSelected={(value, cause, source) => {

            console.log("onValueSelected_value:",value);

            this.state.SearchQuery = value;

            console.log("SearchQuery", this.state.SearchQuery);

            this.setState({redirect:true});

            }

          }

          onValueChange={

            function(value) {

              console.log("onValueChange value: ", value)

            }

          }    

    />

      </div>

    );

  }

}

Here is the ResultCard Code in the searchPage:

    constructor(props) {

super (props);

this.state = {

  queryChanged: false,

  initialQuery:

    '{"query":{"bool":{"must":[{"bool":{"must":[{"range":{"annee":{"gte":1986,"lte":2018,"boost":2}}},{"range":{"kilometrage":{"gte":0,"lte":500000,"boost":2}}},{"range":{"prix":{"gte":0,"lte":400000,"boost":2}}}]}}]}},"size":12,"from":0,"sort":[{"inseredate":{"order":"desc"}}]}',

  queryToSave:"",

  SearchQuery:"",



};

this.onData = this.onData.bind(this);

this.customQuery = this.customQuery.bind(this);

this.queryChanged = this.queryChanged.bind(this);





}

  onData(data) {

    const url = sha256(data.url);

    console.log('data:', data);

    console.log("url",url);

    const urlan = `/search/${data.marque}/${data.modele}/${url}`;

    console.log("urlan",urlan);

    return {  

      title: <div 

                  className="title-card" 

                  dangerouslySetInnerHTML={{ __html: data.titre }} 

                />,

      description: (

        <HomePageCard data={data} />

      ),

      image: data.url_image[0],

      url: urlan,

    };

  }



  customQuery(value, props) {

    console.log(value); //return undefined

    console.log(props); //return undefined

    //const query = this.props.search.SearchQuery; //I am not sure of this

    return JSON.parse(query);

  }



  queryChanged(prevQuery, nextQuery) { 

    console.log(prevQuery);

    console.log(nextQuery);

  }



  render() {

    const { defaultQuery } = this.props;

    console.log('defaultQuery:', defaultQuery);

    return (

      <div className="search-search-result-cards">

        <ResultCard

          componentId="result_card"

          className="autorobot-cards"

          size={13}

          pages={4}

          dataField="modele.keyword"

          pagination={true}         

          sortOptions={[

            { label: 'Les plus récentes', dataField: 'inseredate', sortBy: 'desc' },

            { label: 'Les plus anciennes', dataField: 'inseredate', sortBy: 'asc' },

            { label: 'Prix le plus bas', dataField: 'prix', sortBy: 'asc' },

            { label: 'Prix le plus élevé', dataField: 'prix', sortBy: 'desc' },

          ]}

          onQueryChange={(prevQuery, nextQuery) => {

            this.queryChanged(prevQuery, nextQuery);

          }}

          react={{

            and: ["SearchSensor"]

          }}

          innerClass={{

            title: 'text-title',

            listItem: 'cardItem',

            sortOptions: 'sortOptions',

            pagination: 'paginationCards',

          }}

          onData={this.onData}

          customQuery={this.customQuery}

          defaultQuery={this.customQuery}

          target="_blank"

          onNoResults="Aucun résultat trouvé."

          showResultStats={false}

          URLParams={true}

        />

      </div>

    );

  }

}

And here the search page route:

path: '',

  name: '',

  childRoutes: [

    { path: '/search/:SearchQuery', name: 'Home page search', component: HomePageSearch },

  ],

};