Skip to content

Reports.jsx、Report.jsxを非React化する#9641

Merged
komagata merged 2 commits intomainfrom
feature/de-react-reports
Feb 18, 2026
Merged

Reports.jsx、Report.jsxを非React化する#9641
komagata merged 2 commits intomainfrom
feature/de-react-reports

Conversation

@komagata
Copy link
Copy Markdown
Member

@komagata komagata commented Feb 12, 2026

Summary

  • Reports.jsx、Report.jsx、ListComment.jsxを削除し、Rails viewに移行
  • 5つのviewでreact_componentをRailsパーシャル(_report.html.slim)に置換
  • kaminariによるページネーション、HTMLフォームによるプラクティスフィルター

変更内容

コントローラー

  • companies/reports_controller.rb - @reports を追加
  • talks_controller.rb - @reports を追加(showアクション)
  • users/reports_controller.rb - @current_user_practice とプラクティスフィルター対応を追加

View(5箇所)

  • current_user/reports/index.html.slim
  • users/reports/index.html.slim
  • practices/reports/index.html.slim
  • companies/reports/index.html.slim
  • talks/show.html.slim(サイドバー部分)

削除

  • app/javascript/components/Reports.jsx
  • app/javascript/components/Report.jsx
  • app/javascript/components/ListComment.jsx

Test plan

  • bin/rails test test/system/current_user/reports_test.rb - 成功
  • bin/rails test test/system/user/reports_test.rb - 成功
  • bin/rails test test/system/practice/reports_test.rb - 成功
  • bin/rails test test/system/company/reports_test.rb - 成功
  • bin/rails test test/system/talks_test.rb - 成功
  • bin/rails test test/system/reports_practice_filter_test.rb - 成功
  • bin/rails test test/integration/api/reports_test.rb - 成功

closes #9127

🤖 Generated with Claude Code

Summary by CodeRabbit

リリースノート

  • 新機能

    • レポート一覧にプラクティス絞り込みを追加
    • 会話画面でユーザーの最新レポート(最大20件)を表示
  • 改善

    • レポート一覧をクライアント描画からサーバー描画へ移行し、明確な空状態表示を追加
    • ページネーション表示と空状態メッセージを改善し、一覧の信頼性を向上
  • リファクタ

    • フロントエンドの一部レポート表示コンポーネントを整理/削除

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Feb 12, 2026

📝 Walkthrough

Walkthrough

Reactベースの日報一覧をサーバーサイドレンダリングへ移行しました。複数コントローラーで @reports をサーバー側で初期化し、5箇所のビューで React コンポーネント呼び出しを置換、加えて3つのフロントエンド React コンポーネントを削除しています。

Changes

Cohort / File(s) Summary
コントローラー — レポート取得の移行
app/controllers/companies/reports_controller.rb, app/controllers/talks_controller.rb, app/controllers/users/reports_controller.rb
各コントローラーで Report.list 等を用いて @reports を初期化(company/practice/user 毎の絞り込みを導入)。Users::ReportsController に before_action :set_current_user_practicepractice_id フィルタ追加。
ビュー — React 呼び出しを Slim へ置換
app/views/companies/reports/index.html.slim, app/views/current_user/reports/index.html.slim, app/views/practices/reports/index.html.slim, app/views/talks/show.html.slim, app/views/users/reports/index.html.slim
各ビューから react_component('Reports', ...) を削除し、空状態分岐・kaminari によるページネーション・部分テンプレートでのサーバーサイドレンダリングへ置換。Users ビューにプラクティスフィルタ用フォームを追加。
フロントエンド削除 — React コンポーネント削除
app/javascript/components/ListComment.jsx, app/javascript/components/Report.jsx, app/javascript/components/Reports.jsx
クライアントサイドで日報を描画していた主要 React コンポーネントを削除(ListComment/Report/Reports の実装削除)。

Sequence Diagram(s)

sequenceDiagram
  participant Browser as Browser
  participant RailsCtr as Rails Controller
  participant View as Slim View / Partial
  participant DB as Database

  Browser->>RailsCtr: GET /users/:id/reports (params: page, practice_id, target?)
  RailsCtr->>DB: Report.list joins/where (user/company/practice) + page
  DB-->>RailsCtr: records (`@reports`)
  RailsCtr->>View: render index with `@reports` (empty? -> empty state : paginated list)
  View->>Browser: HTML response (paginated report list or empty state)
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related issues

Possibly related PRs

Suggested reviewers

  • okuramasafumi
  • matuaya
  • karlley

🐰 Reactの毛皮を脱ぎ捨てて、サーバーの畑へ跳ぶよ
部分テンプレートで花を咲かせて
ページネーションのリズムでぴょんぴょんと
新しい朝へ、にんじん片手に出発だよ ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed PRタイトルは主要な変更を明確に要約しており、Reports.jsxとReport.jsxを非React化するという中心的な目的を簡潔に表現しています。
Description check ✅ Passed PR説明は必要なセクション(概要、変更内容、テスト計画)を含みており、削除ファイル、修正コントローラー、対象Viewを詳細に列挙しており、テスト実施状況も明記されています。
Linked Issues check ✅ Passed PR実装は#9127の要件に適合しており、3つのReactコンポーネント削除、5つのView修正、3つのコントローラー更新、kaminariページネーション導入、プラクティスフィルター実装を完了し、全テストが成功しています。
Out of Scope Changes check ✅ Passed すべての変更は#9127で定義された脱React化の対象ファイルと要件に対応しており、スコープ外の変更は見られません。

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feature/de-react-reports

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In `@app/controllers/users/reports_controller.rb`:
- Around line 45-47: The current set_current_user_practice method instantiates
UserCoursePractice with current_user but this view is for another user (`@user`);
change the instantiation in set_current_user_practice to use `@user` (e.g.
UserCoursePractice.new(`@user`)) so the practice dropdown reflects the viewed
user's courses, and add a safe fallback to current_user only if `@user` is nil to
avoid nil errors; update any callers or before_action that rely on
set_current_user_practice accordingly.
🧹 Nitpick comments (2)
app/controllers/users/reports_controller.rb (1)

7-7: set_current_user_practice は HTML フォーマットでのみ必要

この before_action は MD ダウンロード時にも実行されますが、@current_user_practice はビューのフィルターフォームでのみ使用されます。軽微ですが、不要なオブジェクト生成を避けるために only: [:index] の制約、または format.html ブロック内での遅延初期化を検討できます。

app/views/users/reports/index.html.slim (1)

39-47: 下部のページネーションが .page-content.reports の外側に配置されています

Line 47 の = paginate @reports`` は .page-content.reports(Line 40)の兄弟要素になっており、他のビュー(`companies/reports/index.html.slim` や `practices/reports/index.html.slim`)では両方のページネーションが `.page-content.reports` 内に配置されています。`unconfirmed_links_open` パーシャルの配置上の意図かもしれませんが、DOM 構造の一貫性が崩れています。

♻️ 一貫性を保つ修正案
       .page-content.reports
         = paginate `@reports`
         .card-list.a-card
           .card-list__items
             = render partial: 'reports/report', collection: `@reports`, as: :report, locals: { user_icon_display: true, actions_display: true }
         - if mentor_login? && `@target` == 'unchecked_reports'
           = render partial: 'unconfirmed_links_open', locals: { label: '未チェックの日報を一括で開く' }
-      = paginate `@reports`
+        = paginate `@reports`

komagata and others added 2 commits February 18, 2026 00:31
日報一覧機能をReactからRails viewに移行しました。

- Reports.jsx、Report.jsx、ListComment.jsxを削除
- 5つのviewでreact_componentをRailsパーシャルに置換
  - current_user/reports/index
  - users/reports/index(プラクティスフィルター追加)
  - practices/reports/index
  - companies/reports/index
  - talks/show(サイドバー部分)
- 既存の_report.html.slimパーシャルを活用
- kaminariによるページネーション

closes #9127

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
set_current_user_practiceで@userを使用するように修正。
閲覧しているユーザーのコースに基づいたプラクティスを
ドロップダウンに表示するようにした。

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@komagata komagata force-pushed the feature/de-react-reports branch from 4e278a5 to a56f9b9 Compare February 17, 2026 15:31
Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
app/views/current_user/reports/index.html.slim (1)

13-13: ⚠️ Potential issue | 🟡 Minor

@user.reports.length は全レコードをメモリにロードします。.count または .size の使用を検討してください。

.length は全レコードをRubyの配列としてロードしてからカウントするため、レポート数が多いユーザーではパフォーマンスに影響します。.count であればSQL COUNT クエリで済みます。

♻️ 修正案
-          | 自分の日報(#{`@user.reports.length`})
+          | 自分の日報(#{`@user.reports.count`})
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@app/views/current_user/reports/index.html.slim` at line 13, The view
currently calls `@user.reports.length` which loads all report records into memory;
change this to use an ActiveRecord count to avoid loading records—replace
`@user.reports.length` with `@user.reports.count` (or .size if you need hybrid
behavior) so the template issues a SQL COUNT instead of instantiating all Report
objects.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@app/views/users/reports/index.html.slim`:
- Around line 39-47: The bottom paginate call is placed outside the
.page-content.reports container causing inconsistent layout; move the trailing
paginate `@reports` (the call at Line 47) so it sits inside the
.page-content.reports block directly after the conditional render of
'unconfirmed_links_open' (keeping the top paginate, the .card-list rendering of
reports via render partial: 'reports/report', collection: `@reports`, as: :report,
and the mentor_login? && `@target` == 'unchecked_reports' conditional intact) to
match the other views and preserve layout consistency.

---

Outside diff comments:
In `@app/views/current_user/reports/index.html.slim`:
- Line 13: The view currently calls `@user.reports.length` which loads all report
records into memory; change this to use an ActiveRecord count to avoid loading
records—replace `@user.reports.length` with `@user.reports.count` (or .size if you
need hybrid behavior) so the template issues a SQL COUNT instead of
instantiating all Report objects.

Comment on lines +39 to +47
- else
.page-content.reports
= paginate @reports
.card-list.a-card
.card-list__items
= render partial: 'reports/report', collection: @reports, as: :report, locals: { user_icon_display: true, actions_display: true }
- if mentor_login? && @target == 'unchecked_reports'
= render partial: 'unconfirmed_links_open', locals: { label: '未チェックの日報を一括で開く' }
= paginate @reports
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

下部のページネーションが .page-content.reports の外側に配置されています。

他のビュー(practices、companies、current_user)では上下両方のページネーションが .page-content.reports 内にありますが、ここでは Line 47 の paginate.page-content.reports の外に出ています。レイアウトの一貫性が崩れる可能性があります。

♻️ 修正案
     - else
       .page-content.reports
         = paginate `@reports`
         .card-list.a-card
           .card-list__items
             = render partial: 'reports/report', collection: `@reports`, as: :report, locals: { user_icon_display: true, actions_display: true }
         - if mentor_login? && `@target` == 'unchecked_reports'
           = render partial: 'unconfirmed_links_open', locals: { label: '未チェックの日報を一括で開く' }
-      = paginate `@reports`
+        = paginate `@reports`
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@app/views/users/reports/index.html.slim` around lines 39 - 47, The bottom
paginate call is placed outside the .page-content.reports container causing
inconsistent layout; move the trailing paginate `@reports` (the call at Line 47)
so it sits inside the .page-content.reports block directly after the conditional
render of 'unconfirmed_links_open' (keeping the top paginate, the .card-list
rendering of reports via render partial: 'reports/report', collection: `@reports`,
as: :report, and the mentor_login? && `@target` == 'unchecked_reports' conditional
intact) to match the other views and preserve layout consistency.

@komagata komagata merged commit 534ad96 into main Feb 18, 2026
6 checks passed
@komagata komagata deleted the feature/de-react-reports branch February 18, 2026 06:07
@github-project-automation github-project-automation bot moved this from 作業中 to 完成 in bootcamp Feb 18, 2026
@github-actions github-actions bot mentioned this pull request Feb 18, 2026
8 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Archived in project

Development

Successfully merging this pull request may close these issues.

Reports.jsx、Report.jsxを非React化する

1 participant