From a2e5664a678efd2e0c968d4eae87b323a5ef4c25 Mon Sep 17 00:00:00 2001 From: fishshi <2855691008@qq.com> Date: Mon, 23 Dec 2024 16:12:50 +0800 Subject: [PATCH] Use local state to make GameAdderSearch smooth --- package-lock.json | 4 +- src/renderer/src/pages/GameAdder/GameList.tsx | 2 +- src/renderer/src/pages/GameAdder/Search.tsx | 113 ++++++++---------- src/renderer/src/pages/GameAdder/store.ts | 23 ++-- 4 files changed, 61 insertions(+), 81 deletions(-) diff --git a/package-lock.json b/package-lock.json index ca85877..e9c1266 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "vnite", - "version": "2.2.0", + "version": "2.2.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "vnite", - "version": "2.2.0", + "version": "2.2.1", "hasInstallScript": true, "dependencies": { "@electron-toolkit/preload": "^3.0.1", diff --git a/src/renderer/src/pages/GameAdder/GameList.tsx b/src/renderer/src/pages/GameAdder/GameList.tsx index 283f83b..e95eb2f 100644 --- 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 {
- + diff --git a/src/renderer/src/pages/GameAdder/Search.tsx b/src/renderer/src/pages/GameAdder/Search.tsx index 647e757..f1744f6 100644 --- 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(null) const gameIdInput = React.useRef(null) React.useEffect(() => { - setTimeout(() => { - if (gameNameInput.current) { - gameNameInput.current.focus() - } - }) + setTimeout(() => gameNameInput.current?.focus()) }, []) async function searchGames(): Promise { - if (!name) { + if (!inputName) { toast.warning('请输入游戏名称') return } - try { - type GameList = { - id: string - name: string - releaseDate: string - developers: string[] - }[] - - toast.promise( - (async (): Promise => { - 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 => { + 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 { - if (!id) { + if (!inputId) { toast.warning('请输入游戏ID') return } - try { - toast.promise( - (async (): Promise => { - 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 => { + 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 (
@@ -120,12 +103,13 @@ export function Search({ className }: { className?: string }): JSX.Element {
+
游戏名称
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 { />
+
游戏ID
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 index 2bd4946..4c35a7b 100644 --- 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[]