Merge pull request #111 from Code-the-Dream-School/104-add-display-co…

…mment-page-stylings

added styling and got the comment buttons to work correctly

app/assets/stylesheets/application.scss

@@ -1017,3 +1017,89 @@ h1 {
 
 
 
+
+
+//comments styles ------------------------------
+
+.comments-show {
+    color: white;
+    background-color: rgba(126, 132, 128, 0.2);
+    border-radius: 10px;
+    padding: 30px;
+    width: 100%;
+    max-width: 600px;
+    display: block;
+    align-items: center;
+    margin: auto;
+}
+
+.comment-btn-group {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.comment-btn {
+  padding: 5px;
+  width: 100%;
+  background-color: rgba(126, 132, 128, 0.2);
+  border: white solid 1px;
+  color: white;
+  border-radius: 10px;
+  font-size: 15px;
+  text-align: center;
+  text-decoration: none;
+  margin-top: 10px;
+}
+
+.delete-comment-btn {
+  padding: 5px 30px;
+  width: 100%;
+  background-color: rgba(212, 59, 59, 0.2);
+  border: white solid 1px;
+  color: white;
+  border-radius: 10px;
+  font-size: 15px;
+  text-align: center;
+  text-decoration: none;
+  margin-top: 10px;
+}
+
+.comments-new {
+    color: white;
+    background-color: rgba(126, 132, 128, 0.2);
+    border-radius: 10px;
+    padding: 30px;
+    width: 100%;
+    max-width: 600px;
+    display: block;
+    align-items: center;
+    margin: auto;
+}
+
+.comment-field-box {
+  width: 100%;
+  max-width: 600px;
+  background-color: rgba(126, 132, 128, 0.2);
+  border: 1px white solid;
+  border-radius: 10px;
+  color: white;
+  padding: 5px;
+  text-decoration: none;
+}
+
+.comment-field {
+  background: none;
+  border: none;
+  outline: none;
+  resize: none;
+  overflow: auto;
+  width: 100%;
+  height: 125px;
+  color: rgb(197, 191, 191);
+}
+
+.comment-field:focus {
+  outline: none;
+}
+

app/controllers/comments_controller.rb

@@ -34,7 +34,7 @@ def create
 
   def update
     if @comment.update(comment_params)
-      redirect_to [@entry, @comment], notice: 'Comment was successfully updated.'
+      redirect_to friend_entry_show_path(@entry), notice: 'Comment was successfully updated.'
     else
       render :edit, alert: 'Unable to update comment.'
     end
@@ -49,6 +49,17 @@ def destroy
     end
   end
 
+  def destroy_another
+    @comment = @entry.comments.find_by(id: params[:id])
+    if @comment.user == current_user || @entry.user == current_user
+      @comment.destroy
+       flash[notice:] = 'Comment was successfully deleted.'
+    else
+       flash[alert:] = 'You are not authorized to delete comment.'
+    end
+     redirect_to request.referer || entry_path(@entry)
+  end
+
   private
 
   def authorize_friend!

app/views/comments/_form.html.erb

@@ -12,12 +12,12 @@
     </div>
   <% end %>
 
-  <div class="field">
-    <%= f.text_area :text %>
+  <div class="comment-field-box">
+    <%= f.text_area :text, class: "comment-field" %>
   </div>
 
 
   <div class="actions">
-    <%= f.submit 'Comment', class: "btn btn-primary btn-sm" %>
+    <%= f.submit 'Comment', class: "comment-btn" %>
   </div>
 <% end %>

app/views/comments/edit.html.erb

@@ -1,16 +1,14 @@
 
 <h1>Edit comment</h1>
 
+<div class="comments-new">
 <%= form_with model: [@entry, @comment], local: true do |f| %>
     <div>
-    <%= f.label :text, "Edit your comment:" %><br>
-    <%= f.text_area :text, value: @comment.text %>
+    <%= f.text_area :text, value: @comment.text, class: "comment-field" %>
     </div>
-    <%= f.submit 'Update' %>
-
-<br>
+    <div class="actions">
+    <%= f.submit 'Update', class: "comment-btn" %>
+    </div>
+
 <% end %>
-<div>
-  <%= link_to "Show this comment", entry_comments_path(@entry, @comment) %> |
-  <%= link_to "Back to comment", entry_comments_path(@entry) %>
 </div>

app/views/comments/index.html.erb

@@ -1,7 +1,7 @@
 <h1> Comments for <%= @entry.text %> </h1> 
 
 <% @comments.each do |comment| %>
-  <div> 
+  <div class="comments-show"> 
   <p> <%= comment.user.username %> : </p> 
     <p>
     <%= comment.text %>

app/views/comments/new.html.erb

@@ -1,10 +1,7 @@
 
 <h1>New comment</h1>
 
+<div class="comments-new" >
 <%= render "form", comment: @comment %>
 
-<br>
-
-<div>
-   <%= link_to 'Friends Entries', friend_entries_path, class: "btn btn-secondary btn-sm" %>
 </div>

app/views/comments/show.html.erb

@@ -1,15 +1,18 @@
 <h1>Comment</h1>
 
+<div class="comments-show">
 
 <% if @comment.present? %>
   <%= render @comment %>
 <% else %>
   <p>No comment found.</p>
 
 <% end %>
-  <%= link_to 'Edit', edit_entry_comment_path(@entry, @comment), class: "btn btn-primary" %> |
-  <%= button_to entry_comment_path(@entry, @comment), method: :delete, class: "btn btn-danger btn-sm" do%>
-    <i class="bi bi-trash"></i>
-  <% end %>
-  <%= link_to 'My Entries', entries_path, class: "btn btn-primary" %>
-  <%= link_to 'Friends Entries', friend_entries_path, class: "btn btn-primary" %>
+
+  <div class="comment-btn-group">
+    <%= link_to 'Edit', edit_entry_comment_path(@entry, @comment), class: 'comment-btn' %> 
+    <%= button_to entry_comment_path(@entry, @comment), method: :delete, class: "delete-comment-btn" do%>
+      <i class="bi bi-trash"></i>
+    <% end %>
+  </div>
+</div>

app/views/entries/show.html.erb

@@ -46,17 +46,18 @@
           </div>
 
           <div class="entries__show-comment-container-end">
-            <% if (comment.user = current_user) %>
+            <% if (comment.user == current_user ) %>
 
               <%= link_to entry_comment_path(@entry, comment), class: "btn btn-primary btn-sm" do %>
                 <i class="bi bi-eye"></i>
               <% end %>
-
-
-              <%= button_to entry_comment_path(@entry, comment), method: :delete, class: "btn btn-danger btn-sm" do %>
+            <% end %>
+            <% if comment.user  == current_user || @entry.user == current_user %>
+              <%= button_to destroy_another_entry_comment_path(@entry, comment), method: :delete, class: "btn btn-danger btn-sm", data: { turbo: false } do %>
                 <i class="bi bi-trash"></i>
               <% end %>
-            <% end %>
+              <% end %>
+
           </div>
         </div>
       <% end %>

config/routes.rb

@@ -34,7 +34,9 @@
   end
 
   resources :entries do
-    resources :comments, only: [:index, :show, :new, :create, :edit, :update, :destroy]
+    resources :comments, only: [:index, :show, :new, :create, :edit, :update, :destroy] do
+      delete 'destroy_another', on: :member
+    end
   end
 
   resources :users, only: [:show, :edit, :update] do

spec/views/comments/edit.html.erb_spec.rb

@@ -28,12 +28,5 @@
       expect(rendered).to have_selector("input[type='submit'][value='Update']")
     end
 
-    it "has a link to show the comment" do
-      expect(rendered).to have_link('Show this comment', href: entry_comments_path(entry, comment))
-    end
-
-    it "has a link to go back to the comments index" do
-      expect(rendered).to have_link('Back to comment', href: entry_comments_path(entry))
-    end
   end
 end

spec/views/comments/new.html.erb_spec.rb

@@ -17,8 +17,5 @@
       expect(rendered).to render_template(partial: "_form")
     end
 
-    it "renders a link back to comments index" do
-      expect(rendered).to have_link("Friends Entries", href: friend_entries_path)
-    end
   end
 end

spec/views/comments/show.html.erb_spec.rb

@@ -27,15 +27,8 @@
     end
 
     it "renders the delete button" do
-      expect(rendered).to have_selector("button.btn.btn-danger.btn-sm")
+      expect(rendered).to have_selector("button.delete-comment-btn")
     end
 
-    it "displays the back to entry link" do
-      expect(rendered).to have_link("My Entries", href: entries_path)
-    end
-
-    it "displays my friends entries" do
-      expect(rendered).to have_link("Friends Entries", href: friend_entries_path)
-    end
   end
 end