Q&AのAnswer部分を非Vue化 #8033

reckyy · 2024-08-25T02:29:53Z

Issue

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

概要

answer.vue, answer.vue、またこれらに関係があるファイルをまとめて非Vue化しました。

question-answer.vue （上記2つのファイルを内部で使用していたファイル）
ai-answer.vue （question-answer.vueの中で使用されていたファイル）

comment-placeholder.vueもquestion-answer.vueの中で使用されていましたが、他の場所(comment.vue)で使用されていたので、削除はしていません。

変更確認方法

chore/answer-non-vue-conversionをローカルに取り込む
komagataでログインする。
適当なページに飛び、以下の動作を確認。

新規回答
回答数の更新
既存の回答
内容の更新ができること
ベストアンサーにする
ベストアンサーを取り消す
削除する。その際、以下の事項も確認
- それがベストアンサーなら、ベストアンサーを取り消す
- 回答数の更新
- 解決済みから、未解決に質問のステータスを変更
日付をクリックすると、AnswerのURLを取得

Screenshot

画面上の変更点はありません。

reckyy · 2024-08-26T01:26:45Z

変更点です。

reckyy · 2024-08-26T01:28:49Z

app/controllers/api/answers_controller.rb

@@ -31,7 +31,7 @@ def create
    if @answer.save
      Newspaper.publish(:answer_create, { answer: @answer })
      Newspaper.publish(:answer_save, { answer: @answer })
-      render :create, status: :created
+      render partial: 'questions/answer', locals: { question:, answer: @answer, user: current_user }, status: :created


answer.js内のcreateAnswerで新規回答を非同期で追加するため、直接要素を取得しています。

reckyy · 2024-08-26T01:31:50Z

app/controllers/api/correct_answers_controller.rb

@@ -11,7 +11,7 @@ def create
      Newspaper.publish(:answer_save, { answer: @answer })
      Newspaper.publish(:correct_answer_save, { answer: @answer })
      ChatNotifier.message("質問：「#{@answer.question.title}」のベストアンサーが選ばれました。\r#{url_for(@answer.question)}")
-      render json: @answer
+      head :ok


以前は、Vue.jsのコード内で、answersという配列に回答を保持し、その中からベストアンサーにした@answerと一致する回答のtypeをcorrect_answerに変更することで、ベストアンサーを判定していました。

今回、Vue.jsを使用しない実装に変更するため、@answerを直接受け取る必要がなくなり、その処理を変更しました。

reckyy · 2024-08-26T01:32:59Z

app/javascript/answer.js

+  }
+})
+
+export function initializeAnswer(answer) {


新規回答追加した際に受け取ったパーシャルにもJSを適用する必要があります。
そのため、new-answer.jsでも使えるようにexportしています。

@reckyy exportして外からも使うのであればその共通の部分だけ別ファイルにした方がいいと思います。

@komagata
おっしゃる通りです。
修正します！

修正しました〜。
1f4ea05

reckyy · 2024-08-26T01:35:49Z

app/javascript/new-answer.js

+      answerDiv.innerHTML = html
+      const newAnswerElement = answerDiv.firstElementChild
+      answersList.appendChild(newAnswerElement)
+      initializeAnswer(newAnswerElement)


新規回答にJSを適用しています。

reckyy · 2024-08-27T08:05:17Z

@motohiro-mm
お疲れ様です！
こちらのPRのレビューをお願いしたく、ご連絡いたしました。
お手隙の際にご対応いただけると嬉しいです。全く急ぎではないです。
もし、ご都合悪ければ仰ってください！
よろしくお願いいたします。

motohiro-mm · 2024-08-27T08:08:11Z

@reckyy

承知しました！
1週間以内にレビューさせていただきます！
よろしくお願いいたします！

motohiro-mm

@reckyy
おつかれさまです！
気になった部分をコメントさせていただきました！

コメントの他に以下の点をご確認いただければ幸いです↓

途中のページで新規回答をすると、そのページの最下部（16個目）に表示されます。これは正しい挙動ですか？
リロードするとそのページでは追加した回答は表示されなくなり、最終ページの一番最後に回答が追加されています。
途中ページで回答を追加する場合、「コメントする」をクリックしたあと最終ページに飛んで追加した回答が正しい位置に表示される、というのが正しい挙動なのかと思ったのですが、いかがでしょうか？
1に関連してそうなのですが、新規追加した回答に対してリアクションボタンをクリックすると反応がありません。
リロードするとリアクションボタンのクリックが反応するようになります。
ご確認をお願いいたします。
こちらのコメントに関連した質問なのですが、2ページ目以降の回答の日付から取得できるURLに?page=2などページ数が含まれています。これは、後々回答数が増減して表示ページが変わった際にはリンクとして機能するのでしょうか？
現在リンクがジャンプできていないので試せていないのですが、気になったので質問させていただきました🙏

よろしくおねがいいたします！

motohiro-mm · 2024-08-28T08:05:57Z

app/javascript/new-answer.js

+import CSRF from 'csrf'
+import TextareaInitializer from 'textarea-initializer'
+import MarkdownInitializer from 'markdown-initializer'
+import { toast } from 'toast_react'


toast_react.jsは元々React化していくときに作成されたもののようです。
今回React化ではないためそちらからimportするのはあまり適していないのではないかと思いました。

同じtoastを表示するjsファイルにtoast.jsがありますが、そちらで実装は可能でしょうか？

toast.jsはVueコンポーネント内でのみ使用できるものだと理解していましたが、もしかすると私の認識に誤りがあるかもしれません。背景について十分に理解できていない部分もあるので、どのように実装すれば良いかアドバイスをいただけると助かります。 🙇

そうなのですね！toast.jsはたしかにVue.jsで書かれていて、私が調べた限りでは外から使うのは煩雑そうな感じがしました（何かやり方があるのかもですが私にはわかりませんでした🙏）
ですのでできないのであればそのままで大丈夫です！
単純にtoast_react.jsにはなぜreactという文言が入っているのかなと思い調べたらこのファイルはこちらのPRで作られていて、「React化じゃないしこのファイル以外で実装できる方が良いのかな、toast.jsというファイルがあるな」という気持ちでコメントしてました。

ちょっとずれるのですが、今回の実装は非Vue化にあたり、apiではない通常のコントローラを作成しそれに伴うviewを作成する、ではなく、コントローラはapiのものを使ったままですべてJSでCRUD処理を実装する形にしている、という認識であっていますか？
通常のコントローラに書くflashメッセージ（notice）はtoastで表示されるようにたしかなっているはずなので、その辺りが気になりました。ただ実装できるかは現時点で私はわかっておらず、できない理由があって現在の実装になっているのかと思ったので、仕様の認識の確認とそのようにしている理由を伺えればと思い質問させていただきました。
私の根本的な認識間違いや理解不足もあるかと思いますので、ご指摘いただければ幸いです。

@motohiro-mm
ご返信ありがとうございます！toastについての回答は以下に含めています。

コントローラはapiのものを使ったままですべてJSでCRUD処理を実装する形にしている、という認識であっていますか？
通常のコントローラに書くflashメッセージ（notice）はtoastで表示されるようにたしかなっているはずなので、その辺りが気になりました。

ユーザーがリロードなしで操作できる現在の仕様を維持するために、すべての処理を非同期で実行する形にしていますが、通常のコントローラを新たに作成して同期処理に移行することも可能です。具体的には、createとdeleteの処理を同期で行い、form_withを用いて移行できると考えています。
ただ、個人的には処理の一貫性とUXの観点から、すべての操作をなるべく統一したほうが良いと考えています。そのため、全操作を非同期処理で統一することが望ましいと考えています。（flashメッセージを用いる場合、画面のリロードを伴う実装になる可能性があるので、仕様が変わってしまうことを懸念しています）

form_withを用いて非同期処理を実装することも可能ですが、コントローラを増やして処理を分散させるメリットはあまりないと考え、現状のapi/answers_controller.rbを引き続き使用する形で実装しました。

以上が私の仕様の認識です。
もし分かりづらい所があれば、教えていただけますと幸いです！（よくコンテキストを省略してしまうので。。）
よろしくお願いいたします。

ユーザーがリロードなしで操作できる現在の仕様を維持するために、すべての処理を非同期で実行する形にしていますが

ただ、個人的には処理の一貫性とUXの観点から、すべての操作をなるべく統一したほうが良いと考えています。そのため、全操作を非同期処理で統一することが望ましいと考えています。

なるほど！腹落ちしました！
たしかに現行の仕様はリロードしてないですもんね。
仕様を維持するためであれば、コントローラ追加等せずにこのままJSで実装していただいて良いと思いました！
importファイルもこのままで良いと思います！
詳しくご説明くださりありがとうございました！🙏

@reckyy (CC: @reckyy )

すみません、僕はまだなんでtoast_reactという名前がついたものを使っているのかの理由がわかりませんでした。
みた人がおかしいと思うのは当然だと思うので、元のファイルがreactと関係ないのであれば、ファイル名の修正をお願いしたいです。

@komagata (cc: @motohiro-mm )
返信が遅れて申し訳ないです。

すみません、僕はまだなんでtoast_reactという名前がついたものを使っているのかの理由がわかりませんでした。
みた人がおかしいと思うのは当然だと思うので、元のファイルがreactと関係ないのであれば、ファイル名の修正をお願いしたいです。

toast_react.jsとtoast.jsの他にvanillaToast.jsというバニラJS向けのファイルを見つけました。ファイル名がtoastで始まっていなかったので、見落としていました。申し訳ありません。
現在の実装ではReactやVueに依存しないため、toast関数のimport先をvanillaToast.jsに変更する修正を行います。
以下のファイルを利用する形で進めます：

bootcamp/app/javascript/vanillaToast.js

Lines 1 to 13 in a621a30

import Swal from 'sweetalert2'

export function toast(title, status = 'success') {

Swal.fire({

title: title,

toast: true,

position: 'top-end',

showConfirmButton: false,

timer: 3000,

timerProgressBar: true,

customClass: { popup: `is-${status}` }

})

}

@komagata
変更しました〜。
fd4a02e

motohiro-mm · 2024-08-28T08:34:16Z

app/views/questions/_answer.html.slim

@@ -0,0 +1,84 @@
+.thread-comment.answer data-question_id="#{question.id}" data-answer_id="#{answer.id}"


回答ごとのHTMLのidがなくなっているので、日付からURLを取得しても該当する回答にジャンプすることができないようです。
確認をお願いいたします🙏

失念していました！ありがとうございます。
追加しました。

5a4f014

motohiro-mm · 2024-08-28T08:58:44Z

app/javascript/answers.vue

-  commentPlaceholder(v-for='num in placeholderCount', :key='num')
-#comments.thread-comments(v-else)
-  header.thread-comments__header
-    h2.thread-comments__title 回答・コメント


この「回答・コメント」の表示がなくなっています。
追加をお願いいたします。

ありがとうございます！
追加しました。

4e5fd39

reckyy · 2024-08-30T07:16:49Z

@machida (cc: @motohiro-mm )
お疲れ様です。
answerのpagerの実装についてご相談させていただきたいです。

相談したいこと

Pagerの追加を行わない方向で検討したいと考えています。

現在のPagerに関する課題

各answerのリンクの機能性

こちらは @motohiro-mm さんからのご指摘により、発覚しました。

2ページ目以降の回答の日付から取得できるURLに?page=2などページ数が含まれています。これは、後々回答数が増減して表示ページが変わった際にはリンクとして機能するのでしょうか？

例えば、回答が16件ある場合を想定します（1ページの上限は15件です）。

16件目の回答のリンクを取得し、リンクは https://bootcamp.fjord.jp/questions/1?page=2#answer_16 になります。
その後、15件目の回答を削除した場合、回答の総数が15件に減り、16件目の回答は1ページ目に移動します。結果として、リンクが正しく機能しなくなります。

この問題に対して、現時点では適切な対応策が見つかっておりません。

回答が上限数ぴったりの時の場合の処理

こちらも同様に、 @motohiro-mm さんからのご指摘です。

途中のページで新規回答をすると、そのページの最下部（16個目）に表示されます。これは正しい挙動ですか？
リロードするとそのページでは追加した回答は表示されなくなり、最終ページの一番最後に回答が追加されています。
途中ページで回答を追加する場合、「コメントする」をクリックしたあと最終ページに飛んで追加した回答が正しい位置に表示される、というのが正しい挙動なのかと思ったのですが、いかがでしょうか？

これを正しい仕様とする場合、次のような動作が期待されます。

回答が15件の場合、新規回答後にリロードが発生し、2ページ目に遷移して追加した回答が表示される。
回答が16件で1ページ目にいる場合（15件の回答が表示されている状態）、15件目の回答を削除するとリロードが発生し（Pagerを消すため）、16件目の回答が1ページ目に表示される。

前者のシチュエーションでは、回答数をカウントし、15件なら2ページ目に遷移させることで対応可能です。しかし、これでは操作の一貫性が失われる可能性があり、ユーザーにとって良い体験ではないと感じています。
また、現在の仕様（回答を非同期で編集できる）を変更することも、ユーザー目線で考えるとあまり良い選択ではないと考えています。

Pagerを追加しない理由

pagerの追加は、こちらのバグを防ぐためと認識しています。
しかし、開発および本番環境でスマホを使って回答数の多い質問を閲覧した際に、同様のエラーは再現されませんでした。
もし可能であれば、@machida さんから詳しいバグの再現手順を教えていただき、それを防ぐことができるか確認させていただければと思います。
それによって、Pagerの実装を取りやめることが可能かどうか、ご相談させていただきたく存じます。

お手隙の際に、ご確認いただけますと幸いです。
よろしくお願いいたします。

reckyy · 2024-08-30T07:24:36Z

app/javascript/reaction.js

+  })
+})
+
+export function initializeReaction(reaction) {


@motohiro-mm
新規追加した回答でも、リアクションを有効化するためにexportしてnew-answer.jsで用いられるようにしています。

reckyy · 2024-08-30T07:28:05Z

app/javascript/reaction.js

  })
-
-  document.querySelectorAll('.js-reaction-dropdown').forEach((dropdown) => {


なぜか元のコードでは reactions.eachの外で実行していましたが、まとめられる処理だったためループの内部に移動しました。

machida · 2024-08-30T08:48:58Z

@reckyy

なるほど！ありがとうございます。
コメントのUIにページャーをつけるとややこしくなりますね。
やはり、GitHubのように、数件ずつ読み込むのが良さそうです。

読み込みができなくなるエラーは、以前起こっていたのですが、　見返したところ、原因はJSで不要なリクエストが発生していたからっぽいです。なので、今回は相当な数がコメント（今回の場合はAnswer）がつかないとエラーは起きないと思うので、エラーが出るまでは対応はしない、という方針にしたいと思います。

なので、今回はページャーも数件ずつ読み込みをするのも無しでお願いします🙏
方針が変わってしまい申し訳ないです。

reckyy · 2024-08-30T11:13:11Z

@machida
ご返信ありがとうございます！
委細承知しました。
とんでもないです！引き続きよろしくお願いいたします。

reckyy · 2024-08-30T11:18:50Z

@motohiro-mm
レビューいただきありがとうございます！
こちらのコメントですが、1と3はPagerの実装を取りやめたため問題が起こらなくなりました。
2に関しては、修正しました！→ 90751f6
Toastの件はコメントしています。→ #8033 (comment)

お手隙の際に、再度ご確認いただけますと幸いです。
よろしくお願いいたします。

motohiro-mm

@reckyy

確認させていただきました！
コメントさせていただいたのに加え、気になったところを1つ以下に記載します。

id属性をつけて特定の場所にジャンプできるURLを入力して一度そこにジャンプした後、同じページで移動し再度リロードしても元いた場所（移動した後の場所）に戻ってしまいURLで指定している場所にはジャンプされませんでした。

動画は、「sotugyou」ユーザーの回答のURLを入力して一度ジャンプし、他の回答を読んだ後（「machida」ユーザーを目印にしました）、Chromeのリロードをクリックする、という動作を行っています。

mainブランチ
URLで指定している「sotugyou」ユーザーの回答にジャンプしました。

2024-08-31.23.01.35.mov

現在のブランチ
URLで指定している「sotugyou」ユーザーの回答にジャンプせず、リロード前の画面（「machida」ユーザー付近）にジャンプしました。

2024-08-31.23.00.14.mov

なぜこうなるのか調べましたが、原因はわかりませんでした。
（turbo-linksとかcacheとかですかね…？）
元々の仕様と同じようにとのことでしたし、URLで指定した場所にジャンプしないのはなんだか不思議だなと思い気になりました。
ですがそもそも同じページ内のジャンプは仕様として気にする必要があるのかないのかは私には判断できなかったので、まずはご確認いただこうと思いました。

文章だとわかりづらいと思い動画もつけましたがそれでもわかりづらいと思います🙇‍♀️
ご確認をお願いいたします🙏

motohiro-mm · 2024-08-30T14:29:05Z

app/javascript/new-answer.js

+import CSRF from 'csrf'
+import TextareaInitializer from 'textarea-initializer'
+import MarkdownInitializer from 'markdown-initializer'
+import { toast } from 'toast_react'


ユーザーがリロードなしで操作できる現在の仕様を維持するために、すべての処理を非同期で実行する形にしていますが

ただ、個人的には処理の一貫性とUXの観点から、すべての操作をなるべく統一したほうが良いと考えています。そのため、全操作を非同期処理で統一することが望ましいと考えています。

なるほど！腹落ちしました！
たしかに現行の仕様はリロードしてないですもんね。
仕様を維持するためであれば、コントローラ追加等せずにこのままJSで実装していただいて良いと思いました！
importファイルもこのままで良いと思います！
詳しくご説明くださりありがとうございました！🙏

motohiro-mm · 2024-08-30T16:31:22Z

app/javascript/answer.js

+})
+
+export function initializeAnswer(answer) {
+  TextareaInitializer.initialize('.a-markdown-input__textarea')


Q&Aのページを開く動作をChromeのコンソールで見てみたのですが、例えばこちらのQ&Aですと以下の警告が3024回、毎回出ていました。（mainブランチでは出ていませんでした）

textarea-initializer.js:48 Tribute was already bound to TEXTAREA

調べると、同じtextareaに対して複数回Tributeの初期化処理を行ってしまっているという警告のようです。
元々のanswer.vue:180では

TextareaInitializer.initialize(`#js-comment-${this.answer.id}`)

となっていたので、ここ（今コメントしている）の行を以下のようにすると警告が消えました。

TextareaInitializer.initialize(`#js-comment-${answer.id}`)

正直詳細は分かりかねているのですが、一緒に出ていた[Violation] 'DOMContentLoaded' handler took 4554msといった警告も消えたので（時間がかかっているという警告のようです：参考）、こちらの方が良いのかなと思いました。

reckyyさんの環境でもコンソールで警告が出ているかご確認いただければと思います🙏

ありがとうございます！
自分の環境でも同じ警告が出現していました。原因が分かりましたので、修正しました〜。

e8127dd

原因

今回、各answerに対して、answer.jsでinitializeAnswerを行っていますが、その中で @motohiro-mm さんがおっしゃっている以下の操作を行なっていました。

TextareaInitializer.initialize('.a-markdown-input__textarea')

このクラス指定が良くなかったみたいです。
このinitializeを各answerにそれぞれ実行しているつもりでしたが、実際は全てのアンサー + 新規回答フォームに対してanswerの数だけ実行されていました。
.a-markdown-input__textareaは全てのanswer + 新規回答フォームにあるので。
motohiroさんのケースで言うと

Q&Aにアクセス

回答が55個ある。

つまりこのanswer.jsのinitializeAnswer()が55回実行される。

ただ最初のanswerの時点で、全てのanswer + 新規回答フォームにTextareaInitializer.initialize()が実行される。

それ以降のanswerのinitializeAnswer()でも、同様にTextareaInitializer.initialize()が実行される。（重複している）

つまり、
3024 = 56（回答の総数55 + 新規回答フォーム） × 54（重複の回数）
3024回重複した処理が発生してしまっていた、というわけでした。

なので、idに変更し各answerに対して一意にバインドするようにしました。
前回のコードから変更していなければ、このようなことは起こりませんでした。。
お手数をおかけして、申し訳ございませんでした。 🙇

ちなみに、Tributeは Tribute.jsです。
メンションに関する機能などを提供しているようです。あまり詳しくは見れていませんが。

なるほど、そういうことだったのですね！
詳しくわかっていなかったので、解説していただいて何が起きていたのか理解できました！
ありがとうございます！

motohiro-mm · 2024-08-31T13:56:12Z

app/javascript/answer.js

+  const createdAtElement = answer.querySelector('.thread-comment__created-at')
+  if (createdAtElement && navigator.clipboard) {
+    createdAtElement.addEventListener('click', () => {
+      const answerURL = `${location.href}#answer_${answerId}`


元々answer.vue:248で以下のようになっていました。

const answerURL = location.href.split('#')[0] + '#answer_' + answerId

同じようにlocation.hrefはsplitで#より前のみをURLにする方が良いと思いました！
現在のコードだと、一度日付URLをクリックしてそのURLページへジャンプ後、再度日付URLをクリックするとidが重複してしまいます。

2024-08-31.22.51.42.mov

ご指摘ありがとうございます。
おっしゃる通りです。。修正しました！（修正というよりは、前回の形に戻しました。）

6d640ac

reckyy · 2024-09-04T04:00:56Z

@motohiro-mm

ありがとうございます！
ご指摘いただいた点を修正しましたので、お手隙の際にご確認いただけますと幸いです。

id属性をつけて特定の場所にジャンプできるURLを入力して一度そこにジャンプした後、同じページで移動し再度リロードしても元いた場所（移動した後の場所）に戻ってしまいURLで指定している場所にはジャンプされませんでした。

こちらですが、answer.vueの仕様をまたまた引き継げていませんでした。。
ブラウザはリロードした際スクロールしている位置を記憶し、その部分を表示します。
そのため、アンカーリンクにページ内ジャンプさせたい場合処理を書く必要がありました。
実際、answer.vueにも書いてました。

const answerAnchor = location.hash
if (answerAnchor) {
  this.$nextTick(() => {
    location.replace(location.href)
  })
}

なので、同様の処理を追加しました。
8d9ab48

motohiro-mm

@reckyy

確認させていただきました！

ブラウザはリロードした際スクロールしている位置を記憶し、その部分を表示します。
そのため、アンカーリンクにページ内ジャンプさせたい場合処理を書く必要がありました。

スクロールしている位置を記憶するのが本来の挙動で、ジャンプさせるための処理があったのですね。気付けずすみません🙏
追加修正ありがとうございます！

動作確認も問題ありませんでしたので、私からはapproveさせていただきます！
勉強になりました！ありがとうございました！

motohiro-mm · 2024-09-04T04:47:59Z

app/javascript/answer.js

+})
+
+export function initializeAnswer(answer) {
+  TextareaInitializer.initialize('.a-markdown-input__textarea')


なるほど、そういうことだったのですね！
詳しくわかっていなかったので、解説していただいて何が起きていたのか理解できました！
ありがとうございます！

reckyy · 2024-09-06T02:27:01Z

@motohiro-mm
とても丁寧にレビューしていただき、助かりました😭
ありがとうございました！

@komagata
お疲れ様です！
チームメンバーレビューが終わりましたので、お手隙の際にレビューをよろしくお願いいたします。

komagata · 2024-11-28T08:05:14Z

@reckyy conflictの修正お願いします〜

updateAnswerCountを2つのファイルでほとんど同じ処理で書いてたので、フラグを作成し統一

Watchableの更新を忘れていた。また、アドバイザーの会社の表示が正しくできていなかった

その一環で、reaction.jsの処理をまとめexportした

自分の書いたコードでは、もしanswerURLへジャンプした後別の回答のURLをコピーすると、#answer_url#answer_urlのように正しくないURLが作成されてしまうため

reckyy · 2024-12-03T06:31:46Z

@komagata
お疲れ様です！
confilctの解消、修正を共に行いましたのでお手隙の際にレビューいただけますと幸いです。
よろしくお願いいたします！

指摘されていた修正点

komagata

遅くなってすみません。
確認させて頂きました。OKです〜🙆‍♂️

reckyy changed the title ~~Chore/answer non vue conversion~~ Q&AのAnswer部分を非Vue化 Aug 25, 2024

reckyy force-pushed the chore/answer-non-vue-conversion branch from 5eda859 to 91648bb Compare August 25, 2024 14:31

reckyy commented Aug 26, 2024

View reviewed changes

reckyy force-pushed the chore/answer-non-vue-conversion branch 2 times, most recently from 6a4cb49 to 7b3c62d Compare August 27, 2024 07:49

reckyy marked this pull request as ready for review August 27, 2024 08:05

reckyy self-assigned this Aug 27, 2024

reckyy requested a review from motohiro-mm August 27, 2024 08:05

motohiro-mm reviewed Aug 28, 2024

View reviewed changes

reckyy force-pushed the chore/answer-non-vue-conversion branch from a0e92d5 to 90751f6 Compare August 30, 2024 07:18

reckyy commented Aug 30, 2024

View reviewed changes

motohiro-mm reviewed Aug 31, 2024

View reviewed changes

motohiro-mm approved these changes Sep 4, 2024

View reviewed changes

reckyy added 3 commits December 3, 2024 14:47

ai-answer.vueと新規回答フォームをフォームをslimに移行

4eb834c

question-answer.vue、また内部で使用しているファイルをslimに移行

ed57b27

不要なファイルを削除

b8ee88f

reckyy added 12 commits December 3, 2024 14:48

変数名や処理の重複などのリファクタリング

d82a31b

updateAnswerCountを2つのファイルでほとんど同じ処理で書いてたので、フラグを作成し統一

rubocopの指摘点を修正

625df76

prettier

ad46026

落ちていたテストに対応

e721b51

Watchableの更新を忘れていた。また、アドバイザーの会社の表示が正しくできていなかった

pagerの上限変更、スケルトンの表示数変更

a6f5e4e

抜けていた見出しを追加

66c564e

回答にidを追加

d093163

投稿した新規回答にもリアクションをつけられるように修正

2f2752a

その一環で、reaction.jsの処理をまとめexportした

pager削除

bdd80a9

answerURLを前回の仕様に合わせた

6ac2fad

自分の書いたコードでは、もしanswerURLへジャンプした後別の回答のURLをコピーすると、#answer_url#answer_urlのように正しくないURLが作成されてしまうため

textareaへのバインドの重複が起きていたので、一意なidに対しバインドするよう修正

bd7db48

スクロール後リロードしても、回答のURLにジャンプしない問題を修正

fe71953

reckyy force-pushed the chore/answer-non-vue-conversion branch from 8d9ab48 to fe71953 Compare December 3, 2024 05:48

reckyy added 2 commits December 3, 2024 14:51

toastをJS用のファイルからimportする形に変更

fd4a02e

initializeAnswer()、updateAnswerCount()を共通化

1f4ea05

ayu-0505 mentioned this pull request Dec 4, 2024

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

Open

komagata approved these changes Jan 5, 2025

View reviewed changes

komagata merged commit 1011a48 into main Jan 5, 2025
4 checks passed

komagata deleted the chore/answer-non-vue-conversion branch January 5, 2025 07:55

github-actions bot mentioned this pull request Jan 5, 2025

Release 2025-01-08 12:10:37 +0000 #8212

Open

24 tasks

	import Swal from 'sweetalert2'

	export function toast(title, status = 'success') {
	Swal.fire({
	title: title,
	toast: true,
	position: 'top-end',
	showConfirmButton: false,
	timer: 3000,
	timerProgressBar: true,
	customClass: { popup: `is-${status}` }
	})
	}

		@@ -0,0 +1,84 @@
		.thread-comment.answer data-question_id="#{question.id}" data-answer_id="#{answer.id}"

		})

		document.querySelectorAll('.js-reaction-dropdown').forEach((dropdown) => {

Q&AのAnswer部分を非Vue化 #8033

Q&AのAnswer部分を非Vue化 #8033

Conversation

reckyy commented Aug 25, 2024 • edited by motohiro-mm Loading

Issue

概要

変更確認方法

Screenshot

reckyy commented Aug 26, 2024

Choose a reason for hiding this comment

reckyy Aug 26, 2024 • edited Loading

Choose a reason for hiding this comment

reckyy Aug 26, 2024 • 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

reckyy commented Aug 27, 2024

motohiro-mm commented Aug 27, 2024

motohiro-mm left a comment • 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

reckyy Aug 30, 2024 • 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

Choose a reason for hiding this comment

reckyy commented Aug 30, 2024

相談したいこと

現在のPagerに関する課題

Pagerを追加しない理由

Choose a reason for hiding this comment

Choose a reason for hiding this comment

machida commented Aug 30, 2024

reckyy commented Aug 30, 2024

reckyy commented Aug 30, 2024

motohiro-mm left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

reckyy Sep 4, 2024 • 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

reckyy commented Sep 4, 2024

motohiro-mm left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

reckyy commented Sep 6, 2024

komagata commented Nov 28, 2024

reckyy commented Dec 3, 2024 • edited Loading

指摘されていた修正点

komagata left a comment

Choose a reason for hiding this comment

reckyy commented Aug 25, 2024 •

edited by motohiro-mm

Loading

reckyy Aug 26, 2024 •

edited

Loading

reckyy Aug 26, 2024 •

edited

Loading

motohiro-mm left a comment •

edited

Loading

reckyy Aug 30, 2024 •

edited

Loading

motohiro-mm left a comment •

edited

Loading

reckyy Sep 4, 2024 •

edited

Loading

reckyy commented Dec 3, 2024 •

edited

Loading