Front: Fix API calls with JWT Token

front/views/SearchView.tsx

@@ -1,63 +1,36 @@
-import React from "react";
-import { useDispatch } from "../state/Store";
-import { translate } from "../i18n/i18n";
-import { Box, Button } from "native-base";
+import React, { useEffect, useState } from "react";
+import { Box } from "native-base";
 import { useNavigation } from "@react-navigation/native";
 import SearchBarSuggestions from "../components/SearchBarSuggestions";
-import {
-	SuggestionList,
-	SuggestionType,
-	IllustratedSuggestionProps,
-} from "../components/SearchBar";
-
-const onTextSubmit = (text: string) => {
-	console.log(text);
-};
+import { useQueries, useQuery } from "react-query";
+import { SuggestionType } from "../components/SearchBar";
+import API from "../API";
 
 const SearchView = () => {
+	const [query, setQuery] = useState<string>();
 	const navigation = useNavigation();
-
-	const IllustratedSuggestion: IllustratedSuggestionProps = {
-		text: "Love Story",
-		subtext: "Taylor Swift",
-		imageSrc:
-			"https://i.discogs.com/yHqu3pnLgJq-cVpYNVYu6mE-fbzIrmIRxc6vES5Oi48/rs:fit/g:sm/q:90/h:556/w:600/czM6Ly9kaXNjb2dz/LWRhdGFiYXNlLWlt/YWdlcy9SLTE2NjQ2/ODUwLTE2MDkwNDU5/NzQtNTkxOS5qcGVn.jpeg",
-		onPress: () => navigation.navigate("Song", { songId: 1 }),
-	};
-	// fill the suggestions with the data from the backend
-	const suggestions: SuggestionList = [
-		{
-			type: SuggestionType.ILLUSTRATED,
-			data: IllustratedSuggestion,
-		},
-		{
-			type: SuggestionType.ILLUSTRATED,
-			data: IllustratedSuggestion,
-		},
-		{
-			type: SuggestionType.ILLUSTRATED,
-			data: {
-				text: "Shed a Light",
-				subtext: "Robin Schulz & David Guetta",
-				imageSrc:
-					"https://imgs.search.brave.com/O9j2Z-oWiniq3lj7d-dAOgXLWCIqnHaFegmaSeIkWOY/rs:fit:560:320:1/g:ce/aHR0cHM6Ly91cGxv/YWQud2lraW1lZGlh/Lm9yZy93aWtpcGVk/aWEvZW4vdGh1bWIv/OC84ZS9TaGVkX2Ff/TGlnaHRfUm9iaW5f/U2NodWx6LmpwZy81/MTJweC1TaGVkX2Ff/TGlnaHRfUm9iaW5f/U2NodWx6LmpwZw",
-				onPress: () => navigation.navigate("Song", { songId: 1 }),
-			},
-		},
-		{
-			type: SuggestionType.TEXT,
-			data: {
-				text: "Lady Gaga",
-				onPress: () => navigation.navigate("Song", { songId: 1 }),
-			},
-		},
-	];
+	const searchQuery = useQuery(
+		['search', query],
+		() => API.searchSongs(query!),
+		{ enabled: query != undefined }
+	);
+	const artistsQueries = useQueries(searchQuery.data?.map((song) => (
+		{ queryKey: ['artist', song.id], queryFn: () => API.getArtist(song.id) }
+	)) ??[]);
 
 	return (
 		<Box style={{ padding: 10 }}>
 			<SearchBarSuggestions
-				onTextSubmit={onTextSubmit}
-				suggestions={suggestions}
+				onTextSubmit={setQuery}
+				suggestions={searchQuery.data?.map((searchResult) => ({
+					type: SuggestionType.ILLUSTRATED,
+					data: {
+						text: searchResult.name,
+						subtext: artistsQueries.find((artistQuery) => artistQuery.data?.id == searchResult.artistId)?.data?.name ?? "",
+						imageSrc: searchResult.cover,
+						onPress: () => navigation.navigate("Song", { songId: searchResult.id })
+					}
+				})) ?? []}
 			/>
 		</Box>
 	);