Fix: Implement delete functionality for songs
- Added handleDeleteSong function in App.tsx to delete songs - Shows confirmation dialog before deleting - Calls backend API to delete song from database and filesystem - Updates UI state: removes from songs list, liked songs, play queue - Handles edge cases: stops playback if deleted song is currently playing - Clears selection if deleted song is currently selected - Passes onDelete handler to SongList, RightSidebar, and Player components - Shows success/error toast notifications Fixes #8
This commit is contained in:
@@ -767,6 +767,55 @@ export default function App() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleDeleteSong = async (song: Song) => {
|
||||||
|
if (!token) return;
|
||||||
|
|
||||||
|
// Show confirmation dialog
|
||||||
|
const confirmed = window.confirm(
|
||||||
|
`Are you sure you want to delete "${song.title}"? This action cannot be undone.`
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!confirmed) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Call API to delete song
|
||||||
|
await songsApi.deleteSong(song.id, token);
|
||||||
|
|
||||||
|
// Remove from songs list
|
||||||
|
setSongs(prev => prev.filter(s => s.id !== song.id));
|
||||||
|
|
||||||
|
// Remove from liked songs if it was liked
|
||||||
|
setLikedSongIds(prev => {
|
||||||
|
const next = new Set(prev);
|
||||||
|
next.delete(song.id);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle if deleted song is currently selected
|
||||||
|
if (selectedSong?.id === song.id) {
|
||||||
|
setSelectedSong(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle if deleted song is currently playing
|
||||||
|
if (currentSong?.id === song.id) {
|
||||||
|
setCurrentSong(null);
|
||||||
|
setIsPlaying(false);
|
||||||
|
if (audioRef.current) {
|
||||||
|
audioRef.current.pause();
|
||||||
|
audioRef.current.src = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove from play queue if present
|
||||||
|
setPlayQueue(prev => prev.filter(s => s.id !== song.id));
|
||||||
|
|
||||||
|
showToast('Song deleted successfully');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to delete song:', error);
|
||||||
|
showToast('Failed to delete song', 'error');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const createPlaylist = async (name: string, description: string) => {
|
const createPlaylist = async (name: string, description: string) => {
|
||||||
if (!token) return;
|
if (!token) return;
|
||||||
try {
|
try {
|
||||||
@@ -943,6 +992,7 @@ export default function App() {
|
|||||||
onShowDetails={handleShowDetails}
|
onShowDetails={handleShowDetails}
|
||||||
onNavigateToProfile={handleNavigateToProfile}
|
onNavigateToProfile={handleNavigateToProfile}
|
||||||
onReusePrompt={handleReuse}
|
onReusePrompt={handleReuse}
|
||||||
|
onDelete={handleDeleteSong}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -962,6 +1012,7 @@ export default function App() {
|
|||||||
onPlay={playSong}
|
onPlay={playSong}
|
||||||
isPlaying={isPlaying}
|
isPlaying={isPlaying}
|
||||||
currentSong={currentSong}
|
currentSong={currentSong}
|
||||||
|
onDelete={handleDeleteSong}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -1031,6 +1082,7 @@ export default function App() {
|
|||||||
onOpenVideo={() => currentSong && openVideoGenerator(currentSong)}
|
onOpenVideo={() => currentSong && openVideoGenerator(currentSong)}
|
||||||
onReusePrompt={() => currentSong && handleReuse(currentSong)}
|
onReusePrompt={() => currentSong && handleReuse(currentSong)}
|
||||||
onAddToPlaylist={() => currentSong && openAddToPlaylistModal(currentSong)}
|
onAddToPlaylist={() => currentSong && openAddToPlaylistModal(currentSong)}
|
||||||
|
onDelete={() => currentSong && handleDeleteSong(currentSong)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<CreatePlaylistModal
|
<CreatePlaylistModal
|
||||||
@@ -1092,6 +1144,7 @@ export default function App() {
|
|||||||
onPlay={playSong}
|
onPlay={playSong}
|
||||||
isPlaying={isPlaying}
|
isPlaying={isPlaying}
|
||||||
currentSong={currentSong}
|
currentSong={currentSong}
|
||||||
|
onDelete={handleDeleteSong}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user