Front/use search api (#167)

front/API.ts

@@ -300,7 +300,9 @@ export default class API {
 	 * @param query the string used to find the songs
 	 */
 	public static async searchSongs(query: string): Promise<Song[]> {
-		return Promise.all([1, 5, 2].map(API.getSong));
+		return API.fetch({
+			route: `/search/guess/song/${query}`
+		});
 	}
 
 	/**

front/components/SearchBar.tsx

@@ -12,6 +12,7 @@ import {
 } from "native-base";
 import React from "react";
 import { Ionicons } from "@expo/vector-icons";
+import useColorScheme from "../hooks/colorScheme";
 
 export enum SuggestionType {
 	TEXT,
@@ -57,20 +58,19 @@ const IllustratedSuggestion = ({
 	imageSrc,
 	onPress,
 }: IllustratedSuggestionProps) => {
+	const colorScheme = useColorScheme();
 	return (
 		<Pressable
 			onPress={onPress}
 			margin={2}
 			padding={2}
-			bg={"white"}
+		>{({ isHovered, isPressed }) => (
-			_hover={{
+			<HStack alignItems="center" space={4}
-				bg: "primary.200",
+				bg={colorScheme == 'dark'
-			}}
+					? (isHovered || isPressed) ? 'gray.800' : undefined
-			_pressed={{
+					: (isHovered || isPressed) ? 'primary.100' : undefined
-				bg: "primary.300",
+				}
-			}}
+			>
-		>
-			<HStack alignItems="center" space={4}>
 				<Square size={"sm"}>
 					<Image
 						source={{ uri: imageSrc }}
@@ -86,31 +86,30 @@ const IllustratedSuggestion = ({
 					</Text>
 				</VStack>
 			</HStack>
-		</Pressable>
+		)}</Pressable>
 	);
 };
 
 const TextSuggestion = ({ text, onPress }: SuggestionProps) => {
+	const colorScheme = useColorScheme();
 	return (
 		<Pressable
 			onPress={onPress}
 			margin={2}
 			padding={2}
-			bg={"white"}
+		>{({ isHovered, isPressed }) => (
-			_hover={{
+			<Row alignItems="center" space={4}
-				bg: "primary.200",
+				bg={colorScheme == 'dark'
-			}}
+					? (isHovered || isPressed) ? 'gray.800' : undefined
-			_pressed={{
+					: (isHovered || isPressed) ? 'primary.100' : undefined
-				bg: "primary.300",
+				}
-			}}
+			>
-		>
-			<Row alignItems="center" space={4}>
 				<Square size={"sm"}>
 					<Icon size={"md"} as={Ionicons} name="search" />
 				</Square>
 				<Text fontSize="md">{text}</Text>
 			</Row>
-		</Pressable>
+		)}</Pressable>
 	);
 };
 

front/views/HomeView.tsx

@@ -84,7 +84,7 @@ const HomeView = () => {
 							<Box flex="2" padding={5}>
 								<Box style={{ flexDirection: 'row', justifyContent:'center' }}>
 									<TextButton
-										translate={{ translationKey: 'search' }}
+										translate={{ translationKey: 'searchBtn' }}
 										colorScheme='secondary' size="sm"
 										onPress={() => navigation.navigate('Search')}
 									/>