From 4ba4303b1e1221deedfb2cc6286069ff7ef20c6f Mon Sep 17 00:00:00 2001
From: Amaury Danis Cousandier <amaury.danis-cousandier@epitech.eu>
Date: Sun, 14 Jan 2024 16:13:14 +0100
Subject: [PATCH] fix(../V2/SearchView): actual music list used + minor fixes

---
 front/API.ts                      |  5 ++--
 front/components/V2/SearchBar.tsx |  6 ++---
 front/views/V2/SearchView.tsx     | 43 +++----------------------------
 3 files changed, 10 insertions(+), 44 deletions(-)

diff --git a/front/API.ts b/front/API.ts
index 80e2298..25b9bfa 100644
--- a/front/API.ts
+++ b/front/API.ts
@@ -702,17 +702,18 @@ export default class API {
 		return `${API.baseUrl}/song/${songId}/assets/partition`;
 	}
 
-	public static searchSongs(query: searchProps): Query<Song[]> {
+	public static searchSongs(query: searchProps, include?: SongInclude[]): 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}`);
+		if (include) queryParams.push(`include=${include.join(',')}`)
 
 		const queryString = queryParams.length > 0 ? `?${queryParams.join('&')}` : '';
 
 		return {
-			key: ['search', query.query, query.artist, query.genre],
+			key: ['search', query.query, query.artist, query.genre, include],
 			exec: () => {
 				return API.fetch(
 					{
diff --git a/front/components/V2/SearchBar.tsx b/front/components/V2/SearchBar.tsx
index 2979d7b..8f47632 100644
--- a/front/components/V2/SearchBar.tsx
+++ b/front/components/V2/SearchBar.tsx
@@ -29,9 +29,9 @@ const ArtistChipComponent = (props: ArtistChipProps) => {
 					}}
 				>
 					{props.selected ? (
-						<CloseCircle size="32" color={'#ED4A51'} />
+						<CloseCircle size="24" color={'#ED4A51'} />
 					) : (
-						<AddSquare size="32" color={'#6075F9'} />
+						<AddSquare size="24" color={'#6075F9'} />
 					)}
 					<Text>{props.name}</Text>
 				</View>
@@ -82,7 +82,7 @@ const SearchBarComponent = (props: { onValidate: (searchData: searchProps) => vo
 						maxWidth: '100%',
 					}}
 				>
-					{artist && (
+					{!!artist && (
 						<ArtistChipComponent
 							onPress={() => setArtist('')}
 							name={artist}
diff --git a/front/views/V2/SearchView.tsx b/front/views/V2/SearchView.tsx
index d2ebc56..cfaada9 100644
--- a/front/views/V2/SearchView.tsx
+++ b/front/views/V2/SearchView.tsx
@@ -12,6 +12,7 @@ import API from '../../API';
 import LoadingComponent from '../../components/Loading';
 import ErrorView from '../ErrorView';
 import { useLikeSongMutation } from '../../utils/likeSongMutation';
+import MusicListCC from '../../components/UI/MusicList';
 
 export type searchProps = {
 	artist: number | undefined;
@@ -88,12 +89,10 @@ const MusicListNoOpti = ({ list }: { list: any[] }) => {
 	);
 };
 
-// eslint-disable-next-line @typescript-eslint/ban-types
 const SearchView = () => {
-	const navigation = useNavigation();
 	const artistsQuery = useQuery(API.getAllArtists());
 	const [searchQuery, setSearchQuery] = React.useState({} as searchProps);
-	const rawResult = useQuery(API.searchSongs(searchQuery), {
+	const rawResult = useQuery(API.searchSongs(searchQuery, ['artist']), {
 		enabled: !!searchQuery.query || !!searchQuery.artist || !!searchQuery.genre,
 		onSuccess() {
 			const artist =
@@ -103,49 +102,15 @@ const SearchView = () => {
 			if (artist != 'unknown artist') API.createSearchHistoryEntry(artist, 'artist');
 		},
 	});
-	const userQuery = useQuery(API.getUserInfo());
-	const likedSongs = useQuery(API.getLikedSongs());
-	const { mutateAsync } = useLikeSongMutation();
 
-	let result: any[] = [];
-
-	if (userQuery.isLoading || likedSongs.isLoading || artistsQuery.isLoading) {
+	if (artistsQuery.isLoading) {
 		return <LoadingComponent />;
 	}
 
-	if (userQuery.isError) {
-		return <ErrorView />;
-	}
-
-	if (userQuery.isSuccess) {
-		result =
-			rawResult.data?.map((song) => {
-				const isLiked = likedSongs.data?.some((x) => x.songId == song.id) ?? false;
-
-				return {
-					artist:
-						artistsQuery?.data?.find(({ id }) => id == song?.artistId)?.name ??
-						'unknown artist',
-					song: song?.name,
-					image: song?.cover,
-					level: song?.difficulties.chordcomplexity,
-					lastScore: song?.lastScore,
-					bestScore: song?.bestScore,
-					liked: isLiked,
-					onLike: () => {
-						mutateAsync({ songId: song.id, like: !isLiked }).then(() =>
-							likedSongs.refetch()
-						);
-					},
-					onPlay: () => navigation.navigate('Play', { songId: song.id }),
-				};
-			}) ?? [];
-	}
-
 	return (
 		<View style={{ display: 'flex', gap: 20 }}>
 			<SearchBarComponent onValidate={(query) => setSearchQuery(query)} />
-			{result.length != 0 ? <MusicListNoOpti list={result} /> : <SearchHistory />}
+			{rawResult.isSuccess ? <MusicListCC musics={rawResult.data} isFetching={rawResult.isFetching} refetch={rawResult.refetch} /> : <SearchHistory />}
 		</View>
 	);
 };