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に変更します。