個別のお問い合わせにコメントがつけられるようにした #8262

ayu-0505 · 2024-12-29T02:22:53Z

Issue

管理者ページのお問い合わせ個別にコメントを付けたい。 #7452

概要

個別のお問い合わせページにおいて、コメントがつけられるようにしました。
現在コメント機能を提供しているVueファイルを使用せずに実装するために、slimファイルやJSファイルを新規で作成しています。
（また、大まかな実装方針としてはQ&AのAnswer部分を非Vue化 #8033を参考にしております。）
いくつか変更点にて追加でコメントしています。

変更確認方法

feature/add-comment-form-in-inquiryをローカルに取り込む。
1. git fetch origin pull/8262/head:feature/add-comment-form-in-inquiry（２度目以降は--forceをつけてください）
2. git switch feature/add-comment-form-in-inquiry
rails db:seedで初期データにする。
foreman start -f Procfile.devでローカルサーバーを立ち上げる。
管理者（例: user:komagata, password: testtest）でログインする。
お問い合わせ一覧から任意の個別のお問い合わせページにアクセスし、コメント欄が表示されていることを確認。
新規作成確認
1. inquiry1にて適当なコメントをフォームに入力し、プレビューボタンを押すとプレビューに切り替わることを確認。
2. コメントするボタンをクリックするとコメントが新規作成され、右上にコメントを投稿しました！のトーストが数秒表示されることを確認。
3. 画面のリロードなしで先ほどの新規コメントが投稿されていることを確認。
4. 投稿フォームが初期化されているかを確認。
コメント位置ジャンプとリアクション機能確認
1. コメントに対して、リアクションボタン押下後に適当なリアクションを選択し、正常にリアクションが付与されているか確認。
2. コメントの日付部分をクリックするとCopiedと数秒表示され、クリップボードにハッシュパラメータ付きURLが保存される。
3. URLをアドレスバーにペーストしてリロードし、ジャンプできるか確認。
編集確認
1. 編集ボタンをクリック。
2. 既存コメントの編集ができるようになり、コメントを適当に変更。
3. プレビューボタンを押すとプレビューに切り替わることを確認。
4. キャンセルボタンを押すと、変更前の既存のコメント内容に戻って編集画面が終了されることを確認。
5. 再度編集ボタンを押してコメントを適当に変更し、保存するボタンをクリック。
6. 画面のリロードなしでコメント内容が更新されていることを確認。
削除確認
1. コメント右下の削除するボタンをクリック。
2. 本当に宜しいですか？のダイアログが表示される。
3. OKを押すと画面のリロードなしで該当コメントが削除されることを確認。
コメント件数による表示制限確認
1. コメントを9件以上投稿し、画面をリロードする。
  （以下のコードをrails cで行うと素早くできます。userはmachidaさん、commentable_idはinquiry1 に該当しています。）
```
20.times do |i|
  Comment.create!(description: "test #{i}",
  user_id: 679998234,
  commentable_id: 1044063400,
  commentable_type: "Inquiry")
end
```
1. 最大表示コメントが８件分表示され、過去分が折り畳まれた表示になる。コメント読み込みボタンに前のコメント（8/コメント全件数）、または前のコメント（未表示コメント件数）という表示があることを確認。
2. コメント読み込みボタンを押すごとにリロードなしで８件ずつ表示されていき、コメント読み込みボタンの件数が変化していくことを確認。

Screenshot

変更前

お問い合わせにはコメント機能はありません。

変更後

コメント投稿フォームが表示されています。

コメントが8件より多くなると古いコメントが折りたたまれます。これは既存のコメント機能と同様の動きです。

ayu-0505 · 2025-01-06T07:52:24Z

app/controllers/api/comments_controller.rb

@@ -22,7 +22,12 @@ def create
    @comment.user = current_user
    @comment.commentable = commentable
    if @comment.save
-      render :create, status: :created
+      # Inquiry以外はvueでJSONを使用している。コメント機能のJS変換が完了すれば下の'Inquiry'による分岐は不要なので削除してください。
+      if params[:commentable_type] == 'Inquiry'


こちらのInquiryによる分岐ですが、bootcampアプリ自体の機能のための分岐ではなく、「コメント機能をvueからJS、Hotwireに変更していく過程」で発生している分岐です。
本来は不必要な分岐のため、上記のようにコード内コメントで注釈をつけています。

ayu-0505 · 2025-01-06T08:11:34Z

app/models/comment.rb

@@ -35,7 +35,7 @@ def params_for_keyword_search(searched_values = {})
  end

  def receiver
-    commentable.user
+    commentable.respond_to?(:user) ? commentable.user : nil


今までのcommentableに該当するモデルはすべてuserカラムを持っていましたが、Inquiryは外部からの問い合わせのため、userカラムを持っていません。
そのため、commentableのuserを使用した処理について、Inquiryのコメントが該当しないようにcomment.rbやafter_create_callback.rbにて変更を加えています。

ayu-0505 · 2025-01-07T03:09:45Z

@Judeeeee さん、お疲れ様です🍵
もしよろしければこちらのPRについてレビューをいただけますでしょうか？？
ご都合的に難しいようでしたら遠慮なくおっしゃってください。
確認のほどよろしくお願いします🙇🏻‍♀️

（追記）
大変申し訳ありません。テストを作成するのを失念しておりました。
数日中にテストを作成いたします。
その後、改めてレビュー依頼を行いたいと思います。
もし今お忙しいようでしたら現段階で断っていただいても構いません🙏

Judeeeee · 2025-01-08T04:08:59Z

@ayu-0505
お疲れ様です！レビュー依頼ありがとうございます！🙏
現在私の体調が優れず、取り組める見込みが立っていない状態なので他の方に依頼いただけると幸いです💦
折角の機会なので担当したかったのですが、申し訳ないです🙇‍♀️🙇‍♀️

ayu-0505 · 2025-01-08T07:56:53Z

@Judeeeee さん、お疲れ様です🍵
お返事いただきありがとうございます〜了解いたしました🙇🏻‍♀️
体調不良とのことなので、お身体お大事になさってください🍵

ayu-0505 · 2025-01-15T01:04:49Z

test/test_helper.rb

@@ -15,6 +15,17 @@
 Capybara.disable_animation = true
 Minitest::Retry.use! if ENV['CI']

+Capybara.register_driver :selenium_chrome_headless_with_clipboard do |app|


ヘッドレスブラウザーではnavigator.clipboardメソッドが使用できないので、使用できるよう設定したドライバーを追加しました。
クリップボードテストの時のみ使用します。

ayu-0505 · 2025-01-22T04:33:31Z

@sugiwe
お疲れさまです🍵
もしよろしければこちらのPRのレビューをお願いできないでしょうか。
コード量が多めとは思いますが、不明点等あれば直接ペアプロ形式で解説することも可能です。

急ぎではありませんので、お手隙のときにご確認いただけたらと思います。
ご都合的に難しければ遠慮なくお知らせください🙏

sugiwe · 2025-01-23T05:56:45Z

@ayu-0505
お疲れ様です☕️
お返事遅れてすみません、こちらご依頼ありがとうございます！
承知しました、レビューやらせていただきます！
ペアプロの打診もありがとうございます、一旦こちらで確認してみまして、ペアプロが必要そうでしたら週明け頃を目処にご連絡させていただきますので、少々お待ちいただけますでしょうか🙏
どうぞよろしくお願いいたします！

sugiwe

@ayu-0505
お疲れ様です☕️ 先日はペアプロありがとうございました！
ひと通り確認しまして、ブラウザ上での動作確認は全てうまく行きました！説明文章もわかりやすくて助かりました◎
気になった箇所などにコメントを入れましたので、ご確認をお願いいたします🙏

sugiwe · 2025-01-28T07:26:34Z

app/controllers/users/comments_controller.rb

@@ -15,7 +15,7 @@ def set_user
  def set_comments
    @comments =
      Comment
-      .where.not(commentable_type: 'Talk')
+      .where.not(commentable_type: %w[Talk Inquiry])


相談部屋内のコメントは除外するという処理を書き換えて、問い合わせ内のコメントもまとめて除外するようにしたということですよね！
この処理によってコメント一覧ページで取得するコメントとしては意図したものになっているようですが、ユーザーページのヘッダータブ（「プロフィール」「ポートフォリオ」など並んでいる部分）の「コメント（99）」の数量の部分において、お問い合わせ内のコメントの数が加算されてしまっているようです👀

そして、偶然なのですが最近担当したレビューで確認した箇所で似たような処理（相談部屋のコメントがヘッダータブのコメント数に加算されてしまっていたのを除外する処理）があり、これと絡めてうまく処理できそうなので記載させていただきます📝

app/models/comment.rb内にwithout_talkというスコープ定義がありまして、ここでまさに今回修正をしていただいたcommentable_type: 'Talk'が残っています。

この部分を今回修正していただいた%w[Talk Inquiry]に修正し、さらに、withput_talkというスコープ名は今回別箇所で命名されていたprivate_commentがとてもわかりやすいと思いましたので、withput_private_commentというスコープ名に変更されると良さそうです

その上で、.where.not(commentable_type: %w[Talk Inquiry])を.withput_private_commentとすると、ヘッダータブの部分の「コメント（99）」の数字の部分が意図通りにカウントされるのではと思います

上記に加えて、without_talkというスコープ名で設定をしている箇所が複数（3ファイル5か所くらいのはずです）ありますので、これらを一通りwithput_private_commentという名称に変更する必要もあるかと思います

変更ファイルも増えていくので、without_talkのスコープ名変更までここでまとめてやるべきかどうかというのがちょっと自信がないのですが、Inquiryの追加ありきの修正なのでまとめてやるしかないのかなとも思っております、ご検討をお願いできますでしょうか🙏

ありがとうございます！
この部分、全く気づいていなかったので大変ありがたいです🙏
変更ファイル自体は増えてしまいますが、Inquiryに関わる部分であることは間違いないので今回で修正しました。
grepで確認できた以下のファイルを変更しました。
テストも通過し、目視確認もできたので、変更できているかと思います。

$ grep 'without_talk' -r ./ .//app/models/comment.rb: scope :without_talk, -> { where.not(commentable_type: %w[Talk Inquiry]) } .//app/views/users/_activity_counts.html.slim: = link_to_if !user.comments.without_talk.empty?, .//app/views/users/_activity_counts.html.slim: user.comments.without_talk.size, user_comments_path(user) .//app/helpers/page_tabs/users_helper.rb: comment_count = user.comments.without_talk.length .//test/models/comment_test.rb: test '.without_talk' do .//test/models/comment_test.rb: non_talk_comment_count = Comment.without_talk.count

sugiwe · 2025-01-30T06:28:11Z

app/javascript/new-comment.js

+import CSRF from 'csrf'
+import TextareaInitializer from 'textarea-initializer'
+import MarkdownInitializer from 'markdown-initializer'
+import initializeComment from 'initialize_comment.js'


initialize_comment.jsというファイル名ですが、別ファイルのinitializeAnswer.jsに合わせてキャメルケースのinitializeComment.jsにしてはいかがでしょうか？
命名については場所によってハイフンやアンダースコアなどかなり混ざってしまっている現状で、全体を整理するのは不可能に近いと思うのですが、似た機能の命名は寄せておくと良いかもと思いました、もし理由があっての命名でしたらそのままでも問題ないとは思いますので、ご検討お願いいたします！

たしかに、（大部分を参考にしたことで結果的に）機能が似通ったinitializeAnswer.jsとネーミングを合わせることで、コードの類似を読む人に連想させやすくなりそうです。
こちらもなかなか思いつかなかった視点なので助かります🙏

sugiwe · 2025-01-30T06:31:02Z

app/javascript/new-comment.js

+import { toast } from './vanillaToast.js'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const comment = document.querySelector('.new-comment')


上と同様の話になるのですが、commentという変数名はnewCommentにしておくと、似たファイルのnewAnswerと命名が揃ってわかりやすいかなと思ったのですが、いかがでしょうか👀
（これも些細な話ではあるので、作業全体の検討の中でcommentにしたいという判断でしたらそのままでも問題ないと思います！）

sugiwe · 2025-01-30T07:39:34Z

app/models/comment/after_create_callback.rb

@@ -5,7 +5,7 @@ def after_commit(comment)
    if comment.commentable.class.include?(Watchable)
      create_watch(comment)
      notify_to_watching_user(comment)
-    elsif comment.sender != comment.receiver
+    elsif comment.receiver.present? && comment.sender != comment.receiver


この部分ですが、comment.receiverがあるかどうかの条件を追加したことにより、この行全体としてcomment.receiverが以下のように2回登場した状態となっております。

前半では「comment.receiverがあるかどうか」を確認している（comment.receiverが主語）

後半では「comment.senderがcomment.receiverと異なるかどうか」を確認している（comment.senderが主語）

ロジックとしては問題はないと思いますが、日本語で言うと「comment.receiverが存在していて、なおかつ、comment.sender が comment.receiverと異なるものだったら」ということで主語が前半と後半で違っていますので、以下のようにcomment.senderとcomment.receiverを入れ替えるのはいかがでしょうか？

elsif comment.receiver.present? && comment.sender != comment.receiver # 変更前 elsif comment.receiver.present? && comment.receiver != comment.sender # 変更後

こうすると、
「comment.receiverが存在していて、なおかつ、comment.sender とは異なるものだったら」
となり、comment.receiverが主語として統一されて読みやすくなるのではと思いました。

（どちらにせよcomment.receiverが2回登場しておりますので、1回だけの記載にできないかも考えたのですが、ちょっとトリッキーになるようでしたので、そこまでしなくて良さそうでした）

たしかに、 comment.receiverを主語として統一した方が理解がスムーズになりそうなので、こちらも変更いたしました🙏

sugiwe · 2025-02-03T08:32:17Z

app/models/searcher.rb

@@ -30,7 +30,7 @@ def search(word, document_type: :all)
          result_for(document_type, word).sort_by(&:updated_at).reverse
        end

-      delete_comment_of_talk!(searchables) # 相談部屋の内容は検索できないようにする
+      delete_private_comment!(searchables) # 相談部屋とお問い合わせのコメント内容は検索できないようにする


「相談部屋とお問い合わせのコメント」をまとめるにあたり、comment_of_talk_and_inquiryとかでなくprivate_commentにしたのは素敵な命名だなと思いました✨

そう言っていただけると嬉しいです✨

ayu-0505 · 2025-02-05T07:33:09Z

@sugiwe
お疲れ様です🍵
レビューいただいた部分を修正いたしました。
お手隙の時で構いませんので、またご確認いただけたらと思います🙏

sugiwe

@ayu-0505
お疲れ様です☕️
大変お待たせしてしまいすみませんでした💦

修正ありがとうございました！
1点だけ反映漏れかな？と思う部分がありましたのでコメントいたしました。
ご確認よろしくお願いいたします！

sugiwe · 2025-02-18T21:16:31Z

app/models/comment.rb

@@ -18,7 +18,7 @@ class Comment < ApplicationRecord

  mentionable_as :description, hook_name: :after_commit

-  scope :without_talk, -> { where.not(commentable_type: 'Talk') }
+  scope :without_private_comment, -> { where.not(commentable_type: 'Talk') }


こちら、変数名は修正できているのですが where.notで除外すべきcommentable_typeが Talkだけのままになっているようです👀（別箇所で設定されていたように、配列で TalkとInquiryの2つを除外する感じかと思います✨）

ちょっと小さくて見づらいかもなのですがスクショも貼っておきます！
（DB設定初期状態でお問い合わせがない場合はコメントタブの数字が25で、お問い合わせ内にコメントを入れると26に増えているが、お問い合わせ内のコメントがこのタブ部分の数字に反映されないようにしたい）

画像も貼っていただいてありがとうございます！
お手数をおかけしました。
完全に修正モレです。（修正したつもりでしたが、おそらくですがショートカットのアンドゥで戻りすぎて保存したかもしれません）

今回はしっかりサーバー起動で確認いたしました。

改めて、またお時間あるときでよいので確認をお願いできましたらと思います🙏

後ほどリファクタリングを行う

ayu-0505 self-assigned this Dec 29, 2024

ayu-0505 force-pushed the feature/add-comment-form-in-inquiry branch from 59b517e to e796126 Compare January 6, 2025 03:21

ayu-0505 commented Jan 6, 2025

View reviewed changes

ayu-0505 marked this pull request as ready for review January 7, 2025 02:15

ayu-0505 requested review from Judeeeee and removed request for Judeeeee January 7, 2025 03:10

ayu-0505 marked this pull request as draft January 11, 2025 00:38

ayu-0505 force-pushed the feature/add-comment-form-in-inquiry branch from e796126 to 68c437e Compare January 14, 2025 08:31

ayu-0505 commented Jan 15, 2025

View reviewed changes

ayu-0505 force-pushed the feature/add-comment-form-in-inquiry branch 2 times, most recently from 611919b to c9f979d Compare January 20, 2025 06:38

ayu-0505 marked this pull request as ready for review January 20, 2025 07:03

ayu-0505 requested a review from sugiwe January 22, 2025 04:33

sugiwe reviewed Feb 3, 2025

View reviewed changes

ayu-0505 force-pushed the feature/add-comment-form-in-inquiry branch from c9f979d to 30fa3b9 Compare February 5, 2025 05:16

sugiwe reviewed Feb 18, 2025

View reviewed changes

ayu-0505 added 7 commits February 20, 2025 15:32

inquiryモデルにcommentとのポリモーフィック関係の記述を追加

4135434

comment関係のviewsを追加し、お問い合わせの画面でコメントが表示できるように変更

4fbf9a0

comments_at_inquiry.jsを作成、読み込み時のプレースホルダーを表示

9a088ae

一部のタイプミスを修正

226e7cb

多量コメント時の前コメント読み込みボタンの文言に対し、表示前コメント数が表示されるように変更

a504488

一部のタイプミスを修正

a50596a

コメント新規作成処理を追加

fe1d9a6

ayu-0505 added 24 commits February 20, 2025 15:32

編集・削除機能を追加、JSのタブ表示切り替えを追加

c246d4f

コメント読み込みボタンを実装

85c976f

後ほどリファクタリングを行う

メソッド名やファイル名を実態に沿うように変更

42e4905

一部の処理を関数化、マジックナンバー部分を変数に変更、該当URL以外で読み込まれないように早期リターンを追加

48c028c

setComments()メソッドの位置を変更

4f45d97

create後のレシーバーメソッドを変更

86bb7d3

コメント新規作成時にリロードなしで新規コメントが追加され、コメントフォームがリセットされるように変更

2384956

新規作成してすぐのコメントでもリアクションボタンが使えるように変更

869df81

作成時間を押すとURLがコピーできるように変更

1dd14f0

不要なコメントを削除、使用順になるように関数位置を変更、viewパーシャルにて使用しないローカル変数を削除

66ee2d3

comments_controller.rbのcreateにおいてInquiry分岐に関するコメントを追加

484c108

inquiryに対してコメントのテストを追加

007076d

間違いがあったテストの修正、navigator.clipboardメソッドが使用できるようにJS用のドライバーをCapybaraに設定

eba0d31

テストで落ちている部分を修正

62da326

ユーザーのコメントページにおいてInquiryに対するコメントを表示させないように変更

f3985db

検索時にお問い合わせのコメントが表示されないように変更

8730416

コメントの取得をコントローラーで行うように変更、コメントレンダー時にcollectionオプションを使うように変更

8dc531a

テストコードデバッグのためのコードを削除

332526a

Lintのインデントずれの指摘を修正

3b83dbe

画像が表示されずテキストで認識されていたので修正

660262f

ヘッダータブのコメント数にお問い合わせが含まれないように変更

4e57915

変数名やファイル名を推測しやすいものに変更

027bc9b

可読性をあげるためにコードの位置を変更

3616bd4

ユーザープロフィール画面においてコメントの除外条件を追加

cfb0173

ayu-0505 force-pushed the feature/add-comment-form-in-inquiry branch from 30fa3b9 to cfb0173 Compare February 20, 2025 06:32

コメント制限範囲変更に伴うテストの変更

11cc887

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

個別のお問い合わせにコメントがつけられるようにした #8262

個別のお問い合わせにコメントがつけられるようにした #8262

ayu-0505 commented Dec 29, 2024 •

edited

Loading

ayu-0505 Jan 6, 2025 •

edited

Loading

ayu-0505 Jan 6, 2025 •

edited

Loading

ayu-0505 commented Jan 7, 2025 •

edited

Loading

Judeeeee commented Jan 8, 2025

ayu-0505 commented Jan 8, 2025

ayu-0505 Jan 15, 2025

ayu-0505 commented Jan 22, 2025

sugiwe commented Jan 23, 2025

sugiwe left a comment •

edited

Loading

sugiwe Jan 28, 2025

ayu-0505 Feb 5, 2025 •

edited

Loading

sugiwe Jan 30, 2025

ayu-0505 Feb 5, 2025

sugiwe Jan 30, 2025

sugiwe Jan 30, 2025

ayu-0505 Feb 5, 2025

sugiwe Feb 3, 2025

ayu-0505 Feb 5, 2025

ayu-0505 commented Feb 5, 2025

sugiwe left a comment •

edited

Loading

sugiwe Feb 18, 2025 •

edited

Loading

sugiwe Feb 18, 2025

ayu-0505 Feb 21, 2025

個別のお問い合わせにコメントがつけられるようにした #8262

Are you sure you want to change the base?

個別のお問い合わせにコメントがつけられるようにした #8262

Conversation

ayu-0505 commented Dec 29, 2024 • edited Loading

Issue

概要

変更確認方法

Screenshot

変更前

変更後

ayu-0505 Jan 6, 2025 • edited Loading

Choose a reason for hiding this comment

ayu-0505 Jan 6, 2025 • edited Loading

Choose a reason for hiding this comment

ayu-0505 commented Jan 7, 2025 • edited Loading

Judeeeee commented Jan 8, 2025

ayu-0505 commented Jan 8, 2025

Choose a reason for hiding this comment

ayu-0505 commented Jan 22, 2025

sugiwe commented Jan 23, 2025

sugiwe left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ayu-0505 Feb 5, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ayu-0505 commented Feb 5, 2025

sugiwe left a comment • edited Loading

Choose a reason for hiding this comment

sugiwe Feb 18, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ayu-0505 commented Dec 29, 2024 •

edited

Loading

ayu-0505 Jan 6, 2025 •

edited

Loading

ayu-0505 Jan 6, 2025 •

edited

Loading

ayu-0505 commented Jan 7, 2025 •

edited

Loading

sugiwe left a comment •

edited

Loading

ayu-0505 Feb 5, 2025 •

edited

Loading

sugiwe left a comment •

edited

Loading

sugiwe Feb 18, 2025 •

edited

Loading