From be926dcaed39e5e31043fd33314d999668727e51 Mon Sep 17 00:00:00 2001 From: danis Date: Thu, 7 Dec 2023 16:48:25 +0100 Subject: [PATCH 01/29] feat(search): exchange between search bar and searchView. paella --- front/API.ts | 41 +++++++++++++++++++++---------- front/components/V2/SearchBar.tsx | 16 +++++++++++- front/views/V2/SearchView.tsx | 39 +++++++++++++++++++++++++++-- 3 files changed, 80 insertions(+), 16 deletions(-) diff --git a/front/API.ts b/front/API.ts index af7597c1..5df79e8a 100644 --- a/front/API.ts +++ b/front/API.ts @@ -24,6 +24,7 @@ import * as yup from 'yup'; import { base64ToBlob } from './utils/base64ToBlob'; import { ImagePickerAsset } from 'expo-image-picker'; import { SongCursorInfos, SongCursorInfosHandler } from './models/SongCursorInfos'; +import { searchProps } from './views/V2/SearchView'; type AuthenticationInput = { username: string; password: string }; type RegistrationInput = AuthenticationInput & { email: string }; @@ -501,18 +502,18 @@ 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 { - return { - key: ['search', 'song', query], - exec: () => - API.fetch( - { - route: `/search/songs/${query}`, - }, - { handler: ListHandler(SongHandler) } - ), - }; - } + // public static searchSongs(query: string): Query { + // return { + // key: ['search', 'song', query], + // exec: () => + // API.fetch( + // { + // route: `/search/songs/${query}`, + // }, + // { handler: ListHandler(SongHandler) } + // ), + // }; + // } /** * Search artists by name @@ -779,4 +780,18 @@ export default class API { public static getPartitionSvgUrl(songId: number): string { return `${API.baseUrl}/song/${songId}/assets/partition`; } -} + + public static searchSongs(query: searchProps): Query { + return { + key: ['search'], + exec: () => { + return API.fetch( + { + route: `/search/songs/`, + }, + { handler: ListHandler(SongHandler) } + ) + } + } + } +} \ No newline at end of file diff --git a/front/components/V2/SearchBar.tsx b/front/components/V2/SearchBar.tsx index 0ec2e9f3..931c67c2 100644 --- a/front/components/V2/SearchBar.tsx +++ b/front/components/V2/SearchBar.tsx @@ -8,6 +8,7 @@ import { useQuery } from '../../Queries'; import API from '../../API'; import Genre from '../../models/Genre'; import { translate } from '../../i18n/i18n'; +import { searchProps } from '../../views/V2/SearchView'; type ArtistChipProps = { name: string; @@ -40,7 +41,7 @@ const ArtistChipComponent = (props: ArtistChipProps) => { ); }; -const SearchBarComponent = () => { +const SearchBarComponent = (props: { onValidate: (searchData: searchProps) => void }) => { const [query, setQuery] = React.useState(''); const [genre, setGenre] = React.useState({} as Genre | undefined); const [artist, setArtist] = React.useState(''); @@ -49,6 +50,18 @@ const SearchBarComponent = () => { const screenSize = useBreakpointValue({ base: 'small', md: 'big' }); const isMobileView = screenSize == 'small'; + const handleValidate = () => { + // Construct an object with the data you want to pass to the parent component + const searchData = { + query: "test", + artist: 1, + genre: 1, + }; + + // Call the parent's onValidate callback with the searchData + props.onValidate(searchData); + }; + return ( { flexShrink: 0, flexGrow: 0, }} + onPress={handleValidate} /> diff --git a/front/views/V2/SearchView.tsx b/front/views/V2/SearchView.tsx index ca52594c..1194d1e7 100644 --- a/front/views/V2/SearchView.tsx +++ b/front/views/V2/SearchView.tsx @@ -1,13 +1,48 @@ import React from 'react'; import ScaffoldCC from '../../components/UI/ScaffoldCC'; import SearchBarComponent from '../../components/V2/SearchBar'; -import { RouteProps } from '../../Navigation'; +import { RouteProps, useNavigation } from '../../Navigation'; +import MusicList from '../../components/UI/MusicList'; +import { useQuery } from '../../Queries'; +import API from '../../API'; +import Song from '../../models/Song'; +import { MusicItemType } from '../../components/UI/MusicItem'; + +export type searchProps = { + artist: number, + genre: number, + query: string, +} // eslint-disable-next-line @typescript-eslint/ban-types const SearchView = (props: RouteProps<{}>) => { + const navigation = useNavigation(); + const [searchResult, setSearchResult] = React.useState([] as MusicItemType[]); + + const handleSearch = async (searchQuery: searchProps) => { + const rawResult = useQuery(API.getAllSongs()); + const result = + rawResult.data?.map((song) => ({ + artist: song.artist!.name, + song: song.name, + image: song.cover, + level: 42, + lastScore: 42, + bestScore: 42, + liked: true, + onLike: () => { + console.log('onLike'); + }, + onPlay: () => navigation.navigate('Play', { songId: song.id }), + })) ?? []; + setSearchResult(result ?? []); + } + + return ( - + + ); }; From 5d103c66876974315f884dffc19cdd3968582515 Mon Sep 17 00:00:00 2001 From: danis Date: Thu, 7 Dec 2023 17:18:00 +0100 Subject: [PATCH 02/29] feat(search): proper data passing through handler --- front/components/V2/SearchBar.tsx | 18 ++++++------------ front/views/V2/SearchView.tsx | 4 ++-- 2 files changed, 8 insertions(+), 14 deletions(-) diff --git a/front/components/V2/SearchBar.tsx b/front/components/V2/SearchBar.tsx index 931c67c2..8de5b624 100644 --- a/front/components/V2/SearchBar.tsx +++ b/front/components/V2/SearchBar.tsx @@ -43,7 +43,7 @@ const ArtistChipComponent = (props: ArtistChipProps) => { const SearchBarComponent = (props: { onValidate: (searchData: searchProps) => void }) => { const [query, setQuery] = React.useState(''); - const [genre, setGenre] = React.useState({} as Genre | undefined); + const [genre, setGenre] = React.useState(''); const [artist, setArtist] = React.useState(''); const artistsQuery = useQuery(API.getAllArtists()); const genresQuery = useQuery(API.getAllGenres()); @@ -53,9 +53,9 @@ const SearchBarComponent = (props: { onValidate: (searchData: searchProps) => vo const handleValidate = () => { // Construct an object with the data you want to pass to the parent component const searchData = { - query: "test", - artist: 1, - genre: 1, + query: query, + artist: artistsQuery.data?.find((a) => a.name === artist)?.id ?? undefined, + genre: genresQuery.data?.find((g) => g.name === genre)?.id ?? undefined, }; // Call the parent's onValidate callback with the searchData @@ -169,16 +169,10 @@ const SearchBarComponent = (props: { onValidate: (searchData: searchProps) => vo handleChangeText(text)} - variant={'rounded'} - value={barText} - rounded={'full'} - placeholder={translate('search')} - width={['100%', '50%']} //responsive array syntax with native-base - py={2} - px={2} - fontSize={'12'} - InputLeftElement={ - } - /> - } - InputRightElement={ - } - /> - } - /> - - - {filters.map((btn) => ( - - ))} - - - ); -}; - -export default SearchBar; diff --git a/front/components/SearchResult.tsx b/front/components/SearchResult.tsx deleted file mode 100644 index 46dab028..00000000 --- a/front/components/SearchResult.tsx +++ /dev/null @@ -1,277 +0,0 @@ -import React from 'react'; -import { - VStack, - Heading, - Box, - Card, - Flex, - useBreakpointValue, - Column, - ScrollView, -} from 'native-base'; -import { SafeAreaView } from 'react-native'; -import { SearchContext } from '../views/SearchView'; -import { useQuery } from '../Queries'; -import { Translate, translate } from '../i18n/i18n'; -import API from '../API'; -import LoadingComponent, { LoadingView } from './Loading'; -import ArtistCard from './ArtistCard'; -import GenreCard from './GenreCard'; -import SongCard from './SongCard'; -import CardGridCustom from './CardGridCustom'; -import SearchHistoryCard from './HistoryCard'; -import Song from '../models/Song'; -import { useNavigation } from '../Navigation'; -import SongRow from '../components/SongRow'; -import FavSongRow from './FavSongRow'; -import { useLikeSongMutation } from '../utils/likeSongMutation'; - -const swaToSongCardProps = (song: Song) => ({ - songId: song.id, - name: song.name, - artistName: song.artist!.name, - cover: song.cover, -}); - -const HomeSearchComponent = () => { - const { updateStringQuery } = React.useContext(SearchContext); - const { isLoading: isLoadingHistory, data: historyData = [] } = useQuery( - API.getSearchHistory(0, 12), - { enabled: true } - ); - const songSuggestions = useQuery(API.getSongSuggestions(['artist'])); - - return ( - - - {translate('lastSearched')} - {isLoadingHistory ? ( - - ) : ( - { - return { - ...h, - timestamp: h.timestamp.toLocaleString(), - onPress: () => { - updateStringQuery(h.query); - }, - }; - })} - cardComponent={SearchHistoryCard} - /> - )} - - - {translate('songsToGetBetter')} - {!songSuggestions.data ? ( - - ) : ( - - )} - - - ); -}; - -type SongsSearchComponentProps = { - maxRows?: number; -}; - -const SongsSearchComponent = (props: SongsSearchComponentProps) => { - const navigation = useNavigation(); - const { songData } = React.useContext(SearchContext); - const favoritesQuery = useQuery(API.getLikedSongs(['artist'])); - const { mutate } = useLikeSongMutation(); - - return ( - - - - {songData?.length ? ( - songData.slice(0, props.maxRows).map((comp, index) => ( - query?.songId == comp.id) - } - handleLike={async (state: boolean, songId: number) => - mutate({ songId: songId, like: state }) - } - onPress={() => { - API.createSearchHistoryEntry(comp.name, 'song'); - navigation.navigate('Play', { songId: comp.id }); - }} - /> - )) - ) : ( - - )} - - - ); -}; - -type ItemSearchComponentProps = { - maxItems?: number; -}; - -const ArtistSearchComponent = (props: ItemSearchComponentProps) => { - const { artistData } = React.useContext(SearchContext); - const navigation = useNavigation(); - - return ( - - - {artistData?.length ? ( - ({ - image: API.getArtistIllustration(artistData.id), - name: artistData.name, - id: artistData.id, - onPress: () => { - API.createSearchHistoryEntry(artistData.name, 'artist'); - navigation.navigate('Artist', { artistId: artistData.id }); - }, - }))} - cardComponent={ArtistCard} - /> - ) : ( - - )} - - ); -}; - -const GenreSearchComponent = (props: ItemSearchComponentProps) => { - const { genreData } = React.useContext(SearchContext); - const navigation = useNavigation(); - - return ( - - - {genreData?.length ? ( - ({ - image: API.getGenreIllustration(g.id), - name: g.name, - id: g.id, - onPress: () => { - API.createSearchHistoryEntry(g.name, 'genre'); - navigation.navigate('Genre', { genreId: g.id }); - }, - }))} - cardComponent={GenreCard} - /> - ) : ( - - )} - - ); -}; - -const FavoritesComponent = () => { - const navigation = useNavigation(); - const favoritesQuery = useQuery(API.getLikedSongs()); - - if (favoritesQuery.isError) { - navigation.navigate('Error'); - return <>; - } - if (!favoritesQuery.data) { - return ; - } - - return ( - - - - {favoritesQuery.data?.map((songData) => ( - { - API.createSearchHistoryEntry(songData.song.name, 'song'); //todo - navigation.navigate('Play', { songId: songData.song!.id }); - }} - /> - ))} - - - ); -}; - -const AllComponent = () => { - const screenSize = useBreakpointValue({ base: 'small', md: 'big' }); - const isMobileView = screenSize == 'small'; - - return ( - - - - - - - - - - - - - - - - ); -}; - -const FilterSwitch = () => { - const { filter } = React.useContext(SearchContext); - const [currentFilter, setCurrentFilter] = React.useState(filter); - - React.useEffect(() => { - setCurrentFilter(filter); - }, [filter]); - - switch (currentFilter) { - case 'all': - return ; - case 'song': - return ; - case 'artist': - return ; - case 'genre': - return ; - case 'favorites': - return ; - default: - return ( - `${e}: ${currentFilter}`} /> - ); - } -}; - -export const SearchResultComponent = () => { - const { stringQuery } = React.useContext(SearchContext); - const { filter } = React.useContext(SearchContext); - const shouldOutput = !!stringQuery.trim() || filter == 'favorites'; - - return shouldOutput ? ( - - - - ) : ( - - ); -}; diff --git a/front/views/SearchView.tsx b/front/views/SearchView.tsx deleted file mode 100644 index a06a9c87..00000000 --- a/front/views/SearchView.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import React, { useState } from 'react'; -import SearchBar from '../components/SearchBar'; -import Artist from '../models/Artist'; -import Song from '../models/Song'; -import Genre from '../models/Genre'; -import API from '../API'; -import { useQuery } from '../Queries'; -import { SearchResultComponent } from '../components/SearchResult'; -import { SafeAreaView } from 'react-native'; -import { Filter } from '../components/SearchBar'; -import { ScrollView } from 'native-base'; -import { RouteProps } from '../Navigation'; -import LikedSong from '../models/LikedSong'; -import ScaffoldCC from '../components/UI/ScaffoldCC'; - -interface SearchContextType { - filter: 'artist' | 'song' | 'genre' | 'all' | 'favorites'; - updateFilter: (newData: 'artist' | 'song' | 'genre' | 'all' | 'favorites') => void; - stringQuery: string; - updateStringQuery: (newData: string) => void; - songData: Song[]; - artistData: Artist[]; - genreData: Genre[]; - favoriteData: LikedSong[]; - isLoadingSong: boolean; - isLoadingArtist: boolean; - isLoadingGenre: boolean; - isLoadingFavorite: boolean; -} - -export const SearchContext = React.createContext({ - filter: 'all', - updateFilter: () => {}, - stringQuery: '', - updateStringQuery: () => {}, - songData: [], - artistData: [], - genreData: [], - favoriteData: [], - isLoadingSong: false, - isLoadingArtist: false, - isLoadingGenre: false, - isLoadingFavorite: false, -}); - -type SearchViewProps = { - query?: string; -}; - -const SearchView = (props: RouteProps) => { - const [filter, setFilter] = useState('all'); - const [stringQuery, setStringQuery] = useState(props?.query ?? ''); - - //flemme de corriger de toute facon c'est déprecié et bientot remplacé - const { isLoading: isLoadingSong, data: songData = [] } = useQuery( - API.searchSongs({ artist: undefined, genre: undefined, query: 'zeruigze' }), - { enabled: !!stringQuery } - ); - - const { isLoading: isLoadingArtist, data: artistData = [] } = useQuery( - API.searchArtists(stringQuery), - { enabled: !!stringQuery } - ); - - const { isLoading: isLoadingGenre, data: genreData = [] } = useQuery( - API.searchGenres(stringQuery), - { enabled: !!stringQuery } - ); - - const { isLoading: isLoadingFavorite, data: favoriteData = [] } = useQuery( - API.getLikedSongs(), - { enabled: true } - ); - - const updateFilter = (newData: Filter) => { - // called when the filter is changed - setFilter(newData); - }; - - const updateStringQuery = (newData: string) => { - // called when the stringQuery is updated - setStringQuery(newData); - }; - - return ( - - - - - - - - - - - ); -}; - -export default SearchView; From 40f16ab9ca273a919da7a6f5b2cdbc2e98e4d607 Mon Sep 17 00:00:00 2001 From: danis Date: Mon, 8 Jan 2024 00:00:40 +0100 Subject: [PATCH 14/29] lint --- front/API.ts | 7 ++- front/views/V2/SearchView.tsx | 87 +++++++++++++++++------------------ 2 files changed, 44 insertions(+), 50 deletions(-) diff --git a/front/API.ts b/front/API.ts index 844be9e8..5216e078 100644 --- a/front/API.ts +++ b/front/API.ts @@ -1,5 +1,4 @@ import Artist, { ArtistHandler } from './models/Artist'; -import Album from './models/Album'; import Chapter from './models/Chapter'; import Lesson from './models/Lesson'; import Genre, { GenreHandler } from './models/Genre'; @@ -714,9 +713,9 @@ export default class API { return { key: ['search', query.query], exec: () => { - return API.fetch( - { - route: `/search/songs/${query.query}${queryString}`, + return API.fetch( + { + route: `/search/songs/${query.query}${queryString}`, }, { handler: ListHandler(SongHandler) } ); diff --git a/front/views/V2/SearchView.tsx b/front/views/V2/SearchView.tsx index 63a04eb7..d8fecb5d 100644 --- a/front/views/V2/SearchView.tsx +++ b/front/views/V2/SearchView.tsx @@ -17,7 +17,7 @@ export type searchProps = { query: string; }; -const Oui = ({yes}: {yes: any[]}) => { +const Oui = ({ yes }: { yes: any[] }) => { const { colors } = useTheme(); const screenSize = useBreakpointValue({ base: 'small', md: 'md', xl: 'xl' }); const isBigScreen = screenSize === 'xl'; @@ -49,24 +49,25 @@ const Oui = ({yes}: {yes: any[]}) => { { text: translate('musicListTitleBestScore'), icon: Cup }, ].map((value) => ( - {/* Conditional rendering based on screen size. */} - {isBigScreen && ( - - {value.text} - - )} - {/* Icon with color based on the current color scheme. */} - - + key={value.text} + style={{ + display: 'flex', + flex: 1, + maxWidth: isBigScreen ? 150 : 50, + height: '100%', + alignItems: 'center', + justifyContent: isBigScreen ? 'flex-end' : 'center', + }} + > + {/* Conditional rendering based on screen size. */} + {isBigScreen && ( + + {value.text} + + )} + {/* Icon with color based on the current color scheme. */} + + ))} ), @@ -83,42 +84,36 @@ const Oui = ({yes}: {yes: any[]}) => { keyExtractor={(item) => item.artist + item.song} /> ); -} +}; // eslint-disable-next-line @typescript-eslint/ban-types const SearchView = (props: RouteProps<{}>) => { const navigation = useNavigation(); - const artists = useQuery(API.getAllArtists()); + const artists = useQuery(API.getAllArtists()); const [searchQuery, setSearchQuery] = React.useState({} as searchProps); const rawResult = useQuery(API.searchSongs(searchQuery)); const result = - rawResult.data?.map((song) => ({ - artist: artists.data?.find((artist) => artist.id === song?.artist?.id)?.name ?? 'unknown artist', - song: song?.name, - image: song?.cover, - level: 42, - lastScore: 42, - bestScore: 42, - liked: true, - onLike: () => { - 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); - } + rawResult.data?.map((song) => ({ + artist: + artists.data?.find((artist) => artist.id === song?.artist?.id)?.name ?? + 'unknown artist', + song: song?.name, + image: song?.cover, + level: 42, + lastScore: 42, + bestScore: 42, + liked: true, + onLike: () => { + console.log('onLike'); + }, + onPlay: () => navigation.navigate('Play', { songId: song.id }), + })) ?? []; return ( - + setSearchQuery(query)} /> - {result.length != 0 - ? - : } + {result.length != 0 ? : } ); @@ -130,7 +125,7 @@ const styles = StyleSheet.create({ gap: 2, borderRadius: 10, overflow: 'hidden', - } + }, }); -export default SearchView; \ No newline at end of file +export default SearchView; From eb245118dc891a57157a058ed201a2aa33854c55 Mon Sep 17 00:00:00 2001 From: Amaury <75248680+AmauryDanisCousandier@users.noreply.github.com> Date: Mon, 8 Jan 2024 12:17:48 +0100 Subject: [PATCH 15/29] style(../V2/SearchView): function name change --- front/views/V2/SearchView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/front/views/V2/SearchView.tsx b/front/views/V2/SearchView.tsx index d8fecb5d..8c6beaa6 100644 --- a/front/views/V2/SearchView.tsx +++ b/front/views/V2/SearchView.tsx @@ -17,7 +17,7 @@ export type searchProps = { query: string; }; -const Oui = ({ yes }: { yes: any[] }) => { +const MusicListNoOpti = ({ list }: { list: any[] }) => { const { colors } = useTheme(); const screenSize = useBreakpointValue({ base: 'small', md: 'md', xl: 'xl' }); const isBigScreen = screenSize === 'xl'; @@ -113,7 +113,7 @@ const SearchView = (props: RouteProps<{}>) => { setSearchQuery(query)} /> - {result.length != 0 ? : } + {result.length != 0 ? : } ); From 9416393618224603ee14cd621db33661b353fdba Mon Sep 17 00:00:00 2001 From: Amaury <75248680+AmauryDanisCousandier@users.noreply.github.com> Date: Mon, 8 Jan 2024 12:24:38 +0100 Subject: [PATCH 16/29] Update SearchView.tsx var name --- front/views/V2/SearchView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front/views/V2/SearchView.tsx b/front/views/V2/SearchView.tsx index 8c6beaa6..ce9cb669 100644 --- a/front/views/V2/SearchView.tsx +++ b/front/views/V2/SearchView.tsx @@ -79,7 +79,7 @@ const MusicListNoOpti = ({ list }: { list: any[] }) => { nestedScrollEnabled style={styles.container} ListHeaderComponent={headerComponent} - data={yes} + data={list} renderItem={({ item }) => } keyExtractor={(item) => item.artist + item.song} /> From 7a2b8777140122a39adde71672f4f89aec603a5c Mon Sep 17 00:00:00 2001 From: Amaury Danis Cousandier Date: Mon, 8 Jan 2024 23:31:15 +0100 Subject: [PATCH 17/29] feat(searchview2): wip --- front/views/V2/SearchView.tsx | 52 ++++++++++++++++++++++++++++++----- 1 file changed, 45 insertions(+), 7 deletions(-) diff --git a/front/views/V2/SearchView.tsx b/front/views/V2/SearchView.tsx index ce9cb669..3788dbf4 100644 --- a/front/views/V2/SearchView.tsx +++ b/front/views/V2/SearchView.tsx @@ -10,6 +10,9 @@ import SearchHistory from '../../components/V2/SearchHistory'; import ScaffoldCC from '../../components/UI/ScaffoldCC'; import MusicItem from '../../components/UI/MusicItem'; import API from '../../API'; +import { useMutation, useQueryClient } from 'react-query'; +import LoadingComponent from '../../components/Loading'; +import ErrorView from '../ErrorView'; export type searchProps = { artist: number | undefined; @@ -92,22 +95,57 @@ const SearchView = (props: RouteProps<{}>) => { const artists = useQuery(API.getAllArtists()); const [searchQuery, setSearchQuery] = React.useState({} as searchProps); const rawResult = useQuery(API.searchSongs(searchQuery)); - const result = - rawResult.data?.map((song) => ({ + const queryClient = useQueryClient(); + const userQuery = useQuery(API.getUserInfo()); + let result: any[]; + + const { mutate } = useMutation( + (songId: number) => API.addLikedSong(songId), + { + onSuccess: () => { + queryClient.setQueryData(['search'], (prevData: any[] | undefined) => { + if (prevData) { + return prevData.map((song) => { + if (song.id === songId) { + return { + ...song, + liked: !song.liked, + }; + } + return song; + }); + } + return prevData; + }); + }, + } + ); + + if (userQuery.isLoading) { + return + } + + if (userQuery.isError) { + return + } + + if (userQuery.isSuccess) { + result = rawResult.data?.map((song) => ({ artist: artists.data?.find((artist) => artist.id === song?.artist?.id)?.name ?? 'unknown artist', song: song?.name, image: song?.cover, - level: 42, - lastScore: 42, - bestScore: 42, - liked: true, + level: song?.difficulties.chordcomplexity, + lastScore: song?.lastScore, + bestScore: song?.bestScore, + liked: song?.likedByUsers?.includes(userQuery.data.id) ? true : false, onLike: () => { - console.log('onLike'); + mutate(song.id); }, onPlay: () => navigation.navigate('Play', { songId: song.id }), })) ?? []; + } return ( From 29b2bedae019ca1f3cfb4d41536c17d7fc6ddc5f Mon Sep 17 00:00:00 2001 From: Amaury Danis Cousandier Date: Tue, 9 Jan 2024 21:28:37 +0100 Subject: [PATCH 18/29] wip --- front/views/V2/SearchView.tsx | 29 +++++++---------------------- 1 file changed, 7 insertions(+), 22 deletions(-) diff --git a/front/views/V2/SearchView.tsx b/front/views/V2/SearchView.tsx index 3788dbf4..c272c30a 100644 --- a/front/views/V2/SearchView.tsx +++ b/front/views/V2/SearchView.tsx @@ -95,31 +95,16 @@ const SearchView = (props: RouteProps<{}>) => { const artists = useQuery(API.getAllArtists()); const [searchQuery, setSearchQuery] = React.useState({} as searchProps); const rawResult = useQuery(API.searchSongs(searchQuery)); - const queryClient = useQueryClient(); const userQuery = useQuery(API.getUserInfo()); - let result: any[]; - + let result: any[] = []; + const { mutate } = useMutation( - (songId: number) => API.addLikedSong(songId), - { + (songId: number) => API.addLikedSong(songId), { onSuccess: () => { - queryClient.setQueryData(['search'], (prevData: any[] | undefined) => { - if (prevData) { - return prevData.map((song) => { - if (song.id === songId) { - return { - ...song, - liked: !song.liked, - }; - } - return song; - }); - } - return prevData; - }); - }, + rawResult.refetch(); + } } - ); + ); if (userQuery.isLoading) { return @@ -139,7 +124,7 @@ const SearchView = (props: RouteProps<{}>) => { level: song?.difficulties.chordcomplexity, lastScore: song?.lastScore, bestScore: song?.bestScore, - liked: song?.likedByUsers?.includes(userQuery.data.id) ? true : false, + liked: song?.likedByUsers?.some((user) => user.userId === userQuery.data.id) ?? false, onLike: () => { mutate(song.id); }, From 934010a0c1d092594ff6446544f58354a9fcfb17 Mon Sep 17 00:00:00 2001 From: Amaury Danis Cousandier Date: Tue, 9 Jan 2024 21:35:48 +0100 Subject: [PATCH 19/29] tsc pretty lint --- front/views/V2/SearchView.tsx | 48 +++++++++++++++++------------------ 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/front/views/V2/SearchView.tsx b/front/views/V2/SearchView.tsx index c272c30a..c495569d 100644 --- a/front/views/V2/SearchView.tsx +++ b/front/views/V2/SearchView.tsx @@ -10,7 +10,7 @@ import SearchHistory from '../../components/V2/SearchHistory'; import ScaffoldCC from '../../components/UI/ScaffoldCC'; import MusicItem from '../../components/UI/MusicItem'; import API from '../../API'; -import { useMutation, useQueryClient } from 'react-query'; +import { useMutation } from 'react-query'; import LoadingComponent from '../../components/Loading'; import ErrorView from '../ErrorView'; @@ -98,38 +98,38 @@ const SearchView = (props: RouteProps<{}>) => { const userQuery = useQuery(API.getUserInfo()); let result: any[] = []; - const { mutate } = useMutation( - (songId: number) => API.addLikedSong(songId), { - onSuccess: () => { + const { mutate } = useMutation((songId: number) => API.addLikedSong(songId), { + onSuccess: () => { rawResult.refetch(); - } - } - ); + }, + }); if (userQuery.isLoading) { - return + return ; } if (userQuery.isError) { - return + return ; } if (userQuery.isSuccess) { - result = rawResult.data?.map((song) => ({ - artist: - artists.data?.find((artist) => artist.id === song?.artist?.id)?.name ?? - 'unknown artist', - song: song?.name, - image: song?.cover, - level: song?.difficulties.chordcomplexity, - lastScore: song?.lastScore, - bestScore: song?.bestScore, - liked: song?.likedByUsers?.some((user) => user.userId === userQuery.data.id) ?? false, - onLike: () => { - mutate(song.id); - }, - onPlay: () => navigation.navigate('Play', { songId: song.id }), - })) ?? []; + result = + rawResult.data?.map((song) => ({ + artist: + artists.data?.find((artist) => artist.id === song?.artist?.id)?.name ?? + 'unknown artist', + song: song?.name, + image: song?.cover, + level: song?.difficulties.chordcomplexity, + lastScore: song?.lastScore, + bestScore: song?.bestScore, + liked: + song?.likedByUsers?.some((user) => user.userId === userQuery.data.id) ?? false, + onLike: () => { + mutate(song.id); + }, + onPlay: () => navigation.navigate('Play', { songId: song.id }), + })) ?? []; } return ( From caa3322676bab26760ccc9cd4cd1056588041e4a Mon Sep 17 00:00:00 2001 From: Amaury Danis Cousandier Date: Thu, 11 Jan 2024 17:46:27 +0100 Subject: [PATCH 20/29] liked handled properly --- front/components/V2/SearchBar.tsx | 1 + front/views/V2/SearchView.tsx | 19 ++++++++----------- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/front/components/V2/SearchBar.tsx b/front/components/V2/SearchBar.tsx index 3478be78..961e4b19 100644 --- a/front/components/V2/SearchBar.tsx +++ b/front/components/V2/SearchBar.tsx @@ -156,6 +156,7 @@ const SearchBarComponent = (props: { onValidate: (searchData: searchProps) => vo key={index} name={artist.name} onPress={() => { + props.onValidate({artist: artist.id, genre: genresQuery.data?.find((g) => g.name === genre)?.id ?? undefined, query: query}) setArtist(artist.name); }} /> diff --git a/front/views/V2/SearchView.tsx b/front/views/V2/SearchView.tsx index c495569d..8f115398 100644 --- a/front/views/V2/SearchView.tsx +++ b/front/views/V2/SearchView.tsx @@ -13,6 +13,7 @@ import API from '../../API'; import { useMutation } from 'react-query'; import LoadingComponent from '../../components/Loading'; import ErrorView from '../ErrorView'; +import { useLikeSongMutation } from '../../utils/likeSongMutation'; export type searchProps = { artist: number | undefined; @@ -96,15 +97,12 @@ const SearchView = (props: RouteProps<{}>) => { const [searchQuery, setSearchQuery] = React.useState({} as searchProps); const rawResult = useQuery(API.searchSongs(searchQuery)); const userQuery = useQuery(API.getUserInfo()); - let result: any[] = []; + const likedSongs = useQuery(API.getLikedSongs()); + const { mutateAsync } = useLikeSongMutation(); - const { mutate } = useMutation((songId: number) => API.addLikedSong(songId), { - onSuccess: () => { - rawResult.refetch(); - }, - }); + let result: any[] = [];; - if (userQuery.isLoading) { + if (userQuery.isLoading || likedSongs.isLoading || userQuery.isLoading) { return ; } @@ -123,11 +121,10 @@ const SearchView = (props: RouteProps<{}>) => { level: song?.difficulties.chordcomplexity, lastScore: song?.lastScore, bestScore: song?.bestScore, - liked: - song?.likedByUsers?.some((user) => user.userId === userQuery.data.id) ?? false, + liked: likedSongs.data?.some(x => x.songId === song.id) ?? false, onLike: () => { - mutate(song.id); - }, + mutateAsync({ songId: song.id, like: false }).then(() => likedSongs.refetch()); + }, onPlay: () => navigation.navigate('Play', { songId: song.id }), })) ?? []; } From a69e5ac0095ac599555d130f71d30c580b6fa114 Mon Sep 17 00:00:00 2001 From: Amaury Danis Cousandier Date: Thu, 11 Jan 2024 17:54:50 +0100 Subject: [PATCH 21/29] fix artist name --- front/views/V2/SearchView.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/front/views/V2/SearchView.tsx b/front/views/V2/SearchView.tsx index 8f115398..a15fabf9 100644 --- a/front/views/V2/SearchView.tsx +++ b/front/views/V2/SearchView.tsx @@ -93,7 +93,7 @@ const MusicListNoOpti = ({ list }: { list: any[] }) => { // eslint-disable-next-line @typescript-eslint/ban-types const SearchView = (props: RouteProps<{}>) => { const navigation = useNavigation(); - const artists = useQuery(API.getAllArtists()); + const artistsQuery = useQuery(API.getAllArtists()); const [searchQuery, setSearchQuery] = React.useState({} as searchProps); const rawResult = useQuery(API.searchSongs(searchQuery)); const userQuery = useQuery(API.getUserInfo()); @@ -102,7 +102,7 @@ const SearchView = (props: RouteProps<{}>) => { let result: any[] = [];; - if (userQuery.isLoading || likedSongs.isLoading || userQuery.isLoading) { + if (userQuery.isLoading || likedSongs.isLoading || artistsQuery.isLoading) { return ; } @@ -114,14 +114,14 @@ const SearchView = (props: RouteProps<{}>) => { result = rawResult.data?.map((song) => ({ artist: - artists.data?.find((artist) => artist.id === song?.artist?.id)?.name ?? + artistsQuery.data?.find((artist) => artist.id == song?.artist?.id)?.name ?? 'unknown artist', song: song?.name, image: song?.cover, level: song?.difficulties.chordcomplexity, lastScore: song?.lastScore, bestScore: song?.bestScore, - liked: likedSongs.data?.some(x => x.songId === song.id) ?? false, + liked: likedSongs.data?.some(x => x.songId == song.id) ?? false, onLike: () => { mutateAsync({ songId: song.id, like: false }).then(() => likedSongs.refetch()); }, From 29a9ffce74421110449b891c09073bdc854c8be3 Mon Sep 17 00:00:00 2001 From: Amaury Danis Cousandier Date: Thu, 11 Jan 2024 17:56:32 +0100 Subject: [PATCH 22/29] pretty tsc lint --- front/components/V2/SearchBar.tsx | 8 +++++++- front/views/V2/SearchView.tsx | 9 ++++----- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/front/components/V2/SearchBar.tsx b/front/components/V2/SearchBar.tsx index 961e4b19..4b9cf722 100644 --- a/front/components/V2/SearchBar.tsx +++ b/front/components/V2/SearchBar.tsx @@ -156,7 +156,13 @@ const SearchBarComponent = (props: { onValidate: (searchData: searchProps) => vo key={index} name={artist.name} onPress={() => { - props.onValidate({artist: artist.id, genre: genresQuery.data?.find((g) => g.name === genre)?.id ?? undefined, query: query}) + props.onValidate({ + artist: artist.id, + genre: + genresQuery.data?.find((g) => g.name === genre) + ?.id ?? undefined, + query: query, + }); setArtist(artist.name); }} /> diff --git a/front/views/V2/SearchView.tsx b/front/views/V2/SearchView.tsx index a15fabf9..0171e8e3 100644 --- a/front/views/V2/SearchView.tsx +++ b/front/views/V2/SearchView.tsx @@ -10,7 +10,6 @@ import SearchHistory from '../../components/V2/SearchHistory'; import ScaffoldCC from '../../components/UI/ScaffoldCC'; import MusicItem from '../../components/UI/MusicItem'; import API from '../../API'; -import { useMutation } from 'react-query'; import LoadingComponent from '../../components/Loading'; import ErrorView from '../ErrorView'; import { useLikeSongMutation } from '../../utils/likeSongMutation'; @@ -100,7 +99,7 @@ const SearchView = (props: RouteProps<{}>) => { const likedSongs = useQuery(API.getLikedSongs()); const { mutateAsync } = useLikeSongMutation(); - let result: any[] = [];; + let result: any[] = []; if (userQuery.isLoading || likedSongs.isLoading || artistsQuery.isLoading) { return ; @@ -121,10 +120,10 @@ const SearchView = (props: RouteProps<{}>) => { level: song?.difficulties.chordcomplexity, lastScore: song?.lastScore, bestScore: song?.bestScore, - liked: likedSongs.data?.some(x => x.songId == song.id) ?? false, + liked: likedSongs.data?.some((x) => x.songId == song.id) ?? false, onLike: () => { - mutateAsync({ songId: song.id, like: false }).then(() => likedSongs.refetch()); - }, + mutateAsync({ songId: song.id, like: false }).then(() => likedSongs.refetch()); + }, onPlay: () => navigation.navigate('Play', { songId: song.id }), })) ?? []; } From 3f0d0d523be2b48c428ec350f657036ba6ad2f93 Mon Sep 17 00:00:00 2001 From: Amaury Danis Cousandier Date: Fri, 12 Jan 2024 09:19:06 +0100 Subject: [PATCH 23/29] like state --- front/views/V2/SearchView.tsx | 36 ++++++++++++++++++++--------------- 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/front/views/V2/SearchView.tsx b/front/views/V2/SearchView.tsx index 0171e8e3..380bd36b 100644 --- a/front/views/V2/SearchView.tsx +++ b/front/views/V2/SearchView.tsx @@ -111,21 +111,27 @@ const SearchView = (props: RouteProps<{}>) => { if (userQuery.isSuccess) { result = - rawResult.data?.map((song) => ({ - artist: - artistsQuery.data?.find((artist) => artist.id == song?.artist?.id)?.name ?? - 'unknown artist', - song: song?.name, - image: song?.cover, - level: song?.difficulties.chordcomplexity, - lastScore: song?.lastScore, - bestScore: song?.bestScore, - liked: likedSongs.data?.some((x) => x.songId == song.id) ?? false, - onLike: () => { - mutateAsync({ songId: song.id, like: false }).then(() => likedSongs.refetch()); - }, - onPlay: () => navigation.navigate('Play', { songId: song.id }), - })) ?? []; + rawResult.data?.map((song) => { + const isLiked = likedSongs.data?.some((x) => x.songId == song.id) ?? false; + + return { + artist: + artistsQuery.data?.find((artist) => artist.id == song?.artist?.id)?.name ?? + 'unknown artist', + song: song?.name, + image: song?.cover, + level: song?.difficulties.chordcomplexity, + lastScore: song?.lastScore, + bestScore: song?.bestScore, + liked: isLiked, + onLike: () => { + mutateAsync({ songId: song.id, like: !isLiked }).then(() => + likedSongs.refetch() + ); + }, + onPlay: () => navigation.navigate('Play', { songId: song.id }), + }; + }) ?? []; } return ( From 627b8df6581d0bdfa83a19a2ca9f15c0f8dae8bf Mon Sep 17 00:00:00 2001 From: Amaury Danis Cousandier Date: Fri, 12 Jan 2024 16:54:54 +0100 Subject: [PATCH 24/29] css fixed --- front/components/V2/SearchBar.tsx | 23 +++++++---------------- front/views/V2/SearchView.tsx | 2 +- 2 files changed, 8 insertions(+), 17 deletions(-) diff --git a/front/components/V2/SearchBar.tsx b/front/components/V2/SearchBar.tsx index 4b9cf722..1ccf789c 100644 --- a/front/components/V2/SearchBar.tsx +++ b/front/components/V2/SearchBar.tsx @@ -66,7 +66,7 @@ const SearchBarComponent = (props: { onValidate: (searchData: searchProps) => vo borderBottomColor: '#9E9E9E', display: 'flex', flexDirection: isMobileView ? 'column' : 'row', - alignItems: 'center', + maxWidth: '100%', width: '100%', margin: 5, padding: 16, @@ -78,7 +78,8 @@ const SearchBarComponent = (props: { onValidate: (searchData: searchProps) => vo flexGrow: 0, flexShrink: 0, flexDirection: 'row', - flexWrap: 'wrap', + flexWrap: 'nowrap', + maxWidth: '100%', }} > {artist && ( @@ -91,36 +92,26 @@ const SearchBarComponent = (props: { onValidate: (searchData: searchProps) => vo - + setQuery(value)} /> diff --git a/front/views/V2/SearchView.tsx b/front/views/V2/SearchView.tsx index 380bd36b..a13ec182 100644 --- a/front/views/V2/SearchView.tsx +++ b/front/views/V2/SearchView.tsx @@ -116,7 +116,7 @@ const SearchView = (props: RouteProps<{}>) => { return { artist: - artistsQuery.data?.find((artist) => artist.id == song?.artist?.id)?.name ?? + artistsQuery?.data?.find(({ id }) => id == song?.artistId)?.name ?? 'unknown artist', song: song?.name, image: song?.cover, From 86b2c1be509c6c0362191c5e1e22e9225e3f553d Mon Sep 17 00:00:00 2001 From: Amaury Danis Cousandier Date: Fri, 12 Jan 2024 17:53:39 +0100 Subject: [PATCH 25/29] histo --- front/views/V2/SearchView.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/front/views/V2/SearchView.tsx b/front/views/V2/SearchView.tsx index a13ec182..cf1d537a 100644 --- a/front/views/V2/SearchView.tsx +++ b/front/views/V2/SearchView.tsx @@ -94,7 +94,15 @@ const SearchView = (props: RouteProps<{}>) => { const navigation = useNavigation(); const artistsQuery = useQuery(API.getAllArtists()); const [searchQuery, setSearchQuery] = React.useState({} as searchProps); - const rawResult = useQuery(API.searchSongs(searchQuery)); + const rawResult = useQuery(API.searchSongs(searchQuery), { + onSuccess() { + const artist = + artistsQuery?.data?.find(({ id }) => id == searchQuery.artist)?.name ?? + 'unknown artist'; + searchQuery.query ? API.createSearchHistoryEntry(searchQuery.query, 'song') : null; + if (artist != 'unknown artist') API.createSearchHistoryEntry(artist, 'artist'); + }, + }); const userQuery = useQuery(API.getUserInfo()); const likedSongs = useQuery(API.getLikedSongs()); const { mutateAsync } = useLikeSongMutation(); From fd60f2d1717f6593931ebfd6b429c79d0e5b5852 Mon Sep 17 00:00:00 2001 From: Amaury Danis Cousandier Date: Fri, 12 Jan 2024 17:56:42 +0100 Subject: [PATCH 26/29] artist and genre keys to refetch without changing the query --- front/API.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front/API.ts b/front/API.ts index 5216e078..bb4dc413 100644 --- a/front/API.ts +++ b/front/API.ts @@ -711,7 +711,7 @@ export default class API { const queryString = queryParams.length > 0 ? `?${queryParams.join('&')}` : ''; return { - key: ['search', query.query], + key: ['search', query.query, query.artist, query.genre], exec: () => { return API.fetch( { From f2ad34c8abef4bd501f20b0d72bd22873eb32c2d Mon Sep 17 00:00:00 2001 From: Amaury Danis Cousandier Date: Sat, 13 Jan 2024 10:00:59 +0100 Subject: [PATCH 27/29] feat(search view v2): update API.searchSongs --- front/API.ts | 5 +++-- front/components/V2/SearchBar.tsx | 11 ++++++++++- front/i18n/Translations.ts | 2 +- front/views/V2/SearchView.tsx | 9 +++++---- 4 files changed, 19 insertions(+), 8 deletions(-) diff --git a/front/API.ts b/front/API.ts index 64c2e6d9..80e22985 100644 --- a/front/API.ts +++ b/front/API.ts @@ -705,6 +705,7 @@ export default class API { public static searchSongs(query: searchProps): Query { const queryParams: string[] = []; + if (query.query) queryParams.push(`q=${encodeURIComponent(query.query)}`); if (query.artist) queryParams.push(`artistId=${query.artist}`); if (query.genre) queryParams.push(`genreId=${query.genre}`); @@ -715,13 +716,13 @@ export default class API { exec: () => { return API.fetch( { - route: `/search/songs/${query.query}${queryString}`, + route: `/search/songs${queryString}`, }, { handler: ListHandler(SongHandler) } ); }, }; - } + } public static getPartitionMelodyUrl(songId: number): string { return `${API.baseUrl}/song/${songId}/assets/melody`; diff --git a/front/components/V2/SearchBar.tsx b/front/components/V2/SearchBar.tsx index 1ccf789c..2979d7b1 100644 --- a/front/components/V2/SearchBar.tsx +++ b/front/components/V2/SearchBar.tsx @@ -150,7 +150,7 @@ const SearchBarComponent = (props: { onValidate: (searchData: searchProps) => vo props.onValidate({ artist: artist.id, genre: - genresQuery.data?.find((g) => g.name === genre) + genresQuery.data?.find((a) => a.name === genre) ?.id ?? undefined, query: query, }); @@ -167,6 +167,15 @@ const SearchBarComponent = (props: { onValidate: (searchData: searchProps) => vo accessibilityLabel="Genre" onValueChange={(itemValue) => { setGenre(itemValue); + props.onValidate({ + artist: + artistsQuery.data?.find((a) => a.name === artist)?.id ?? + undefined, + genre: + genresQuery.data?.find((g) => g.name === itemValue)?.id ?? + undefined, + query: query, + }); }} > diff --git a/front/i18n/Translations.ts b/front/i18n/Translations.ts index 6c65c829..5dc903f8 100644 --- a/front/i18n/Translations.ts +++ b/front/i18n/Translations.ts @@ -307,7 +307,7 @@ export const en = { leaderBoardHeading: 'These are the best players', leaderBoardHeadingFull: 'The players having the best scores, thanks to their exceptional accuracy, are highlighted here.', - emptySelection: 'None,', + emptySelection: 'None', gamesPlayed: 'Games Played', metronome: 'Metronome', loading: 'Loading... Please Wait', diff --git a/front/views/V2/SearchView.tsx b/front/views/V2/SearchView.tsx index 712060c2..d2ebc56d 100644 --- a/front/views/V2/SearchView.tsx +++ b/front/views/V2/SearchView.tsx @@ -94,6 +94,7 @@ const SearchView = () => { const artistsQuery = useQuery(API.getAllArtists()); const [searchQuery, setSearchQuery] = React.useState({} as searchProps); const rawResult = useQuery(API.searchSongs(searchQuery), { + enabled: !!searchQuery.query || !!searchQuery.artist || !!searchQuery.genre, onSuccess() { const artist = artistsQuery?.data?.find(({ id }) => id == searchQuery.artist)?.name ?? @@ -142,10 +143,10 @@ const SearchView = () => { } return ( - - setSearchQuery(query)} /> - {result.length != 0 ? : } - + + setSearchQuery(query)} /> + {result.length != 0 ? : } + ); }; From 4ba4303b1e1221deedfb2cc6286069ff7ef20c6f Mon Sep 17 00:00:00 2001 From: Amaury Danis Cousandier Date: Sun, 14 Jan 2024 16:13:14 +0100 Subject: [PATCH 28/29] fix(../V2/SearchView): actual music list used + minor fixes --- front/API.ts | 5 ++-- front/components/V2/SearchBar.tsx | 6 ++--- front/views/V2/SearchView.tsx | 43 +++---------------------------- 3 files changed, 10 insertions(+), 44 deletions(-) diff --git a/front/API.ts b/front/API.ts index 80e22985..25b9bfa2 100644 --- a/front/API.ts +++ b/front/API.ts @@ -702,17 +702,18 @@ export default class API { return `${API.baseUrl}/song/${songId}/assets/partition`; } - public static searchSongs(query: searchProps): Query { + public static searchSongs(query: searchProps, include?: SongInclude[]): Query { const queryParams: string[] = []; if (query.query) queryParams.push(`q=${encodeURIComponent(query.query)}`); if (query.artist) queryParams.push(`artistId=${query.artist}`); if (query.genre) queryParams.push(`genreId=${query.genre}`); + if (include) queryParams.push(`include=${include.join(',')}`) const queryString = queryParams.length > 0 ? `?${queryParams.join('&')}` : ''; return { - key: ['search', query.query, query.artist, query.genre], + key: ['search', query.query, query.artist, query.genre, include], exec: () => { return API.fetch( { diff --git a/front/components/V2/SearchBar.tsx b/front/components/V2/SearchBar.tsx index 2979d7b1..8f476320 100644 --- a/front/components/V2/SearchBar.tsx +++ b/front/components/V2/SearchBar.tsx @@ -29,9 +29,9 @@ const ArtistChipComponent = (props: ArtistChipProps) => { }} > {props.selected ? ( - + ) : ( - + )} {props.name} @@ -82,7 +82,7 @@ const SearchBarComponent = (props: { onValidate: (searchData: searchProps) => vo maxWidth: '100%', }} > - {artist && ( + {!!artist && ( setArtist('')} name={artist} diff --git a/front/views/V2/SearchView.tsx b/front/views/V2/SearchView.tsx index d2ebc56d..cfaada95 100644 --- a/front/views/V2/SearchView.tsx +++ b/front/views/V2/SearchView.tsx @@ -12,6 +12,7 @@ import API from '../../API'; import LoadingComponent from '../../components/Loading'; import ErrorView from '../ErrorView'; import { useLikeSongMutation } from '../../utils/likeSongMutation'; +import MusicListCC from '../../components/UI/MusicList'; export type searchProps = { artist: number | undefined; @@ -88,12 +89,10 @@ const MusicListNoOpti = ({ list }: { list: any[] }) => { ); }; -// eslint-disable-next-line @typescript-eslint/ban-types const SearchView = () => { - const navigation = useNavigation(); const artistsQuery = useQuery(API.getAllArtists()); const [searchQuery, setSearchQuery] = React.useState({} as searchProps); - const rawResult = useQuery(API.searchSongs(searchQuery), { + const rawResult = useQuery(API.searchSongs(searchQuery, ['artist']), { enabled: !!searchQuery.query || !!searchQuery.artist || !!searchQuery.genre, onSuccess() { const artist = @@ -103,49 +102,15 @@ const SearchView = () => { if (artist != 'unknown artist') API.createSearchHistoryEntry(artist, 'artist'); }, }); - const userQuery = useQuery(API.getUserInfo()); - const likedSongs = useQuery(API.getLikedSongs()); - const { mutateAsync } = useLikeSongMutation(); - let result: any[] = []; - - if (userQuery.isLoading || likedSongs.isLoading || artistsQuery.isLoading) { + if (artistsQuery.isLoading) { return ; } - if (userQuery.isError) { - return ; - } - - if (userQuery.isSuccess) { - result = - rawResult.data?.map((song) => { - const isLiked = likedSongs.data?.some((x) => x.songId == song.id) ?? false; - - return { - artist: - artistsQuery?.data?.find(({ id }) => id == song?.artistId)?.name ?? - 'unknown artist', - song: song?.name, - image: song?.cover, - level: song?.difficulties.chordcomplexity, - lastScore: song?.lastScore, - bestScore: song?.bestScore, - liked: isLiked, - onLike: () => { - mutateAsync({ songId: song.id, like: !isLiked }).then(() => - likedSongs.refetch() - ); - }, - onPlay: () => navigation.navigate('Play', { songId: song.id }), - }; - }) ?? []; - } - return ( setSearchQuery(query)} /> - {result.length != 0 ? : } + {rawResult.isSuccess ? : } ); }; From a3893bdb2bd8597904148b27fb3268d173944632 Mon Sep 17 00:00:00 2001 From: Amaury Danis Cousandier Date: Sun, 14 Jan 2024 16:21:26 +0100 Subject: [PATCH 29/29] yay --- front/API.ts | 2 +- front/views/V2/SearchView.tsx | 99 ++++------------------------------- 2 files changed, 12 insertions(+), 89 deletions(-) diff --git a/front/API.ts b/front/API.ts index 25b9bfa2..8a36f52b 100644 --- a/front/API.ts +++ b/front/API.ts @@ -708,7 +708,7 @@ export default class API { if (query.query) queryParams.push(`q=${encodeURIComponent(query.query)}`); if (query.artist) queryParams.push(`artistId=${query.artist}`); if (query.genre) queryParams.push(`genreId=${query.genre}`); - if (include) queryParams.push(`include=${include.join(',')}`) + if (include) queryParams.push(`include=${include.join(',')}`); const queryString = queryParams.length > 0 ? `?${queryParams.join('&')}` : ''; diff --git a/front/views/V2/SearchView.tsx b/front/views/V2/SearchView.tsx index cfaada95..76761baa 100644 --- a/front/views/V2/SearchView.tsx +++ b/front/views/V2/SearchView.tsx @@ -1,17 +1,10 @@ -import React, { useMemo } from 'react'; -import { FlatList, HStack, useBreakpointValue, useTheme, Text, Row } from 'native-base'; -import { useNavigation } from '../../Navigation'; -import { ArrowRotateLeft, Cup } from 'iconsax-react-native'; -import { View, StyleSheet } from 'react-native'; +import React from 'react'; +import { View } from 'react-native'; import { useQuery } from '../../Queries'; -import { translate } from '../../i18n/i18n'; import SearchBarComponent from '../../components/V2/SearchBar'; import SearchHistory from '../../components/V2/SearchHistory'; -import MusicItem from '../../components/UI/MusicItem'; import API from '../../API'; import LoadingComponent from '../../components/Loading'; -import ErrorView from '../ErrorView'; -import { useLikeSongMutation } from '../../utils/likeSongMutation'; import MusicListCC from '../../components/UI/MusicList'; export type searchProps = { @@ -20,75 +13,6 @@ export type searchProps = { query: string; }; -const MusicListNoOpti = ({ list }: { list: any[] }) => { - const { colors } = useTheme(); - const screenSize = useBreakpointValue({ base: 'small', md: 'md', xl: 'xl' }); - const isBigScreen = screenSize === 'xl'; - - const headerComponent = useMemo( - () => ( - - - {translate('musicListTitleSong')} - - {[ - { text: translate('musicListTitleLastScore'), icon: ArrowRotateLeft }, - { text: translate('musicListTitleBestScore'), icon: Cup }, - ].map((value) => ( - - {/* Conditional rendering based on screen size. */} - {isBigScreen && ( - - {value.text} - - )} - {/* Icon with color based on the current color scheme. */} - - - ))} - - ), - [colors.coolGray[500], isBigScreen] - ); - - return ( - } - keyExtractor={(item) => item.artist + item.song} - /> - ); -}; - const SearchView = () => { const artistsQuery = useQuery(API.getAllArtists()); const [searchQuery, setSearchQuery] = React.useState({} as searchProps); @@ -110,18 +34,17 @@ const SearchView = () => { return ( setSearchQuery(query)} /> - {rawResult.isSuccess ? : } + {rawResult.isSuccess ? ( + + ) : ( + + )} ); }; -const styles = StyleSheet.create({ - container: { - flex: 1, - gap: 2, - borderRadius: 10, - overflow: 'hidden', - }, -}); - export default SearchView;