Milestone: # Blog-app Views

README.md

@@ -52,6 +52,7 @@ Blog-app is a fully functioning website that show the list of posts and empower
 - **Validations and Model specs**
 - **Setup controllers**
 - **Controllers specs**
+- **Users and posts views**
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
@@ -110,7 +111,6 @@ it will install the required gemfile for running the project
 <!-- FUTURE FEATURES -->
 
 ## 🔭 Future Features <a name="future-features"></a>
- - Views.
  - Forms.
  - Integration specs for Views and fixing n+1 problems.
  - Add Devise.

app/assets/stylesheets/application.css

@@ -1,15 +1,148 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
- * vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any other CSS
- * files in this directory. Styles in this file should be added after the last require_* statement.
- * It is generally better to create a new file per style scope.
- *
- *= require_tree .
- *= require_self
- */
+*,
+html {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+a {
+  text-decoration: none;
+}
+
+.users-article {
+  width: 80%;
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  padding-top: 2rem;
+}
+
+.container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 10px;
+  margin-bottom: 2rem;
+}
+
+.photo {
+  width: 40%;
+  border: 1px solid black;
+}
+
+.see-posts {
+  width: 150px;
+  height: 40px;
+  background-color: rgb(212, 142, 51);
+  color: white;
+  padding: 5px;
+  font-size: 17px;
+}
+
+.details {
+  width: 100%;
+  border: 1px solid black;
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+}
+
+.details p {
+  padding-top: 30%;
+}
+
+.bio {
+  width: 80%;
+  border: 1px solid black;
+  padding: 10px;
+}
+
+.bio p {
+  padding-bottom: 10px;
+}
+
+.post-details {
+  width: 80%;
+  border: 1px solid black;
+  padding: 10px;
+}
+
+.post-details p {
+  position: relative;
+  top: 90%;
+  left: 87%;
+}
+
+.post-details h2 {
+  padding-bottom: 10px;
+}
+
+.posts-details {
+  border: 1px solid black;
+  padding: 10px;
+}
+
+.comment-cont {
+  border: 1px solid black;
+  padding: 10px;
+}
+
+.posts-details p {
+  position: relative;
+  top: 90%;
+  left: 87%;
+}
+
+.post-comment {
+  width: 80%;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.post-comments {
+  width: 80%;
+  border: 1px solid black;
+  padding: 10px;
+}
+
+.left {
+  display: flex;
+}
+
+.post-head {
+  display: flex;
+  justify-content: space-between;
+}
+
+.post-body {
+  padding-top: 20px;
+}
+
+.comments-container {
+  width: 80%;
+  border: 1px solid black;
+  padding: 10px;
+}
+
+.post-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 1px;
+  padding: 10px;
+}
+
+.pagination {
+  width: 150px;
+  height: 40px;
+  background-color: rgb(212, 142, 51);
+  color: white;
+  padding: 5px;
+  font-size: 17px;
+}

app/controllers/posts_controller.rb

@@ -1,5 +1,11 @@
 class PostsController < ApplicationController
-  def index; end
+  def index
+    @user = User.find(params[:user_id])
+    @posts = @user.posts.includes(:comments)
+  end
 
-  def show; end
+  def show
+    @post = Post.includes(:comments).find(params[:id])
+    @user = User.find(params[:user_id])
+  end
 end

app/controllers/users_controller.rb

@@ -1,5 +1,10 @@
 class UsersController < ApplicationController
-  def index; end
+  def index
+    @users = User.all
+  end
 
-  def show; end
+  def show
+    @user = User.find(params[:id])
+    @posts = @user.posts
+  end
 end

app/views/posts/index.html.erb

@@ -1,2 +1,27 @@
-<h1>A list of all posts of a given user</h1>
+<section class="container">
+<article class="users-article">
+<div class="photo"><%= @user.photo %></div>
+<div class="details">
+ <h2><%= @user.name %></h2>
+  <p>Number of posts: <%= @user.posts_counter %></p>
+</div>
+</article>
 
+<% @posts.each do |post| %>
+    <article class="post-comment">
+    <div class="posts-details">
+  <h2><%= link_to "Post ", user_post_url(@user.id, post.id) %> #<%= post.id %></h2>
+  <h3><%= post.text %></h3>
+  <p>Comments:<%= post.comments_counter %>,Likes:<%= post.likes_counter %></p>
+  </div>
+
+  <div class="comment-cont">
+  <% post.recent_comments.each do |comment| %>
+    <p><%= @user.name %>: <%= comment.text %> <%= comment.id %></p>
+    <% end %>
+  </div>
+
+  </article>
+  <% end %>
+    <button type="button" class="pagination">Pagination</button>
+</section>

app/views/posts/show.html.erb

@@ -1,2 +1,23 @@
-<h1>Details for a selected Post</h1>
+<section class="post-container">
+<article class="post-comments">
+<div class="post-head">
+  <div class="left">
+    <h4>Post  #<%= @post.id %><h4>
+    <p>by <%= @user.name %></p>
+ </div>
+ <div>
+<span>Comments: <%= @post.comments_counter %> Likes:<%= @post.likes_counter %></span>
+</div>
+</div>
+<div class="post-body">
+<h4><%= @post.text %></h4>
+</div>
 
+</article>
+<div class="comments-container">
+<% @post.comments.each do |comment| %>
+    <p><%= comment.user.name %>: <%= comment.text %> <%= comment.id %></P>
+    <% end %>
+</div>
+
+</section>

app/views/users/_user_info.html.erb

@@ -0,0 +1,7 @@
+<article class="users-article">
+<div class="photo"><%= user.photo %></div>
+<div class="details">
+ <h2><%= link_to user.name, user_url(user.id) %></h2>
+  <p>Number of posts: <%= user.posts_counter %></p>
+</div>
+</article>

app/views/users/index.html.erb

@@ -1,2 +1,7 @@
-<h1>List of Users</h1>
+<section class="container">
+  <% @users.each do |user| %>
+    <%= render partial: 'user_info', locals: { user: user } %>
+  <% end %>
+</section>
+
 

app/views/users/show.html.erb

@@ -1,2 +1,23 @@
-<h1>Details of a Selected User</h1>
-
+<section class="container">
+<article class="users-article">
+<div class="photo"><%= @user.photo %></div>
+<div class="details">
+ <h2><%= @user.name %></h2>
+  <p><%= link_to "Number of posts:", user_posts_url(@user.id) %> <%= @user.posts_counter %></p>
+</div>
+</article>
+<div class="bio">
+  <p>Bio</p>
+  <p><%= @user.bio %></p>
+</div>
+    <% @user.recent_posts.each do |post| %>
+        <div class="post-details">
+      <h2><%= link_to "Post #", user_post_url(@user.id, post.id) %><%= post.id %></h2>
+      <h3><%= post.text %></h3>
+      <p>Comments:<%= post.comments_counter %>,Likes:<%= post.likes_counter %></p>
+      </div>
+    <% end %>
+    <%= link_to user_posts_path(@user.id) do %>
+    <button type="button" class="see-posts">See all posts</button>
+    <% end %>
+</section>