diff --git a/src/components/podcast-episodes-list.tsx b/src/components/podcast-episodes-list.tsx index a8a4667..ab9da62 100644 --- a/src/components/podcast-episodes-list.tsx +++ b/src/components/podcast-episodes-list.tsx @@ -8,10 +8,12 @@ import { TableHeadCell, TableRow, } from "./ui/table/table"; +import { useTitle } from "../hooks/use-title"; export function PodcastEpisodesList() { const { podcastId } = useParams<{ podcastId: string }>(); const { data: podcast } = usePodcastQuery(podcastId); + useTitle(podcast?.title ?? "Podcast"); return (
diff --git a/src/hooks/use-title.ts b/src/hooks/use-title.ts new file mode 100644 index 0000000..a29260c --- /dev/null +++ b/src/hooks/use-title.ts @@ -0,0 +1,11 @@ +import { useEffect } from "react"; + +export function useTitle(title: string) { + useEffect(() => { + const prevTitle = document.title; + document.title = title; + return () => { + document.title = prevTitle; + }; + }); +} diff --git a/src/pages/episode.tsx b/src/pages/episode.tsx index d75e9cd..631aa12 100644 --- a/src/pages/episode.tsx +++ b/src/pages/episode.tsx @@ -1,5 +1,6 @@ import { useParams } from "react-router-dom"; import { usePodcastQuery } from "../services/podcasts/podcast.hooks"; +import { useTitle } from "../hooks/use-title"; export function Episode() { const { podcastId, episodeId } = useParams<{ @@ -13,6 +14,8 @@ export function Episode() { (episode) => episode.id.toString() === episodeId, ); + useTitle(episode?.title ?? "Episode"); + return (

{episode?.title}