add: serializer and deserializer for virtual contest fetcher

Author: kenkoooo

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

@@ -295,25 +295,45 @@ export const useVirtualContestSubmissions = (
 ) => {
   const PROBLEM_CHUNK_SIZE = 10;
   const USER_CHUNK_SIZE = 10;
-  const requestCount =
-    Math.ceil(users.length / USER_CHUNK_SIZE) *
-    Math.ceil(problems.length / PROBLEM_CHUNK_SIZE);
-
-  const refreshInterval = enableAutoRefresh
-    ? Math.max(1, requestCount / 10) * 60_000
-    : 1_000_000_000;
+  const SEPARATOR = "###";
 
-  const userChunks = toChunks(users, USER_CHUNK_SIZE);
-  const problemChunks = toChunks(problems, PROBLEM_CHUNK_SIZE);
   const singleFetch = async (users: UserId[], problems: ProblemId[]) => {
     const userList = users.join(",");
     const problemList = problems.join(",");
     const url = `${ATCODER_API_URL}/v3/users_and_time?users=${userList}&problems=${problemList}&from=${fromSecond}&to=${toSecond}`;
     const submissions = await fetchTypedArray(url, isSubmission);
     return submissions.filter((submission) => isValidResult(submission.result));
   };
-
-  const fetcher = async () => {
+  const serialize = (users: UserId[], problems: ProblemId[]) => {
+    const sortedUsers = Array.from(users);
+    sortedUsers.sort();
+    const userKey = sortedUsers.join(",");
+
+    const sortedProblems = Array.from(problems);
+    sortedProblems.sort();
+    const problemKey = sortedProblems.join(",");
+
+    return (
+      "useVirtualContestSubmissions" +
+      SEPARATOR +
+      userKey +
+      SEPARATOR +
+      problemKey
+    );
+  };
+  const deserialize = (key: string) => {
+    const keys = key.split("###");
+    const userKey = keys[1];
+    const problemKey = keys[2];
+
+    const users = userKey.split(",");
+    const problems = problemKey.split(",");
+    return { users, problems };
+  };
+  const fetcher = async (key: string) => {
+    const { users, problems } = deserialize(key);
+    const userChunks = toChunks(users, USER_CHUNK_SIZE);
+    const problemChunks = toChunks(problems, PROBLEM_CHUNK_SIZE);
     const promises = userChunks
       .flatMap((users) =>
         problemChunks.map((problems) => ({ users, problems }))
@@ -323,20 +343,15 @@ export const useVirtualContestSubmissions = (
     return submissionChunks.flatMap((x) => x);
   };
 
-  const custom_key =
-    "useVirtualContestSubmissions&" +
-    (users.length === 0
-      ? "empty"
-      : users.length === 1
-      ? users[0]
-      : "multiuser");
-  return useSWRData(
-    custom_key,
-    () => (users.length > 0 ? fetcher() : Promise.resolve([])),
-    {
-      refreshInterval,
-    }
-  );
+  const requestCount =
+    Math.ceil(users.length / USER_CHUNK_SIZE) *
+    Math.ceil(problems.length / PROBLEM_CHUNK_SIZE);
+  const refreshInterval = enableAutoRefresh
+    ? Math.max(1, requestCount / 10) * 60_000
+    : 1_000_000_000;
+
+  const customKey = serialize(users, problems);
+  return useSWRData(customKey, fetcher, { refreshInterval });
 };
 
 export const useRecentSubmissions = () => {