This commit is contained in:
danis
2024-01-08 00:00:40 +01:00
parent a33d56bd61
commit 40f16ab9ca
2 changed files with 44 additions and 50 deletions
+3 -4
View File
@@ -1,5 +1,4 @@
import Artist, { ArtistHandler } from './models/Artist'; import Artist, { ArtistHandler } from './models/Artist';
import Album from './models/Album';
import Chapter from './models/Chapter'; import Chapter from './models/Chapter';
import Lesson from './models/Lesson'; import Lesson from './models/Lesson';
import Genre, { GenreHandler } from './models/Genre'; import Genre, { GenreHandler } from './models/Genre';
@@ -714,9 +713,9 @@ export default class API {
return { return {
key: ['search', query.query], key: ['search', query.query],
exec: () => { exec: () => {
return API.fetch( return API.fetch(
{ {
route: `/search/songs/${query.query}${queryString}`, route: `/search/songs/${query.query}${queryString}`,
}, },
{ handler: ListHandler(SongHandler) } { handler: ListHandler(SongHandler) }
); );
+41 -46
View File
@@ -17,7 +17,7 @@ export type searchProps = {
query: string; query: string;
}; };
const Oui = ({yes}: {yes: any[]}) => { const Oui = ({ yes }: { yes: any[] }) => {
const { colors } = useTheme(); const { colors } = useTheme();
const screenSize = useBreakpointValue({ base: 'small', md: 'md', xl: 'xl' }); const screenSize = useBreakpointValue({ base: 'small', md: 'md', xl: 'xl' });
const isBigScreen = screenSize === 'xl'; const isBigScreen = screenSize === 'xl';
@@ -49,24 +49,25 @@ const Oui = ({yes}: {yes: any[]}) => {
{ text: translate('musicListTitleBestScore'), icon: Cup }, { text: translate('musicListTitleBestScore'), icon: Cup },
].map((value) => ( ].map((value) => (
<Row <Row
style={{ key={value.text}
display: 'flex', style={{
flex: 1, display: 'flex',
maxWidth: isBigScreen ? 150 : 50, flex: 1,
height: '100%', maxWidth: isBigScreen ? 150 : 50,
alignItems: 'center', height: '100%',
justifyContent: isBigScreen ? 'flex-end' : 'center', alignItems: 'center',
}} justifyContent: isBigScreen ? 'flex-end' : 'center',
> }}
{/* Conditional rendering based on screen size. */} >
{isBigScreen && ( {/* Conditional rendering based on screen size. */}
<Text fontSize="lg" style={{ paddingRight: 8 }}> {isBigScreen && (
{value.text} <Text fontSize="lg" style={{ paddingRight: 8 }}>
</Text> {value.text}
)} </Text>
{/* Icon with color based on the current color scheme. */} )}
<value.icon size={18} color={colors.text[700]} /> {/* Icon with color based on the current color scheme. */}
</Row> <value.icon size={18} color={colors.text[700]} />
</Row>
))} ))}
</HStack> </HStack>
), ),
@@ -83,42 +84,36 @@ const Oui = ({yes}: {yes: any[]}) => {
keyExtractor={(item) => item.artist + item.song} keyExtractor={(item) => item.artist + item.song}
/> />
); );
} };
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
const SearchView = (props: RouteProps<{}>) => { const SearchView = (props: RouteProps<{}>) => {
const navigation = useNavigation(); const navigation = useNavigation();
const artists = useQuery(API.getAllArtists()); const artists = useQuery(API.getAllArtists());
const [searchQuery, setSearchQuery] = React.useState({} as searchProps); const [searchQuery, setSearchQuery] = React.useState({} as searchProps);
const rawResult = useQuery(API.searchSongs(searchQuery)); const rawResult = useQuery(API.searchSongs(searchQuery));
const result = const result =
rawResult.data?.map((song) => ({ rawResult.data?.map((song) => ({
artist: artists.data?.find((artist) => artist.id === song?.artist?.id)?.name ?? 'unknown artist', artist:
song: song?.name, artists.data?.find((artist) => artist.id === song?.artist?.id)?.name ??
image: song?.cover, 'unknown artist',
level: 42, song: song?.name,
lastScore: 42, image: song?.cover,
bestScore: 42, level: 42,
liked: true, lastScore: 42,
onLike: () => { bestScore: 42,
console.log('onLike'); liked: true,
}, onLike: () => {
onPlay: () => navigation.navigate('Play', { songId: song.id }), console.log('onLike');
})) ?? []; },
onPlay: () => navigation.navigate('Play', { songId: song.id }),
const handleLog = (query: searchProps) => { })) ?? [];
console.log("got query: ", query.query);
setSearchQuery(query);
console.log('raw:' + rawResult);
}
return ( return (
<ScaffoldCC routeName={props.route.name}> <ScaffoldCC routeName={props.route.name}>
<View style={{display: 'flex', gap: 20}} > <View style={{ display: 'flex', gap: 20 }}>
<SearchBarComponent onValidate={(query) => setSearchQuery(query)} /> <SearchBarComponent onValidate={(query) => setSearchQuery(query)} />
{result.length != 0 {result.length != 0 ? <Oui yes={result} /> : <SearchHistory />}
? <Oui yes={result} />
: <SearchHistory />}
</View> </View>
</ScaffoldCC> </ScaffoldCC>
); );
@@ -130,7 +125,7 @@ const styles = StyleSheet.create({
gap: 2, gap: 2,
borderRadius: 10, borderRadius: 10,
overflow: 'hidden', overflow: 'hidden',
} },
}); });
export default SearchView; export default SearchView;