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

pretty, lint, type check

Browse Source
This commit is contained in:
danis
2023-12-01 15:22:45 +01:00
parent 7167b49edc
commit 183dee193c
5 changed files with 96 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/components/V2/SearchBar.tsx
+81 -69
View File
@@ -1,58 +1,48 @@
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, CloseCircle, SearchNormal1 } from "iconsax-react-native";
import Artist from "../../models/Artist";
import Song from "../../models/Song";
import { useQuery } from "../../Queries";
import API from "../../API";
import { useNavigation } from "../../Navigation";
import { LoadingView } from "../Loading";
import Genre from "../../models/Genre";
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, CloseCircle, SearchNormal1 } from 'iconsax-react-native';
import { useQuery } from '../../Queries';
import API from '../../API';
import { LoadingView } from '../Loading';
import Genre from '../../models/Genre';
type ArtistChipProps = {
name: string,
selected?: boolean,
name: string;
selected?: boolean;
onPress: () => void;
}
};
const ArtistChipComponent = (props: ArtistChipProps) => {
return (
<View>
<Button marginX={ props.selected ? 0 :26 } variant={"ghost"} onPress={props.onPress}>
<Button marginX={props.selected ? 0 : 26} variant={'ghost'} onPress={props.onPress}>
<View
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
gap: 10,
}}>
{props.selected
? <CloseCircle size="32" color={"#ED4A51"} />
: <AddSquare size="32" color={"#6075F9"} /> }
}}
>
{props.selected ? (
<CloseCircle size="32" color={'#ED4A51'} />
) : (
<AddSquare size="32" color={'#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 SearchBarComponent = () => {
const [query, setQuery] = React.useState('');
const [genre, setGenre] = React.useState({} as Genre | 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());
const genresQuery = useQuery(API.getGenres());
@@ -62,51 +52,73 @@ const SearchBarComponent = (props: SearchBarComponentProps) => {
return (
<View>
<View style={{
borderBottomWidth: 1,
borderBottomColor: '#9E9E9E',
display: "flex",
flexDirection: "row",
alignItems: "center",
margin: 5,
padding: 16 }}>
{artist ?
<ArtistChipComponent onPress={() => setArtist('')} name={artist} selected={true} /> : null}
<TextInput value={query}
<View
style={{
borderBottomWidth: 1,
borderBottomColor: '#9E9E9E',
display: 'flex',
flexDirection: 'row',
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}} />
style={{ width: '100%', height: 30 }}
onChangeText={(value) => setQuery(value)}
/>
<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}}>
{!artist ? artistsQuery.data?.map((artist, index) => (
<ArtistChipComponent key={index}
name={artist.name}
onPress={() => {
setArtist(artist.name)
}}
/>
)) : null}
<View
style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}
>
<ScrollView
horizontal={true}
style={{ display: 'flex', flexDirection: 'row', paddingVertical: 10 }}
>
{!artist
? artistsQuery.data?.map((artist, index) => (
<ArtistChipComponent
key={index}
name={artist.name}
onPress={() => {
setArtist(artist.name);
}}
/>
))
: null}
</ScrollView>
<View>
<Select selectedValue={genre?.name}
<Select
selectedValue={genre?.name}
placeholder="Genre"
accessibilityLabel="Genre"
onValueChange={itemValue => {
setGenre(genresQuery.data?.find((genre) => { genre.name == itemValue }))
}}
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.Item key={index} label={data.name} value={data.name} />
))}
</Select>
</View>
</View>
</View>
)
}
);
};
export default SearchBarComponent;
export default SearchBarComponent;