Merge pull request #14 from KOH6/tweet_detail

ツイート詳細ページ作成

app/assets/stylesheets/application.bootstrap.scss

@@ -30,4 +30,14 @@ $btn-border-radius: 1rem;
 
 .profile-content {
   display: block;
+}
+
+.post {
+  text-decoration: none;
+}
+
+.card {
+  border-color: EFF3F4;
+  border-width: 0 0 1px 0;
+  border-radius: 0;
 }

app/controllers/comments_controller.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class CommentsController < ApplicationController
+  def create
+    @comment = current_user.comments.build(comment_params)
+    if @comment.save
+      redirect_to request.referer
+    else
+      redirect_to request.referer, flash: { danger: 'コメント投稿に失敗しました。' }
+    end
+  end
+
+  private
+
+  def comment_params
+    permit_params = params.require(:comment).permit(:content, images: [])
+    permit_params.merge(post_id: params[:post_id].to_i)
+  end
+end

app/controllers/posts_controller.rb

@@ -1,10 +1,17 @@
 # frozen_string_literal: true
 
 class PostsController < ApplicationController
-  before_action :set_user_and_posts
+  before_action :set_user
+  before_action :set_posts, only: %i[index create]
 
   def index; end
 
+  def show
+    @post = Post.find(params[:id])
+    @comments = @post.comments.includes(:user).latest
+    @comment = Comment.new
+  end
+
   def create
     @post = Post.new(post_params)
     @post.user = current_user
@@ -17,8 +24,11 @@ def create
 
   private
 
-  def set_user_and_posts
+  def set_user
     @user = user_signed_in? ? current_user : User.new
+  end
+
+  def set_posts
     @post = Post.new
     @posts = Post.includes(:user).latest.page(params[:posts_page]).per(10)
     # 自分がフォローしている投稿

app/models/comment.rb

@@ -3,6 +3,11 @@
 class Comment < ApplicationRecord
   belongs_to :user
   belongs_to :post
+  has_many_attached :images
 
   validates :content, presence: true
+
+  scope :latest, -> { order(created_at: :desc) }
+
+  delegate :name, :user_name, to: :user, prefix: true
 end

app/views/comments/_comment.html.slim

@@ -0,0 +1,22 @@
+.card
+  .card-body.container-grid.text-dark
+    .row
+      .col-1
+        - if comment.user.photo.attached?
+          = image_tag comment.user.photo, class: "rounded-circle img-fluid", style: " max-width: 100%; height: auto;"
+      .col
+        .d-flex.flex-row
+          p.card-title.fw-bold
+            = comment.user_name
+          p.card-subtitle.text-muted.d-flex.align-items-center.mx-2
+            | @
+            = comment.user_user_name
+            | ・
+            = l comment.created_at
+        - if comment.content?
+          span.card-text
+            = safe_join(comment.content.split("\n"),tag(:br))
+        - if comment.images.attached?
+          .d-flex.flex-row
+          - comment.images.each do |image|
+            = image_tag image, class: "img-fluid", style: " max-width: 50%; height: auto;"

app/views/comments/_form.html.slim

@@ -0,0 +1,17 @@
+- if user_signed_in?
+  = form_with url: comments_path(post_id: post.id), model: comment, data: { turbo: false }, locale: true do |f|
+    .card.my-3
+      .card-body.container-grid
+        .row
+          .col-1
+            - if user.photo.attached?
+              = link_to user_path(current_user), data: { turbo: false }
+                = image_tag user.photo, class: "rounded-circle img-fluid", style: " max-width: 100%; height: auto;"
+          .col
+            = f.text_area :content, class: 'form-control', placeholder: '返信をツイート', rows: 3
+        .d-flex.justify-content-between.mt-4
+          = f.label :images
+            i.fs-3.bi-image.text-primary[style="cursor: pointer"]
+            = f.file_field :images, multiple: true, style: "display: none"
+          button.btn.btn-primary.px-4.text-white.fw-bold[type="submit"]
+            | 返信

app/views/posts/_post.html.slim

@@ -1,22 +1,23 @@
 .card
-  .card-body.container-grid
-    .row
-      .col-1
-        - if post.user.photo.attached?
-          = image_tag post.user.photo, class: "rounded-circle img-fluid", style: " max-width: 100%; height: auto;"
-      .col
-        .d-flex.flex-row
-          p.card-title.fw-bold
-            = post.user_name
-          p.card-subtitle.text-muted.d-flex.align-items-center.mx-2
-            | @
-            = post.user_user_name
-            | ・
-            = l post.created_at
-        - if post.content?
-          span.card-text
-            = safe_join(post.content.split("\n"),tag(:br))
-        - if post.images.attached?
+  = link_to post_path(post), data: { turbo: false}, class: "post"
+    .card-body.container-grid.text-dark
+      .row
+        .col-1
+          - if post.user.photo.attached?
+            = image_tag post.user.photo, class: "rounded-circle img-fluid", style: " max-width: 100%; height: auto;"
+        .col
           .d-flex.flex-row
-          - post.images.each do |image|
-            = image_tag image, class: "img-fluid", style: " max-width: 50%; height: auto;"
+            p.card-title.fw-bold
+              = post.user_name
+            p.card-subtitle.text-muted.d-flex.align-items-center.mx-2
+              | @
+              = post.user_user_name
+              | ・
+              = l post.created_at
+          - if post.content?
+            span.card-text
+              = safe_join(post.content.split("\n"),tag(:br))
+          - if post.images.attached?
+            .d-flex.flex-row
+            - post.images.each do |image|
+              = image_tag image, class: "img-fluid", style: " max-width: 50%; height: auto;"

app/views/posts/_post_detail.html.slim

@@ -0,0 +1,22 @@
+.card
+  .card-body.container-grid.text-dark
+    .row.my-2
+      .col-1
+        - if post.user.photo.attached?
+          = image_tag post.user.photo, class: "rounded-circle img-fluid", style: " max-width: 100%; height: auto;"
+      .col
+        p.card-title.fw-bold
+          = post.user_name
+        p.card-subtitle.text-muted.d-flex.align-items-center
+          | @
+          = post.user_user_name
+      .d-flex.flex-row
+      - if post.content?
+        span.card-text.my-2
+          = safe_join(post.content.split("\n"),tag(:br))
+      - if post.images.attached?
+        .d-flex.flex-row.my-2
+        - post.images.each do |image|
+          = image_tag image, class: "img-fluid", style: " max-width: 50%; height: auto;"
+      p.card-subtitle.text-muted.d-flex.align-items-center
+        = l post.created_at

app/views/posts/show.html.slim

@@ -0,0 +1,14 @@
+.container-fluid
+  = render 'shared/navigation'
+  .row.flex-nowrap
+    = render 'shared/sidebar', :user => @user
+    .col
+      = render "users/shared/error_messages", resource: @comment
+      = render 'shared/flash'
+      h3.fw-bold.my-3
+        | ツイート
+      = render "post_detail", post: @post
+      = render 'comments/form', :user => @user, :comment => @comment, :post => @post
+      - @comments.each do |comment|
+        = render comment
+

config/routes.rb

@@ -7,8 +7,9 @@
     omniauth_callbacks: 'users/omniauth_callbacks'
   }
 
-  resources :posts, only: %i[index create]
+  resources :posts, only: %i[index show create]
   resources :users, only: %i[show edit update]
+  resources :comments, only: %i[create]
 
   root 'posts#index'
 end

db/seeds.rb

@@ -39,11 +39,13 @@
     user_id: user_ids.reject { |id| id == post.user_id }.sample,
     post_id: post.id
   )
-  Comment.create!(
-    user_id: user_ids.reject { |id| id == post.user_id }.sample,
-    post_id: post.id,
-    content: "#{post.user_name}へ、コメント#{n}です"
-  )
+  5.times do |m|
+    Comment.create!(
+      user_id: user_ids.reject { |id| id == post.user_id }.sample,
+      post_id: post.id,
+      content: "#{post.user_name}へ、投稿#{n}に対するコメント#{m}です"
+    )
+  end
 end
 
 user_ids.each do |user_id|

spec/requests/comments_spec.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe 'Comments', type: :request do
+  describe 'GET /index' do
+    pending "add some examples (or delete) #{__FILE__}"
+  end
+end