From e148f9edb8ef252117bb4757129af77557874f5e Mon Sep 17 00:00:00 2001
From: danis <amaury.danis-cousandier@epitech.eu>
Date: Fri, 1 Dec 2023 13:58:34 +0100
Subject: [PATCH] feat(searchBar): artist row list chip selection + genre
 dropdown select

---
 front/components/V2/SearchBar.tsx | 32 ++++++++++++++++---------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/front/components/V2/SearchBar.tsx b/front/components/V2/SearchBar.tsx
index 8ec23bc..9c4e372 100644
--- a/front/components/V2/SearchBar.tsx
+++ b/front/components/V2/SearchBar.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Button, Text, Select} from 'native-base'
 import { ScrollView, TextInput, View } from "react-native";
 import ButtonBase from "../UI/ButtonBase";
-import { AddSquare, SearchNormal1 } from "iconsax-react-native";
+import { AddSquare, CloseCircle, SearchNormal1 } from "iconsax-react-native";
 import Artist from "../../models/Artist";
 import Song from "../../models/Song";
 import { useQuery } from "../../Queries";
@@ -14,15 +14,14 @@ import Genre from "../../models/Genre";
 
 type ArtistChipProps = {
 	name: string,
-	dbId: number,
 	selected?: boolean,
 	onPress: () => void;
 }
 
 const ArtistChipComponent = (props: ArtistChipProps) => {
 	return (
-		<View style={{ marginHorizontal: 26 }}>
-			<Button onPress={props.onPress}>
+		<View>
+			<Button marginX={ props.selected ? 0 :26 } variant={"ghost"} onPress={props.onPress}>
 				<View
 					style={{
 						display: "flex",
@@ -31,7 +30,10 @@ const ArtistChipComponent = (props: ArtistChipProps) => {
 						justifyContent: "center",
 						gap: 10,
 				}}>
-					<AddSquare size="32" color={props.selected ? "#ED4A51" : "#6075F9"}/>
+					
+					{props.selected
+						? <CloseCircle size="32" color={"#ED4A51"} />
+						: <AddSquare size="32" color={"#6075F9"} /> }
 					<Text>{props.name}</Text>
 				</View>
 			</Button>
@@ -48,7 +50,7 @@ const SearchBarComponent = (props: SearchBarComponentProps) => {
 	const [isTriggered, setIsTriggered] = React.useState(false);
 	const [query, setQuery] = React.useState('');
 	const [genre, setGenre] = React.useState({} as Genre | undefined);
-	const [artist, setArtist] = React.useState({} as Artist | undefined);
+	const [artist, setArtist] = React.useState('');
 	const [artistSearch, setArtistSearch] = React.useState([] as Artist[]);
 	const [songSearch, setSongSearch] = React.useState([] as Song[]);
 	const artistsQuery = useQuery(API.getArtists());
@@ -68,26 +70,26 @@ const SearchBarComponent = (props: SearchBarComponentProps) => {
 				alignItems: "center",
 				margin: 5,
 				padding: 16 }}>
+					{artist ?
+						<ArtistChipComponent onPress={() => setArtist('')} name={artist} selected={true} /> : null}
 				<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>
+					style={{ width: '100%', height: 30}} />
+						
 				<ButtonBase type="menu" icon={SearchNormal1} />
 			</View>
 			<View style={{ display: 'flex', flexDirection: "row", justifyContent: "space-between" }}>
 				<ScrollView horizontal={true} style={{ display: 'flex', flexDirection: "row", paddingVertical: 10}}>
-					{artistsQuery.data?.map((artist, index) => (
-						<Button onPress={() => setArtist(undefined)}>
+					{!artist ? artistsQuery.data?.map((artist, index) => (
+						
 							<ArtistChipComponent key={index}
 								name={artist.name}
-								dbId={artist.id}
 								onPress={() => {
-									setArtist(artistsQuery.data?.find((data) => {data.id == artist.id}))
+									setArtist(artist.name)
 								}}
 							/>
-						</Button>
-					))}
+						
+					)) : null}
 				</ScrollView>
 				<View>
 					<Select selectedValue={genre?.name}