Using Turbo Streams

Author: eelcoj

app/controllers/likes_controller.rb

@@ -2,15 +2,21 @@ class LikesController < ApplicationController
   before_action :set_post, only: %w[create destroy]
 
   def create
-    Current.user.likes.create(post: @post)
+    respond_to do |format|
+      Current.user.likes.create(post: @post)
 
-    redirect_to root_path
+      format.html { redirect_to root_path }
+      format.turbo_stream
+    end
   end
 
   def destroy
-    Current.user.likes.find_by(post: @post).destroy
+    respond_to do |format|
+      Current.user.likes.find_by(post: @post).destroy
 
-    redirect_to root_path
+      format.html { redirect_to root_path }
+      format.turbo_stream
+    end
   end
 
   private

app/views/likes/_like.html.erb

@@ -1,4 +1,4 @@
-<div>
+<turbo-frame id="likes">
   <% if user.likes.exists?(post: post) %>
     <%= button_to post_like_path(post, user.likes.find_by(post: post)), method: :delete do %>
       Unlike
@@ -8,4 +8,4 @@
       Like
     <% end %>
   <% end %>
-</div>
+</turbo-frame>

app/views/likes/create.turbo_stream.erb

@@ -0,0 +1,7 @@
+<%= turbo_stream.replace "likes" do %>
+  <%= render partial: "likes/like", locals: { user: Current.user, post: @post } %>
+<% end %>
+
+<%= turbo_stream.replace "title" do %>
+  <%= render partial: "posts/title", locals: { post: @post } %>
+<% end %>

app/views/likes/destroy.turbo_stream.erb

@@ -0,0 +1,7 @@
+<%= turbo_stream.replace "likes" do %>
+  <%= render partial: "likes/like", locals: { user: Current.user, post: @post } %>
+<% end %>
+
+<%= turbo_stream.replace "title" do %>
+  <%= render partial: "posts/title", locals: { post: @post } %>
+<% end %>

app/views/posts/_title.html.erb

@@ -0,0 +1,4 @@
+<h1 id="title">
+  <%= post.title %>
+  (<%= pluralize(post.likes.count, "like") %>)
+</h1>

app/views/posts/show.html.erb

@@ -1,9 +1,6 @@
-<main>
-  <article style="margin-top: 200vh">
-    <h1>
-      <%= @post.title %>
-      (<%= pluralize(@post.likes.count, "like") %>)
-    </h1>
+<main style="height: 300px; overflow-y: scroll">
+  <article style="margin-top: 50vh">
+    <%= render partial: "title", locals: { post: @post } %>
 
     <p>
       <%= @post.content %>