feat(search view v2): update API.searchSongs

front/API.ts

@@ -705,6 +705,7 @@ export default class API {
 	public static searchSongs(query: searchProps): Query<Song[]> {
 		const queryParams: string[] = [];
 
+		if (query.query) queryParams.push(`q=${encodeURIComponent(query.query)}`);
 		if (query.artist) queryParams.push(`artistId=${query.artist}`);
 		if (query.genre) queryParams.push(`genreId=${query.genre}`);
 
@@ -715,13 +716,13 @@ export default class API {
 			exec: () => {
 				return API.fetch(
 					{
-						route: `/search/songs/${query.query}${queryString}`,
+						route: `/search/songs${queryString}`,
 					},
 					{ handler: ListHandler(SongHandler) }
 				);
 			},
 		};
-    }
+	}
 
 	public static getPartitionMelodyUrl(songId: number): string {
 		return `${API.baseUrl}/song/${songId}/assets/melody`;

front/components/V2/SearchBar.tsx

@@ -150,7 +150,7 @@ const SearchBarComponent = (props: { onValidate: (searchData: searchProps) => vo
 										props.onValidate({
 											artist: artist.id,
 											genre:
-												genresQuery.data?.find((g) => g.name === genre)
+												genresQuery.data?.find((a) => a.name === genre)
 													?.id ?? undefined,
 											query: query,
 										});
@@ -167,6 +167,15 @@ const SearchBarComponent = (props: { onValidate: (searchData: searchProps) => vo
 						accessibilityLabel="Genre"
 						onValueChange={(itemValue) => {
 							setGenre(itemValue);
+							props.onValidate({
+								artist:
+									artistsQuery.data?.find((a) => a.name === artist)?.id ??
+									undefined,
+								genre:
+									genresQuery.data?.find((g) => g.name === itemValue)?.id ??
+									undefined,
+								query: query,
+							});
 						}}
 					>
 						<Select.Item label={translate('emptySelection')} value="" />

front/i18n/Translations.ts

@@ -307,7 +307,7 @@ export const en = {
 	leaderBoardHeading: 'These are the best players',
 	leaderBoardHeadingFull:
 		'The players having the best scores, thanks to their exceptional accuracy, are highlighted here.',
-	emptySelection: 'None,',
+	emptySelection: 'None',
 	gamesPlayed: 'Games Played',
 	metronome: 'Metronome',
 	loading: 'Loading... Please Wait',

front/views/V2/SearchView.tsx

@@ -94,6 +94,7 @@ const SearchView = () => {
 	const artistsQuery = useQuery(API.getAllArtists());
 	const [searchQuery, setSearchQuery] = React.useState({} as searchProps);
 	const rawResult = useQuery(API.searchSongs(searchQuery), {
+		enabled: !!searchQuery.query || !!searchQuery.artist || !!searchQuery.genre,
 		onSuccess() {
 			const artist =
 				artistsQuery?.data?.find(({ id }) => id == searchQuery.artist)?.name ??
@@ -142,10 +143,10 @@ const SearchView = () => {
 	}
 
 	return (
-			<View style={{ display: 'flex', gap: 20 }}>
+		<View style={{ display: 'flex', gap: 20 }}>
-				<SearchBarComponent onValidate={(query) => setSearchQuery(query)} />
+			<SearchBarComponent onValidate={(query) => setSearchQuery(query)} />
-				{result.length != 0 ? <MusicListNoOpti list={result} /> : <SearchHistory />}
+			{result.length != 0 ? <MusicListNoOpti list={result} /> : <SearchHistory />}
-			</View>
+		</View>
 	);
 };