Ajaxify likes

app/controllers/comments_controller.rb

@@ -21,6 +21,9 @@ def new
   def edit
     respond_to do |format|
       format.html
+      format.js do 
+        render template: "comments/edit.js.erb"
+      end
     end
   end
 
@@ -33,6 +36,9 @@ def create
       if @comment.save
         format.html { redirect_back fallback_location: root_path, notice: "Comment was successfully created." }
         format.json { render :show, status: :created, location: @comment }
+        format.js do
+          render template: "comments/create.js.erb"
+        end
       else
         format.html { render :new, status: :unprocessable_entity }
         format.json { render json: @comment.errors, status: :unprocessable_entity }
@@ -46,6 +52,9 @@ def update
       if @comment.update(comment_params)
         format.html { redirect_to root_url, notice: "Comment was successfully updated." }
         format.json { render :show, status: :ok, location: @comment }
+        format.js do 
+          render template: "comments/update.js.erb"
+        end
       else
         format.html { render :edit, status: :unprocessable_entity }
         format.json { render json: @comment.errors, status: :unprocessable_entity }
@@ -57,8 +66,11 @@ def update
   def destroy
     @comment.destroy
     respond_to do |format|
-      format.html { redirect_back fallback_location: root_url, notice: "Comment was successfully destroyed." }
-      format.json { head :no_content }
+      #format.html { redirect_back fallback_location: root_url, notice: "Comment was successfully destroyed." }
+      #format.json { head :no_content }
+      format.js do 
+        render template: "comments/destroy.js.erb"
+      end
     end
   end
 

app/controllers/likes_controller.rb

@@ -27,6 +27,7 @@ def create
       if @like.save
         format.html { redirect_back fallback_location: root_url, notice: "Like was successfully created." }
         format.json { render :show, status: :created, location: @like }
+        format.js
       else
         format.html { render :new, status: :unprocessable_entity }
         format.json { render json: @like.errors, status: :unprocessable_entity }

app/views/comments/_comment.html.erb

@@ -1,4 +1,4 @@
-<li class="list-group-item">
+<li id="<%= dom_id(comment) %>" class="list-group-item">
   <div class="media">
     <%= image_tag comment.author.avatar_image, class: "rounded-circle mr-2", width: 36 %>
     <div class="media-body">
@@ -9,11 +9,14 @@
 
         <div>
           <% if current_user == comment.author %>
-            <%= link_to edit_comment_path(comment), class: "btn btn-link btn-sm text-muted" do %>
+            <%= link_to edit_comment_path(comment), class: "btn btn-link btn-sm text-muted", remote: true do %>
               <i class="fas fa-edit fa-fw"></i>
             <% end %>
 
-            <%= link_to comment, method: :delete, class: "btn btn-link btn-sm text-muted" do %>
+            <%= link_to comment, 
+              method: :delete, 
+              class: "btn btn-link btn-sm text-muted",
+              remote: true do %>
               <i class="fas fa-trash fa-fw"></i>
             <% end %>
           <% end %>

app/views/comments/_form.html.erb

@@ -1,5 +1,5 @@
-<li class="list-group-item">
-  <%= form_with(model: comment) do |form| %>
+<li id="<%= dom_id(comment.photo) %>_form" class="list-group-item">
+  <%= form_with(model: comment, local: false) do |form| %>
     <% if comment.errors.any? %>
       <div id="error_explanation">
         <ul class="list-unstyled">

app/views/comments/create.js.erb

@@ -0,0 +1,17 @@
+console.log("New comment: '<%= @comment.body %>'")
+
+$("#<%= dom_id(@comment.photo) %>_form").before(added_comment);
+
+var added_comment = $("<%= escape_javascript(render 'comments/comment', comment: @comment) %>");
+
+$("#<%= dom_id(@comment.photo) %>_form #comment_body").val("");
+
+var added_comment = $("<%= j(render @comment) %>");
+
+added_comment.hide();
+
+$("#<%= dom_id(@comment.photo) %>_form").before(added_comment);
+
+added_comment.slideDown(500);
+
+$("#<%= dom_id(@comment.photo) %>_form #comment_body").val("");

app/views/comments/destroy.js.erb

@@ -0,0 +1,5 @@
+$("#<%= dom_id(@comment) %>").fadeOut(500, function() {
+  $(this).remove();
+});
+
+console.log("Comment destroyed.");

app/views/comments/edit.html.erb

@@ -4,4 +4,4 @@
 
     <%= render 'form', comment: @comment %>
   </div>
-</div>
+</div>

app/views/comments/edit.js.erb

@@ -0,0 +1,3 @@
+console.log("Editor opened for '<%= @comment.body %>'.")
+
+$("#<%= dom_id(@comment) %>").replaceWith("<%= j(render "comments/form", comment: @comment) %>");

app/views/comments/update.js.erb

@@ -0,0 +1 @@
+$("#<%= dom_id(@comment.photo) %>_form").replaceWith("<%= j(render @comment) %>");

app/views/likes/_form.html.erb

@@ -1,4 +1,4 @@
-<%= form_with(model: like, class: "d-inline-block") do |form| %>
+<%= form_with(model: like, class: "d-inline-block", local: false) do |form| %>
   <%= form.hidden_field :fan_id %>
 
   <%= form.hidden_field :photo_id %>

app/views/likes/create.js.erb

@@ -0,0 +1,3 @@
+console.log("New like.")
+
+var new_like = $("<%= escape_javascript(render 'likes/create', like: @like) %>");