Devise helper methods and MissingWarden exception about turbo-rails

[jonsgreen]

@dhh I am thinking that this is going to be a pretty common use case. Consider the common demo example of a simple chat application where you would likely want a message to appear different for the messenger or for people who are mentioned in a message. I can imagine there are many ways to solve this problem but I am curious if you have a few more details about the solution you are proposing to this problem involving Stimulus controllers.

[Sub-Xaero]

The way I achieved this was by making Turbo broadcast twice, once with the partial for guests, with no rendered controls to be able to "like" or "comment", and once for logged in users, with rendered controls.

It's not perfect, and it may or may not be desirable because it effectively doubles the amount of server work when doing an update, but depending on your app it's slightly more sanitary than having controls you don't want users having just being hidden in the DOM - even if your server handles it correctly when a guest tries something they shouldn't.

class Listing < ApplicationRecord

  after_create_commit do
    broadcast_append_to "private_listings", target: "private_listings", partial: "listings/listing", locals: { listing: self }
    broadcast_append_to "public_listings", target: "public_listings", partial: "listings/public_listing", locals: { listing: self }
  end

  after_update_commit do
    broadcast_replace_to "private_listings", partial: "listings/listing", locals: { listing: self }
    broadcast_replace_to "public_listings", target: "public_listings", partial: "listings/public_listing", locals: { listing: self }
  end

  after_destroy_commit do
    broadcast_remove_to "private_listings"
    broadcast_remove_to "public_listings"
  end

end

<% channel_name = current_user.present? ? 'private_listings' : 'public_listings' %> 
<%= turbo_stream_from channel_name %>
<%= turbo_frame_tag channel_name, class: 'row' do %>
    <%= render @listings %>
<% end %>

[Sub-Xaero]

You can also show one version to the person who created a Listing, with controls to edit and delete their own records, and one to the general public.

The after_initialize is used because the after_destroy_commit throws a Frozen error when broadcast tries to traverse the users association, so we can cache the GlobalID on init.

class Listing < ApplicationRecord

  attr_accessor :user_gid
  belongs_to :user, inverse_of: :listings

  after_initialize do
    self.user_gid = user.to_gid_param
  end

  after_create_commit do
    broadcast_append_to [user_gid, "private_listings"], target: "private_listings", partial: "listings/listing", locals: { listing: self }
    broadcast_append_to "public_listings", target: "public_listings", partial: "listings/public_listing", locals: { listing: self }
  end
  after_update_commit do
    broadcast_replace_to [user_gid, "private_listings"], partial: "listings/listing", locals: { listing: self }
    broadcast_replace_to "public_listings", target: "public_listings", partial: "listings/public_listing", locals: { listing: self }
  end
  after_destroy_commit do
    broadcast_remove_to [user_gid, "private_listings"]
    broadcast_remove_to "public_listings"
  end

end

<%= turbo_stream_from [current_user, 'private_listings'] %>
<%= turbo_frame_tag 'private_listings', class: 'row' do %>
    <%= render @listings %>
<% end %>

[dhh]

You'll need to make a partial that's not dependent on global state like this to work. You can use client-side show/hide using a stimulus controller instead. Would be happy to see some documentation covering this. PDI!

[jonsgreen]

So one way I have found to do this is to inject css styling per user that would adjust the visibility of elements within a partial using the dom_id as a class.

import { Controller } from "stimulus"

export default class extends Controller {
  static values = { participantId: String }
  connect() {
     var style = document.createElement('style');
      style.innerHTML = `
       #${this.element.id} .model_${this.participantIdValue}.default {
         display: none;
       }
       #${this.element.id} .model_${this.participantIdValue}.hidden {
         display: block;
       }
      `;
    document.head.appendChild(style);
  }
}

One drawback to this approach is that you need to add two versions of each partial to every user's html which seems a bit ugly. I am also guessing that there may be complications as a UI gets more involved.

I am curious if anyone else has come up with other cleaner solutions.