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

feat(searchBar): wip

Browse Source
This commit is contained in:
danis
2023-11-30 21:34:05 +01:00
parent 397dfbcf5f
commit 8a00b99f9a
3 changed files with 107 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
front/API.ts
View File

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

2
front/Navigation.tsx
View File

@@ -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';

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

@@ -1,83 +1,105 @@
import React from "react";
import { Text, Select } from 'native-base'
import { TextInput, View } from "react-native";
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 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 = [
{
id: 0,
name: 'Rock',
},
{
id: 1,
name: 'Classical',
},
{
id: 2,
name: 'Pop',
},
{
id: 3,
name: 'Jazz',
},
];
type ArtistChipProps = {
name: string,
dbId: number,
selected?: boolean,
onPress: () => void;
}
const ArtistChipComponent = (props: ArtistChipProps) => {
return (
<View style={{ marginHorizontal: 26 }}>
<Button onPress={props.onPress}>
<View
style={{
display: "flex",
flexDirection: "row",
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 }}>
<TextInput value={query} placeholder="What are you looking for ?" style={{ width: '100%', height: 20}} />
<ButtonBase type="outlined" />
<View style={{
borderBottomWidth: 1,
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={{ flexDirection: "row",}}>
{artistsDummy.map((data) => (
<View style={{ flexDirection: "row", alignItems: "center", padding: 10, margin: 10}}>
<AddSquare size="32" color="#6075F9"/>
<Text ml={2} >{data.name}</Text>
</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)}>
<ArtistChipComponent key={index}
name={artist.name}
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)}>
{genreDummy.map((data) => (
<Select.Item label={data.name} value={data.name}/>
))}
<Select selectedValue={genre?.name}
placeholder="Genre"
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>