feat(search): exchange between search bar and searchView. paella

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<Song[]> {
-		return {
-			key: ['search', 'song', query],
-			exec: () =>
-				API.fetch(
-					{
-						route: `/search/songs/${query}`,
-					},
-					{ handler: ListHandler(SongHandler) }
-				),
-		};
-	}
+	// public static searchSongs(query: string): Query<Song[]> {
+	// 	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<Song[]> {
+        return {
+            key: ['search'],
+            exec: () => {
+                return API.fetch(
+                    {
+                        route: `/search/songs/`,
+                    },
+                    { handler: ListHandler(SongHandler) }
+                )
+            }
+        }
+    }
+}

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 (
 		<View>
 			<View
@@ -112,6 +125,7 @@ const SearchBarComponent = () => {
 							flexShrink: 0,
 							flexGrow: 0,
 						}}
+						onPress={handleValidate}
 					/>
 				</View>
 			</View>

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 (
 		<ScaffoldCC routeName={props.route.name}>
-			<SearchBarComponent />
+			<SearchBarComponent onValidate={handleSearch} />
+			<MusicList initialMusics={searchResult} />
 		</ScaffoldCC>
 	);
 };