Merge pull request #8285 from fjordllc/chore/handle-answerjs-warning

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

Author: komagata

app/javascript/answer.js

@@ -14,10 +14,13 @@ document.addEventListener('DOMContentLoaded', () => {
   const answers = document.querySelectorAll('.answer')
   const loadingContent = document.querySelector('.loading-content')
   const answerContent = document.querySelector('.answer-content')
-  if (answers) {
+
+  if (loadingContent && answerContent) {
     loadingContent.style.display = 'none'
     answerContent.style.display = 'block'
+  }
 
+  if (answers.length > 0) {
     answers.forEach((answer) => {
       initializeAnswer(answer)
     })

app/javascript/new-answer.js

@@ -33,20 +33,22 @@ document.addEventListener('DOMContentLoaded', () => {
       saveButton.disabled = editorTextarea.value.length === 0
     })
 
-    saveButton.addEventListener('click', () => {
+    saveButton.addEventListener('click', async () => {
       savedAnswer = editorTextarea.value
-      createAnswer(savedAnswer, questionId)
-      editorTextarea.value = ''
-      answerEditorPreview.innerHTML = markdownInitializer.render(
-        editorTextarea.value
-      )
-      saveButton.disabled = true
-      updateAnswerCount(true)
-      updateWatchable(questionId)
-      if (previewTab.classList.contains('is-active')) {
-        toggleVisibility(tabElements, 'is-active')
+      const answerCreated = await createAnswer(savedAnswer, questionId)
+      if (answerCreated) {
+        editorTextarea.value = ''
+        answerEditorPreview.innerHTML = markdownInitializer.render(
+          editorTextarea.value
+        )
+        saveButton.disabled = true
+        updateAnswerCount(true)
+        updateWatchable(questionId)
+        if (previewTab.classList.contains('is-active')) {
+          toggleVisibility(tabElements, 'is-active')
+        }
+        resizeTextarea(editorTextarea, defaultTextareaSize)
       }
-      resizeTextarea(editorTextarea, defaultTextareaSize)
     })
 
     const editTab = answerEditor.querySelector('.edit-answer-tab')
@@ -70,43 +72,42 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 })
 
-function createAnswer(description, questionId) {
+async function createAnswer(description, questionId) {
   if (description.length < 1) {
-    return null
+    return false
   }
   const params = {
     question_id: questionId,
     answer: {
       description: description
     }
   }
-  fetch('/api/answers', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json; charset=utf-8',
-      'X-Requested-With': 'XMLHttpRequest',
-      'X-CSRF-Token': CSRF.getToken()
-    },
-    credentials: 'same-origin',
-    redirect: 'manual',
-    body: JSON.stringify(params)
-  })
-    .then((response) => {
-      if (response.ok) {
-        return response.text()
-      } else {
-        return response.json().then((data) => {
-          throw new Error(data.errors.join(', '))
-        })
-      }
+  try {
+    const response = await fetch('/api/answers', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json; charset=utf-8',
+        'X-Requested-With': 'XMLHttpRequest',
+        'X-CSRF-Token': CSRF.getToken()
+      },
+      credentials: 'same-origin',
+      redirect: 'manual',
+      body: JSON.stringify(params)
     })
-    .then((html) => {
+
+    if (response.ok) {
+      const html = await response.text()
       initializeNewAnswer(html)
       toast('回答を投稿しました！')
-    })
-    .catch((error) => {
-      console.warn(error)
-    })
+      return true
+    } else {
+      const data = await response.json()
+      throw new Error(data.errors.join(', '))
+    }
+  } catch (error) {
+    console.warn(error)
+    return false
+  }
 }
 
 function toggleVisibility(elements, className) {

app/views/questions/show.html.slim

@@ -35,7 +35,7 @@ hr.a-border
       .answer-content style='display: none;'
         - if @question.ai_answer
           = render 'ai_answer', question: @question
-        header.thread-comments__header.answer-content
+        header.thread-comments__header
           h2.thread-comments__title
             | 回答・コメント
         .answers-list