stimulusreflex / stimulus_reflex

Build reactive applications with the Rails tooling you already know and love.
https://docs.stimulusreflex.com
MIT License
2.28k stars 172 forks source link

Server initiated redirects #25

Closed leastbad closed 4 years ago

leastbad commented 5 years ago

A new feature in LiveView is the equivalent of redirect_to inside of a reflex.

https://dockyard.com/blog/2019/09/06/whats-new-and-next-for-phoenix-liveview

It'd require some fussing with the CableReady implementation, but in theory, this should actually be relatively straight-forward.

One thing I'd love to see, as a Turbolinks fan, is optional detection and support for Turbolinks.visit() instead of window.location.

pablo-co commented 4 years ago

Is there any status on this? Happy to help if any help is needed.

leastbad commented 4 years ago

Hi @pablo-co! We saw you join our Discord but you didn't seem to stick around long enough for us to connect there. We're a friendly bunch and I hope you drop by.

There is definitely progress, but it's from a different direction than you might be expecting. While I can't say conclusively, it's highly unlikely that this functionality will be added to StimulusReflex, because it's simply outside of the mandate of that project.

The great news is that SR is built atop CableReady (same author) which makes it relatively easy to pull off what you want to do. I'm going to be writing a blog post covering it, but here's the basics:

First, question whether what you really want is a redirection. Being on a page and then suddenly being on another page is a deeply jarring experience for a typical user. It's much more likely that you want to either refresh the page or update some element on it. CableReady gives you several options for doing this.

There are some places in my project where I want to force a refresh of the current page. On the server side, depending on whether my Channel class is a stream_for or stream_from, I use:

ProposalChannel.broadcast_to(Proposal.find(29),{}) (for) or ActionCable.server.broadcast("notification_1", {}) (from)

To generate an empty payload. And then in my Stimulus controller on the client:

import { Controller } from 'stimulus'
import StimulusReflex from 'stimulus_reflex'
import consumer from '../lib/consumer'
export default class extends Controller {
  connect () {
    this.element[this.identifier] = this
    StimulusReflex.register(this)
    if (this.element.dataset.id) {
      const controller = this
      consumer.subscriptions.create(
        {
          channel: 'ProposalChannel',
          id: this.element.dataset.id
        },
        {
          received () {
            controller.stimulate('ApplicationReflex#refresh')
          }
        }
      )
    }
  }
}

The ApplicationReflex itself is literally a no-op eg:

def refresh
  # do nothing
end

This forces the client to refresh the current page as it would appear if the user hit Refresh. It's not as sexy as a built-in redirect (you could replace the controller.stimulate() call with a Turbolinks.visit() or even window.location) but it does what you need.