Merge branch 'dev' into api-endpoints

Microverse-Fullstack-Program · Aug 14, 2023 · 6aa5edb · 6aa5edb
2 parents 6e1d353 + f136ce4
commit 6aa5edb
Show file tree

Hide file tree

Showing 21 changed files with 433 additions and 142 deletions.
diff --git a/Gemfile b/Gemfile
@@ -79,3 +79,5 @@ group :test do
 end
 
 gem 'devise', '~> 4.9'
+
+gem 'cancancan', '~> 3.5'
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -74,6 +74,7 @@ GEM
     bootsnap (1.16.0)
       msgpack (~> 1.2)
     builder (3.2.4)
+    cancancan (3.5.0)
     capybara (3.39.2)
       addressable
       matrix
@@ -268,6 +269,7 @@ PLATFORMS
 
 DEPENDENCIES
   bootsnap
+  cancancan (~> 3.5)
   capybara
   debug
   devise (~> 4.9)

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -4,14 +4,39 @@
   box-sizing: border-box;
 }
 
+.wrapper {
+  margin: 1rem auto;
+  gap: 1rem;
+  box-shadow: 0 0 2px 2px rgb(231, 231, 237);
+}
+
+.wrapper,
 .container {
-  width: 80vw;
+  width: 90vw;
   height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin: 2rem 0;
+  background-color: whitesmoke;
+}
+
+.navbar {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
   gap: 1rem;
+  padding: 1rem;
+  background-color: #1868f1;
+  border: 1px solid rgb(128, 128, 128);
+}
+
+.logout {
+  cursor: pointer;
+  padding: 5px 10px;
+  font-size: 15px;
+  font-weight: bold;
 }
 
 .user {
@@ -21,6 +46,7 @@
   justify-content: center;
   align-items: center;
   gap: 2rem;
+  padding: 1rem;
 }
 
 .user-photo {
@@ -36,7 +62,7 @@
 }
 
 .user-info {
-  width: 46%;
+  width: 80%;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -51,7 +77,9 @@
 }
 
 .user-posts {
-  justify-content: flex-end;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
   align-self: flex-end;
   padding: 2rem 1rem 1rem 1rem;
   font-size: small;
@@ -70,10 +98,11 @@ a {
 }
 
 .post {
-  width: 60%;
+  width: 90%;
   display: flex;
   flex-direction: column;
   border: 3px solid black;
+  margin-bottom: 1rem;
 }
 
 .post h3 {
@@ -86,42 +115,82 @@ a {
   padding: 0.5rem 1rem;
 }
 
+.post-text {
+  display: grid;
+  grid-template-columns: 2fr 0.5fr;
+  gap: 1rem;
+}
+
 .count {
   display: flex;
   flex-direction: row;
-  justify-content: flex-end;
+  justify-content: space-around;
+  align-items: center;
   padding: 0.5rem 1rem;
-  font-size: small;
+  font-size: medium;
+  gap: 0.5rem;
+}
+
+.post-text .count {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: flex-start;
+  text-align: center;
+  padding: 0.5rem 2rem 0.5rem 10vh;
+  font-size: medium;
+  gap: 0.5rem;
 }
 
 .count span {
   padding: 0 0.25rem;
 }
 
+.like_count_btn {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+}
+
 .post-comments {
-  width: 60%;
+  width: 100%;
   display: flex;
   flex-direction: column;
   padding: 1rem;
   gap: 0.5rem;
-  border: 3px solid black;
 }
 
 .btn-link {
+  width: auto;
   align-self: center;
 }
 
-button {
+button,
+form input[type="submit"] {
   border-bottom: 5px solid black;
   border-right: 3px solid black;
   border-radius: 5px;
+  padding: 5px;
+}
+
+.like_count_btn button {
+  width: 2vw;
+  height: 2vw;
+  font-size: x-large;
+  padding: 0;
+}
+
+form input[type="hidden"] {
+  width: 1px;
+  height: 1px;
 }
 
 .btn-link,
 .btn-link button {
   cursor: pointer;
-  padding: 5px;
   font-size: 15px;
+  margin: 10px 0;
 }
 
 .post-form,
@@ -135,21 +204,39 @@ button {
   background-color: #f5f5f5;
 }
 
-.comments,
 .posts {
   width: 80%;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   padding: 1rem;
   gap: 1rem;
 }
 
+.comments {
+  display: grid;
+  grid-template-columns: 0.5fr 2.5fr 0.5fr;
+}
+
+.post .add-comment {
+  margin: 0 auto;
+  align-self: center;
+}
+
+.comment-form textarea,
+.post-form textarea {
+  width: 100%;
+  height: 100px;
+  padding: 0.5rem;
+  border: 1px solid black;
+  border-radius: 5px;
+}
+
 .comment-btn,
 .like-button {
+  width: auto;
   cursor: pointer;
   padding: 5px 10px;
   margin-left: 5rem;
-  font-size: 15px;
   border-bottom: 5px solid black;
   border-right: 3px solid black;
   border-radius: 5px;
@@ -184,6 +271,15 @@ form input {
   padding: 0.5rem;
 }
 
+.like_count_btn form {
+  width: 3vw;
+}
+
+.comments form {
+  width: auto;
+  align-self: flex-end;
+}
+
 .shared {
   display: flex;
   flex-direction: column-reverse;
@@ -226,14 +322,20 @@ ul {
 
 .auth_links {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: flex-start;
   align-items: center;
   gap: 1rem;
   width: 30vw;
   margin: auto auto;
 }
 
+.sign_in_up {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
 .auth_links a {
   color: blue;
   padding: 0.5rem;
@@ -284,8 +386,44 @@ ul {
 }
 
 .form-elements {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1rem;
+  margin: 1rem 0;
+}
+
+.like-button {
+  border: none;
+  background-color: transparent;
+  font-size: 2rem;
+}
+
+.short-button {
+  width: 7vw;
+  align-items: flex-end;
+}
+
+.user-comments-likes {
   display: flex;
   flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
   gap: 1rem;
+  width: 100%;
+  margin: 1rem 0;
+}
+
+.count form {
+  width: auto;
+}
+
+.post .count {
+  display: grid;
+  grid-template-columns: 0.5fr 0.5fr;
+  justify-items: end;
+  gap: 1rem;
+  width: 100%;
   margin: 1rem 0;
 }
diff --git a/app/controllers/comments_controller.rb b/app/controllers/comments_controller.rb
@@ -18,6 +18,18 @@ def create
     end
   end
 
+  def destroy
+    @comment = Comment.find(params[:id])
+    @post = @comment.post
+
+    if can? :destroy, @comment
+      @comment.destroy
+      redirect_to user_post_path(@post.author, @post), notice: 'Comment was successfully deleted.'
+    else
+      redirect_to user_posts_path(current_user), alert: 'You are not authorized to delete this comment.'
+    end
+  end
+
   private
 
   def comment_params

diff --git a/app/controllers/posts_controller.rb b/app/controllers/posts_controller.rb
@@ -1,4 +1,6 @@
 class PostsController < ApplicationController
+  load_and_authorize_resource
+
   def index
     @user = User.includes(posts: { comments: :author }).find(params[:user_id])
     @current_user = current_user
@@ -27,6 +29,17 @@ def create
     end
   end
 
+  def destroy
+    @post = Post.find(params[:id])
+
+    if can? :destroy, @post
+      @post.destroy
+      redirect_to "/users/#{current_user.id}/posts", notice: 'Successfully deleted.'
+    else
+      redirect_to user_post_path(@post.author_id, @post), alert: 'Unauthorized action.'
+    end
+  end
+
   private
 
   def post_params