peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(playlists): correctly clear/reselect after deleting a playlist

Browse source 
The post-delete auto-select effect re-picked the just-deleted id from the still-stale
playlists cache, so its detail lingered. Select the next remaining playlist directly on
delete (or null), drop the deleted detail from the cache, and make the effect re-validate
the selection against the current list (clear when empty, reselect when the current id is
gone). Also fix the header title showing "Channel manager" on the Playlists page.
This commit is contained in:
npeter83 2026-06-15 15:15:56 +02:00
parent 48cb11434d
commit 4ed52cd244
2 changed files with 21 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/components/Header.tsx
View file

@ -90,7 +90,11 @@ export default function Header({
</div> </div>
) : ( ) : (
<div className="flex-1 text-center text-sm font-semibold"> <div className="flex-1 text-center text-sm font-semibold">
{page === "stats" ? t("header.usageStats") : t("header.channelManager")} {page === "stats"
? t("header.usageStats")
: page === "playlists"
? t("header.account.playlists")
: t("header.channelManager")}
</div> </div>
)} )}

20
frontend/src/components/Playlists.tsx
View file

@ -110,9 +110,16 @@ export default function Playlists() {
const listQuery = useQuery({ queryKey: ["playlists"], queryFn: () => api.playlists() }); const listQuery = useQuery({ queryKey: ["playlists"], queryFn: () => api.playlists() });
const playlists = listQuery.data ?? []; const playlists = listQuery.data ?? [];
// Default the selection to the first playlist once the list loads. // Keep the selection valid: default to the first playlist, and if the selected one
// disappears (e.g. just deleted) drop to the next available, or clear when none remain.
useEffect(() => { useEffect(() => {
if (selectedId == null && playlists.length) setSelectedId(playlists[0].id); if (!playlists.length) {
if (selectedId != null) setSelectedId(null);
return;
}
if (selectedId == null || !playlists.some((p) => p.id === selectedId)) {
setSelectedId(playlists[0].id);
}
}, [playlists, selectedId]); }, [playlists, selectedId]);
const detailQuery = useQuery({ const detailQuery = useQuery({
@ -182,8 +189,13 @@ export default function Playlists() {
danger: true, danger: true,
}); });
if (!ok) return; if (!ok) return;
await api.deletePlaylist(selectedId); const deletedId = selectedId;
setSelectedId(null); // Pick the next selection from what's left *now* (don't go via null, or the
// auto-select effect would re-pick the just-deleted id from the stale list).
const remaining = playlists.filter((p) => p.id !== deletedId);
setSelectedId(remaining[0]?.id ?? null);
await api.deletePlaylist(deletedId);
qc.removeQueries({ queryKey: ["playlist", deletedId] });
qc.invalidateQueries({ queryKey: ["playlists"] }); qc.invalidateQueries({ queryKey: ["playlists"] });
} }