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');