fixed mirgation + back-end + front end filter, heart shaped button and special FavSongRow

front/components/SongRow.tsx

@@ -1,14 +1,23 @@
-import { HStack, Image, Text } from 'native-base';
+import { HStack, IconButton, Image, Text } from 'native-base';
 import Song, { SongWithArtist } from '../models/Song';
 import RowCustom from './RowCustom';
 import TextButton from './TextButton';
+import { MaterialIcons } from '@expo/vector-icons';
+import API from '../API';
 
 type SongRowProps = {
 	song: Song | SongWithArtist; // TODO: remove Song
+	isLiked: boolean;
 	onPress: () => void;
+	handleLike: () => void;
 };
 
-const SongRow = ({ song, onPress }: SongRowProps) => {
+const handleFavoriteButton = (state: boolean, songId: number): void => {
+	if (state == false) API.removeLikedSong(songId);
+	else API.addLikedSong(songId);
+}
+
+const SongRow = ({ song, onPress, isLiked }: SongRowProps) => {
 	return (
 		<RowCustom width={'100%'}>
 			<HStack px={2} space={5} justifyContent={'space-between'}>
@@ -53,6 +62,11 @@ const SongRow = ({ song, onPress }: SongRowProps) => {
 						{song.artistId ?? 'artist'}
 					</Text>
 				</HStack>
+				<IconButton colorScheme="rose" variant={'ghost'} borderRadius={'full'} onPress={() => { handleFavoriteButton(isLiked, song.id)}}
+					_icon={{
+					as: MaterialIcons,
+					name: isLiked ? "favorite-outline" : "favorite"
+				}} />
 				<TextButton
 					flexShrink={0}
 					flexGrow={0}