Now usign real play history for the TabNavigator Desktop

front/components/V2/TabNavigationDesktop.tsx

@@ -4,7 +4,10 @@ import TabNavigationButton from './TabNavigationButton';
 import TabNavigationList from './TabNavigationList';
 import { useAssets } from 'expo-asset';
 import useColorScheme from '../../hooks/colorScheme';
+import { useQuery, useQueries } from '../../Queries';
 import { NaviTab } from './TabNavigation';
+import API from '../../API';
+import Song from '../../models/Song';
 
 type TabNavigationDesktopProps = {
 	tabs: NaviTab[];
@@ -22,19 +25,13 @@ const TabNavigationDesktop = (props: TabNavigationDesktopProps) => {
 			? require('../../assets/icon_light.png')
 			: require('../../assets/icon_dark.png')
 	);
+	const playHistoryQuery = useQuery(API.getUserPlayHistory);
+	const songHistory = useQueries(
+		playHistoryQuery.data?.map(({ songID }) => API.getSong(songID)) ?? []
+	);
 	// settings is displayed separately (with logout)
 	const buttons = props.tabs.filter((tab) => tab.id !== 'settings');
 
-	const others = [
-		{
-			label: 'Recently played',
-		},
-		{
-			label: 'Short',
-		},
-		{ label: 'Twinkle Twinkle' },
-	];
-
 	return (
 		<View
 			style={{
@@ -104,17 +101,45 @@ const TabNavigationDesktop = (props: TabNavigationDesktopProps) => {
 					<TabNavigationList>
 						<Divider />
 						<TabNavigationList>
-							{others.map((other, index) => (
+							<Text
-								<View
+								bold
-									key={'tab-navigation-other-' + index}
+								style={{
+									paddingHorizontal: '16px',
+									paddingVertical: '10px',
+									fontSize: 20,
+								}}
+							>
+								Recently played
+							</Text>
+							{songHistory.length === 0 && (
+								<Text
 									style={{
 										paddingHorizontal: '16px',
 										paddingVertical: '10px',
 									}}
 								>
-									<Text>{other.label}</Text>
+									No songs played yet
-								</View>
+								</Text>
-							))}
+							)}
+							{songHistory
+								.map((h) => h.data)
+								.filter((data): data is Song => data !== undefined)
+								.filter(
+									(song, i, array) =>
+										array.map((s) => s.id).findIndex((id) => id == song.id) == i
+								)
+								.slice(0, 4)
+								.map((histoItem, index) => (
+									<View
+										key={'tab-navigation-other-' + index}
+										style={{
+											paddingHorizontal: '16px',
+											paddingVertical: '10px',
+										}}
+									>
+										<Text numberOfLines={1}>{histoItem.name}</Text>
+									</View>
+								))}
 						</TabNavigationList>
 						<Divider />
 						<TabNavigationList