Merge pull request #111 from fishshi/fix/OptimizeGameAdder

fix: Smoother GameAdderSearcher
ximu3 · Dec 23, 2024 · b58a489 · b58a489
2 parents 12d3871 + a2e5664
commit b58a489
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 81 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/renderer/src/pages/GameAdder/GameList.tsx b/src/renderer/src/pages/GameAdder/GameList.tsx
@@ -14,7 +14,7 @@ export function GameList(): JSX.Element {
         <Card className={cn('grow pt-3')}>
           <CardContent className="h-full">
             <div className="w-full">
-              <ScrollArea className={cn('h-[54vh]', '3xl:h-[60vh]', 'sm:h-[48vh]')}>
+              <ScrollArea className={cn('h-[calc(84vh-230px)]')}>
                 <Table>
                   <TableHeader className={cn('bg-card')}>
                     <TableRow>

diff --git a/src/renderer/src/pages/GameAdder/Search.tsx b/src/renderer/src/pages/GameAdder/Search.tsx
@@ -11,7 +11,7 @@ import {
 } from '@ui/select'
 import { Input } from '@ui/input'
 import { toast } from 'sonner'
-import { useGameAdderStore } from './store'
+import { GameList, useGameAdderStore } from './store'
 import { ipcInvoke } from '~/utils'
 import { useNavigate } from 'react-router-dom'
 import React from 'react'
@@ -20,84 +20,67 @@ export function Search({ className }: { className?: string }): JSX.Element {
   const { dataSource, setDataSource, name, setName, id, setId, setGameList } = useGameAdderStore()
   const navigate = useNavigate()
 
+  const [inputName, setInputName] = React.useState(name)
+  React.useEffect(() => {
+    inputName !== name && setInputName(name)
+  }, [name])
+  const [inputId, setInputId] = React.useState(id)
+  React.useEffect(() => {
+    inputId !== id && setInputId(id)
+  }, [id])
+
   const gameNameInput = React.useRef<HTMLInputElement>(null)
   const gameIdInput = React.useRef<HTMLInputElement>(null)
   React.useEffect(() => {
-    setTimeout(() => {
-      if (gameNameInput.current) {
-        gameNameInput.current.focus()
-      }
-    })
+    setTimeout(() => gameNameInput.current?.focus())
   }, [])
 
   async function searchGames(): Promise<void> {
-    if (!name) {
+    if (!inputName) {
       toast.warning('请输入游戏名称')
       return
     }
-    try {
-      type GameList = {
-        id: string
-        name: string
-        releaseDate: string
-        developers: string[]
-      }[]
-
-      toast.promise(
-        (async (): Promise<GameList> => {
-          const result = (await ipcInvoke('search-games', dataSource, name)) as GameList
-          setGameList(result)
-          if (result.length === 0) {
-            toast.error('未找到游戏')
-            return result
-          }
-          navigate('/games')
-          return result
-        })(),
-        {
-          loading: '搜索游戏中...',
-          success: (data) => `找到 ${data.length} 个游戏`,
-          error: (err) => `搜索失败: ${err.message}`
+    toast.promise(
+      (async (): Promise<GameList> => {
+        const result = (await ipcInvoke('search-games', dataSource, inputName)) as GameList
+        if (result.length === 0) {
+          throw new Error('未找到游戏')
         }
-      )
-    } catch (error) {
-      if (error instanceof Error) {
-        toast.error(`搜索游戏失败: ${error.message}`)
-      } else {
-        toast.error(`搜索游戏失败: ${error}`)
+        setGameList(result)
+        setName(inputName)
+        navigate('/games')
+        return result
+      })(),
+      {
+        loading: '搜索游戏中...',
+        success: (data) => `找到 ${data.length} 个游戏`,
+        error: (err) => `搜索失败: ${err.message}`
       }
-    }
+    )
   }
+
   async function recognizeGame(): Promise<void> {
-    if (!id) {
+    if (!inputId) {
       toast.warning('请输入游戏ID')
       return
     }
-    try {
-      toast.promise(
-        (async (): Promise<void> => {
-          const result = await ipcInvoke('check-game-exists', dataSource, id)
-          if (!result) {
-            toast.error('无效ID')
-            return
-          }
-          setId(id)
-          navigate('/screenshots')
-        })(),
-        {
-          loading: '识别游戏中...',
-          success: '识别游戏成功',
-          error: (err) => `识别游戏失败: ${err.message}`
+    toast.promise(
+      (async (): Promise<void> => {
+        const result = await ipcInvoke('check-game-exists', dataSource, inputId)
+        if (!result) {
+          throw new Error('无效ID')
         }
-      )
-    } catch (error) {
-      if (error instanceof Error) {
-        toast.error(`识别游戏失败: ${error.message}`)
-      } else {
-        toast.error(`识别游戏失败: ${error}`)
+        setId(inputId)
+        navigate('/screenshots')
+      })(),
+      {
+        loading: '识别游戏中...',
+        success: '识别游戏成功',
+        error: (err) => `识别游戏失败: ${err.message}`
       }
-    }
+    )
   }
+
   return (
     <div className={cn('w-[36vw] h-auto', '3xl:w-[30vw]', className)}>
       <div className={cn('flex flex-col w-full h-full gap-3 p-3 justify-center')}>
@@ -120,12 +103,13 @@ export function Search({ className }: { className?: string }): JSX.Element {
             </Select>
           </div>
         </div>
+
         <div className={cn('flex flex-row gap-3 items-center justify-start')}>
           <div className={cn('flex-shrink-0')}>游戏名称</div>
           <Input
             ref={gameNameInput}
-            value={name}
-            onChange={(e) => setName(e.target.value)}
+            value={inputName}
+            onChange={(e) => setInputName(e.target.value)}
             placeholder="请输入游戏名称"
             onKeyDown={(e) => {
               if (e.key === 'Enter') searchGames()
@@ -134,12 +118,13 @@ export function Search({ className }: { className?: string }): JSX.Element {
           />
           <Button onClick={searchGames}>搜索</Button>
         </div>
+
         <div className={cn('flex flex-row gap-3 items-center justify-start')}>
           <div className={cn('flex-shrink-0 mr-4')}>游戏ID</div>
           <Input
             ref={gameIdInput}
-            value={id}
-            onChange={(e) => setId(e.target.value)}
+            value={inputId}
+            onChange={(e) => setInputId(e.target.value)}
             placeholder="请输入游戏ID"
             onKeyDown={(e) => {
               if (e.key === 'Enter') recognizeGame()

diff --git a/src/renderer/src/pages/GameAdder/store.ts b/src/renderer/src/pages/GameAdder/store.ts
@@ -3,6 +3,13 @@ import { toast } from 'sonner'
 
 export type DataSource = 'vndb' | 'igdb' | 'steam' | 'bangumi'
 
+export type GameList = {
+  id: string
+  name: string
+  releaseDate: string
+  developers: string[]
+}[]
+
 interface GameAdderState {
   isOpen: boolean
   setIsOpen: (isOpen: boolean) => void
@@ -14,20 +21,8 @@ interface GameAdderState {
   setDataSource: (source: DataSource) => void
   name: string
   setName: (name: string) => void
-  gameList: {
-    id: string
-    name: string
-    releaseDate: string
-    developers: string[]
-  }[]
-  setGameList: (
-    gameList: {
-      id: string
-      name: string
-      releaseDate: string
-      developers: string[]
-    }[]
-  ) => void
+  gameList: GameList
+  setGameList: (gameList: GameList) => void
   id: string
   setId: (id: string) => void
   screenshotList: string[]