通知機能一覧をReactからRails viewとJSに移行しました

app/controllers/notifications_controller.rb

@@ -5,6 +5,11 @@ class NotificationsController < ApplicationController
 
   def index
     @target = params[:target]
+    @notifications = UserNotificationsQuery.new(
+      user: current_user,
+      target: params[:target],
+      status: params[:status]
+    ).call.page(params[:page])
   end
 
   def show

app/javascript/notifications_remove_after_open.js

@@ -0,0 +1,27 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const notificationPage = document.querySelector('#notifications')
+  if (!notificationPage) return
+
+  const allOpenButton = document.querySelector(
+    '#js-shortcut-unconfirmed-links-open'
+  )
+  if (!allOpenButton) return
+
+  allOpenButton.addEventListener('click', () => {
+    document.querySelector('.card-list')?.remove()
+    allOpenButton.closest('.card-footer')?.remove()
+    document.querySelector('.a-border-tint')?.remove()
+
+    const container = document.querySelector('.page-content')
+    if (container) {
+      container.innerHTML = `
+        <div class="o-empty-message">
+          <div class="o-empty-message__icon">
+            <div class="i fa-regular fa-smile"></div>
+          </div>
+          <p class="o-empty-message__text">未読の通知はありません</p>
+        </div>
+      `
+    }
+  })
+})

app/javascript/packs/application.js

@@ -85,6 +85,7 @@ import '../toast.js'
 import '../tag.js'
 import '../tag_edit.js'
 import '../bookmark-button.js'
+import '../notifications_remove_after_open.js'
 
 import '../stylesheets/application.sass'
 

app/queries/user_notifications_query.rb

@@ -5,7 +5,7 @@ class UserNotificationsQuery < Patterns::Query
 
   private
 
-  def initialize(relation = Notification.all, user:, target: nil, status: nil)
+  def initialize(relation = Notification.all, user:, target:, status:)
     super(relation)
     @user = user
     @target = target
@@ -14,12 +14,17 @@ def initialize(relation = Notification.all, user:, target: nil, status: nil)
 
   def query
     latest_notifications = @user.notifications
-                                .by_target(@target)
+                                .by_target(validated_target)
                                 .by_read_status(@status)
                                 .latest_of_each_link
 
     Notification.with_avatar
                 .from(latest_notifications, :notifications)
                 .order(created_at: :desc)
   end
+
+  def validated_target
+    target = @target&.to_sym
+    Notification::TARGETS_TO_KINDS.key?(target) ? target : nil
+  end
 end

app/views/notifications/_filter_button.html.slim

@@ -0,0 +1,12 @@
+nav.pill-nav
+  .container
+    ul.pill-nav__items
+      li.pill-nav__item
+        = link_to '未読',
+          notifications_path(status: 'unread', target: params[:target]),
+          class: "pill-nav__item-link #{params[:status] == 'unread' ? 'is-active' : ''}"
+
+      li.pill-nav__item
+        = link_to '全て',
+          notifications_path(target: params[:target]),
+          class: "pill-nav__item-link #{params[:status] == 'unread' ? '' : 'is-active'}"

app/views/notifications/_notification.html.slim

@@ -0,0 +1,30 @@
+- read_class = notification.read? ? 'is-read' : 'is-unread'
+
+.card-list-item class=read_class
+  .card-list-item__inner
+    .card-list-item__user
+      = link_to user_path(notification.sender), class: 'card-list-item__user-link' do
+        = image_tag notification.sender.avatar_url,
+          class: 'card-list-item__user-icon a-user-icon',
+          alt: notification.sender.login_name
+
+    .card-list-item__rows
+      .card-list-item__row
+        .card-list-item-title
+          .card-list-item-title__start
+            - if !notification.read?
+                .a-list-item-badge.is-unread
+                  span 未読
+
+            h2.card-list-item-title__title[itemProp="name"]
+              = link_to notification.path,
+                class: 'card-list-item-title__link a-text-link js-unconfirmed-link',
+                itemProp: 'url' do
+                  span.card-list-item-title__link-label = notification.message
+
+    .card-list-item__row
+      .card-list-item-meta
+        .card-list-item-meta__items
+          .card-list-item-meta__item
+            time.a-meta dateTime=notification.created_at
+              = l(notification.created_at, format: :long)

app/views/notifications/index.html.slim

@@ -44,4 +44,25 @@ main.page-main
   hr.a-border
   .page-body
     .container.is-md
-      = react_component('Notifications', isMentor: mentor_login?)
+      = render 'filter_button'
+      - if @notifications.empty?
+        .o-empty-message
+          .o-empty-message__icon
+            .i.fa-regular.fa-smile
+          p.o-empty-message__text
+            = params[:status] == 'unread' ? '未読の通知はありません' : '通知はありません'
+      - else
+        .page-content#notifications
+          - if @notifications.total_pages > 1
+            nav.pagination
+              = paginate @notifications
+          .card-list.a-card
+            - @notifications.each do |notification|
+              = render 'notification', notification: notification
+
+          - if current_user.mentor? && params[:status] == 'unread'
+            = render 'application/unconfirmed_links_open', label: '未読の通知を一括で開く'
+
+          - if @notifications.total_pages > 1
+            nav.pagination
+              = paginate @notifications