ITurres · ITurres · Dec 7, 2023 · Dec 6, 2023 · Dec 6, 2023 · Dec 6, 2023
diff --git a/Gemfile b/Gemfile
@@ -70,6 +70,9 @@ group :development do
   # gem "spring"
 
   gem 'error_highlight', '>= 0.4.0', platforms: [:ruby]
+
+  # Fake data generator
+  gem 'faker'
 end
 
 group :test do

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -110,6 +110,8 @@ GEM
     factory_bot_rails (6.4.2)
       factory_bot (~> 6.4)
       railties (>= 5.0.0)
+    faker (3.2.2)
+      i18n (>= 1.8.11, < 2)
     globalid (1.2.1)
       activesupport (>= 6.1)
     i18n (1.14.1)
@@ -295,6 +297,7 @@ DEPENDENCIES
   debug
   error_highlight (>= 0.4.0)
   factory_bot_rails
+  faker
   importmap-rails
   jbuilder
   pg (~> 1.1)

diff --git a/README.md b/README.md
@@ -14,6 +14,7 @@
 - [📖 About the Project](#about-project)
   - [🛠 Built With](#built-with)
     - [Tech Stack](#tech-stack)
+    - [Key Features](#key-features)
 - [💻 Getting Started](#getting-started)
   - [Prerequisites](#prerequisites)
   - [Setup](#setup)
@@ -81,8 +82,13 @@
       </a>
     </li>
     <li>
-      <a href="https://www.sass-lang.com/">
-        <img src="https://skillicons.dev/icons?i=sass"/> Sass
+      <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">
+        <img src="https://skillicons.dev/icons?i=sass"/> CSS
+      </a>
+    </li>
+    <li>
+      <a href="https://getbootstrap.com/docs/4.0/getting-started/introduction/">
+        <img src="https://skillicons.dev/icons?i=bootstrap"/> Bootstrap
       </a>
     </li>
     <li>
@@ -94,6 +100,16 @@
 
 ---
 
+### :key: Key Features <a name="key-features"></a>
+
+- It allows you to create, edit and delete posts.
+- create, edit and delete comments.
+- You can also like posts.
+- Great authentication by gem devise.
+- And flawless authorization by gem `cancancan`.
+
+---
+
 <!-- GETTING STARTED -->
 
 ## 💻 Getting Started <a name="getting-started"></a>
@@ -216,7 +232,7 @@ To execute the tests, run the following command inside the project folder:
 - [x] Validations and Model specs.
 - [x] Controllers.
 - [x] Controllers specs.
-- [ ] Views.
+- [x] Views.
 - [ ] Forms.
 - [ ] Integration specs for Views and fixing n+1 problems.
 - [ ] Add Devise.

diff --git a/app/controllers/posts_controller.rb b/app/controllers/posts_controller.rb
@@ -1,9 +1,16 @@
 class PostsController < ApplicationController
   def index
     p '------PostsController------'
+    if params[:user_id]
+      @user = User.find(params[:user_id])
+      @posts = @user.posts
+    else
+      @posts = Post.all
+    end
   end
 
   def show
     p '------PostsController / show------'
+    @post = Post.find(params[:id])
   end
 end
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
@@ -1,9 +1,11 @@
 class UsersController < ApplicationController
   def index
     p '------UsersController------'
+    @users = User.all
   end
 
   def show
     p '------UsersController / show------'
+    @user = User.find(params[:id])
   end
 end
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,8 +1,16 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>BlogApp</title>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Blog</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="blog app" />
+    <meta name="author" content="Arturo Emanuel Guerra Iturres" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
+      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
+      crossorigin="anonymous"
+    />
+    <%= favicon_link_tag asset_path('blog-logo.png') %>
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
@@ -11,6 +19,10 @@
   </head>
 
   <body>
+    <%# Navbar %>
+
     <%= yield %>
+
+    <%# Footer %>
   </body>
 </html>
diff --git a/app/views/posts/_posts.html.erb b/app/views/posts/_posts.html.erb
@@ -0,0 +1,45 @@
+<% posts.each_with_index do |post, index| %>
+    <div class="card mt-3">
+
+      <%= link_to user_post_path(post.author, post), class: "text-decoration-none text-secondary" do %>
+        <div class="card-header d-flex justify-content-between">
+          <span class="text-success">
+            <strong>
+              Post #<%= index + 1 %>
+              <%= posts.size == 1 ? " | By #{post.author.name}" : "" %>
+            </strong>
+          </span>
+          <% if posts.size == 1 %> 
+            <div class="text-muted">
+              <span>Comments: <%= post.comments_counter %></span>,
+              <span>Likes: <%= post.likes_counter %></span>
+            </div>
+          <% end %>
+        </div>
+
+        <div class="card-body">
+          <h5 class="card-title"><%= post.title %></h5>
+          <p class="card-text"><%= truncate_n.nil? ? post.text : post.text.truncate(truncate_n) %></p>
+        </div>
+
+        <% if posts.size > 1 %>
+          <div class="text-muted pt-1 pb-2 pr-3" style="text-align: end;">
+            <span>Comments: <%= post.comments_counter %></span>,
+            <span>Likes: <%= post.likes_counter %></span>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+
+    <% if limit_n > 0 %>
+      <div class="card card-body mt-1 p-3">
+        <ul class="list-unstyled">
+
+          <% post.most_recent_comments(limit_n).each do |comment| %>
+            <li><%= comment.author.name %>: <%= comment.text %></li>
+          <% end %>
+
+        </ul>
+      </div>
+    <% end %>
+<% end %>
diff --git a/app/views/posts/index.html.erb b/app/views/posts/index.html.erb
@@ -1 +1,20 @@
-<h1>posts/index</h1>
+<h1 hidden>posts/index</h1>
+
+<main class='container mt-4' style="max-width: 900px;">
+    <%= render "shared/user_card", user: @user %>
+
+    <div class="mt-4">
+        <% if @user.posts.any? %>
+            <%= render "posts",
+                       posts: @user.most_recent_posts,
+                       truncate_n: 50,
+                       limit_n: 5 %>
+        <% else %>
+            <p class="text-muted text-center">No posts yet.</p>
+        <% end %>
+    </div>
+
+    <%= render "shared/button_link",
+               button_text: "Pagination",
+               path: user_path(@user) %>
+<main>
diff --git a/app/views/posts/show.html.erb b/app/views/posts/show.html.erb
@@ -1 +1,8 @@
-<h1>posts/show</h1>
+<h1 hidden>posts/show</h1>
+
+<main class='container mt-4' style="max-width: 900px;">
+    <%= render "posts",
+               posts: [@post], # ! @post is a single post so we need to wrap it in an array for it to be iterable.
+               truncate_n: nil,
+               limit_n: @post.comments_counter %>
+</main>
diff --git a/app/views/shared/_button_link.html.erb b/app/views/shared/_button_link.html.erb
@@ -0,0 +1,3 @@
+<div class="p-4 text-center">
+    <%= link_to button_text, path, class: "btn btn-success" %>
+</div>
diff --git a/app/views/shared/_user_card.html.erb b/app/views/shared/_user_card.html.erb
@@ -0,0 +1,14 @@
+<%= link_to user_path(user), class: "text-decoration-none" do %>
+    <div class='d-flex justify-content-center mb-3' style='width: auto; margin: 0 auto;'>
+        <img src=<%= user.photo %> class='card-img-top mr-3 border border-success'
+            alt='user profile image' 
+            style='width: auto'
+        />
+        <div class='card' style='width: 100%; max-width: 700px;'>
+            <div class='card-body d-flex justify-content-between'>
+                <h5 class='card-title mb-0'><%= user.name.capitalize %></h5>
+                <span class='mb-0 text-muted align-self-start'><%= user.posts_counter %> posts.</span>
+            </div>
+        </div>
+    </div>
+<% end %>
diff --git a/app/views/users/index.html.erb b/app/views/users/index.html.erb
@@ -1 +1,7 @@
-<h1>users/index</h1>
+<h1 hidden>users/index</h1>
+
+<main class='container mt-4'>
+    <% @users.each do |user| %>
+        <%= render "shared/user_card", user: user %>
+    <% end %>
+</main>
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
@@ -1 +1,29 @@
-<h1>users/show</h1>
+<h1 hidden>users/show</h1>
+
+<main class="container mt-4" style="max-width: 900px;">
+    <%= render "shared/user_card", user: @user %>
+
+    <section>
+        <div class="border border-primary p-3">
+            <h2>Bio</h2>
+            <p><%= @user.bio %></p>
+        </div>
+    </section>
+
+    <section>
+        <div class="mt-4">
+            <% if @user.posts.any? %>
+                <%= render "posts/posts",
+                           posts: @user.most_recent_posts,
+                           truncate_n: 100,
+                           limit_n: 0 %>
+            <% else %>
+                <p class="text-muted text-center">No posts yet.</p>
+            <% end %>
+        </div>
+
+        <%= render "shared/button_link",
+                   button_text: "See all posts",
+                   path: user_posts_path(@user) %>
+    </section>
+</main>