Custom history

Would it be possible to allow a custom history object to be passed as a prop to SearchkitManager? I think this would be useful allow integration with things like react-router-redux.

[ssetem]

yep @abousamra we upgraded and added hook to provide own history in v2.1

Thanks, I will close this issue down now

[SickSAMA]

Allowing custom history object is not simple, a lot of scenarios need to be considered.

Suppose we have page A, B(Searchkit), C. They are in a single page app.

1. If a history is created in A, and user use a link navigate to B. Then searchkit’s listener is not triggered because the location.action is PUSH. Only when a history’s first generated location or browser’s popstate event generated location has a POP state.
2. Normally when navigating from B to C, B will unmount. However, if C is a popup which is quite common (Instagram, Behance), So from B to C it can be a PUSH or POP(use browser’s forward button). If it’s a POP, then the listener is triggered a new search is done, which shouldn’t happen.

To solve above issues, I propose that search is triggered and only triggered by history’s event and providing a pauseListenHistory and resumeListenHistory to disable the listener if on other pages.

setupListeners() {
  this.initialLoading = true
  if(this.options.useHistory) {
    this.unlistenHistory()
    this.history = this.options.history || createHistory()
    this.historyFreezed = false; // indicate whether history is paused for listening
    this.listenToHistory()
  } else {
    this.runInitialSearch()
  }
}

listenToHistory(){
  let callsBeforeListen = (this.options.searchOnLoad) ? 1: 2
  this._unlistenHistory = this.history.listen(after(callsBeforeListen,(location)=>{
    if(!this.historyFreezed) { // only triggered when not freezed
      this.registrationCompleted.then(()=>{
        this.searchFromUrlQuery(location.query)
      }).catch((e)=> {
        console.error(e.stack)
      })
    }
  }))
}

performSearch(replaceState=false, notifyState=true){
  if(notifyState && !isEqual(this.accessors.getState(), this.state)){
    this.accessors.notifyStateChange(this.state)
  }
  this.state = this.accessors.getState(); // moved from _search to here
  if(this.options.useHistory){
    const historyMethod = (replaceState) ?
      this.history.replace : this.history.push
    historyMethod({pathname: window.location.pathname, query:this.state})
  }
  else {
    this._search()
  }
}

pauseListenHistory(){
  if (this.historyFreezed !== undefined) 
    this.historyFreezed = true
}

resumeListenHistory(){
  if (this.historyFreezed !== undefined) 
    this.historyFreezed = false
}