feat(search): proper data passing through handler
This commit is contained in:
@@ -43,7 +43,7 @@ const ArtistChipComponent = (props: ArtistChipProps) => {
|
|||||||
|
|
||||||
const SearchBarComponent = (props: { onValidate: (searchData: searchProps) => void }) => {
|
const SearchBarComponent = (props: { onValidate: (searchData: searchProps) => void }) => {
|
||||||
const [query, setQuery] = React.useState('');
|
const [query, setQuery] = React.useState('');
|
||||||
const [genre, setGenre] = React.useState({} as Genre | undefined);
|
const [genre, setGenre] = React.useState('');
|
||||||
const [artist, setArtist] = React.useState('');
|
const [artist, setArtist] = React.useState('');
|
||||||
const artistsQuery = useQuery(API.getAllArtists());
|
const artistsQuery = useQuery(API.getAllArtists());
|
||||||
const genresQuery = useQuery(API.getAllGenres());
|
const genresQuery = useQuery(API.getAllGenres());
|
||||||
@@ -53,9 +53,9 @@ const SearchBarComponent = (props: { onValidate: (searchData: searchProps) => vo
|
|||||||
const handleValidate = () => {
|
const handleValidate = () => {
|
||||||
// Construct an object with the data you want to pass to the parent component
|
// Construct an object with the data you want to pass to the parent component
|
||||||
const searchData = {
|
const searchData = {
|
||||||
query: "test",
|
query: query,
|
||||||
artist: 1,
|
artist: artistsQuery.data?.find((a) => a.name === artist)?.id ?? undefined,
|
||||||
genre: 1,
|
genre: genresQuery.data?.find((g) => g.name === genre)?.id ?? undefined,
|
||||||
};
|
};
|
||||||
|
|
||||||
// Call the parent's onValidate callback with the searchData
|
// Call the parent's onValidate callback with the searchData
|
||||||
@@ -169,16 +169,10 @@ const SearchBarComponent = (props: { onValidate: (searchData: searchProps) => vo
|
|||||||
</ScrollView>
|
</ScrollView>
|
||||||
<View>
|
<View>
|
||||||
<Select
|
<Select
|
||||||
selectedValue={genre?.name}
|
selectedValue={genre}
|
||||||
placeholder={translate('genreFilter')}
|
placeholder={translate('genreFilter')}
|
||||||
accessibilityLabel="Genre"
|
accessibilityLabel="Genre"
|
||||||
onValueChange={(itemValue) => {
|
onValueChange={(itemValue) => {setGenre(itemValue)}}
|
||||||
setGenre(
|
|
||||||
genresQuery.data?.find((genre) => {
|
|
||||||
genre.name == itemValue;
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<Select.Item label={translate('emptySelection')} value="" />
|
<Select.Item label={translate('emptySelection')} value="" />
|
||||||
{genresQuery.data?.map((data, index) => (
|
{genresQuery.data?.map((data, index) => (
|
||||||
|
|||||||
@@ -9,8 +9,8 @@ import Song from '../../models/Song';
|
|||||||
import { MusicItemType } from '../../components/UI/MusicItem';
|
import { MusicItemType } from '../../components/UI/MusicItem';
|
||||||
|
|
||||||
export type searchProps = {
|
export type searchProps = {
|
||||||
artist: number,
|
artist: number | undefined,
|
||||||
genre: number,
|
genre: number | undefined,
|
||||||
query: string,
|
query: string,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user