bookmark-button.vueをreact対応にする

[komagata]

下記を参考にしてreactに変える。

• react導入 + 管理画面のコース一覧をreact化 by komagata · Pull Request #5515 · fjordllc/bootcamp

[github-actions]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[kyokucho1989]

@komagata
こんにちは。Issueの進め方について質問があります。

質問1 :book-select.vue のReact化について

book-select.vue ですが、すでにvueファイルはなく、以下のIssueでJSに置き換えられていました。
#4934

vueではなくなっているので、こちらはなにも変更を加えなくて構いませんか？

質問2: bookmark-button.vue の変更範囲について

bookmark-button.vue　を参照しているファイルを確認すると、以下のファイルがありました。
app/javascript/components/question-edit.vue

ただ、これは以下のIssueで現在 @junohm410 さんが取り組んでいるものと変更範囲が被るかもしれません。
#7356

こちらはどこまで変更を行えば良いでしょうか。

[junohm410]

@kyokucho1989 お疲れ様です。
ここ2日ほど用事や体調不良でFBCでの活動ができておらず、こちらにリアクションできておらず申し訳ないです🙇‍♂️

質問2: bookmark-button.vue の変更範囲について
bookmark-button.vue　を参照しているファイルを確認すると、以下のファイルがありました。
app/javascript/components/question-edit.vue
ただ、これは以下のIssueで現在 junohm410 さんが取り組んでいるものと変更範囲が被るかもしれません。

はい、被りそうです。まずどのように被りそうかについて、今日中にここでシェアできるようにします。
（ちょっと一旦離席するので、取り急ぎご連絡というイメージです🙏）

すみませんが、よろしくお願いします。

[junohm410]

@kyokucho1989

変更の概要

#7356 のPR（現時点ではドラフト）で、app/javascript/components/question-edit.vueは削除する予定です（非Vue化のIssueのため）。

同部分のブックマークボタンに関わる箇所は、下のRailsのviewファイルに移動させます。

https://github.com/fjordllc/bootcamp/blob/chore/convert-question-section-from-vue-to-slim/app/views/questions/_question_header.html.slim#L60

移動先では、現在では下のような形でbookmark-button.vueをマウントさせています。

bootcamp/app/views/questions/_question_header.html.slim

Line 60 in 58b4a40

#js-bookmark(data-bookmarkable-id="#{question.id}", data-bookmarkable-type='Question')

このマウント方法は、このQuestionのビューでの独自の手法ではなく、すでに他でbookmark-button.vueが使われている箇所と同じやり方です。
例: 現在のorigin/mainでのpagesでのマウント方法

bootcamp/app/views/pages/_doc_header.html.slim

Line 75 in 56bb9ae

#js-bookmark(data-bookmarkable-id="#{page.id}", data-bookmarkable-type='Page')

考えられる進め方について

React化のIssueなので、Questionに限らずですが、slimテンプレート上では下記のような実装に変わるのではないかと思っています。

# app/views/questions/_question_header.html.slim

= react_component('BookmarkButton', bookmarkable-id="#{question.id}", bookmarkable-type='Question')

私のPRは今日明日にはレビューに回せそうなので、kyokuchoさんがReact化を進めているうちにレビューが終わり、私のPRのマージ後に変更をrebaseで取り込んでもらう方法が、うまくいけば綺麗にすすめられる形かなと考えました。

• app/javascript/components/question-edit.vueは編集しない（削除するので）
• bookmark-button.vueと同じ機能を持つReactコンポーネントは作っていただく
• propsはbookmarkable-idとbookmarkable-typeの2つを渡すようにしていただく（今と同じ仕様）
• Question以外で現時点でbookmark-button.vueを使っていただいている箇所は置き換えていただいてOK

のようにしてもらえると、不要なコンフリクトを減らせるのではないかなと考えました。

もちろん、React化にあたりpropsを変える必要が出てきそうとか、私のレビューが長くかかったとか、そのような際には都度相談させていただければと存じますので、やりとりを続けさせてもらえればというイメージです🙏

不明点あればDiscordで通話も大丈夫です。
取り急ぎご確認いただけると幸いです。よろしくお願いいたします🙏

[kyokucho1989]

@junohm410
ありがとうございます！
一旦その方向で書いてみますー

[junohm410]

@kyokucho1989
お疲れ様です。時間がかかってしまい申し訳なかったのですが、下のPRがマージされました。

• Q&AページのQuestion部分を非Vue化した #7439

bootcamp/app/views/questions/_question_header.html.slim

Line 60 in a917aa0

#js-bookmark(data-bookmarkable-id="#{question.id}", data-bookmarkable-type='Question')

上のコメントでシェアした実装（既存のDocsなどと同じ形）でVueコンポーネントをマウントしています。
こちらを取り込んでいただき、ここをreact-railsのヘルパーに置き換えていただければいいのではと思います。
よろしくお願いいたします🙏

[kyokucho1989]

本番環境で動作確認できましたのでクローズします。