UserProblemListPageのreact-refetchを置き換えた。

Author: hotate29

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

@@ -52,3 +52,9 @@ export const useRecentContests = () => {
     typeCastFetcher<VirtualContestInfo[]>(url)
   );
 };
+
+export const useMyList = () => {
+  return useSWRData(`${BASE_URL}/list/my`, (url) =>
+    typeCastFetcher<ProblemList[]>(url)
+  );
+};

atcoder-problems-frontend/src/pages/Internal/UserProblemListPage.tsx

@@ -1,4 +1,3 @@
-import { connect, PromiseState } from "react-refetch";
 import React, { useState } from "react";
 import {
   Alert,
@@ -16,62 +15,54 @@ import {
   Row,
   Spinner,
 } from "reactstrap";
-import { Link, Redirect } from "react-router-dom";
-import { LIST_CREATE, LIST_DELETE, LIST_MY } from "./ApiUrl";
-import { ProblemList } from "./types";
+import { Link, useHistory } from "react-router-dom";
+import { useMyList } from "../../api/InternalAPIClient";
+import { LIST_CREATE, LIST_DELETE } from "./ApiUrl";
 
-interface Props {
-  myListFetch: PromiseState<ProblemList[] | null>;
-  createListFetch: PromiseState<{ internal_list_id: string } | null>;
-  createNewList: () => void;
-  deleteList: (internalListId: string) => void;
-  deleteResponse: PromiseState<unknown | null>;
+interface CreateListResponse {
+  internal_list_id: string;
 }
 
-export const UserProblemListPage = connect<unknown, Props>(() => ({
-  myListFetch: LIST_MY,
-  createListFetch: { value: null },
-  createNewList: () => ({
-    createListFetch: {
-      url: LIST_CREATE,
-      method: "POST",
-      body: JSON.stringify({ list_name: "New List" }),
-    },
-  }),
-  deleteList: (internalListId: string) => ({
-    deleteResponse: {
-      url: LIST_DELETE,
-      method: "POST",
-      body: JSON.stringify({ internal_list_id: internalListId }),
-      andThen: () => ({
-        myListFetch: {
-          url: LIST_MY,
-          refreshing: true,
-          force: true,
-        },
-      }),
-    },
-  }),
-  deleteResponse: { value: null },
-}))((props) => {
-  const { createListFetch, myListFetch } = props;
-  if (createListFetch.fulfilled && createListFetch.value !== null) {
-    const listId = createListFetch.value.internal_list_id;
-    return <Redirect to={`/problemlist/${listId}`} />;
+const createNewList = () =>
+  fetch(LIST_CREATE, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ list_name: "New List" }),
+  })
+    .then((response) => response.json())
+    .then((response) => response as CreateListResponse);
+
+const deleteList = (internalListId: string) =>
+  fetch(LIST_DELETE, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ internal_list_id: internalListId }),
+  });
+
+export const UserProblemListPage: React.FC = () => {
+  const history = useHistory();
+  const myListFetch = useMyList();
+
+  if (myListFetch.error) {
+    return <Alert color="danger">Failed to fetch list info.</Alert>;
   }
-  if (myListFetch.pending) {
+  if (!myListFetch.data) {
     return <Spinner style={{ width: "3rem", height: "3rem" }} />;
-  } else if (myListFetch.rejected || !myListFetch.value) {
-    return <Alert color="danger">Failed to fetch list info.</Alert>;
   }
 
-  const myList = myListFetch.value;
+  const myList = myListFetch.data ?? [];
 
   return (
     <>
       <Row className="my-2">
         <Col sm="12">
-          <Button color="success" onClick={(): void => props.createNewList()}>
+          <Button
+            color="success"
+            onClick={async () => {
+              const internalListId = (await createNewList()).internal_list_id;
+              history.push({ pathname: `/problemlist/${internalListId}` });
+            }}
+          >
             Create New List
           </Button>
         </Col>
@@ -86,15 +77,18 @@ export const UserProblemListPage = connect<unknown, Props>(() => ({
                 internalListId={internal_list_id}
                 internalListName={internal_list_name}
                 listItemCount={items.length}
-                deleteList={props.deleteList}
+                deleteList={async (internalListId) => {
+                  await deleteList(internalListId);
+                  await myListFetch.mutate();
+                }}
               />
             ))}
           </ListGroup>
         </Col>
       </Row>
     </>
   );
-});
+};
 
 interface SingleListEntryProps {
   internalListId: string;