react-refetch を置き換える

[kenkoooo]

フロントエンドとバックエンドの通信にはかつては react-refetch を使っていましたが、react-refetch がメンテされなそうということと、一部の swr による置き換えがうまくいっているので、残った react-refetch の実装も swr を中心としたものに置き換えていきます。

Progress

• TablePage by @Atsuyoshi-N (TablePageのreact-refetchをuseMultipleUserSubmissionsに置き換える #951, progressResetListをswrで書き換える #958)
• ListPage Remove react-refetch from ListPage #1040
• RecentContestList by @yb173 RecentContestList の react-refetch を swr で置き換える #1063
• RecentSubmissions by @yb173 RecentSubmissions の react-refetch を swr で置き換える #1065
• ContestUpdatePage by @atsuya02 ContestUpdatePageのreact-refetch を置き換える #1074
• SingleProblemList by @atsuya02 SingleProblemListのreact-refetch を置き換える #1076
• ResetProgress @atsuya02 ResetProgressのreact-refetch を置き換える #1080
• MyAccountPage
• UserProblemListPage

フロントエンドの開発環境をセットアップする方法

https://github.com/kenkoooo/AtCoderProblems/tree/master/atcoder-problems-frontend

1. yarn をインストールする
2. yarn する
3. yarn start する

[Atsuyoshi-N]

私がこのissueを担当する予定です。
まずは、kenkooooさんとのやり取りで、TablePageのsubmissionsをuseMultipleUserSubmissionsに変更するところから着手します。

[kenkoooo]

@Atsuyoshi-N ではまずは TablePage をお願いしますね

[kenkoooo]

分からないことがあればいつでもここに書いてください

[knagakura]

Webアプリ開発初心者ですが、参加させていただきます。よろしくお願いします！

[kenkoooo]

@knagakura お願いします。まずは RecentContestList をお願いします。環境構築については上の方に書いてありますが、分からなければ聞いてください。やることは以下のとおりです。

1. InternalAPIClient.ts に最近のコンテストをreact-hookで取得する関数 useRecentContests() を追加する。

2. AtCoderProblems/atcoder-problems-frontend/src/pages/Internal/VirtualContest/RecentContestList.tsx

   Line 16 in 0282bbd

   contestListGet: {

   
   ここの部分を useRecentContests で置き換える。

わからないことがあれば、どんなレベルでも構いませんので聞いてください。

[Atsuyoshi-N]

@kenkoooo
お疲れ様です。大きく3点質問があります。

質問事項
useMultipleUserSubmissions(userId, rivals)を作成するにあたって、

• useSWRDataを使用することになると思いますが、第一引数のURLをuserIdごとに指定するにはどうしたら良いですか？
  • PromiseでuseSWRDataを囲もうと思ったのですが、それだと、レスポンスが返ってきたかが判断できなさそうだと思い混乱しています。
• fetcherには、既存の fetchUserSubmissions を使用すれば良いですか？
  • こちらの関数の中でfetchするURLを指定できればuseSWRDataの第一引数は特に気にしなくても良いですか？
• yarn start(react-scripts start)をしてブラウザで挙動を確認する時、コンソールにinternal server errorが出たときのエラーログの確認方法を教えていただきたいです。

[kenkoooo]

@Atsuyoshi-N

• useMultipleUserSubmissions は既にあるのでそれを使ってください。上の方にある検索ボックスから検索できますのでご活用ください。
• バックエンドのログはAWSコンソールに入れば確認することは出来ますが、基本的にはフロントエンドで不正な引数でAPIを叩いていることが原因なので、まずはどのURLでどんな引数で叩いているかを教えてください。もしコードを読めるようでしたら実装は全てこのリポジトリにありますので探していただいても構いませんが、聞いていただくのが手っ取り早いかと思います。

[Atsuyoshi-N]

ありがとうございます。
useMultipleUserSubmissions を独自実装しようとしてつまづいていたのでアドバイス非常に助かりました。

TablePageを実装し、draft PRにしたのでお手隙で確認していただきたいです。

他のPageでも追加で実装が発生すると思ったのでdraft PRにしています。
TablePageで1 PRということであれば普通のPRに変更します。

[kenkoooo]

@Atsuyoshi-N TablePage で 1PRにしましょう

[Atsuyoshi-N]

@kenkoooo 1PRにしてdraftを外しました。お手隙で確認よろしくお願いします。

[kenkoooo]

@knagakura 調子はどうでしょう？とりあえずローカルで実行できましたか？

[Atsuyoshi-N]

@kenkoooo
お疲れ様です。
もし次に取り組むタスクがあれば頂きたいです。

[kenkoooo]

@Atsuyoshi-N

TablePage の react-refetch を置き換える作業をやっていただいても良いですか？まだ少し残っているかと思います。

[Atsuyoshi-N]

@kenkoooo
かしこまりました。 progressResetList が残っていそうなのでそちらを置き換えます。

[Atsuyoshi-N]

@kenkoooo
progressResetList を置き換えるのに際して質問です。

前回のsubmissionsを取得するための関数は用意されていましたが、今回は、APIClient.tsに新たに足して対応するという理解で正しいですか？

[kenkoooo]

はい、たしかInternalAPIClient.tsみたいなのがあって、AtCoder Problems独自のデータに関してはこちらを使っているので、今回もこのファイルに足していただければと思います。

[kenkoooo]

@knagakura 連絡がつかないので一旦 unassign しておきますが、やりたくなったらいつでも言ってください！

[yb173]

@kenkoooo
初めまして。
RecentContestList を担当してもよろしいでしょうか？

[kenkoooo]

@yb173 ぜひ！分からないことがあればいつでも聞いてください！

[yb173]

@kenkoooo
順番前後しますが、次は RecentSubmissions を担当してもよろしいですか？

[kenkoooo]

@yb173 ぜひ〜〜〜

[a-yossy]

@kenkoooo
初めまして！
ContestUpdatePageを担当してもよろしいですか？

[kenkoooo]

@atsuya02 ぜひお願いします！

[a-yossy]

@kenkoooo
ContestUpdatePageの動作確認方法を教えていただきたいです。

[kenkoooo]

@atsuya02 yarn start でローカルで走るのはできていますか？

[a-yossy]

@kenkoooo
yarn startでローカルで走るのはできています。
ログインをしておらず、Create New Contestボタンが表示されていませんでした。
解決しました、申し訳ありません！

[kenkoooo]

良かったです！

[a-yossy]

@kenkoooo
SingleProblemListを担当してもよろしいでしょうか？

[kenkoooo]

@atsuya02 ぜひ！

[a-yossy]

@kenkoooo
ResetProgressを担当してもよろしいでしょうか？

[kenkoooo]

@atsuya02 ぜひ！

[a-yossy]

@kenkoooo
MyAccountPageを担当してもいいですか？

[kenkoooo]

@atsuya02 ぜひ！