rewrite ui with vite+react

web/src/api/podcasts.ts

@@ -0,0 +1,73 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+
+export type PodcastDetail = {
+  id: number;
+  name: string;
+  description: string;
+  feed: string;
+  language: string;
+  link: string;
+  image: string;
+  createdAt: string;
+};
+
+export type EpisodeDetail = {
+  id: number;
+  title: string;
+  pubDate: string;
+  guid: string;
+  url: string;
+  podcastId: number;
+  number: number;
+  createdAt: string;
+};
+
+export const usePodcastsQuery = () => {
+  return useQuery({
+    queryKey: ["podcasts"],
+    queryFn: async () => {
+      const resp = await fetch("/api/podcasts");
+      return (await resp.json()) as PodcastDetail[];
+    },
+  });
+};
+
+export const usePodcastQuery = (id: number | string | null | undefined) => {
+  return useQuery({
+    queryKey: ["podcasts", id],
+    enabled: typeof id !== "undefined" && id !== null,
+    queryFn: async () => {
+      const resp = await fetch(`/api/podcasts/${id}`);
+      return (await resp.json()) as PodcastDetail;
+    },
+  });
+};
+
+export const usePodcastEpisodesQuery = (
+  id: number | string | null | undefined,
+) => {
+  return useQuery({
+    queryKey: ["podcasts", id, "episodes"],
+    enabled: typeof id !== "undefined" && id !== null,
+    queryFn: async () => {
+      const resp = await fetch(`/api/podcasts/${id}/episodes`);
+      return (await resp.json()) as EpisodeDetail[];
+    },
+  });
+};
+
+export type CreatePodcastData = {
+  feed: string;
+};
+
+export const useCreatePodcastMutation = () => {
+  return useMutation({
+    mutationFn: async (data: CreatePodcastData) => {
+      const resp = await fetch("/api/podcasts", {
+        method: "POST",
+        body: JSON.stringify(data),
+      });
+      return await resp.json();
+    },
+  });
+};