diff --git a/front/API.ts b/front/API.ts index af7597c..5df79e8 100644 --- a/front/API.ts +++ b/front/API.ts @@ -24,6 +24,7 @@ import * as yup from 'yup'; import { base64ToBlob } from './utils/base64ToBlob'; import { ImagePickerAsset } from 'expo-image-picker'; import { SongCursorInfos, SongCursorInfosHandler } from './models/SongCursorInfos'; +import { searchProps } from './views/V2/SearchView'; type AuthenticationInput = { username: string; password: string }; type RegistrationInput = AuthenticationInput & { email: string }; @@ -501,18 +502,18 @@ export default class API { * Search a song by its name * @param query the string used to find the songs */ - public static searchSongs(query: string): Query { - return { - key: ['search', 'song', query], - exec: () => - API.fetch( - { - route: `/search/songs/${query}`, - }, - { handler: ListHandler(SongHandler) } - ), - }; - } + // public static searchSongs(query: string): Query { + // return { + // key: ['search', 'song', query], + // exec: () => + // API.fetch( + // { + // route: `/search/songs/${query}`, + // }, + // { handler: ListHandler(SongHandler) } + // ), + // }; + // } /** * Search artists by name @@ -779,4 +780,18 @@ export default class API { public static getPartitionSvgUrl(songId: number): string { return `${API.baseUrl}/song/${songId}/assets/partition`; } -} + + public static searchSongs(query: searchProps): Query { + return { + key: ['search'], + exec: () => { + return API.fetch( + { + route: `/search/songs/`, + }, + { handler: ListHandler(SongHandler) } + ) + } + } + } +} \ No newline at end of file diff --git a/front/components/V2/SearchBar.tsx b/front/components/V2/SearchBar.tsx index 0ec2e9f..931c67c 100644 --- a/front/components/V2/SearchBar.tsx +++ b/front/components/V2/SearchBar.tsx @@ -8,6 +8,7 @@ import { useQuery } from '../../Queries'; import API from '../../API'; import Genre from '../../models/Genre'; import { translate } from '../../i18n/i18n'; +import { searchProps } from '../../views/V2/SearchView'; type ArtistChipProps = { name: string; @@ -40,7 +41,7 @@ const ArtistChipComponent = (props: ArtistChipProps) => { ); }; -const SearchBarComponent = () => { +const SearchBarComponent = (props: { onValidate: (searchData: searchProps) => void }) => { const [query, setQuery] = React.useState(''); const [genre, setGenre] = React.useState({} as Genre | undefined); const [artist, setArtist] = React.useState(''); @@ -49,6 +50,18 @@ const SearchBarComponent = () => { const screenSize = useBreakpointValue({ base: 'small', md: 'big' }); const isMobileView = screenSize == 'small'; + const handleValidate = () => { + // Construct an object with the data you want to pass to the parent component + const searchData = { + query: "test", + artist: 1, + genre: 1, + }; + + // Call the parent's onValidate callback with the searchData + props.onValidate(searchData); + }; + return ( { flexShrink: 0, flexGrow: 0, }} + onPress={handleValidate} /> diff --git a/front/views/V2/SearchView.tsx b/front/views/V2/SearchView.tsx index ca52594..1194d1e 100644 --- a/front/views/V2/SearchView.tsx +++ b/front/views/V2/SearchView.tsx @@ -1,13 +1,48 @@ import React from 'react'; import ScaffoldCC from '../../components/UI/ScaffoldCC'; import SearchBarComponent from '../../components/V2/SearchBar'; -import { RouteProps } from '../../Navigation'; +import { RouteProps, useNavigation } from '../../Navigation'; +import MusicList from '../../components/UI/MusicList'; +import { useQuery } from '../../Queries'; +import API from '../../API'; +import Song from '../../models/Song'; +import { MusicItemType } from '../../components/UI/MusicItem'; + +export type searchProps = { + artist: number, + genre: number, + query: string, +} // eslint-disable-next-line @typescript-eslint/ban-types const SearchView = (props: RouteProps<{}>) => { + const navigation = useNavigation(); + const [searchResult, setSearchResult] = React.useState([] as MusicItemType[]); + + const handleSearch = async (searchQuery: searchProps) => { + const rawResult = useQuery(API.getAllSongs()); + const result = + rawResult.data?.map((song) => ({ + artist: song.artist!.name, + song: song.name, + image: song.cover, + level: 42, + lastScore: 42, + bestScore: 42, + liked: true, + onLike: () => { + console.log('onLike'); + }, + onPlay: () => navigation.navigate('Play', { songId: song.id }), + })) ?? []; + setSearchResult(result ?? []); + } + + return ( - + + ); };