Q&A Answer部分の非Vue化の不具合修正（追加）

[reckyy]

Issue

• answer.vue, answers.vueを非vue化する #5116

概要

下記PRの動作確認を @komagata さんが行なっていたところ、エラーが出ているとお知らせいただいた。

answer.js:18 Uncaught TypeError: Cannot read properties of null (reading 'style')
    at HTMLDocument.<anonymous> (answer.js:18:1)

• Q&AのAnswer部分を非Vue化 #8033
• Q&A Answer部分の非Vue化の不具合修正 #8275

追記

同時に以下の不具合も見つけたので修正。

• 回答がない場合、回答のローディングスケルトンがずっと表示される。
• watchしていない質問に回答した後、watch状態にならない。

原因

一つ目（コンソールエラー）

下記で、回答要素（_answer.html.slimの要素群）を取得しています。
const answers = document.querySelectorAll('.answer')

回答がなければ、下記の処理は実行されないはずと考えていたが誤りでした。

  if (answers) {
    loadingContent.style.display = 'none'
    answerContent.style.display = 'block'

    answers.forEach((answer) => {
      initializeAnswer(answer)
    })
  }

document.querySelectorAllは該当する要素が存在しない場合でも、空のNodeListを返します。NodeListは常に真として評価されるため、if(answers)の条件は常に成立してしまい、意図した挙動になっていませんでした。
そのため、lengthを用いることで取得した回答数を確認するようにしました。

2つ目（回答がない場合、回答のローディングスケルトンがずっと表示される。）

一つ目の不具合を修正した後のコードが以下。

  if (answers.length > 0) {
    loadingContent.style.display = 'none'
    answerContent.style.display = 'block'

    answers.forEach((answer) => {
      initializeAnswer(answer)
    })
  }

この修正により、ローディングスケルトンと回答の切り替えが「回答があった場合」にのみ行われるようになったため、回答がない場合延々とスケルトンが表示されてしまいました。
そのため、この「ローディングスケルトンと回答の切り替え」を回答の有無に関わらず実行できるように、処理を分けました。

3つ目（watchしていない質問に回答した後、watch状態にならない。）

回答フォームの「コメントする」ボタンを押下すると、回答の作成や回答数の更新などが行われます。その処理の中には、質問のwatch状態を更新する処理も含まれています。
watch状態の更新は、以下の updateWatchable 関数で実現しています。

function updateWatchable(questionId) {
  store.dispatch('setWatchable', {
    watchableId: questionId,
    watchableType: 'Question'
  })
}

setWatchableは対象のwatch状態を取得して、更新してくれる処理です。
また、回答を作成すると、AnswerWatcher がその回答を自動的にwatch状態にします。

# app/controllers/api/answers_controller.rb
def create
  question = Question.find(params[:question_id])
  @answer = question.answers.new(answer_params)
  @answer.user = current_user
  if @answer.save
    Newspaper.publish(:answer_create, { answer: @answer }) # ここでAnswerWatcherの処理を発火してる

本来の想定フローは以下の通りです：

1. 回答を作成する。この作成処理には、質問をwatch状態にする処理が含まれている。
2. watch状態を取得して更新する。

しかし、回答の作成が非同期で行われていたため、作成処理が完了する前にwatch状態を取得していました。その結果、watch状態が正しく更新されない問題が発生していました。
そこで、回答の作成が完了したことを確認してから、watch状態の更新を行うように変更しました。

変更確認方法

1. chore/handle-answerjs-warningをローカルに取り込む
2. 質問詳細ページ以外のページを開く
3. コンソールを確認し、エラーが出ていないことを確認

Screenshot

JSのコンソールエラー

変更前

変更後

回答がない場合、回答のローディングスケルトンがずっと表示される。

変更後

watchしていない質問に回答した後、watch状態にならない。

変更前

2025-01-27.11.04.45.mov

変更後

2025-01-27.10.46.30.mov

[komagata]

@reckyy Draftになっているようです。またテストが落ちているようです〜。

[reckyy]

@komagata
ご確認ありがとうございます！

はい、Draftであることとテストが落ちていることは認識しております🙇‍♂️
CIが通り次第、正式にレビュー依頼させていただきますので、今しばらくお待ちいただけると幸いです！

[komagata]

確認させて頂きました。OKです〜🙆‍♂️