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

feat(../V2/SearchView): wip

Browse Source
This commit is contained in:
danis
2024-01-07 23:17:20 +01:00
parent bb7a17fc22
commit 342099157e
2 changed files with 22 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
front/API.ts
View File

@@ -498,84 +498,6 @@ export default class API {
};
}
/**
* Search a song by its name
* @param query the string used to find the songs
*/
// public static searchSongs(query: string): Query<Song[]> {
// return {
// key: ['search', 'song', query],
// exec: () =>
// API.fetch(
// {
// route: `/search/songs/${query}`,
// },
// { handler: ListHandler(SongHandler) }
// ),
// };
// }
/**
* Search artists by name
* @param query the string used to find the artists
*/
public static searchArtists(query: string): Query<Artist[]> {
return {
key: ['search', 'artist', query],
exec: () =>
API.fetch(
{
route: `/search/artists/${query}`,
},
{ handler: ListHandler(ArtistHandler) }
),
};
}
/**
* Search Album by name
* @param query the string used to find the album
*/
public static searchAlbum(query: string): Query<Album[]> {
return {
key: ['search', 'album', query],
exec: async () => [
{
id: 1,
name: 'Super Trooper',
},
{
id: 2,
name: 'Kingdom Heart 365/2 OST',
},
{
id: 3,
name: 'The Legend Of Zelda Ocarina Of Time OST',
},
{
id: 4,
name: 'Random Access Memories',
},
],
};
}
/**
* Retrieve music genres
*/
public static searchGenres(query: string): Query<Genre[]> {
return {
key: ['search', 'genre', query],
exec: () =>
API.fetch(
{
route: `/search/genres/${query}`,
},
{ handler: ListHandler(GenreHandler) }
),
};
}
/**
* Retrieve a lesson
* @param lessonId the id to find the lesson
@@ -782,12 +704,19 @@ export default class API {
}
public static searchSongs(query: searchProps): Query<Song[]> {
const queryParams: string[] = [];
if (query.artist) queryParams.push(`artistId=${query.artist}`);
if (query.genre) queryParams.push(`genreId=${query.genre}`);
const queryString = queryParams.length > 0 ? `?${queryParams.join('&')}` : '';
return {
key: ['search'],
exec: () => {
return API.fetch(
{
route: `/search/songs/${query.query}`,
return API.fetch(
{
route: `/search/songs/${query.query}${queryString}`,
},
{ handler: ListHandler(SongHandler) }
);

68
front/views/V2/SearchView.tsx
View File

@@ -1,15 +1,15 @@
import React, { useMemo } from 'react';
import ScaffoldCC from '../../components/UI/ScaffoldCC';
import SearchBarComponent from '../../components/V2/SearchBar';
import { RouteProps, useNavigation } from '../../Navigation';
import { useQuery } from '../../Queries';
import API from '../../API';
import { View, StyleSheet } from 'react-native';
import SearchHistory from '../../components/V2/SearchHistory';
import MusicItem from '../../components/UI/MusicItem';
import { FlatList, HStack, useBreakpointValue, useTheme, Text, Row } from 'native-base';
import { RouteProps, useNavigation } from '../../Navigation';
import { ArrowRotateLeft, Cup } from 'iconsax-react-native';
import { View, StyleSheet } from 'react-native';
import { useQuery } from '../../Queries';
import { translate } from '../../i18n/i18n';
import { ArrowDown2, ArrowRotateLeft, Cup, Icon } from 'iconsax-react-native';
import SearchBarComponent from '../../components/V2/SearchBar';
import SearchHistory from '../../components/V2/SearchHistory';
import ScaffoldCC from '../../components/UI/ScaffoldCC';
import MusicItem from '../../components/UI/MusicItem';
import API from '../../API';
export type searchProps = {
artist: number | undefined;
@@ -74,22 +74,6 @@ const Oui = ({yes}: {yes: any[]}) => {
);
return (
// <View>
// {yes.map((song) => (
// <MusicItem
// artist={song?.artist}
// song={song?.song}
// image={song?.cover}
// lastScore={42}
// bestScore={42}
// liked={true}
// onLike={() => {
// console.log('onLike');
// }}
// onPlay={() => navigation.navigate('Play', { songId: song.id })}
// />
// ))}
// </View>
<FlatList
nestedScrollEnabled
style={styles.container}
@@ -97,21 +81,6 @@ const Oui = ({yes}: {yes: any[]}) => {
data={yes}
renderItem={({ item }) => <MusicItem style={{ marginBottom: 2 }} {...item} />}
keyExtractor={(item) => item.artist + item.song}
// ListFooterComponent={
// musicListState.hasMoreMusics ? (
// <View style={styles.footerContainer}>
// {musicListState.loading ? (
// <ActivityIndicator color={colors.primary[300]} />
// ) : (
// <ButtonBase
// style={{ borderRadius: 999 }}
// onPress={loadMoreMusicItems}
// icon={ArrowDown2}
// />
// )}
// </View>
// ) : null
// }
/>
);
}
@@ -120,7 +89,7 @@ const Oui = ({yes}: {yes: any[]}) => {
const SearchView = (props: RouteProps<{}>) => {
const navigation = useNavigation();
const [searchQuery, setSearchQuery] = React.useState({} as searchProps);
const rawResult = useQuery(API.getAllSongs(searchQuery.query));
const rawResult = useQuery(API.searchSongs(searchQuery));
const result =
rawResult.data?.map((song) => ({
artist: song?.artist?.name ?? 'duh',
@@ -142,18 +111,10 @@ const SearchView = (props: RouteProps<{}>) => {
console.log('raw:' + rawResult);
}
const handleClear = () => {
console.log('stage cleared');
setSearchQuery({} as searchProps);
}
console.table('result:', result);
console.table('raw:', rawResult);
return (
<ScaffoldCC routeName={props.route.name}>
<View style={{display: 'flex', gap: 20}} >
<SearchBarComponent onValidate={(data) => handleLog(data)} />
<SearchBarComponent onValidate={(query) => setSearchQuery(query)} />
{result.length != 0
? <Oui yes={result} />
: <SearchHistory />}
@@ -168,12 +129,7 @@ const styles = StyleSheet.create({
gap: 2,
borderRadius: 10,
overflow: 'hidden',
},
footerContainer: {
height: 60,
justifyContent: 'center',
alignItems: 'center',
},
}
});
export default SearchView;