Signed-off-by: Matt Bruce <mbrucedogs@gmail.com>
This commit is contained in:
parent
4a5acb5a79
commit
1e632f813c
@ -1,11 +1,9 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { IonHeader, IonToolbar, IonTitle, IonChip, IonIcon } from '@ionic/react';
|
import { IonHeader, IonToolbar, IonTitle, IonChip, IonButton } from '@ionic/react';
|
||||||
import { trophy } from 'ionicons/icons';
|
|
||||||
import { InfiniteScrollList } from '../../components/common';
|
|
||||||
import { useTopPlayed } from '../../hooks';
|
import { useTopPlayed } from '../../hooks';
|
||||||
import { useAppSelector } from '../../redux';
|
import { useAppSelector } from '../../redux';
|
||||||
import { selectTopPlayed } from '../../redux';
|
import { selectTopPlayed } from '../../redux';
|
||||||
import type { TopPlayed, Song } from '../../types';
|
import type { TopPlayed } from '../../types';
|
||||||
|
|
||||||
const Top100: React.FC = () => {
|
const Top100: React.FC = () => {
|
||||||
console.log('Top100 component - RENDERING START');
|
console.log('Top100 component - RENDERING START');
|
||||||
@ -13,8 +11,6 @@ const Top100: React.FC = () => {
|
|||||||
const {
|
const {
|
||||||
topPlayedItems,
|
topPlayedItems,
|
||||||
loadMore,
|
loadMore,
|
||||||
handleAddToQueue,
|
|
||||||
handleToggleFavorite,
|
|
||||||
} = useTopPlayed();
|
} = useTopPlayed();
|
||||||
|
|
||||||
const topPlayed = useAppSelector(selectTopPlayed);
|
const topPlayed = useAppSelector(selectTopPlayed);
|
||||||
@ -22,81 +18,73 @@ const Top100: React.FC = () => {
|
|||||||
|
|
||||||
console.log('Top100 component - Redux data:', { topPlayedCount, topPlayedItems: topPlayedItems.length });
|
console.log('Top100 component - Redux data:', { topPlayedCount, topPlayedItems: topPlayedItems.length });
|
||||||
|
|
||||||
// Mock data for testing
|
// Mock data for testing - these are artist/title combinations, not individual songs
|
||||||
const mockTopPlayedItems: TopPlayed[] = [
|
const mockTopPlayedItems: TopPlayed[] = [
|
||||||
{
|
{
|
||||||
key: 'mock-1',
|
key: 'mock-1',
|
||||||
title: 'Bohemian Rhapsody',
|
title: 'CAN\'T STOP THE FEELING',
|
||||||
artist: 'Queen',
|
artist: 'Justin Timberlake',
|
||||||
count: 156
|
count: 63
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'mock-2',
|
key: 'mock-2',
|
||||||
title: 'Sweet Caroline',
|
title: 'SWEET CAROLINE',
|
||||||
artist: 'Neil Diamond',
|
artist: 'Neil Diamond',
|
||||||
count: 142
|
count: 58
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'mock-3',
|
key: 'mock-3',
|
||||||
title: 'Don\'t Stop Believin\'',
|
title: 'DON\'T STOP BELIEVIN\'',
|
||||||
artist: 'Journey',
|
artist: 'Journey',
|
||||||
count: 128
|
count: 52
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'mock-4',
|
key: 'mock-4',
|
||||||
title: 'Livin\' on a Prayer',
|
title: 'LIVIN\' ON A PRAYER',
|
||||||
artist: 'Bon Jovi',
|
artist: 'Bon Jovi',
|
||||||
count: 115
|
count: 47
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'mock-5',
|
key: 'mock-5',
|
||||||
title: 'Wonderwall',
|
title: 'WONDERWALL',
|
||||||
artist: 'Oasis',
|
artist: 'Oasis',
|
||||||
count: 98
|
count: 41
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'mock-6',
|
key: 'mock-6',
|
||||||
title: 'Hotel California',
|
title: 'HOTEL CALIFORNIA',
|
||||||
artist: 'Eagles',
|
artist: 'Eagles',
|
||||||
count: 87
|
count: 38
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'mock-7',
|
key: 'mock-7',
|
||||||
title: 'Stairway to Heaven',
|
title: 'STAIRWAY TO HEAVEN',
|
||||||
artist: 'Led Zeppelin',
|
artist: 'Led Zeppelin',
|
||||||
count: 76
|
count: 35
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'mock-8',
|
key: 'mock-8',
|
||||||
title: 'Imagine',
|
title: 'IMAGINE',
|
||||||
artist: 'John Lennon',
|
artist: 'John Lennon',
|
||||||
count: 65
|
count: 32
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'mock-9',
|
key: 'mock-9',
|
||||||
title: 'Hey Jude',
|
title: 'HEY JUDE',
|
||||||
artist: 'The Beatles',
|
artist: 'The Beatles',
|
||||||
count: 54
|
count: 29
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'mock-10',
|
key: 'mock-10',
|
||||||
title: 'Yesterday',
|
title: 'YESTERDAY',
|
||||||
artist: 'The Beatles',
|
artist: 'The Beatles',
|
||||||
count: 43
|
count: 26
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
// Convert TopPlayed items to Song format for consistent UI
|
|
||||||
const songItems: Song[] = mockTopPlayedItems.map((item: TopPlayed) => ({
|
|
||||||
...item,
|
|
||||||
path: '', // TopPlayed doesn't have path
|
|
||||||
disabled: false,
|
|
||||||
favorite: false,
|
|
||||||
}));
|
|
||||||
|
|
||||||
// Use mock data for now
|
// Use mock data for now
|
||||||
const displayItems = songItems;
|
const displayItems = mockTopPlayedItems;
|
||||||
const displayCount = songItems.length;
|
const displayCount = displayItems.length;
|
||||||
const displayHasMore = false; // No more mock data to load
|
const displayHasMore = false; // No more mock data to load
|
||||||
|
|
||||||
console.log('Top100 component - Mock data:', {
|
console.log('Top100 component - Mock data:', {
|
||||||
@ -108,23 +96,6 @@ const Top100: React.FC = () => {
|
|||||||
|
|
||||||
console.log('Top100 component - About to render JSX');
|
console.log('Top100 component - About to render JSX');
|
||||||
|
|
||||||
// Wrapper functions to handle type conversion
|
|
||||||
const handleAddToQueueWrapper = (song: Song) => {
|
|
||||||
console.log('Top100 component - Add to Queue clicked:', song);
|
|
||||||
const topPlayedItem = mockTopPlayedItems.find(item => item.key === song.key);
|
|
||||||
if (topPlayedItem) {
|
|
||||||
handleAddToQueue(topPlayedItem);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleToggleFavoriteWrapper = (song: Song) => {
|
|
||||||
console.log('Top100 component - Remove clicked:', song);
|
|
||||||
const topPlayedItem = mockTopPlayedItems.find(item => item.key === song.key);
|
|
||||||
if (topPlayedItem) {
|
|
||||||
handleToggleFavorite(topPlayedItem);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<IonHeader>
|
<IonHeader>
|
||||||
@ -138,33 +109,78 @@ const Top100: React.FC = () => {
|
|||||||
</IonToolbar>
|
</IonToolbar>
|
||||||
</IonHeader>
|
</IonHeader>
|
||||||
|
|
||||||
<InfiniteScrollList
|
<div className="max-w-4xl mx-auto p-6">
|
||||||
items={displayItems}
|
{/* Debug info */}
|
||||||
isLoading={displayCount === 0}
|
<div className="mt-2 text-sm text-gray-500 mb-4">
|
||||||
hasMore={displayHasMore}
|
Top played items loaded: {displayCount} (Mock Data)
|
||||||
onLoadMore={loadMore}
|
</div>
|
||||||
onAddToQueue={handleAddToQueueWrapper}
|
|
||||||
onToggleFavorite={handleToggleFavoriteWrapper}
|
{/* Content */}
|
||||||
context="topPlayed"
|
<div className="bg-white rounded-lg shadow">
|
||||||
title=""
|
{displayCount === 0 ? (
|
||||||
subtitle=""
|
<div className="p-8 text-center">
|
||||||
emptyTitle="No top played songs"
|
<div className="text-gray-400 mb-4">
|
||||||
emptyMessage="Play some songs to see the top played list"
|
<svg className="h-12 w-12 mx-auto animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
loadingTitle="Loading top played songs..."
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||||
loadingMessage="Please wait while top played data is being loaded"
|
</svg>
|
||||||
debugInfo={`Top played items loaded: ${displayCount} (Mock Data)`}
|
</div>
|
||||||
renderExtraContent={(item: Song, index: number) => (
|
<h3 className="text-lg font-medium text-gray-900 mb-2">Loading top played songs...</h3>
|
||||||
<div className="flex items-center space-x-2 px-4 py-2">
|
<p className="text-sm text-gray-500">Please wait while top played data is being loaded</p>
|
||||||
<div className="flex items-center text-sm text-gray-500">
|
|
||||||
<IonIcon icon={trophy} className="mr-1" />
|
|
||||||
<span>#{index + 1}</span>
|
|
||||||
</div>
|
</div>
|
||||||
<IonChip color="primary">
|
) : displayItems.length === 0 ? (
|
||||||
{item.count} play{item.count !== 1 ? 's' : ''}
|
<div className="p-8 text-center">
|
||||||
</IonChip>
|
<div className="text-gray-400 mb-4">
|
||||||
|
<svg className="h-12 w-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-medium text-gray-900 mb-2">No top played songs</h3>
|
||||||
|
<p className="text-sm text-gray-500">Play some songs to see the top played list</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="w-full">
|
||||||
|
{displayItems.map((item, index) => (
|
||||||
|
<div key={item.key} style={{ display: 'flex', alignItems: 'flex-start', padding: '12px 16px', borderBottom: '1px solid #e5e7eb' }}>
|
||||||
|
<div style={{ width: '80px', textAlign: 'right', paddingRight: '16px', flexShrink: 0 }}>
|
||||||
|
<span style={{ fontSize: '18px', fontWeight: 'bold', color: '#374151' }}>
|
||||||
|
{index + 1})
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ width: '16px', flexShrink: 0 }}></div>
|
||||||
|
<div style={{ flex: 1 }}>
|
||||||
|
<div style={{ fontSize: '18px', fontWeight: 'bold', color: '#111827', marginBottom: '4px' }}>
|
||||||
|
{item.title} ({item.count})
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: '16px', fontStyle: 'italic', color: '#4b5563' }}>
|
||||||
|
{item.artist}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Load more button */}
|
||||||
|
{displayHasMore && (
|
||||||
|
<div className="p-4 text-center">
|
||||||
|
<IonButton
|
||||||
|
fill="outline"
|
||||||
|
onClick={loadMore}
|
||||||
|
>
|
||||||
|
Load More
|
||||||
|
</IonButton>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats */}
|
||||||
|
{displayItems.length > 0 && (
|
||||||
|
<div className="mt-4 text-sm text-gray-500 text-center">
|
||||||
|
Showing {displayItems.length} item{displayItems.length !== 1 ? 's' : ''}
|
||||||
|
{displayHasMore && ` • Click "Load More" to see more`}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
/>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user