Front: DiscoveryView: USe Like status

front/components/V2/SongCardInfo.tsx

@@ -1,8 +1,12 @@
 import Song from '../../models/Song';
 import React from 'react';
 import { Image, View } from 'react-native';
-import { Pressable, Text, PresenceTransition, Icon, useBreakpointValue } from 'native-base';
+import { Pressable, Text, IconButton, PresenceTransition, Icon, useBreakpointValue } from 'native-base';
 import { Ionicons } from '@expo/vector-icons';
+import { useQuery } from '../../Queries';
+import API from '../../API';
+import { MaterialIcons } from '@expo/vector-icons';
+import { useLikeSongMutation } from '../../utils/likeSongMutation';
 
 type SongCardInfoProps = {
 	song: Song;
@@ -16,6 +20,9 @@ const SongCardInfo = (props: SongCardInfoProps) => {
 	const [isPlayHovered, setIsPlayHovered] = React.useState(false);
 	const [isHovered, setIsHovered] = React.useState(false);
 	const [isSlided, setIsSlided] = React.useState(false);
+	const user = useQuery(API.getUserInfo);
+	const isLiked = (props.song.likedByUsers ?? []).filter(({ userId }) => userId === user.data?.id).length > 0;
+	const { mutate } = useLikeSongMutation();
 
 	const CardDims = {
 		height: isPhone ? 160 : 200,
@@ -185,13 +192,18 @@ const SongCardInfo = (props: SongCardInfoProps) => {
 										{props.song.artist?.name}
 									</Text>
 								</View>
-								<Ionicons
+								<IconButton
-									style={{
+									variant={'ghost'}
-										flexShrink: 0,
+									borderRadius={'full'}
-									}}
-									name="bookmark-outline"
 									size={17}
 									color="#6075F9"
+									onPress={async () => {
+										mutate({ songId: props.song.id, like: !isLiked });
+									}}
+									_icon={{
+										as: MaterialIcons,
+										name: isLiked ? 'favorite' : 'favorite-outline',
+									}}
 								/>
 							</View>
 						</View>

front/models/Song.ts

@@ -30,6 +30,7 @@ export const SongValidator = yup
 		artist: yup.lazy(() => ArtistValidator.default(undefined)).optional(),
 		album: yup.lazy(() => AlbumValidator.default(undefined)).optional(),
 		genre: yup.lazy(() => GenreValidator.default(undefined)).optional(),
+		likedByUsers: yup.lazy(() => yup.array(yup.object({ userId: yup.number().required() })).default(undefined)).optional(),
 	})
 	.concat(ModelValidator)
 	.transform((song: Song) => ({

front/views/V2/DiscoveryView.tsx

@@ -10,7 +10,7 @@ import GoldenRatio from '../../components/V2/GoldenRatio';
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 const HomeView = (props: RouteProps<{}>) => {
-	const suggestionsQuery = useQuery(API.getSongSuggestions(['artist', 'SongHistory']));
+	const suggestionsQuery = useQuery(API.getSongSuggestions(['artist', 'SongHistory', 'likedByUsers']));
 	const navigation = useNavigation();
 	const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
 	const isPhone = screenSize === 'small';