Changes

app/controllers/comments_controller.rb

@@ -21,6 +21,7 @@ def new
   def edit
     respond_to do |format|
       format.html
+      format.js
     end
   end
 
@@ -33,9 +34,11 @@ 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 
       else
         format.html { render :new, status: :unprocessable_entity }
         format.json { render json: @comment.errors, status: :unprocessable_entity }
+        format.js 
       end
     end
   end
@@ -46,9 +49,11 @@ 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 
       else
         format.html { render :edit, status: :unprocessable_entity }
         format.json { render json: @comment.errors, status: :unprocessable_entity }
+        format.js 
       end
     end
   end
@@ -59,6 +64,7 @@ def destroy
     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.js.erb"}
     end
   end
 

app/controllers/follow_requests_controller.rb

@@ -28,9 +28,11 @@ 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 }
+        format.js
       end
     end
   end
@@ -41,9 +43,11 @@ def update
       if @follow_request.update(follow_request_params)
         format.html { redirect_back fallback_location: root_url, notice: "Follow request was successfully updated." }
         format.json { render :show, status: :ok, location: @follow_request }
+        format.js
       else
         format.html { render :edit, status: :unprocessable_entity }
         format.json { render json: @follow_request.errors, status: :unprocessable_entity }
+        format.js
       end
     end
   end
@@ -54,6 +58,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

@@ -27,9 +27,11 @@ 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 }
+        format.js
       end
     end
   end
@@ -40,9 +42,11 @@ def update
       if @like.update(like_params)
         format.html { redirect_to @like, notice: "Like was successfully updated." }
         format.json { render :show, status: :ok, location: @like }
+        format.js
       else
         format.html { render :edit, status: :unprocessable_entity }
         format.json { render json: @like.errors, status: :unprocessable_entity }
+        format.js
       end
     end
   end
@@ -53,6 +57,7 @@ def destroy
     respond_to do |format|
       format.html { redirect_back fallback_location: root_url, 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">
   <div class="media">
     <%= image_tag comment.author.avatar_image, class: "rounded-circle mr-2", width: 36 %>
     <div class="media-body">
@@ -9,11 +9,11 @@
 
         <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) %>_<%=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,5 @@
+var added_comment = $("<%= j(render @comment) %>");
+
+$("#<%= dom_id(@comment.photo) %>_new_comment_form").before(added_comment);
+
+$("#<%= dom_id(@comment.photo) %>_new_comment_form #comment_body").val("");

app/views/comments/destroy.js.erb

@@ -0,0 +1,3 @@
+$("#<%= dom_id(@comment) %>").fadeOut(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,12 +1,16 @@
 <% follow_request = current_user.sent_follow_requests.find_by(recipient: recipient) %>
+<div id="sender_<%=current_user.id%>_recipient_<%=recipient.id%>_follow_unfollow">
 <% if follow_request %>
-  <%= link_to follow_request, method: :delete, class: "btn btn-outline-secondary" do %>
+  <div id="<%=dom_id(follow_request)%>"">
+  <%= link_to follow_request, method: :delete, class: "btn btn-outline-secondary", remote: true do %>
     <% if follow_request.pending? %>
       Un-request
     <% else %>
       Un-follow
     <% end %>
   <% end %>
+  </div>
 <% else %>
   <%= render "follow_requests/form", follow_request: recipient.received_follow_requests.build %>
 <% end %>
+</div>

app/views/follow_requests/_form.html.erb

@@ -1,4 +1,5 @@
-<%= 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>
@@ -17,3 +18,4 @@
     <%= form.submit "Follow", class: "btn btn-outline-secondary btn-block" %>
   </div>
 <% end %>
+</li>

app/views/follow_requests/create.js.erb

@@ -0,0 +1,3 @@
+var new_follow_request = $("<%= j(render "follow_requests/form") %>");
+
+$("#<%= dom_id(@follow_request) %>);

app/views/follow_requests/destroy.js.erb

@@ -0,0 +1 @@
+$("#<%= dom_id(@follow_request) %>").replaceWith("<%= j(render "follow_requests/follow_unfollow", recipient: @follow_request.recipient )%>");

app/views/likes/destroy.js.erb

@@ -0,0 +1,2 @@
+$("#<%=dom_id(@like.photo)%>_likes_count").replaceWith("<%= j(pluralize(@like.photo.likes_count, "like")) %>");
+$("#<%= dom_id(@like) %>").replaceWith("<%= j(render "likes/form", like: @like) %>");

app/views/photos/_photo.html.erb

@@ -13,7 +13,7 @@
         <% end %>
 
 
-        <%= link_to photo, method: :delete, class: "btn btn-link btn-sm text-muted" do %>
+        <%= link_to photo, method: :delete, class: "btn btn-link btn-sm text-muted", remote: true do %>
           <i class="fas fa-trash fa-fw"></i>
         <% end %>
       <% end %>
@@ -24,14 +24,16 @@
   <%= image_tag photo.image, class: "img-fluid" %>
 
   <div class="card-body">
-    <div class="mb-3 d-flex justify-content-between">
+    <div id="<%=dom_id(photo)%>_likes" class="mb-3 d-flex justify-content-between">
       <div class="d-flex align-items-baseline">
-        <%= pluralize(photo.likes_count, "like") %>
+        <p id="<%=dom_id(photo)%>_likes_count"> 
+          <%= pluralize(photo.likes_count, "like") %>
+        </p>
 
         <% like = current_user.likes.find_by(photo: photo) %>
 
         <% if like %>
-          <%= link_to like, class: "btn btn-link", method: :delete do %>
+          <%= link_to like, class: "btn btn-link", method: :delete, id: dom_id(like), remote: true do %>
             <i class="fas fa-heart fa-fw"></i>
 
             Un-like
@@ -42,9 +44,7 @@
       </div>
 
       <div>
-        <% unless policy(photo).show? %>
           <%= render "follow_requests/follow_unfollow", recipient: photo.owner %>
-        <% end %>
       </div>
     </div>
 

package.json

@@ -1,10 +1,15 @@
 {
+  "name": "vanilla-rails",
+  "private": true,
   "dependencies": {
-    "@rails/webpacker": "5.4.3",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12"
+    "@rails/actioncable": "^6.0.0",
+    "@rails/activestorage": "^6.0.0",
+    "@rails/ujs": "^6.0.0",
+    "@rails/webpacker": "5.2.1",
+    "turbolinks": "^5.2.0"
   },
+  "version": "0.1.0",
   "devDependencies": {
-    "webpack-dev-server": "^3"
+    "webpack-dev-server": "^3.11.2"
   }
 }