Merge pull request #1065 from yb173/replace_old_api_recent_submissions

RecentSubmissions の react-refetch を swr で置き換える

Author: kenkoooo

atcoder-problems-frontend/src/api/APIClient.ts

@@ -287,3 +287,8 @@ export const useVirtualContestSubmissions = (
     }
   ).data;
 };
+
+export const useRecentSubmissions = () => {
+  const url = `${ATCODER_API_URL}/v3/recent`;
+  return useSWRData(url, (url) => fetchTypedArray(url, isSubmission));
+};

atcoder-problems-frontend/src/pages/RecentSubmissions.tsx

@@ -1,34 +1,23 @@
 import React from "react";
 import { Alert, Row, Spinner } from "reactstrap";
-import { connect, PromiseState } from "react-refetch";
-import Submission from "../interfaces/Submission";
-import { fetchRecentSubmissions } from "../utils/Api";
+import { useRecentSubmissions } from "../api/APIClient";
 import { SubmissionListTable } from "../components/SubmissionListTable";
 
-interface Props {
-  submissions: PromiseState<Submission[]>;
-}
+export const RecentSubmissions = () => {
+  const submissionsResponse = useRecentSubmissions();
 
-const InnerRecentSubmissions: React.FC<Props> = (props) => {
-  if (props.submissions.pending) {
+  if (!submissionsResponse.data && !submissionsResponse.error) {
     return <Spinner style={{ width: "3rem", height: "3rem" }} />;
+  } else if (!submissionsResponse.data) {
+    return <Alert color="danger">Failed to fetch submission info.</Alert>;
   }
-  if (props.submissions.rejected) {
-    return <Alert color="danger">Failed to fetch contest info.</Alert>;
-  }
 
-  const submissions = props.submissions.value.sort((a, b) => b.id - a.id);
+  const submissions = submissionsResponse.data.sort((a, b) => b.id - a.id);
+
   return (
     <Row>
       <h1>Recent Submissions</h1>
       <SubmissionListTable submissions={submissions} />
     </Row>
   );
 };
-
-export const RecentSubmissions = connect<unknown, Props>(() => ({
-  submissions: {
-    comparison: null,
-    value: fetchRecentSubmissions,
-  },
-}))(InnerRecentSubmissions);

atcoder-problems-frontend/src/utils/Api.tsx

@@ -4,12 +4,6 @@ import { hasPropertyAsType, isNumber } from "./TypeUtils";
 
 const ATCODER_API_URL = process.env.REACT_APP_ATCODER_API_URL;
 
-export const fetchRecentSubmissions = (): Promise<Submission[]> => {
-  return fetch(`${ATCODER_API_URL}/v3/recent`)
-    .then((r) => r.json())
-    .then((r: unknown[]) => r.filter(isSubmission));
-};
-
 export const fetchPartialUserSubmissions = async (
   userId: UserId,
   fromSecond: number