Front: Use history include to get best/last score for a song

front/components/UI/MusicItem.tsx

@@ -20,14 +20,11 @@ export interface MusicItemType {
 	/** The URL for the song's cover image. */
 	image: string;
 
-	/** The level of the song difficulty . */
-	level: number;
-
 	/** The last score achieved for this song. */
-	lastScore: number;
+	lastScore: number | null | undefined;
 
 	/** The highest score achieved for this song. */
-	bestScore: number;
+	bestScore: number | null | undefined;
 
 	/** Indicates whether the song is liked/favorited by the user. */
 	liked: boolean;
@@ -141,9 +138,8 @@ function MusicItemComponent(props: MusicItemType) {
 	);
 
 	// Memoizing formatted numbers to avoid unnecessary computations.
-	const formattedLevel = useMemo(() => formatNumber(props.level), [props.level]);
-	const formattedLastScore = useMemo(() => formatNumber(props.lastScore), [props.lastScore]);
-	const formattedBestScore = useMemo(() => formatNumber(props.bestScore), [props.bestScore]);
+	const formattedLastScore = useMemo(() => formatNumber(props.lastScore ?? 0), [props.lastScore]);
+	const formattedBestScore = useMemo(() => formatNumber(props.bestScore ?? 0), [props.bestScore]);
 
 	return (
 		<HStack space={screenSize === 'xl' ? 2 : 1} style={[styles.container, props.style]}>
@@ -179,7 +175,7 @@ function MusicItemComponent(props: MusicItemType) {
 					/>
 				</Row>
 			</Column>
-			{[formattedLevel, formattedLastScore, formattedBestScore].map((value, index) => (
+			{[formattedLastScore, formattedBestScore].map((value, index) => (
 				<Text key={index} style={styles.stats}>
 					{value}
 				</Text>

front/components/UI/MusicList.tsx

@@ -3,7 +3,7 @@ import { FlatList, HStack, View, useBreakpointValue, useTheme, Text, Row } from
 import { ActivityIndicator, StyleSheet } from 'react-native';
 import MusicItem, { MusicItemType } from './MusicItem';
 import ButtonBase from './ButtonBase';
-import { ArrowDown2, Chart2, ArrowRotateLeft, Cup, Icon } from 'iconsax-react-native';
+import { ArrowDown2, ArrowRotateLeft, Cup, Icon } from 'iconsax-react-native';
 import { translate } from '../../i18n/i18n';
 
 // Props type definition for MusicItemTitle.
@@ -176,7 +176,6 @@ function MusicListComponent({
 					{translate('musicListTitleSong')}
 				</Text>
 				{[
-					{ text: translate('musicListTitleLevel'), icon: Chart2 },
 					{ text: translate('musicListTitleLastScore'), icon: ArrowRotateLeft },
 					{ text: translate('musicListTitleBestScore'), icon: Cup },
 				].map((value) => (