fix(sidebar): resolve channel filter name from channel list after refresh
The channel filter chip stored only the channel id in the URL, so after a page refresh the human name was lost and it fell back to "This channel". Resolve the title from the cached channels list keyed by id, and show a "Loading…" label instead of the misleading fallback while it resolves.
This commit is contained in:
parent
022e617358
commit
777d818c9a
1 changed files with 20 additions and 1 deletions
|
|
@ -109,6 +109,25 @@ export default function Sidebar({
|
||||||
}) {
|
}) {
|
||||||
const tagsQuery = useQuery({ queryKey: ["tags"], queryFn: api.tags });
|
const tagsQuery = useQuery({ queryKey: ["tags"], queryFn: api.tags });
|
||||||
const tags = tagsQuery.data ?? [];
|
const tags = tagsQuery.data ?? [];
|
||||||
|
|
||||||
|
// After a page refresh the channel name isn't in the URL (only the id is), so
|
||||||
|
// filters.channelName is undefined and the chip would fall back to "This channel".
|
||||||
|
// Resolve the title from the (cached) channel list keyed by id. Only fetch when a
|
||||||
|
// channel filter is active but its name is missing.
|
||||||
|
const needChannelName = !!filters.channelId && !filters.channelName;
|
||||||
|
const channelsQuery = useQuery({
|
||||||
|
queryKey: ["channels"],
|
||||||
|
queryFn: api.channels,
|
||||||
|
enabled: needChannelName,
|
||||||
|
staleTime: 5 * 60_000,
|
||||||
|
});
|
||||||
|
const resolvedChannelName =
|
||||||
|
filters.channelName ??
|
||||||
|
channelsQuery.data?.find((c) => c.id === filters.channelId)?.title ??
|
||||||
|
undefined;
|
||||||
|
// Don't flash the misleading "This channel" fallback while the name is still resolving.
|
||||||
|
const channelChipLabel =
|
||||||
|
resolvedChannelName ?? (needChannelName && channelsQuery.isLoading ? "Loading…" : "This channel");
|
||||||
const languages = tags.filter((t) => t.category === "language");
|
const languages = tags.filter((t) => t.category === "language");
|
||||||
const topics = tags.filter((t) => t.category === "topic");
|
const topics = tags.filter((t) => t.category === "topic");
|
||||||
const [customDates, setCustomDates] = useState(false);
|
const [customDates, setCustomDates] = useState(false);
|
||||||
|
|
@ -411,7 +430,7 @@ export default function Sidebar({
|
||||||
}
|
}
|
||||||
className="w-full flex items-center justify-between gap-2 text-sm px-3 py-2 rounded-lg bg-accent text-accent-fg shadow-sm hover:opacity-90 transition"
|
className="w-full flex items-center justify-between gap-2 text-sm px-3 py-2 rounded-lg bg-accent text-accent-fg shadow-sm hover:opacity-90 transition"
|
||||||
>
|
>
|
||||||
<span className="truncate">{filters.channelName ?? "This channel"}</span>
|
<span className="truncate">{channelChipLabel}</span>
|
||||||
<X className="w-4 h-4 shrink-0" />
|
<X className="w-4 h-4 shrink-0" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue