zoriya/Chromacase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(searchBar): artist row list chip selection + genre dropdown select

Browse Source
This commit is contained in:
danis
2023-12-01 13:58:34 +01:00
parent 8a00b99f9a
commit e148f9edb8
1 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
front/components/V2/SearchBar.tsx
View File

@@ -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}