👋

通知機能2

2024/01/19に公開

ルーティング

routes.rb
 scope module: :public do
   resources :notifications, only: [:index] do
     post :update_checked, on: :collection
     end
   end

コントローラ

class Public::NotificationsController < ApplicationController
  before_action :authenticate_user!

  def index
    @user = current_user
    @notices = current_user.passive_notifications.order(created_at: :desc)
    @unchecked_notifications = @notices.where(is_checked: false)

    # 確認済みの通知を取得
    @checked_notifications = @notices.where(is_checked: true).limit(20)
    
    # 通知を確認済みに更新
    current_user.passive_notifications.update_all(is_checked: true)
    render partial: "index"
  end

  def update_checked
    current_user.passive_notifications.update_all(is_checked: true)
    head :no_content
  end
end

ビューの設定

_index.html.erb
<% notifications = unchecked_notifications.where.not(visitor_id: current_user.id) %>

<!--未確認通知を表示-->
<% if @unchecked_notifications.any? %>
  <%= render "notification", notifications: @unchecked_notifications %>
<% end %>

 <!--確認済み通知を表示-->
  <% if @checked_notifications.any? %>
    <%= render "notification", notifications: @checked_notifications %>
  <% end %>

 <!--通知が一つもない場合の表示-->
<% if @unchecked_notifications.empty? && @checked_notifications.empty? %>
  <p>通知はありません</p>
<% end %>
_notification.html.erb
<% notifications.each do |notification| %>
  <% visitor = notification.visitor %>
  <% visited = notification.visited %>
  <div class="col-md-12 mx-auto notification-container">
    <div class="notification-box d-flex align-items-center">
      <div class="notification-icon">
        <%= link_to user_path(visitor.id), data: { turbolinks: false } do %>
        <h2><%= visitor.name %></h2>
        <% end %>
      </div>

      <!-- 通知の種類に応じて表示内容を切り替え -->
      <% case notification.action when 'follow' then %>

      <!-- フォロー通知の場合 -->
        <strong><%= visitor.name %></strong>さんがあなたをフォローしました

      <!-- 投稿がいいねされた通知の場合 -->
      <% when 'favorite_post' then %>
        <%= link_to post_path(notification.post) do %>
          <strong><%= visitor.name %></strong>さんが<strong><%= truncate(notification.post.text, length: 10) %></strong>の投稿にいいねしました
        <% end %>

      <!-- コメントが投稿された通知の場合 -->
      <% when 'post_comment' then %>
        <!-- 自分自身の投稿へのコメントの場合 -->
        <% if notification.post.user_id == visited.id %>
          <%= link_to post_path(notification.post) do %>
            <strong><%= visitor.name %></strong>さんが<strong><%= truncate(notification.post.text, length: 10) %></strong>の投稿にコメントしました
            <% post_comment = PostComment.find_by(id: notification.post_comment_id) %>
            <div class="notification-comment">
              <%= truncate(post_comment&.comment, length: 30) %>
            </div>
          <% end %>

        <!-- 投稿者が異なり自身がコメントした投稿に他のユーザーがコメントした場合 -->
        <% else %>
          <span>
            <%= link_to post_path(notification.post) do %>
              <strong><%= visitor.name %></strong>さんが<strong><%= notification.post.user.name + 'さんの投稿' %></strong>にコメントしました
              <% post_comment = PostComment.find_by(id: notification.post_comment_id) %>
              <div class="notification-comment">
                <%= truncate(post_comment&.comment, length: 30) %>
              </div>
            <% end %>
          </span>
        <% end %>
      <% end %>

    </div>
    <div class="small text-muted text-right">
      <%= time_ago_in_words(notification.created_at).upcase %>前
    </div>
  </div>
<% end %>

終わりに

エラーが起こって解決に時間がかかりましたが、ほとんど自身のスペルミスでした。。。
またレイアウトを調整していきたいと思います。

Discussion