put link to home in "layout"

web/src/api/podcasts.ts

@@ -47,3 +47,14 @@ export const useCreatePodcastMutation = () => {
     },
   });
 };
+
+export const useDeletePodcastMutation = () => {
+  return useMutation({
+    mutationFn: async ({ id }: { id: number }) => {
+      const resp = await fetch(`/api/podcasts/${id}`, {
+        method: "DELETE",
+      });
+      return await resp.json();
+    },
+  });
+};

web/src/main.tsx

@@ -8,6 +8,7 @@ import { HomePage } from "./pages/home";
 import { PodcastPage } from "./pages/podcast";
 import { PlayerProvider } from "./player/provider";
 import { Player } from "./player/player";
+import { Link } from "react-router";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -23,6 +24,9 @@ createRoot(document.getElementById("root")!).render(
       <PlayerProvider>
         <div className="max-w-[1440px] w-full mx-auto p-2 relative">
           <BrowserRouter>
+            <Link to="/" className="w-fit">
+              <h1 className="text-3xl font-semibold">podcaster</h1>
+            </Link>
             <Routes>
               <Route path="/" element={<HomePage />} />
               <Route path="/podcasts/:id" element={<PodcastPage />} />

web/src/pages/home.tsx

@@ -1,4 +1,3 @@
-import { Link } from "react-router";
 import { usePodcastsQuery } from "../api/podcasts";
 import { NewPodcastForm } from "../components/NewPodcastForm";
 
@@ -7,10 +6,6 @@ export const HomePage = () => {
 
   return (
     <div>
-      <Link to="/">
-        <h1 className="text-3xl font-semibold">podcaster</h1>
-      </Link>
-
       <NewPodcastForm />
 
       <div className="grid grid-cols-1 sm:grid-cols-[repeat(auto-fit,250px)] gap-3 mt-5">

web/src/pages/podcast.tsx

@@ -1,16 +1,17 @@
 import { useParams } from "react-router";
-import { usePodcastQuery } from "../api/podcasts";
+import { useDeletePodcastMutation, usePodcastQuery } from "../api/podcasts";
 import {
   usePodcastEpisodesQuery,
   useUpdateEpisodeMutation,
 } from "../api/episodes";
-import { Link } from "react-router";
 import { usePlayerContext } from "../player/context";
 import { PlayIcon } from "../icons/play";
 import { PauseIcon } from "../icons/pause";
 import { useQueryClient } from "@tanstack/react-query";
+import { useNavigate } from "react-router";
 
 export const PodcastPage = () => {
+  const navigate = useNavigate();
   const queryClient = useQueryClient();
   const { id } = useParams<{ id: string }>();
 
@@ -20,6 +21,29 @@ export const PodcastPage = () => {
   const player = usePlayerContext();
 
   const updateEpisodeMutation = useUpdateEpisodeMutation();
+  const deletePodcastMutation = useDeletePodcastMutation();
+
+  const handleDeletePodcast = () => {
+    if (
+      !confirm(
+        "Are you sure you want to delete this podcast with all episodes?",
+      )
+    )
+      return;
+    if (typeof id === "undefined") return;
+
+    deletePodcastMutation.mutate(
+      {
+        id: parseInt(id),
+      },
+      {
+        onSuccess() {
+          queryClient.invalidateQueries({ queryKey: ["podcasts"] });
+          navigate("/");
+        },
+      },
+    );
+  };
 
   const handleMarkCompleted = (episodeId: number) => {
     updateEpisodeMutation.mutate(
@@ -55,15 +79,28 @@ export const PodcastPage = () => {
 
   return (
     <div>
-      <Link to="/">
-        <h1 className="text-3xl font-semibold">podcaster</h1>
-      </Link>
-
       <div className="mt-3 flex gap-2">
         <img src={podcast?.image} alt="" className="w-[300px] aspect-square" />
         <div className="flex flex-col gap-1">
           <h2 className="text-2xl font-semibold">{podcast?.name}</h2>
           <p>{podcast?.description}</p>
+          <div className="mt-auto flex items-center gap-2">
+            <a
+              href={podcast?.link}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="block bg-blue-500 text-white py-1 px-4 rounded"
+            >
+              Website
+            </a>
+            <button
+              className="bg-red-500 text-white py-1 px-4 rounded w-fit cursor-pointer"
+              disabled={deletePodcastMutation.isPending}
+              onClick={handleDeletePodcast}
+            >
+              Delete
+            </button>
+          </div>
         </div>
       </div>