ダッシュボードのブックマーク表示機能をReactからViewComponentに移行

app/components/dashboard_bookmark_component.html.slim

@@ -0,0 +1,28 @@
+.card-list-item class='is-#{type.to_s.downcase}'
+  .card-list-item__inner
+    - if type == 'Talk'
+      .card-list-item__user
+        = render 'users/icon', user: author,
+                               link_class: 'card-list-item__user-link',
+                               image_class: ['card-list-item__user-icon', 'a-user-icon']
+    - else
+      .card-list-item__label
+        = type.human 
+    .card-list-item__rows
+      .card-list-item__row
+        .card-list-item-title
+          .card-list-item-title__title
+            = link_to bookmarkable, class: 'card-list-item-title__link a-text-link' do
+              = title
+      - if type != 'Talk'
+        .card-list-item__row
+          .card-list-item-meta
+            .card-list-item-meta__item
+              = link_to author, class: 'a-user-name' do
+               = "#{author.login_name}(#{author.name_kana})"
+            .card-list-item-meta__item
+              time.a-meta(datetime = @bookmark.reported_on_or_created_at)
+                = l @bookmark.reported_on_or_created_at, format: :long
+    .card-list-item__option.js-bookmark-delete-button
+      = link_to current_user_bookmark_path(@bookmark.id), method: :delete, class: 'a-button is-sm is-primary' do
+        | 削除

app/components/dashboard_bookmark_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+class DashboardBookmarkComponent < ViewComponent::Base
+  def initialize(bookmark:)
+    @bookmark = bookmark
+  end
+
+  def bookmarkable
+    @bookmark.bookmarkable
+  end
+
+  def type
+    bookmarkable.model_name
+  end
+
+  def author
+    bookmarkable.user
+  end
+
+  def title
+    type == 'Talk' ? "#{bookmarkable.user.long_name} さんの相談部屋" : bookmarkable.title
+  end
+end

app/components/dashboard_bookmarks_component.html.slim

@@ -0,0 +1,20 @@
+.a-card
+  header.card-header.is-sm
+    h2.card-header__title
+      | 最新のブックマーク
+    .card-header__action
+      label.a-form-label.is-sm.is-inline.spec-bookmark-edit for='card-list-tools__action'
+        | 編集
+      label.a-on-off-checkbox.is-sm
+        input#bookmark_edit type='checkbox'
+        span#spec-edit-mode
+      span
+  hr.a-border-tint
+  .card-list
+    - @bookmarks.each do |bookmark|
+      = render(DashboardBookmarkComponent.new(bookmark: bookmark))
+      end
+  footer.card-footer
+    .card-footer__footer-link
+      = link_to current_user_bookmarks_path, class: 'card-footer__footer-text-link' do
+        | 全てのブックマーク（#{@bookmarks.length}）

app/components/dashboard_bookmarks_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class DashboardBookmarksComponent < ViewComponent::Base
+  def initialize(bookmarks:)
+    @bookmarks = bookmarks
+  end
+end

app/controllers/current_user/bookmarks_controller.rb

@@ -4,4 +4,10 @@ class CurrentUser::BookmarksController < ApplicationController
   def index
     @user = current_user
   end
+
+  def destroy
+    Bookmark.find(params[:id]).destroy
+
+    redirect_to root_path, notice: 'Bookmarkを削除しました。'
+  end
 end

app/views/home/_adviser_dashboard.html.slim

@@ -17,7 +17,7 @@
                     .a-panels__item
                       = render 'job_seeking_users', users: @job_seeking_users
                   - if current_user.bookmarks.present?
-                    = react_component 'BookmarksInDashboard', {}, { class: 'a-card-react', id: 'bookmarks-in-dashboard' }
+                    = render(DashboardBookmarksComponent.new(bookmarks: @bookmarks))
                   - if current_user.wip_exists?
                     .a-panels__item
                       = render 'wip_items'

app/views/home/_mentor_dashboard.html.slim

@@ -31,7 +31,7 @@
                     .a-panels__item
                       = render partial: 'announcements'
                   - if current_user.bookmarks.present?
-                    = react_component 'BookmarksInDashboard', {}, { class: 'a-card-react', id: 'bookmarks-in-dashboard' }
+                    = render(DashboardBookmarksComponent.new(bookmarks: @bookmarks))
                   - if current_user.wip_exists?
                     .a-panels__item
                       = render 'wip_items'

app/views/home/index.html.slim

@@ -26,7 +26,7 @@
               - if @announcements.present?
                 = render partial: 'announcements'
               - if current_user.bookmarks.present?
-                = react_component 'BookmarksInDashboard', {}, { class: 'a-card-react', id: 'bookmarks-in-dashboard' }
+                = render(DashboardBookmarksComponent.new(bookmarks: @bookmarks))
               - if current_user.wip_exists?
                 = render 'wip_items'
               - if current_user.active_practices.present?

config/routes/current_user.rb

@@ -5,6 +5,6 @@
     resources :reports, only: %i(index)
     resources :products, only: %i(index)
     resources :watches, only: %i(index)
-    resources :bookmarks, only: %i(index)
+    resources :bookmarks, only: %i(index destroy)
   end
 end

test/components/dashboard_bookmark_component_test.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+require 'test_helper'
+require 'supports/decorator_helper'
+
+class DashboardBookmarksComponentTest < ViewComponent::TestCase
+  include DecoratorHelper
+  def test_renders_talk_bookmark
+    bookmark = bookmarks(:bookmark31)
+
+    render_inline(DashboardBookmarkComponent.new(bookmark:))
+
+    assert_selector '.card-list-item__user .card-list-item__user-icon'
+    assert_selector '.card-list-item-title__title', text: "#{bookmark.bookmarkable.user.long_name} さんの相談部屋"
+  end
+
+  def test_renders_non_talk_bookmark
+    bookmark = decorate(bookmarks(:bookmark29))
+
+    render_inline(DashboardBookmarkComponent.new(bookmark:))
+
+    assert_selector '.card-list-item__label', text: bookmark.bookmarkable.class.model_name.human
+    assert_selector '.card-list-item-title__title', text: bookmark.bookmarkable.title
+  end
+end

test/components/dashboard_bookmarks_component_test.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+require 'test_helper'
+require 'supports/decorator_helper'
+
+class DashboardBookmarkComponentTest < ViewComponent::TestCase
+  include DecoratorHelper
+
+  def test_renders_all_bookmarks_when_present
+    bookmarks = [decorate(bookmarks(:bookmark28)), decorate(bookmarks(:bookmark29))]
+
+    render_inline(DashboardBookmarksComponent.new(bookmarks:))
+
+    assert_selector '.card-list-item', count: bookmarks.count
+  end
+end