Merge pull request #5 from shazam442/comment-editing

Comment editing

app/controllers/comments_controller.rb

@@ -1,6 +1,7 @@
 class CommentsController < ApplicationController
     before_action :authenticate_user!
     before_action :set_post
+    before_action :set_comment, only: %i[ update destroy ]
 
     def create
         @comment = @post.comments.new(comment_params)
@@ -9,24 +10,38 @@ def create
             flash[:notice] = "Comment successfully created"
             redirect_to @post
         else
-            flash[:error] = "Comment has not been created"
+            flash[:alert] = "Comment has not been created"
             redirect_to @post
         end
     end
+
+    def update
+        respond_to do |format|
+            if @comment.update(comment_params)
+                format.html { redirect_to @post, notice: "Comment was successfully updated" }
+            else
+                format.html { redirect_to @post, alert: "Something went wrong :(" }
+            end
+        end
+    end
+
 
 
     def destroy
-        @comment = @post.comments.find(params[:id])
         if @comment.destroy
             flash[:notice] = 'Comment was successfully deleted.'
             redirect_to @post
         else
-            flash[:error] = 'Something went wrong'
+            flash[:alert] = 'Something went wrong'
             redirect_to @post
         end
     end
 
     private
+
+    def set_comment
+        @comment = @post.comments.find(params[:id])
+    end
 
     def set_post
         @post = Post.find(params[:post_id])

app/javascript/application.js

@@ -2,3 +2,4 @@
 
 import "trix"
 import "@rails/actiontext"
+import "controllers"

app/javascript/controllers/application.js

@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+window.Stimulus   = application
+
+export { application }

app/javascript/controllers/comments_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  initialize() {}
+
+  connect() {}
+
+  toggleForm(event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const formID = event.params["form"]
+    const bodyID = event.params["body"]
+
+    const formElement = document.getElementById(formID)
+    const bodyElement = document.getElementById(bodyID)
+
+    formElement.classList.toggle("d-none")
+    bodyElement.classList.toggle("d-none")
+  }
+}

app/javascript/controllers/hello_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.textContent = "Hello World!"
+  }
+}

app/javascript/controllers/index.js

@@ -0,0 +1,4 @@
+// Import and register all your controllers from the importmap via controllers/**/*_controller
+import { application } from "controllers/application"
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("controllers", application)

app/views/comments/_comment.html.erb

@@ -1,12 +1,31 @@
 <div class="container comment-<%= comment.id %>"
     style="border: 1px solid black; padding: 1em; margin: 1em">
     <%= comment.user.email %><br>
-    <span>Posted <%= time_ago_in_words(comment.created_at) %> ago</span>
+    <% if (comment.updated_at - comment.created_at) > 1 %>
+        <span>Edited <%= time_ago_in_words(comment.updated_at) %> ago</span>
+    <% else %>
+        <span>Posted <%= time_ago_in_words(comment.created_at) %> ago</span>
+    <% end %>
     <% if current_user == comment.user %>
-        <div class="button-group float-end">
+        <div class="btn-group float-end">
+            <%= link_to "Edit", nil, remote: true, class: "btn btn-warning",
+                data: {
+                    controller: "comments",
+                    action: "comments#toggleForm",
+                    comments_form_param: "edit-form-#{comment.id}",
+                    comments_body_param: "comment-body-#{comment.id}"
+                } %>
             <%= button_to "Delete", [post, comment], class: "btn btn-danger", method: :delete %>
         </div>
+        <div id="edit-form-<%= comment.id %>" class="d-none mt-5" >
+            <%= render "comments/form",
+                post: post,
+                comment: comment,
+                submit_label: "Update" %>
+        </div>
     <% end %>
     <hr>
-    <%= comment.body %>
+    <div id="comment-body-<%= comment.id %>">
+        <%= comment.body %>
+    </div>
 </div>

app/views/comments/_form.html.erb

@@ -1,7 +1,6 @@
-<%= form_with(model: [post, post.comments.build]) do |f| %>
+<%= form_with(model: [post, comment]) do |f| %>
     <div class="form-control">
-        <%= f.label :body %>
         <%= f.rich_text_area :body %>
-        <%= f.submit "Reply", class: "btn btn-primary mt-1" %>
+        <%= f.submit submit_label, class: "btn btn-primary mt-1" %>
     </div>
 <% end %>

app/views/posts/show.html.erb

@@ -8,7 +8,10 @@
 </div>
 
 <div class="container">
-  <%= render "comments/form", post: @post %>
+  <%= render "comments/form",
+    post: @post,
+    comment: @post.comments.build,
+    submit_label: "Reply" %>
   <% @comments.each do |comment| %>
     <%= render "comments/comment", post: @post, comment: comment %>
   <% end %>

config/importmap.rb

@@ -3,3 +3,6 @@
 pin "application"
 pin "trix"
 pin "@rails/actiontext", to: "actiontext.esm.js"
+pin "@hotwired/stimulus", to: "stimulus.min.js"
+pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
+pin_all_from "app/javascript/controllers", under: "controllers"