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:
parent
e1340fa101
commit
7d160d55ea
|
|
@ -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,
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue