Submitting project

app/controllers/comments_controller.rb

@@ -1,6 +1,5 @@
 class CommentsController < ApplicationController
   before_action :set_comment, only: %i[ show edit update destroy ]
-
   before_action :ensure_current_user_is_owner, only: [:destroy, :update, :edit]
 
   # GET /comments or /comments.json
@@ -21,6 +20,7 @@ def new
   def edit
     respond_to do |format|
       format.html
+      format.js
     end
   end
 
@@ -33,9 +33,13 @@ 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 }
+        format.js { render js: @comment.errors, status: :unprocessable_entity }
       end
     end
   end
@@ -46,9 +50,13 @@ 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 }
+        format.js { render js: @comment.errors, status: :unprocessable_entity }
       end
     end
   end
@@ -59,23 +67,27 @@ 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 do
+        render template: "comments/destroy.js.erb"
+      end
     end
   end
 
   private
-    # Use callbacks to share common setup or constraints between actions.
-    def set_comment
-      @comment = Comment.find(params[:id])
-    end
 
-    def ensure_current_user_is_owner
-      if current_user != @comment.author
-        redirect_back fallback_location: root_url, alert: "You're not authorized for that."
-      end
-    end
+  # Use callbacks to share common setup or constraints between actions.
+  def set_comment
+    @comment = Comment.find(params[:id])
+  end
 
-    # Only allow a list of trusted parameters through.
-    def comment_params
-      params.require(:comment).permit(:author_id, :photo_id, :body)
+  def ensure_current_user_is_owner
+    if current_user != @comment.author
+      redirect_back fallback_location: root_url, alert: "You're not authorized for that."
     end
+  end
+
+  # Only allow a list of trusted parameters through.
+  def comment_params
+    params.require(:comment).permit(:author_id, :photo_id, :body)
+  end
 end

app/models/user.rb

@@ -35,11 +35,11 @@ class User < ApplicationRecord
   has_many :comments, foreign_key: :author_id, dependent: :destroy
 
   has_many :sent_follow_requests, foreign_key: :sender_id, class_name: "FollowRequest", dependent: :destroy
-  
+
   has_many :accepted_sent_follow_requests, -> { accepted }, foreign_key: :sender_id, class_name: "FollowRequest"
-  
+
   has_many :received_follow_requests, foreign_key: :recipient_id, class_name: "FollowRequest", dependent: :destroy
-  
+
   has_many :accepted_received_follow_requests, -> { accepted }, foreign_key: :recipient_id, class_name: "FollowRequest"
 
   has_many :pending_received_follow_requests, -> { pending }, foreign_key: :recipient_id, class_name: "FollowRequest"
@@ -51,7 +51,7 @@ class User < ApplicationRecord
   has_many :liked_photos, through: :likes, source: :photo
 
   has_many :leaders, through: :accepted_sent_follow_requests, source: :recipient
-  
+
   has_many :followers, through: :accepted_received_follow_requests, source: :sender
 
   has_many :pending, through: :pending_received_follow_requests, source: :sender
@@ -63,9 +63,9 @@ class User < ApplicationRecord
   validates :username,
     presence: true,
     uniqueness: true,
-    format: { 
+    format: {
       with: /\A[\w_\.]+\z/i,
-      message: "can only contain letters, numbers, periods, and underscores"
+      message: "can only contain letters, numbers, periods, and underscores",
     }
 
   validates :website, url: { allow_blank: true }
@@ -78,9 +78,8 @@ class User < ApplicationRecord
 
   def ensure_website_has_scheme
     if website.present? &&
-      !website.starts_with?("http://") &&
-      !website.starts_with?("https://")
-
+       !website.starts_with?("http://") &&
+       !website.starts_with?("https://")
       self.website = "http://" + self.website
     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,17 +9,17 @@
 
         <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 %>
         </div>
       </div>
       <p><%= comment.body %></p>
     </div>
-  </div> 
+  </div>
 </li>

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) %>");
+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,3 @@
+$("#<%= dom_id(@comment) %>").fadeOut(500, function() {
+$(this).remove();
+});

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 @@
+$("#<%= 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/photos/_photo.html.erb

@@ -12,17 +12,16 @@
           <i class="fas fa-edit fa-fw"></i>
         <% end %>
 
-
         <%= link_to photo, method: :delete, class: "btn btn-link btn-sm text-muted" do %>
           <i class="fas fa-trash fa-fw"></i>
         <% end %>
       <% end %>
-      
+
     </div>
   </div>
 
   <%= image_tag photo.image, class: "img-fluid" %>
-  
+
   <div class="card-body">
     <div class="mb-3 d-flex justify-content-between">
       <div class="d-flex align-items-baseline">
@@ -47,7 +46,6 @@
         <% end %>
       </div>
     </div>
-
 
     <p class="card-text"><%= photo.caption %></p>
   </div>
@@ -57,7 +55,7 @@
       <% photo.comments.default_order.each do |comment| %>
         <%= render "comments/comment", comment: comment %>
       <% end %>
-      
+
       <%= render "comments/form", comment: photo.comments.build %>
     </ul>
   <% end %>

config/routes.rb

@@ -2,7 +2,7 @@
   root "users#feed"
 
   devise_for :users
-  
+
   resources :comments
   resources :follow_requests
   resources :likes
@@ -12,4 +12,4 @@
   get ":username/liked" => "users#liked", as: :liked
   get ":username/feed" => "users#feed", as: :feed
   get ":username/discover" => "users#discover", as: :discover
-end
+end

lib/tasks/dev.rake

@@ -31,11 +31,11 @@ task sample_data: :environment do
       bio: Faker::Lorem.paragraph(
         sentence_count: 2,
         supplemental: true,
-        random_sentences_to_add: 4
+        random_sentences_to_add: 4,
       ),
       website: Faker::Internet.url,
       private: [true, false].sample,
-      avatar_image: "https://robohash.org/#{username}"
+      avatar_image: "https://robohash.org/#{username}",
     )
 
     p user.errors.full_messages
@@ -48,7 +48,7 @@ task sample_data: :environment do
       if rand < 0.75
         first_user_follow_request = first_user.sent_follow_requests.create(
           recipient: second_user,
-          status: FollowRequest.statuses.values.sample
+          status: FollowRequest.statuses.values.sample,
         )
 
         p first_user_follow_request.errors.full_messages
@@ -57,7 +57,7 @@ task sample_data: :environment do
       if rand < 0.75
         second_user_follow_request = second_user.sent_follow_requests.create(
           recipient: first_user,
-          status: FollowRequest.statuses.values.sample
+          status: FollowRequest.statuses.values.sample,
         )
 
         p second_user_follow_request.errors.full_messages
@@ -69,7 +69,7 @@ task sample_data: :environment do
     rand(15).times do
       photo = user.own_photos.create(
         caption: Faker::Quote.jack_handey,
-        image: "/#{rand(1..10)}.jpeg"
+        image: "/#{rand(1..10)}.jpeg",
       )
 
       p photo.errors.full_messages
@@ -82,7 +82,7 @@ task sample_data: :environment do
         if rand < 0.25
           comment = photo.comments.create(
             body: Faker::Quote.jack_handey,
-            author: follower
+            author: follower,
           )
 
           p comment.errors.full_messages

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"
   }
 }