Front: remove Visible IDs

front/components/Play/PlayViewControlBar.tsx

@@ -89,9 +89,11 @@ const PlayViewControlBar = ({
 						<Text color={textColor[800]} fontSize={14} maxW={'100%'} isTruncated>
 							{song.name}
 						</Text>
-						<Text color={textColor[900]} fontSize={12} maxW={'100%'} isTruncated>
+						{song.artist && (
-							{song.artistId}
+							<Text color={textColor[900]} fontSize={12} maxW={'100%'} isTruncated>
-						</Text>
+								{song.artist?.name}
+							</Text>
+						)}
 					</View>
 				</View>
 			</View>

front/components/SearchResult.tsx

@@ -29,7 +29,7 @@ const swaToSongCardProps = (song: Song) => ({
 	songId: song.id,
 	name: song.name,
 	artistName: song.artist!.name,
-	cover: song.cover
+	cover: song.cover,
 });
 
 const HomeSearchComponent = () => {
@@ -83,7 +83,7 @@ type SongsSearchComponentProps = {
 const SongsSearchComponent = (props: SongsSearchComponentProps) => {
 	const navigation = useNavigation();
 	const { songData } = React.useContext(SearchContext);
-	const favoritesQuery = useQuery(API.getLikedSongs());
+	const favoritesQuery = useQuery(API.getLikedSongs(['artist']));
 
 	const handleFavoriteButton = async (state: boolean, songId: number): Promise<void> => {
 		if (state == false) await API.removeLikedSong(songId);

front/components/SongRow.tsx

@@ -54,7 +54,7 @@ const SongRow = ({ song, onPress, handleLike, isLiked }: SongRowProps) => {
 						}}
 						fontSize={'sm'}
 					>
-						{song.artistId ?? 'artist'}
+						{song.artist?.name ?? ''}
 					</Text>
 					{/* <DurationInfo length={song.details.length} /> */}
 					<DurationComponent length={song.details.length} />

front/views/ArtistDetailsView.tsx

@@ -49,7 +49,7 @@ const ArtistDetailsView = ({ artistId }: RouteProps<ArtistDetailsViewProps>) =>
 						{songsQuery.data.map((comp: Song, index: Key | null | undefined) => (
 							<SongRow
 								key={index}
-								song={comp}
+								song={{ ...comp, artist: artistQuery.data }}
 								isLiked={
 									!favoritesQuery.data?.find((query) => query?.songId == comp.id)
 								}

front/views/PlayView.tsx

@@ -74,7 +74,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
 	const navigation = useNavigation();
 	const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
 	const isPhone = screenSize === 'small';
-	const song = useQuery(API.getSong(songId), { staleTime: Infinity });
+	const song = useQuery(API.getSong(songId, ['artist']), { staleTime: Infinity });
 	const toast = useToast();
 	const [lastScoreMessage, setLastScoreMessage] = useState<ScoreMessage>();
 	const webSocket = useRef<WebSocket>();