Turbo-stream with update URL

#1

Hello
I have searchbar, filters and table
I need search items by using searchbar and filters togehter
I implemented this functionality using turbo-streams, but my URL doesn’t update. And I want to make it so that the user can copy and paste the link, keeping the search and filter options.

I did this with turbo_frame, but I need to update the two partials, the search string and the filters. Is there some analogue of turbo_action: “Advanced” for turbo-stream?

#2

You can still use turbo-stream inside frames.

<turbo-frame>
    <turbo-stream action="replace" />
    <turbo-stream action="replace" />
</turbo-frame>

Other than that. I’m afraid you’re going to have to use JavaScript and update the URL programatically. Using the URL and URLSearchParams APIs.

#3

Here is a stimulus controller i’m using that works with streams.

export default class extends Controller {
  static values = {
    url: String,
    labelFilter: {
      type: Array,
      default: [],
    },
  }
  applyLabelFilter(e) {
    this.labelFilterValue = [...this.labelFilterValue, e.target.dataset.filter]
    this.getFilteredResults()
  }

  async getFilteredResults() {
    const url = new URL(this.urlValue)
  
    this.labelFilterValue.forEach((filter) => {
      url.searchParams.append("label[]", filter)
    })
  
    await get(url.toString(), {
      responseKind: "turbo-stream",
    })
  
    this.changeBrowserUrl()
  }
  changeBrowserUrl() {
    const url = new URL(window.location.href.split("?")[0])
  
    this.labelFilterValue.forEach((filter) => {
      url.searchParams.append("label[]", filter)
    })
  
    history.pushState({}, null, url.toString())
    Turbo.navigator.history.replace(url.toString())
  }
}

When Each tag(label) is clicked it calls applyLabelFilter Something like

<div data-controller="filters">
   <button data-filter="age" data-action="filters#filter">age</button>
<div>