106 lines
3.4 KiB
TypeScript
106 lines
3.4 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import {
|
|
View,
|
|
StyleSheet,
|
|
StatusBar as RNStatusBar,
|
|
RefreshControl,
|
|
} from 'react-native'
|
|
import { StatusBar } from 'expo-status-bar'
|
|
import { SafeAreaView } from 'react-native-safe-area-context'
|
|
import { useRouter, useLocalSearchParams } from 'expo-router'
|
|
|
|
import SearchResultsGrid from '@/components/SearchResultsGrid'
|
|
import SearchBar from '@/components/SearchBar'
|
|
import { useTemplates, useSearchHistory } from '@/hooks'
|
|
|
|
export default function SearchResultsScreen() {
|
|
const router = useRouter()
|
|
const params = useLocalSearchParams()
|
|
const [searchText, setSearchText] = useState((params.q as string) || '')
|
|
const [refreshing, setRefreshing] = useState(false)
|
|
|
|
// 使用 useTemplates hook 进行搜索
|
|
const { templates, loading, error, execute, refetch } = useTemplates()
|
|
|
|
// 使用搜索历史 hook
|
|
const { addToHistory } = useSearchHistory()
|
|
|
|
// 当搜索关键词变化时，执行搜索
|
|
useEffect(() => {
|
|
if (params.q && typeof params.q === 'string') {
|
|
const query = params.q.trim()
|
|
setSearchText(query)
|
|
if (query) {
|
|
// 执行搜索
|
|
execute({ search: query, limit: 50, sortBy: 'createdAt', sortOrder: 'desc', page: 1 })
|
|
// 添加到搜索历史
|
|
addToHistory(query)
|
|
}
|
|
}
|
|
}, [params.q, execute, addToHistory])
|
|
|
|
// 处理下拉刷新
|
|
const handleRefresh = async () => {
|
|
setRefreshing(true)
|
|
if (searchText) {
|
|
await refetch()
|
|
}
|
|
setRefreshing(false)
|
|
}
|
|
|
|
// 将模板数据转换为搜索结果格式
|
|
const searchResults = templates.map(template => ({
|
|
id: template.id,
|
|
title: template.title || template.titleEn || '',
|
|
image: { uri: template.previewUrl || template.coverImageUrl || '' },
|
|
previewUrl: template.previewUrl,
|
|
coverImageUrl: template.coverImageUrl,
|
|
aspectRatio: template.aspectRatio ? parseFloat(template.aspectRatio as string) : undefined,
|
|
}))
|
|
|
|
return (
|
|
<SafeAreaView style={styles.container} edges={['top']}>
|
|
<StatusBar style="light" />
|
|
<RNStatusBar barStyle="light-content" />
|
|
|
|
<SearchBar
|
|
searchText={searchText}
|
|
onSearchTextChange={setSearchText}
|
|
onSearch={(text) => {
|
|
router.push({
|
|
pathname: '/searchTemplate',
|
|
params: { q: text, focus: 'true' },
|
|
})
|
|
}}
|
|
onBack={() => router.back()}
|
|
readOnly={true}
|
|
onInputPress={() => {
|
|
router.push({
|
|
pathname: '/searchTemplate',
|
|
params: { q: searchText, focus: 'true' },
|
|
})
|
|
}}
|
|
onClearPress={() => {
|
|
router.push({
|
|
pathname: '/searchTemplate',
|
|
params: { q: '', focus: 'true' },
|
|
})
|
|
}}
|
|
marginBottom={12}
|
|
/>
|
|
|
|
<SearchResultsGrid
|
|
results={searchResults}
|
|
loading={loading}
|
|
/>
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#090A0B',
|
|
},
|
|
})
|