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

[Takuya-Sakai91]

Issue

• generation-users.vueをreactに対応させる #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. 以下、各リンクが正常に表示され、各遷移先画面が正常に表示されるかを確認する。
   • 各ユーザープロフィールページ
   • SNSリンクなどの表示
   • ユーザーに関連付けられたタグ
   • ユーザーのアクティビティ（日報、提出物、コメント、質問、回答）の数
   • プラクティスの進捗を表示するバー
   • フォロー機能
   • ページネーションが機能しているか（5期のユーザー一覧ページで）

Screenshot

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

[Takuya-Sakai91]

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

• ローカル環境

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

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

• 本番環境

[Takuya-Sakai91]

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

[machida]

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

[machida]

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

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

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

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

[Takuya-Sakai91]

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

[Takuya-Sakai91]

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

[yocchan-git]

大枠はOKそうです！

ただ、フォローのリクエスト先が間違っていそうなので
そこの修正をお願いいたします🙏

[yocchan-git]

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

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

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

[Takuya-Sakai91]

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

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

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

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

[yocchan-git]

基本的な動作はバッチリです！

ただ、2点気になったので...🙇‍♂️

現状、下記のようにページネーションで遷移するとリンクの後ろに&page=2などが3つ,4つぐらいついてきます。

これは意図する動作なのでしょうか？
(最後のpageだけを参照するとか、ただ、余計なparamsを増やすのはあまり良くない気がしますが...)

また、上記の例はたまたまpage=1が表示されないのでいいのですが、page=2&page=3などになるとバグになりそうなので、修正していただきたいです！🙏

---

また、page=2にいてもリロードしたら1に戻ってくるのですが、
こちらも意図する動作でしょうか？🤔

個人的には、リロードしても2にいて欲しいです笑
(というか、今もそのはずです！)

ただ、このissue結構重く大変だったかなと思います！
修正になるとよりテンション下がるかと思いますが、よろしくお願いいたします🙇

[Takuya-Sakai91]

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

[yocchan-git]

LGTM🎉

結構難しそうでしたが、すごいですね！
対応お疲れ様でした〜〜

[Takuya-Sakai91]

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

[komagata]

@natsuto6

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

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

[komagata]

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

[Takuya-Sakai91]

@komagata

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

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

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

[machida]

@natsuto6 直しますー💪

[komagata]

@natsuto6

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

承知しました～。

[Takuya-Sakai91]

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

[komagata]

確認させていただきました。OKです～👌