Front: Use Mutations to update 'liked' state

front/components/FavSongRow.tsx

@@ -2,9 +2,9 @@ import { HStack, IconButton, Image, Text } from 'native-base';
 import RowCustom from './RowCustom';
 import TextButton from './TextButton';
 import { MaterialIcons } from '@expo/vector-icons';
-import API from '../API';
 import DurationComponent from './DurationComponent';
 import Song from '../models/Song';
+import { useLikeSongMutation } from '../utils/likeSongMutation';
 
 type FavSongRowProps = {
 	song: Song;
@@ -13,6 +13,8 @@ type FavSongRowProps = {
 };
 
 const FavSongRow = ({ song, addedDate, onPress }: FavSongRowProps) => {
+	const { mutate } = useLikeSongMutation();
+
 	return (
 		<RowCustom width={'100%'}>
 			<HStack px={2} space={5} justifyContent={'space-between'}>
@@ -63,7 +65,7 @@ const FavSongRow = ({ song, addedDate, onPress }: FavSongRowProps) => {
 					variant={'ghost'}
 					borderRadius={'full'}
 					onPress={() => {
-						API.removeLikedSong(song.id);
+						mutate({ songId: song.id, like: false });
 					}}
 					_icon={{
 						as: MaterialIcons,

front/components/SearchResult.tsx

@@ -24,6 +24,7 @@ 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,
@@ -89,6 +90,7 @@ const SongsSearchComponent = (props: SongsSearchComponentProps) => {
 		if (state == false) await API.removeLikedSong(songId);
 		else await API.addLikedSong(songId);
 	};
+	const { mutate } = useLikeSongMutation();
 
 	return (
 		<ScrollView>
@@ -102,8 +104,8 @@ const SongsSearchComponent = (props: SongsSearchComponentProps) => {
 							isLiked={
 								!favoritesQuery.data?.find((query) => query?.songId == comp.id)
 							}
-							handleLike={(state: boolean, songId: number) =>
-								handleFavoriteButton(state, songId)
+							handleLike={async (state: boolean, songId: number) =>
+								mutate({ songId: songId, like: state })
 							}
 							onPress={() => {
 								API.createSearchHistoryEntry(comp.name, 'song');

front/utils/likeSongMutation.ts

@@ -0,0 +1,19 @@
+import { useMutation, useQueryClient } from "react-query"
+import API from "../API";
+
+/**
+ * Mutation to like/unlike a song
+ */
+export const useLikeSongMutation = () => {
+	const queryClient = useQueryClient();
+
+	return useMutation(({ songId, like }: {songId: number, like: boolean}) => {
+		const apiCall = like ? API.addLikedSong : API.removeLikedSong
+		
+		return apiCall(songId).then(() => {
+			queryClient.invalidateQueries('liked songs')
+			queryClient.invalidateQueries('songs')
+			queryClient.invalidateQueries([songId])
+		});
+	});
+}

front/views/ArtistDetailsView.tsx

@@ -7,6 +7,7 @@ import SongRow from '../components/SongRow';
 import { Key } from 'react';
 import { RouteProps, useNavigation } from '../Navigation';
 import { ImageBackground } from 'react-native';
+import { useLikeSongMutation } from '../utils/likeSongMutation';
 
 type ArtistDetailsViewProps = {
 	artistId: number;
@@ -20,11 +21,7 @@ const ArtistDetailsView = ({ artistId }: RouteProps<ArtistDetailsViewProps>) =>
 	const navigation = useNavigation();
 
 	const favoritesQuery = useQuery(API.getLikedSongs());
-
-	const handleFavoriteButton = async (state: boolean, songId: number): Promise<void> => {
-		if (state == false) await API.removeLikedSong(songId);
-		else await API.addLikedSong(songId);
-	};
+	const { mutate } = useLikeSongMutation();
 
 	if (artistQuery.isError || songsQuery.isError) {
 		navigation.navigate('Error');
@@ -53,8 +50,8 @@ const ArtistDetailsView = ({ artistId }: RouteProps<ArtistDetailsViewProps>) =>
 								isLiked={
 									!favoritesQuery.data?.find((query) => query?.songId == comp.id)
 								}
-								handleLike={(state: boolean, songId: number) =>
-									handleFavoriteButton(state, songId)
+								handleLike={async (state: boolean, songId: number) =>
+									mutate({ songId: songId, like: state })
 								}
 								onPress={() => {
 									API.createSearchHistoryEntry(comp.name, 'song');

front/views/MusicView.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
+<<<<<<< HEAD
 import { Center, useBreakpointValue, useTheme } from 'native-base';
+=======
+import { Center, Text, Toast, useBreakpointValue, useTheme } from 'native-base';
+>>>>>>> 06cfa56 (Front: Use Mutations to update 'liked' state)
 import { useWindowDimensions } from 'react-native';
 import {
 	TabView,
@@ -18,10 +22,12 @@ import MusicList from '../components/UI/MusicList';
 import { useQuery } from '../Queries';
 import API from '../API';
 import { LoadingView } from '../components/Loading';
+import { useLikeSongMutation } from '../utils/likeSongMutation';
 
 export const FavoritesMusic = () => {
 	const navigation = useNavigation();
 	const likedSongs = useQuery(API.getLikedSongs(['artist', 'SongHistory']));
+	const { mutate } = useLikeSongMutation();
 
 	const musics =
 		likedSongs.data?.map((x) => ({
@@ -32,7 +38,8 @@ export const FavoritesMusic = () => {
 			bestScore: x.song.bestScore,
 			liked: true,
 			onLike: () => {
-				console.log('onLike');
+				Toast.show({ description: 'aaaaaaa' })
+				mutate({ songId: x.id, like: false })
 			},
 			onPlay: () => navigation.navigate('Play', { songId: x.song.id }),
 		})) ?? [];