fix: 移除对 @tanstack/react-query 的依赖,使用项目现有 hooks 模式

项目未安装 @tanstack/react-query,将 useWorksSearch hook 改为使用项目现有的模式:
- 使用 useState 管理状态
- 使用 useCallback 封装逻辑
- 使用 useEffect 自动执行搜索
- 使用 handleError 统一错误处理

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
imeepos 2026-01-23 19:26:24 +08:00
parent e1340fa101
commit 7d160d55ea
1 changed files with 54 additions and 37 deletions

View File

@ -2,17 +2,19 @@
* TDD Phase 2: GREEN - Minimal code to pass tests
*
* This Hook implements works search functionality:
* - Uses @tanstack/react-query for data fetching
* - Supports keyword search
* - Supports category filter
* - Supports pagination
* - Only executes query when keyword is provided
*/
import { useQuery } from '@tanstack/react-query'
import { root } from '@repo/core'
import { TemplateGenerationController } from '@repo/sdk'
import { useCallback } from 'react'
import { useCallback, useEffect, useState } from 'react'
import { type ApiError } from '@/lib/types'
import { handleError } from './use-error'
// Type definitions
export interface UseWorksSearchParams {
@ -45,7 +47,7 @@ export interface WorksSearchResponse {
* Hook for searching works with keyword and category filtering
*
* @param params - Search parameters including keyword, category, page, and limit
* @returns Query result with data, loading state, error, and refetch function
* @returns Object with data, loading state, error, and refetch function
*
* @example
* ```tsx
@ -58,47 +60,62 @@ export interface WorksSearchResponse {
* ```
*/
export function useWorksSearch(params: UseWorksSearchParams) {
const [loading, setLoading] = useState(false)
const [error, setError] = useState<ApiError | null>(null)
const [data, setData] = useState<WorksSearchResponse | undefined>(undefined)
const { keyword, category, page = 1, limit = 20 } = params
// Build query key - "全部" category should not be included
const queryKey = [
'worksSearch',
keyword,
category === '全部' ? undefined : category,
page,
limit,
] as const
const execute = useCallback(async () => {
// Only execute query when keyword has content
const trimmedKeyword = keyword?.trim() || ''
if (!trimmedKeyword) {
setData(undefined)
setError(null)
return { data: undefined, error: null }
}
// Build API params - only include category if it's not "全部"
const apiParams = {
keyword,
...(category && category !== '全部' && { category }),
page,
limit,
}
setLoading(true)
setError(null)
// Query function
const queryFn = useCallback(async (): Promise<WorksSearchResponse> => {
const controller = root.get(TemplateGenerationController)
const result = await controller.list(apiParams)
return result as WorksSearchResponse
// Build API params - only include category if it's not "全部"
const apiParams = {
keyword: trimmedKeyword,
...(category && category !== '全部' && { category }),
page,
limit,
}
const templateGeneration = root.get(TemplateGenerationController)
const { data: result, error: err } = await handleError(async () =>
await templateGeneration.list(apiParams)
)
if (err) {
setError(err)
setLoading(false)
return { data: undefined, error: err }
}
setData(result as WorksSearchResponse)
setLoading(false)
return { data: result as WorksSearchResponse, error: null }
}, [keyword, category, page, limit])
// Execute query only when keyword has content
const trimmedKeyword = keyword?.trim() || ''
const isEnabled = !!trimmedKeyword
// Auto-execute search when params change
useEffect(() => {
execute()
}, [execute])
const query = useQuery({
queryKey,
queryFn,
enabled: isEnabled,
})
const refetch = useCallback(() => {
return execute()
}, [execute])
return {
data: query.data,
works: query.data?.data || [],
isLoading: query.isLoading,
error: query.error,
refetch: query.refetch,
data,
works: data?.data || [],
isLoading: loading,
error,
refetch,
}
}