Jalen's Photogram Ajax Assignment

app/controllers/comments_controller.rb

@@ -9,6 +9,10 @@
 
   # GET /comments/1/edit
   def edit
+    respond_to do |format|
+      format.html
+      format.js
+    end
   end
 
   # POST /comments or /comments.json
@@ -20,6 +24,7 @@
       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 #or you can just write "format.js" since folder and controller name are the same, template and action name are the same, and request format matches the file extension. Ruby will figure everything else out 
       else
         format.html { render :new, status: :unprocessable_entity }
         format.json { render json: @comment.errors, status: :unprocessable_entity }
@@ -33,6 +38,7 @@
       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
       else
         format.html { render :edit, status: :unprocessable_entity }
         format.json { render json: @comment.errors, status: :unprocessable_entity }
@@ -46,6 +52,7 @@
     respond_to do |format|
       format.html { redirect_back fallback_location: root_url, notice: "Comment was successfully destroyed." }
       format.json { head :no_content }
+      format.js { render template: "comments/destroy" }
     end
   end
 

app/controllers/follow_requests_controller.rb

@@ -10,6 +10,7 @@ def create
       if @follow_request.save
         format.html { redirect_back fallback_location: root_url, notice: "Follow request was successfully created." }
         format.json { render :show, status: :created, location: @follow_request }
+        format.js
       else
         format.html { render :new, status: :unprocessable_entity }
         format.json { render json: @follow_request.errors, status: :unprocessable_entity }
@@ -36,6 +37,7 @@ def destroy
     respond_to do |format|
       format.html { redirect_back fallback_location: root_url, notice: "Follow request was successfully destroyed." }
       format.json { head :no_content }
+      format.js
     end
   end
 

app/controllers/likes_controller.rb

@@ -9,6 +9,7 @@ def create
       if @like.save
         format.html { redirect_back fallback_location: @like.photo, 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 }
@@ -22,6 +23,7 @@ def destroy
     respond_to do |format|
       format.html { redirect_back fallback_location: @like.photo, notice: "Like was successfully destroyed." }
       format.json { head :no_content }
+      format.js
     end
   end
 

app/views/comments/_comment.html.erb

@@ -1,4 +1,4 @@
-<li class="list-group-item">
+<li id="<%= dom_id(comment) %>" class="list-group-item"> <!-- could put id="comment_<%= comment.id %>" as well -->
   <div class="d-flex">
     <div class="flex-shrink-0">
       <%= image_tag comment.author.avatar_image_url, class: "rounded-circle me-2 img-cover img-small" %>
@@ -11,11 +11,12 @@
 
         <div>
           <% if comment.author == current_user %>
-            <%= 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 %>
 
-            <%= button_to comment, method: :delete, class: "btn btn-link btn-sm text-muted", form_class: "btn btn-sm btn-link" do %>
+            <!--< button_to comment, method: :delete, class: "btn btn-link btn-sm text-muted", form_class: "btn btn-sm btn-link" do >-->
+              <%= button_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 %>
@@ -25,3 +26,17 @@
     </div>
   </div> 
 </li>
+
+<script>
+  // bind the click handler
+  $("#comment_<%= comment.id %>_delete_link").on("click", function() { 
+
+    $.ajax({
+      url: "/comments/<%= comment.id %>", // what URL to submit a request to
+      type: "DELETE",                     // make it a DELETE request
+      dataType: "script"                  // what is the format of the request
+    });
+
+    return false;                         // break the link
+  });
+</script>

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) %>_<%= dom_id(comment) %>_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,10 @@
+var added_comment = $("<%= j(render @comment) %>");
+
+ added_comment.hide();
+
+ $("#<%= dom_id(@comment.photo) %>_new_comment_form").before(added_comment);
+
+ added_comment.slideDown();
+
+ $("#<%= dom_id(@comment.photo) %>_new_comment_form #comment_body").val("");
+

app/views/comments/destroy.js.erb

@@ -0,0 +1,4 @@
+console.log("bye comment!")
+$("#<%= dom_id(@comment) %>").fadeOut(2000, function() {
+  $(this).remove();
+});

app/views/comments/edit.js.erb

@@ -0,0 +1 @@
+$("#<%= dom_id(@comment) %>").replaceWith("<%= j(render "comments/form", comment: @comment) %>");

app/views/comments/update.js.erb

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

app/views/follow_requests/_follow_unfollow.html.erb

@@ -1,17 +1,19 @@
-<% unless sender == recipient %>
-  <% follow_request = current_user.sent_follow_requests.find_by(recipient: recipient) %>
+<div class="sender_<%= sender.id %>_recipient_<%= recipient.id %>_follow_unfollow">
+  <% unless sender == recipient %>
+    <% follow_request = current_user.sent_follow_requests.find_by(recipient: recipient) %>
 
-  <% if follow_request %>
-    <% if follow_request.pending? %>
-      <%= link_to follow_request, method: :delete, class: "btn btn-outline-secondary" do %>
-        Un-request
-      <% end %>
-    <% elsif follow_request.accepted? %>
-      <%= link_to follow_request, method: :delete, class: "btn btn-outline-secondary" do %>
-        Un-follow
+    <% if follow_request %>
+      <% if follow_request.pending? %>
+        <%= link_to follow_request, method: :delete, class: "btn btn-outline-secondary" do %>
+          Un-request
+        <% end %>
+      <% elsif follow_request.accepted? %>
+        <%= link_to follow_request, method: :delete, class: "btn btn-outline-secondary" do %>
+          Un-follow
+        <% end %>
       <% end %>
+    <% else %>
+      <%= render "follow_requests/form", follow_request: recipient.received_follow_requests.build %>
     <% end %>
-  <% else %>
-    <%= render "follow_requests/form", follow_request: recipient.received_follow_requests.build %>
   <% end %>
-<% end %>
+</div>

app/views/follow_requests/_form.html.erb

@@ -1,4 +1,4 @@
-<%= form_with(model: follow_request, class: "d-inline-block") do |form| %>
+<%= form_with(model: follow_request, local: false, class: "d-inline-block") do |form| %>
   <% if follow_request.errors.any? %>
     <div id="error_explanation">
       <h2><%= pluralize(follow_request.errors.count, "error") %> prohibited this follow_request from being saved:</h2>

app/views/follow_requests/create.js.erb

@@ -0,0 +1,3 @@
+$(".sender_<%= @follow_request.sender.id %>_recipient_<%= @follow_request.recipient.id %>_follow_unfollow").replaceWith($("<%= j(render "follow_requests/follow_unfollow", sender: @follow_request.sender, recipient: @follow_request.recipient) %>"))
+
+console.log("You followed this user")

app/views/follow_requests/destroy.js.erb

@@ -0,0 +1,3 @@
+$(".sender_<%= @follow_request.sender.id %>_recipient_<%= @follow_request.recipient.id %>_follow_unfollow").replaceWith($("<%= j(render "follow_requests/follow_unfollow", sender: @follow_request.sender, recipient: @follow_request.recipient) %>"))
+
+console.log("You un-followed this user")

app/views/likes/_form.html.erb

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

app/views/likes/create.js.erb

@@ -0,0 +1,7 @@
+var current_likes = $("#<%= dom_id(@like.photo) %>_likes")
+
+var update_likes = $("<%= j(render "photos/likes", photo: @like.photo) %>")
+
+current_likes.replaceWith(update_likes)
+
+console.log("create like")

app/views/likes/destroy.js.erb

@@ -0,0 +1,7 @@
+var current_likes = $("#<%= dom_id(@like.photo) %>_likes")
+
+var update_likes = $("<%= j(render "photos/likes", photo: @like.photo) %>")
+
+current_likes.replaceWith(update_likes)
+
+console.log("destroy like")