51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { View } from 'react-native';
|
|
import { useQuery } from '../../Queries';
|
|
import SearchBarComponent from '../../components/V2/SearchBar';
|
|
import SearchHistory from '../../components/V2/SearchHistory';
|
|
import API from '../../API';
|
|
import LoadingComponent from '../../components/Loading';
|
|
import MusicListCC from '../../components/UI/MusicList';
|
|
|
|
export type searchProps = {
|
|
artist: number | undefined;
|
|
genre: number | undefined;
|
|
query: string;
|
|
};
|
|
|
|
const SearchView = () => {
|
|
const artistsQuery = useQuery(API.getAllArtists());
|
|
const [searchQuery, setSearchQuery] = React.useState({} as searchProps);
|
|
const rawResult = useQuery(API.searchSongs(searchQuery, ['artist']), {
|
|
enabled: !!searchQuery.query || !!searchQuery.artist || !!searchQuery.genre,
|
|
onSuccess() {
|
|
const artist =
|
|
artistsQuery?.data?.find(({ id }) => id == searchQuery.artist)?.name ??
|
|
'unknown artist';
|
|
searchQuery.query ? API.createSearchHistoryEntry(searchQuery.query, 'song') : null;
|
|
if (artist != 'unknown artist') API.createSearchHistoryEntry(artist, 'artist');
|
|
},
|
|
});
|
|
|
|
if (artistsQuery.isLoading) {
|
|
return <LoadingComponent />;
|
|
}
|
|
|
|
return (
|
|
<View style={{ display: 'flex', gap: 20, padding: 8 }}>
|
|
<SearchBarComponent onValidate={(query) => setSearchQuery(query)} />
|
|
{rawResult.isSuccess ? (
|
|
<MusicListCC
|
|
musics={rawResult.data}
|
|
isFetching={rawResult.isFetching}
|
|
refetch={rawResult.refetch}
|
|
/>
|
|
) : (
|
|
<SearchHistory />
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default SearchView;
|