fix(annict): リクエストを100作品区切りにしてタイムアウトしないように

ci7lus · Oct 22, 2023 · 6c5da88 · 6c5da88
1 parent 30bb82d
commit 6c5da88
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 44 deletions.
diff --git a/gql-documents/annict/lib.gql b/gql-documents/annict/lib.gql
@@ -1,6 +1,6 @@
-query queryLibrary($states: [StatusState!], $after: String) {
+query queryLibrary($states: [StatusState!], $after: String, $amount: Int) {
   viewer {
-    libraryEntries(states: $states, after: $after) {
+    libraryEntries(states: $states, after: $after, first: $amount) {
       nodes {
         work {
           id

diff --git a/src/annictGql.ts b/src/annictGql.ts
@@ -1148,6 +1148,7 @@ export enum WorkOrderField {
 export type queryLibraryQueryVariables = Exact<{
   states: InputMaybe<Array<StatusState> | StatusState>
   after: InputMaybe<Scalars["String"]["input"]>
+  amount: InputMaybe<Scalars["Int"]["input"]>
 }>
 
 export type queryLibraryQuery = {
@@ -1229,9 +1230,9 @@ export type getMeQuery = {
 }
 
 export const queryLibraryDocument = gql`
-  query queryLibrary($states: [StatusState!], $after: String) {
+  query queryLibrary($states: [StatusState!], $after: String, $amount: Int) {
     viewer {
-      libraryEntries(states: $states, after: $after) {
+      libraryEntries(states: $states, after: $after, first: $amount) {
         nodes {
           work {
             id

diff --git a/src/components/CheckDiff.tsx b/src/components/CheckDiff.tsx
@@ -66,6 +66,10 @@ export const CheckDiff = ({
     )
   }, [checks, idMap, ignores])
   const handleReset = useCallback(() => {
+    const confirmed = confirm("Are you sure you want to reset?")
+    if (!confirmed) {
+      return
+    }
     setIgnores((ignores) => {
       setChecks((checks) => {
         const copiedChecks = new Set(checks)

diff --git a/src/components/DiffFetchButton.tsx b/src/components/DiffFetchButton.tsx
@@ -195,6 +195,7 @@ export const DiffFetchButton: React.FC<{
         const result: queryLibraryQuery = await annict.queryLibrary({
           after,
           states: statuses,
+          amount: 100,
         })
         const structedWorks =
           result.viewer?.libraryEntries?.nodes

diff --git a/src/components/DiffTable.tsx b/src/components/DiffTable.tsx
@@ -1,5 +1,5 @@
 import { ActionIcon, Anchor, Checkbox, Table, Text } from "@mantine/core"
-import { useCallback, useMemo } from "react"
+import { useCallback, useMemo, useState } from "react"
 import React from "react"
 import { Forbid } from "tabler-icons-react"
 import {
@@ -27,9 +27,13 @@ export const DiffTable = ({
   setIgnores: React.Dispatch<React.SetStateAction<number[]>>
   targetService: TargetService
 }) => {
+  const [ignoresSnapshot] = useState(ignores)
   const sortedMemo = useMemo(
-    () => diffs.sort((_, b) => (ignores.includes(b.work.annictId) ? -1 : 0)),
-    [diffs, ignores]
+    () =>
+      diffs.sort((_, b) =>
+        ignoresSnapshot.includes(b.work.annictId) ? -1 : 0
+      ),
+    [diffs, ignoresSnapshot]
   )
   const getRelationId = useCallback(
     (work: AnimeWork) => {
@@ -43,24 +47,24 @@ export const DiffTable = ({
   )
   return (
     <Table striped highlightOnHover>
-      <thead>
-        <tr>
-          <th>Include?</th>
-          <th>Title</th>
-          <th>Annict</th>
-          <th>{TARGET_SERVICE_NAMES[targetService]}</th>
-          <th>Ignore</th>
-        </tr>
-      </thead>
-      <tbody>
+      <Table.Thead>
+        <Table.Tr>
+          <Table.Th>Include?</Table.Th>
+          <Table.Th>Title</Table.Th>
+          <Table.Th>Annict</Table.Th>
+          <Table.Th>{TARGET_SERVICE_NAMES[targetService]}</Table.Th>
+          <Table.Th>Ignore</Table.Th>
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>
         {sortedMemo.map(({ work, target }) => (
-          <tr
+          <Table.Tr
             key={work.annictId}
             style={{
               opacity: ignores.includes(work.annictId) ? 0.5 : undefined,
             }}
           >
-            <td>
+            <Table.Td>
               <Checkbox
                 checked={checks.has(work.annictId)}
                 onClick={() => {
@@ -76,8 +80,8 @@ export const DiffTable = ({
                 }}
                 readOnly={true}
               />
-            </td>
-            <td>
+            </Table.Td>
+            <Table.Td>
               <Anchor
                 href={`https://annict.com/works/${work.annictId}`}
                 target="_blank"
@@ -101,14 +105,14 @@ export const DiffTable = ({
                       )}`}
                 </Anchor>
               </>
-            </td>
-            <td>
+            </Table.Td>
+            <Table.Td>
               <Text>
                 {WATCH_STATUS_MAP[work.status]}
                 {!work.noEpisodes && ` (${work.watchedEpisodeCount})`}
               </Text>
-            </td>
-            <td>
+            </Table.Td>
+            <Table.Td>
               <Text>
                 {target ? (
                   `${WATCH_STATUS_MAP[target.status]} (${
@@ -120,8 +124,8 @@ export const DiffTable = ({
                   </Text>
                 )}
               </Text>
-            </td>
-            <td>
+            </Table.Td>
+            <Table.Td>
               <ActionIcon
                 title="Ignore this entry"
                 onClick={() => {
@@ -146,10 +150,10 @@ export const DiffTable = ({
               >
                 <Forbid />
               </ActionIcon>
-            </td>
-          </tr>
+            </Table.Td>
+          </Table.Tr>
         ))}
-      </tbody>
+      </Table.Tbody>
     </Table>
   )
 }
diff --git a/src/components/MissingWorkTable.tsx b/src/components/MissingWorkTable.tsx
@@ -36,16 +36,16 @@ export const MissingWorkTable = ({
   )
   return (
     <Table>
-      <thead>
-        <tr>
-          <th>Title</th>
-          <th>Status</th>
-        </tr>
-      </thead>
-      <tbody>
+      <Table.Thead>
+        <Table.Tr>
+          <Table.Th>Title</Table.Th>
+          <Table.Th>Status</Table.Th>
+        </Table.Tr>
+      </Table.Thead>
+      <Table.Tbody>
         {works.map((work) => (
-          <tr key={work.annictId}>
-            <td>
+          <Table.Tr key={work.annictId}>
+            <Table.Td>
               <Anchor
                 href={`https://annict.com/works/${work.annictId}`}
                 target="_blank"
@@ -89,16 +89,16 @@ export const MissingWorkTable = ({
                   </List.Item>
                 )}
               </List>
-            </td>
-            <td>
+            </Table.Td>
+            <Table.Td>
               <Text>
                 {WATCH_STATUS_MAP[work.status]}
                 {!work.noEpisodes && ` (${work.watchedEpisodeCount})`}
               </Text>
-            </td>
-          </tr>
+            </Table.Td>
+          </Table.Tr>
         ))}
-      </tbody>
+      </Table.Tbody>
     </Table>
   )
 }