個人の日報一覧をプラクティスで絞り込めるようにした

[peno022]

Issue

• 個人の日報一覧もプラクティスで絞り込みたい。 #6037

概要

個人の日報一覧（https://bootcamp.fjord.jp/users/1463/reports など）を、プラクティスで絞り込めるようにしました。
（全ユーザーの日報一覧（ https://bootcamp.fjord.jp/reports ）には、既に同様の絞り込み機能が実装されています。）

変更確認方法

1. feature/filter-user-reports-by-practiceをローカルに取り込む
2. 任意のユーザーでログイン
3. komagataさんの日報一覧（ http://localhost:3000/users/459775584/reports ）を表示
4. セレクトボックスが表示されていること、プラクティスで日報を絞り込めることを確認します。テストデータ上は、OS X Mountain Lionをクリーンインストールするのプラクティスに、紐づく日報が存在しています。

Screenshot

変更前

変更後

[peno022]

@Seakimhour
おつかれさまです！こちらのPRのレビューをお願いしてもよいでしょうか？

[Seakimhour]

@peno022 お疲れ様です。
レビュー依頼ありがとうございます！
確認させていただきました、問題ないと思うのでApproveさせていただきました！

[peno022]

@Seakimhour
速やかに見ていただきありがとうございます！
@komagata
レビューよろしくお願いいたします！

[komagata]

@peno022 すみません、こちら画面遷移無しで（できればVue.jsよりReactを使って）絞り込めるようにお願いしたいです〜。

#6037 (comment)

[peno022]

@Seakimhour
おつかれさまです！
こちら以前一度Approveいただいたのですが、「画面遷移なしで」絞り込む、という要件を見落しておりまるっと再修正したため、再度レビューお願いしてもよいでしょうか？

[Seakimhour]

@peno022 新たにレビューさせていただきます～

Reactの経験がないです、よろしくお願いいたします！:cat:

一つ点です、下に書きました。
他のはいいと思います！

[Seakimhour]

Suggested change

	<label className="a-overlay" for={report.id}></label>
	<label className="a-overlay" htmlFor={report.id}></label>

ここもhtmlForに変更が必要ですねー

[Seakimhour]

Suggested change

	<label className="card-list-item-actions__trigger" for={report.id}></label>
	<label className="card-list-item-actions__trigger" htmlFor={report.id}></label>

ここはhtmlForに利用したらどうでしょうか？

[peno022]

@Seakimhour
ありがとうございます〜！修正しましたので再度ご確認お願いできますでしょうか！

[Seakimhour]

@peno022 確認をしました。問題ないと思いますので、Approveさせていただきます。

[peno022]

@Seakimhour
ありがとうございましたー！

@komagata
キムさんレビューおわりましたので、駒形さんレビューお願いいたします！

[komagata]

Commentは他のページでも使うので別ファイルのコンポーネントにした方がいいかもです〜

[peno022]

@machida ( @komagata )

おつかれさまです！
このPRで、個人の日報一覧（https://bootcamp.fjord.jp/users/[user_id]/products ）をReact化し、かつプラクティスでの絞り込みを入れる対応をしています。

一覧のコメント表示部分を共通化のためにコンポーネントとして切り出したいと思っているのですが、仕様について質問させてください。
「コメント表示部分」は、以下画像の赤枠の部分を指しています。

個人の日報一覧と提出物一覧で、コメント表示部分に区切り線の有無で違いがあったので、
「そもそもこの違いは意図されているものなのか？」
をご確認したいです。
（区切り線があるほうが見やすそう？）

下記のどちらにするかを決めたいと思っています。

• 意図されているものであれば、区切り線とそれ以外を別コンポーネントで作る
• 意図されていない（ので今後揃えていく）のであれば、揃えるほうの状態にあわせて1つのコンポーネントで作る

表示の違い

①日報一覧は、区切りの点線が入る

②提出物一覧は、区切りの点線が入らない。

[machida]

@peno022 区切り線のある方でお願いしますー
提出物の方は何かミスがあって線が出てなさそうです。こちらは別Issueで修正を進めますー💪

[peno022]

@komagata
修正しました！再度レビューお願いいたします。🙏

[komagata]

確認させて頂きました。OKです〜🙆‍♂️
難しいIssueをありがとうございます〜！