feat(searchBar): wip

front/API.ts

@@ -384,6 +384,20 @@ export default class API {
 		};
 	}
 
+
+	public static getGenres(): Query<Genre[]> {
+		return {
+			key: ['genres'],
+			exec: () =>
+				API.fetch(
+					{
+						route: '/genre',
+					},
+					{ handler: PlageHandler(GenreHandler) }
+				).then(({ data }) => data),
+		}
+	}
+
 	/**
 	 * Retrive a song's musicXML partition
 	 * @param songId the id to find the song
@@ -417,6 +431,19 @@ export default class API {
 		};
 	}
 
+	public static getArtists(): Query<Artist[]> {
+		return {
+			key: ['artists'],
+			exec: () => 
+				API.fetch(
+					{
+						route: `/artist`,
+					},
+					{ handler: PlageHandler(ArtistHandler) }
+				).then(({ data }) => data)
+		}
+	}
+
 	/**
 	 * Retrive a song's chapters
 	 * @param songId the id to find the song

front/Navigation.tsx

@@ -10,7 +10,7 @@ import { DarkTheme, DefaultTheme, NavigationContainer } from '@react-navigation/
 import { RootState, useSelector } from './state/Store';
 import { useDispatch } from 'react-redux';
 import { Translate, translate } from './i18n/i18n';
-import SearchView from './views/SearchView';
+import SearchView from './views/V2/SearchView';
 import SettingsTab from './views/settings/SettingsView';
 import { useQuery } from './Queries';
 import API, { APIError } from './API';

front/components/V2/SearchBar.tsx

@@ -1,83 +1,105 @@
 import React from "react";
-import { Text, Select } from 'native-base'
+import { Button, Text, Select} from 'native-base'
-import { TextInput, View } from "react-native";
+import { ScrollView, TextInput, View } from "react-native";
 import ButtonBase from "../UI/ButtonBase";
+import { AddSquare, SearchNormal1 } from "iconsax-react-native";
 import Artist from "../../models/Artist";
 import Song from "../../models/Song";
-import { AddSquare } from 'iconsax-react-native';
 import { useQuery } from "../../Queries";
 import API from "../../API";
+import {  useNavigation } from "../../Navigation";
+import { LoadingView } from "../Loading";
+import Genre from "../../models/Genre";
 
-const artistsDummy = [
-	{
-		id: 0,
-		name: 'Momo'
-	},
-	{
-		id: 1,
-		name: 'Beethoven'
-	},
-	{
-		id: 2,
-		name: 'Chopin'
-	},
-	{
-		id: 3,
-		name: 'Wolfgang'
-	},
-];
 
-const genreDummy = [
+type ArtistChipProps = {
-	{
+	name: string,
-		id: 0,
+	dbId: number,
-		name: 'Rock',
+	selected?: boolean,
-	},
+	onPress: () => void;
-	{
+}
-		id: 1,
+
-		name: 'Classical',
+const ArtistChipComponent = (props: ArtistChipProps) => {
-	},
+	return (
-	{
+		<View style={{ marginHorizontal: 26 }}>
-		id: 2,
+			<Button onPress={props.onPress}>
-		name: 'Pop',
+				<View
-	},
+					style={{
-	{
+						display: "flex",
-		id: 3,
+						flexDirection: "row",
-		name: 'Jazz',
+						alignItems: "center",
-	},
+						justifyContent: "center",
-];
+						gap: 10,
+				}}>
+					<AddSquare size="32" color={props.selected ? "#ED4A51" : "#6075F9"}/>
+					<Text>{props.name}</Text>
+				</View>
+			</Button>
+		</View>
+	)
+}
 
 type SearchBarComponentProps = {
 	query: string;
 };
 
-
 const SearchBarComponent = (props: SearchBarComponentProps) => {
+	const navigation = useNavigation();
 	const [isTriggered, setIsTriggered] = React.useState(false);
-	const [genre, setGenre] = React.useState('')
+	const [query, setQuery] = React.useState('');
-	const [query, setQuery] = React.useState('')
+	const [genre, setGenre] = React.useState({} as Genre | undefined);
+	const [artist, setArtist] = React.useState({} as Artist | undefined);
 	const [artistSearch, setArtistSearch] = React.useState([] as Artist[]);
 	const [songSearch, setSongSearch] = React.useState([] as Song[]);
+	const artistsQuery = useQuery(API.getArtists());
+	const genresQuery = useQuery(API.getGenres());
+
+	if (artistsQuery.isLoading || genresQuery.isLoading) {
+		return <LoadingView />;
+	}
 
 	return (
 		<View>
-			<View style={{ borderBottomWidth: 1, borderBottomColor: '#9E9E9E', display: "flex", flexDirection: "row", margin: 5, padding: 16 }}>
+			<View style={{
-				<TextInput value={query} placeholder="What are you looking for ?" style={{ width: '100%', height: 20}} />
+				borderBottomWidth: 1,
-				<ButtonBase type="outlined" />
+				borderBottomColor: '#9E9E9E',
+				display: "flex",
+				flexDirection: "row",
+				alignItems: "center",
+				margin: 5,
+				padding: 16 }}>
+				<TextInput value={query}
+					placeholder="What are you looking for ?"
+					style={{ width: '100%', height: 30}} >
+						{artist?.name ? <ArtistChipComponent onPress={() => setArtist(undefined)} name={artist.name} dbId={artist.id} selected={true} /> : null}
+				</TextInput>
+				<ButtonBase type="menu" icon={SearchNormal1} />
 			</View>
-			<View style={{ flexDirection: "row", justifyContent: "space-between" }}>
+			<View style={{ display: 'flex', flexDirection: "row", justifyContent: "space-between" }}>
-				<View style={{ flexDirection: "row",}}>
+				<ScrollView horizontal={true} style={{ display: 'flex', flexDirection: "row", paddingVertical: 10}}>
-					{artistsDummy.map((data) => (
+					{artistsQuery.data?.map((artist, index) => (
-						<View style={{ flexDirection: "row", alignItems: "center", padding: 10, margin: 10}}>
+						<Button onPress={() => setArtist(undefined)}>
-							<AddSquare size="32" color="#6075F9"/>
+							<ArtistChipComponent key={index}
-							<Text ml={2} >{data.name}</Text>
+								name={artist.name}
-						</View>
+								dbId={artist.id}
+								onPress={() => {
+									setArtist(artistsQuery.data?.find((data) => {data.id == artist.id}))
+								}}
+							/>
+						</Button>
 					))}
-				</View>
+				</ScrollView>
 				<View>
-					<Select selectedValue={genre} placeholder="Genre" accessibilityLabel="Genre" onValueChange={itemValue => setGenre(itemValue)}>
+					<Select selectedValue={genre?.name}
-					{genreDummy.map((data) => (
+						placeholder="Genre"
-						<Select.Item label={data.name} value={data.name}/>
+						accessibilityLabel="Genre"
-					))}
+						onValueChange={itemValue => {
+							setGenre(genresQuery.data?.find((genre) => { genre.name == itemValue }))
+							}}
+					>
+						{genresQuery.data?.map((data, index) => (
+							<Select.Item key={index} label={data.name} value={data.name}/>
+						))}
 					</Select>
 				</View>
 			</View>