generation-users.vueと依存するVueファイルをReactコンポーネントに書き換え

[natsuto6]

Issue

• #5126

概要

期生別のユーザー一覧ページと依存するVueファイルをReactに書き換え

変更確認方法

1. chore/convert-generation-users-vue-component-to-reactをローカルに取り込む
2. bin/setup を実行
3. rails db:seedでページネーションの動作確認のため本PRで追加したユーザーデータをdevelopment環境に読み込む
4. foreman start -f Procfile.devでサーバーを起動
5. http://localhost:3000/にアクセスする
6. 任意のユーザーでログインし、5期のユーザー一覧ページにアクセスする
7. 以下、各リンクが正常に表示され、各遷移先画面が正常に表示されるかを確認する。
   • [x] 各ユーザープロフィールページ
   • [x] SNSリンクなどの表示
   • [x] ユーザーに関連付けられたタグ
   • [x] ユーザーのアクティビティ（日報、提出物、コメント、質問、回答）の数
   • [x] プラクティスの進捗を表示するバー
   • [x] フォロー機能
   • [x] ページネーションが機能しているか（5期のユーザー一覧ページで）

Screenshot

• 今回、見た目の変更としてはこちらのページネーションのアクティブ・非アクティブ化が未実装です。こちら別Issueとさせていただきます（参考）

[natsuto6]

@machida generation-users.vueとそれに関連するファイルをReactに書き換えました。 以下の点について、本番環境と同様になるようスタイルの追加をお願いできますでしょうか。 もし自分が実装した箇所で不足しているところがあれば、教えていただきたいです。 お手数ですがご確認よろしくお願いいたします。

• ローカル環境

1. 最初と最後のページへのリンクを配置するため、ReactPaginateコンポーネントの前後にそれぞれのボタンを配置しています

2. ユーザーごとのアイテム、両サイドの余白が追加されないのでご確認いただきたいです

• 本番環境

[natsuto6]

@machida 上記いかがでしょうか。お手数ですがご確認よろしくお願いいたします。

[machida]

@natsuto6 すいません、これから着手しますー

[machida]

@natsuto6 デザイン崩れ修正しました。

このリンクはページャーの1ページ目だったら非アクティブに。

このリンクはページャーの最終ページだったら非アクティブに。

という動きも入れていただきたいですが、大変だったら別Issueでいいです。

[natsuto6]

@machida こちらご対応いただきありがとうございます。 実装が思いつかなかったので別Issueとさせていただければと思います。

[natsuto6]

@yocchan-git お疲れ様です！こちらお手数ですがレビューをお願いできますでしょうか？ ご確認よろしくお願いします🙏

[yocchan-git]

申し訳ないです。2点細かいですが修正お願いいたします

1. Reactを読み込む際にbin/setupを変更確認方法の2あたりに追加していただけますと🙏
2. ブランチ名(今回は修正の必要なしです)

ブランチ名はなんでもいいのですが、フィヨルドのルールに則った方がいいかなと🤔 こちらの記事を参考になさってください！

[natsuto6]

@yocchan-git 早々にご確認いただきありがとうございます！ フォロー機能修正しましたので再度ご確認お願いします🙏

指摘いただいた1点目について追加しました。

ブランチ名はなんでもいいのですが、フィヨルドのルールに則った方がいいかなと

こちら確かにそうかもしれないので以後気をつけます🙇‍♂️ ただ、Issueの参考ページだったり過去のプルリクエストとかを参考に作成しました👀

[natsuto6]

@yocchan-git ご指摘いただきありがとうございます！🙇‍♂️ ご指摘の2箇所の挙動を修正しました。お手数ですが再度ご確認をお願いいたします🙏

[natsuto6]

@yocchan-git 相当な時間かけてしまったので全然です💦 早々にご確認いただきありがとうございました〜！

@komagata チームメンバーのレビューが通りましたので、お手数ですがレビューをお願い致します🙇‍♂️

[dowdiness]

@natsuto6

1. データ取得をuseSWRを使うように置き換えて、useStateとuseEffectを全てGenerationUsersから消去する。
2. 既にあるreact-paginateを使うコンポーネントではなく、Pagination.jsxとusePageを使ったページネーションを使うように置き換える。

とりあえずはこの二つをやったら問題ないと思います。

[natsuto6]

@komagata こちら対応しました。お手数ですがレビューのほどよろしくお願いします🙇‍♂️ https://github.com/fjordllc/bootcamp/pull/7170#issuecomment-2025118933

[komagata]

@natsuto6 conflictの修正をお願い致します～。

[natsuto6]

@komagata コンフリクトを解消しました。ご確認をお願い致します。

[komagata]

@natsuto6

こちらご対応いただきありがとうございます。 > 実装が思いつかなかったので別Issueとさせていただければと思います。

こちら、この別IssueはどのIssueになりますでしょうか？

[komagata]

@natsuto6 フォローするボタンを押すと下記のようになってしまうようです。

[natsuto6]

@komagata

こちら、この別IssueはどのIssueになりますでしょうか？

pagerのcomponentに変更したことにより、事象として発生しなくなっております。目的の実装になっているのでIssueとして立てておりませんでした。

@machida komagataさんからの指摘内容について、こちらと同様の事象が発生しております。 本番環境においても同様の事象が発生しておりますが、mainブランチでは正常に動作しております。問題の修正は既に完了しており、machidaさんに対応いただくことはない認識でよろしかったでしょうか？必要であればご対応をお願いできればと思います。お手数ですがご確認をお願い致します🙏

[machida]

@natsuto6 直しますー💪

[komagata]

@natsuto6

pagerのcomponentに変更したことにより、事象として発生しなくなっております。目的の実装になっているのでIssueとして立てておりませんでした。

承知しました～。

[natsuto6]

@machida ご対応いただきありがとうございます！フォローボタン押下時の事象が解消されていることを確認できました🙇‍♂️ @komagata お手数ですが再レビューをお願い致します🙇‍♂️