diff --git a/front/views/V2/SearchView.tsx b/front/views/V2/SearchView.tsx index ce9cb66..3788dbf 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 (