feat: add page titles

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 (
     <div>

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;
+    };
+  });
+}

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 (
     <div className={"h-fit w-full p-4 pb-6 shadow-md"}>
       <h2 className={"text-2xl font-bold tracking-tight"}>{episode?.title}</h2>