1import React, {memo, useEffect, useState} from 'react'; 2import {useAtomValue} from 'jotai'; 3import {ISearchResult, queryAtom, searchResultsAtom} from '../../store/atoms'; 4import {renderMap} from './results'; 5import useSearch from '../../hooks/useSearch'; 6import Loading from '@/components/base/loading'; 7import {FlatList, StyleSheet} from 'react-native'; 8import ThemeText from '@/components/base/themeText'; 9import {RequestStateCode} from '@/constants/commonConst'; 10import ListLoading from '@/components/base/listLoading'; 11import Empty from '@/components/base/empty'; 12import ListReachEnd from '@/components/base/listReachEnd'; 13 14interface IResultWrapperProps< 15 T extends ICommon.SupportMediaType = ICommon.SupportMediaType, 16> { 17 tab: T; 18 pluginHash: string; 19 pluginName: string; 20 searchResult: ISearchResult<T>; 21} 22function ResultWrapper(props: IResultWrapperProps) { 23 const {tab, pluginHash, searchResult, pluginName} = props; 24 const search = useSearch(); 25 const [searchState, setSearchState] = useState<RequestStateCode>( 26 searchResult?.state ?? RequestStateCode.IDLE, 27 ); 28 const query = useAtomValue(queryAtom); 29 30 const ResultComponent = renderMap[tab]!; 31 const data: any = searchResult?.data ?? []; 32 33 useEffect(() => { 34 if (searchState === RequestStateCode.IDLE) { 35 search(query, 1, tab, pluginHash); 36 } 37 }, []); 38 39 useEffect(() => { 40 setSearchState(searchResult?.state ?? RequestStateCode.IDLE); 41 }, [searchResult]); 42 43 const renderItem = ({item, index}: any) => ( 44 <ResultComponent 45 item={item} 46 index={index} 47 pluginHash={pluginHash}></ResultComponent> 48 ); 49 50 return searchState === RequestStateCode.PENDING_FP ? ( 51 <Loading></Loading> 52 ) : ( 53 <FlatList 54 extraData={searchState} 55 style={style.list} 56 ListEmptyComponent={() => <Empty></Empty>} 57 ListFooterComponent={() => 58 searchState === RequestStateCode.PENDING ? ( 59 <ListLoading></ListLoading> 60 ) : searchState === RequestStateCode.FINISHED ? ( 61 <ListReachEnd></ListReachEnd> 62 ) : ( 63 <></> 64 ) 65 } 66 data={data} 67 refreshing={false} 68 onRefresh={() => { 69 search(query, 1, tab, pluginHash); 70 }} 71 onEndReached={() => { 72 (searchState === RequestStateCode.PARTLY_DONE || 73 searchState === RequestStateCode.IDLE) && 74 search(undefined, undefined, tab, pluginHash); 75 }} 76 renderItem={renderItem}></FlatList> 77 ); 78} 79const style = StyleSheet.create({ 80 list: { 81 flex: 1, 82 }, 83}); 84 85export default memo(ResultWrapper); 86