Search code examples
ruby-on-railsactioncablestimulusjsstimulus-reflex

The opposite of insert_adjacent_html for CableReady channel?


Problem has been answered -- see post below

I have a CableReady channel 'Current' which dynamically shows a feed of 'Posts'. I can get the posts to appear individually just fine, but I can't work out how to remove them from the channel individually.

This input of Posts to the channel is controlled in the PostsController.rb like so:

def postshow
  @post = Post.find(params[:id])
  cable_ready["current"].insert_adjacent_html(
    selector: "#current#{@video.id}",
    position: "afterbegin",
    html: render_to_string(partial: "posts/post", locals: {post: @post})
  )
  cable_ready.broadcast
end

I've tried a remove method e.g. cable_ready["current"].remove(... but this just removes all of the Posts in the channel in one go

I plan to use another method in my PostsController.rb to perform the remove:

def postremove
  @post = Post.find(params[:id]
  ...[code to remove the post here]
end

I don't want to remove the Post from the DOM entirely because the feed is dynamic and I want them to be able to show in the feed again at some point.

Edited: Further explanation of wanted behaviour

Imagine the feed to be like twitter, new posts appear at the top. But these posts only appear for a certain number of seconds. You can can also rewind the feed to a certain point. So a post that was taken off the feed can appear again at the top if you rewind the time.

Any ideas or suggestions of other tactics are appreciated, thanks


Solution

  • Thanks to Roland Studer for this answer:

    The problem was due to the partial not having a proper identifier. The outer-most div of the partial now looks like this:

    <div id="<%= dom_id(post)%>" ... >
    

    and the controller method for removing the Post now looks like this:

    def postremove
        @post = Post.find(params[:id])
        cable_ready["current"].remove(
          selector: "[data-id=\"#{@post.id}\"]"
        )
        cable_ready.broadcast
    end
    

    Magic! :)