• Home

  • Episodes

  • About

  • Login
    •
    gonzalezarthur said over 2 years ago on Real-time Comments and Voting :
    Hi!

    I'm building a Twitter-like app in Rails 6.1.4.4, just to study the framework, and I'm trying to do the implementation you did in this video, but for tweets instead of post comments or votes.

    I've written the Tweet model like this ("Tueet" is just another way of writing "Tweet"):
    # models/tueet.rb

class Tueet < ApplicationRecord
  # Model broadcasts
  after_create_commit do
    broadcast_prepend_to :tueets,
    target: "tueets",
    partial: "tueets/tueet",
    locals: { tueet: self }
  end
end
    In the code above I'm omitting the validation and relationships part of the model because they are working properly and have nothing to do with the broadcast implementation (I think).

    For the Tueet controller I've wrote:
    # controllers/tueets_controller.rb

class TueetsController < ApplicationController
  before_action :authenticate_user!, except: %i[ show ]
  before_action :set_tueet, only: %i[ show destroy ]

  def new
    @tueet = current_user.tueets.new
  end

  def create
    @tueet = current_user.tueets.new(tueet_params)
    respond_to do |format|
      if @tueet.save
        format.turbo_stream {
	  render turbo_stream: turbo_stream.replace(
	    "new_tueet",
	    partial: "tueets/form",
	    locals: { tueet: Tueet.new }
	  )
	}
      end
    end
  end
    This implementation for the TueetsController is almost identical to what you've written for the example in the video.

    I'm rendering the following form, from "tueets/form", in the Feed#index page:
    # views/tueets/form.html.erb

<%= turbo_frame_tag "new_tueet", target: :_top do %>
  <%= simple_form_for(tueet) do |f| %>
    <%= f.input :body, label: false, placeholder: 'News, moments, ideas...', input_html: { class: 'w-full h-11 px-3 py-2 border border-gray-200 rounded-full', style: 'resize: none;' } %>
    <%= f.submit 'Post', class: 'h-11 px-4 cursor-pointer font-sans font-bold text-md text-white bg-gradient-to-r from-green-400 to-blue-500 rounded-full' %>		
  <% end %>
<% end %>

    I'm doing this just like you did, using:
    <%= turbo_frame_tag "new_tueet", src: new_tueet_path %>
    The _form.html.erb partial as well as the _tweet.html.erb partial are stored within the "tueets" view folder, and the page where I'm trying to render them both is stored in the "feed" view folder (feed/index.html.erb).

    So my feed/index page is something like this:
    # views/feed/index.html.erb

<%= turbo_stream_from :tueets %>

<!-- Tueet form -->
<div class="w-full h-max p-3">
  <%= turbo_frame_tag "new_tueet", src: new_tueet_path %>		
</div>

<!-- Twueets -->		
<div id="tueets">
  <%= render @tueets %>
</div>

    And the "tueets/_tueet.html.erb" form is written like this:
    <%= content_tag :div, id: dom_id(tueet), class: 'w-full h-max p-3 flex flex-row items-start justify-start border-t border-gray-100 gap-2' do %>
  <%= tueet.body %>
<% end %>
    Just like you did in the video.

    My problem is that when I submit a Tueet from the form, it disappears instead of just refresh the partial. Also the Tueet just created is not broadcasted to the @tueets collection, so the page is not updated properly, and the form just became visible again when I refresh the page manually. :/
    0 0 0