refactor: SingleProblemListのreact-refetch を置き換える

Author: a-yossy

atcoder-problems-frontend/src/pages/Internal/ApiUrl.ts

@@ -15,8 +15,6 @@ export const LIST_UPDATE = `${BASE_URL}/list/update`;
 export const LIST_ITEM_UPDATE = `${BASE_URL}/list/item/update`;
 export const LIST_ITEM_DELETE = `${BASE_URL}/list/item/delete`;
 export const LIST_ITEM_ADD = `${BASE_URL}/list/item/add`;
-export const listGetUrl = (listId: string): string =>
-  `${BASE_URL}/list/get/${listId}`;
 
 export const PROGRESS_RESET_LIST = `${BASE_URL}/progress_reset/list`;
 export const PROGRESS_RESET_ADD = `${BASE_URL}/progress_reset/add`;

atcoder-problems-frontend/src/pages/Internal/ProblemList/ApiClient.ts

@@ -0,0 +1,56 @@
+import {
+  LIST_ITEM_ADD,
+  LIST_ITEM_DELETE,
+  LIST_ITEM_UPDATE,
+  LIST_UPDATE,
+} from "../ApiUrl";
+
+export const updateProblemList = (name: string, listId: string) =>
+  fetch(LIST_UPDATE, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ internal_list_id: listId, name }),
+  });
+
+export const addProblemItem = (problemId: string, listId: string) =>
+  fetch(LIST_ITEM_ADD, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      internal_list_id: listId,
+      problem_id: problemId,
+    }),
+  });
+
+export const deleteProblemItem = (problemId: string, listId: string) =>
+  fetch(LIST_ITEM_DELETE, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      internal_list_id: listId,
+      problem_id: problemId,
+    }),
+  });
+
+export const updateProblemItem = (
+  problemId: string,
+  memo: string,
+  listId: string
+) =>
+  fetch(LIST_ITEM_UPDATE, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      internal_list_id: listId,
+      problem_id: problemId,
+      memo,
+    }),
+  });

atcoder-problems-frontend/src/pages/Internal/ProblemList/SingleProblemList.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { connect, PromiseState } from "react-refetch";
 import { List } from "immutable";
 import {
   Alert,
@@ -15,49 +14,57 @@ import {
   Spinner,
 } from "reactstrap";
 import { useProblems } from "../../../api/APIClient";
-import { useLoginState } from "../../../api/InternalAPIClient";
-import {
-  LIST_ITEM_ADD,
-  LIST_ITEM_DELETE,
-  LIST_ITEM_UPDATE,
-  LIST_UPDATE,
-  listGetUrl,
-} from "../ApiUrl";
+import { useLoginState, useProblemList } from "../../../api/InternalAPIClient";
 import Problem from "../../../interfaces/Problem";
 import { ProblemSearchBox } from "../../../components/ProblemSearchBox";
 import { formatProblemUrl } from "../../../utils/Url";
-import { ProblemList, ProblemListItem } from "../types";
+import { ProblemListItem } from "../types";
 import { NewTabLink } from "../../../components/NewTabLink";
 import { ContestCreatePage } from "../VirtualContest/ContestCreatePage";
-
-interface OuterProps {
+import {
+  updateProblemList,
+  addProblemItem,
+  deleteProblemItem,
+  updateProblemItem,
+} from "./ApiClient";
+interface Props {
   listId: string;
 }
-interface InnerProps extends OuterProps {
-  problemListFetch: PromiseState<ProblemList>;
-  updateList: (name: string) => void;
-  updateListResponse: PromiseState<Record<string, unknown> | null>;
 
-  addItem: (problemId: string) => void;
-  deleteItem: (problemId: string) => void;
-  updateItem: (problemId: string, memo: string) => void;
-}
+const updateList = async (name: string, listId: string) => {
+  await updateProblemList(name, listId);
+};
+
+const addItem = async (problemId: string, listId: string) => {
+  await addProblemItem(problemId, listId);
+};
+
+const deleteItem = async (problemId: string, listId: string) => {
+  await deleteProblemItem(problemId, listId);
+};
 
-const InnerSingleProblemList = (props: InnerProps) => {
+const updateItem = async (problemId: string, memo: string, listId: string) => {
+  await updateProblemItem(problemId, memo, listId);
+};
+
+export const SingleProblemList = (props: Props) => {
+  const { listId } = props;
   const loginState = useLoginState();
   const [adding, setAdding] = useState(false);
   const [creatingContest, setCreatingContest] = useState(false);
   const problems = useProblems() ?? [];
 
-  const { problemListFetch } = props;
+  const problemListFetch = useProblemList(listId);
+
   const internalUserId = loginState.data?.internal_user_id;
-  if (problemListFetch.pending) {
+
+  if (!problemListFetch.data && !problemListFetch.error) {
     return <Spinner style={{ width: "3rem", height: "3rem" }} />;
-  } else if (problemListFetch.rejected || !problemListFetch.value) {
+  } else if (!problemListFetch.data) {
     return <Alert color="danger">Failed to fetch list info.</Alert>;
   }
-  const listInfo = problemListFetch.value;
-  const modifiable = listInfo.internal_user_id === internalUserId;
+  const listInfo = problemListFetch.data;
+  const modifiable = listInfo?.internal_user_id === internalUserId;
 
   return creatingContest ? (
     <>
@@ -87,7 +94,7 @@ const InnerSingleProblemList = (props: InnerProps) => {
           <h2>
             <DoubleClickEdit
               modifiable={modifiable}
-              saveText={(name): void => props.updateList(name)}
+              saveText={(name) => updateList(name, listId)}
               initialText={listInfo.internal_list_name}
             />
           </h2>
@@ -98,9 +105,11 @@ const InnerSingleProblemList = (props: InnerProps) => {
           {adding ? (
             <ProblemSearchBox
               problems={problems}
-              selectProblem={(problem): void => {
-                props.addItem(problem.id);
-              }}
+              selectProblem={(problem) =>
+                addItem(problem.id, listId).then(() =>
+                  problemListFetch.mutate()
+                )
+              }
             />
           ) : modifiable ? (
             <Button color="success" onClick={(): void => setAdding(!adding)}>
@@ -130,10 +139,16 @@ const InnerSingleProblemList = (props: InnerProps) => {
                   key={item.problem_id}
                   item={item}
                   problem={problem}
-                  saveText={(memo: string): void =>
-                    props.updateItem(item.problem_id, memo)
+                  saveText={(memo: string) =>
+                    updateItem(item.problem_id, memo, listId).then(() =>
+                      problemListFetch.mutate()
+                    )
+                  }
+                  deleteItem={() =>
+                    deleteItem(item.problem_id, listId).then(() =>
+                      problemListFetch.mutate()
+                    )
                   }
-                  deleteItem={(): void => props.deleteItem(item.problem_id)}
                 />
               );
             })}
@@ -144,53 +159,6 @@ const InnerSingleProblemList = (props: InnerProps) => {
   );
 };
 
-export const SingleProblemList = connect<OuterProps, InnerProps>((props) => ({
-  problemListFetch: listGetUrl(props.listId),
-  updateList: (name: string) => ({
-    updateListResponse: {
-      url: LIST_UPDATE,
-      method: "POST",
-      body: JSON.stringify({ internal_list_id: props.listId, name }),
-      force: true,
-    },
-  }),
-  updateListResponse: { value: null },
-  addItem: (problemId: string) => ({
-    problemListFetch: {
-      url: LIST_ITEM_ADD,
-      method: "POST",
-      body: JSON.stringify({
-        internal_list_id: props.listId,
-        problem_id: problemId,
-      }),
-      then: (): string => listGetUrl(props.listId),
-    },
-  }),
-  deleteItem: (problemId: string) => ({
-    problemListFetch: {
-      url: LIST_ITEM_DELETE,
-      method: "POST",
-      body: JSON.stringify({
-        internal_list_id: props.listId,
-        problem_id: problemId,
-      }),
-      then: (): string => listGetUrl(props.listId),
-    },
-  }),
-  updateItem: (problemId: string, memo: string) => ({
-    problemListFetch: {
-      url: LIST_ITEM_UPDATE,
-      method: "POST",
-      body: JSON.stringify({
-        internal_list_id: props.listId,
-        problem_id: problemId,
-        memo,
-      }),
-      then: (): string => listGetUrl(props.listId),
-    },
-  }),
-}))(InnerSingleProblemList);
-
 const ProblemEntry: React.FC<{
   item: ProblemListItem;
   problem: Problem | undefined;