feat: migrate artist delete to dedicated api

components/ArtistSetting/DeleteModal.tsx

@@ -1,23 +1,22 @@
 import { useArtistProvider } from "@/providers/ArtistProvider";
-import { ArtistRecord } from "@/types/Artist";
+import useDeleteArtist from "@/hooks/useDeleteArtist";
 
 interface DeleteModalProps {
   toggleModal: () => void;
 }
 
 const DeleteModal = ({ toggleModal }: DeleteModalProps) => {
-  const { editableArtist, artists, setArtists, toggleSettingModal } =
-    useArtistProvider();
+  const { editableArtist, toggleSettingModal } = useArtistProvider();
+  const { deleteArtist } = useDeleteArtist();
 
   const handleDelete = async () => {
-    const temp = artists.filter(
-      (artistEle: ArtistRecord) =>
-        artistEle.account_id !== editableArtist?.account_id,
-    );
-    setArtists([...temp]);
+    const artistId = editableArtist?.account_id;
+    if (!artistId) {
+      return;
+    }
     toggleModal();
     toggleSettingModal();
-    await fetch(`/api/artist/remove?artistId=${editableArtist?.account_id}`);
+    await deleteArtist(artistId);
   };
 
   return (

components/Artists/DropDown.tsx

@@ -3,19 +3,16 @@ import { ArtistRecord } from "@/types/Artist";
 import { Trash2 } from "lucide-react";
 import { containerPatterns, textPatterns } from "@/lib/styles/patterns";
 import { cn } from "@/lib/utils";
+import useDeleteArtist from "@/hooks/useDeleteArtist";
 
 const DropDown = ({ artist }: { artist: ArtistRecord }) => {
-  const { setArtists, artists, setMenuVisibleArtistId, getArtists } =
-    useArtistProvider();
+  const { setMenuVisibleArtistId } = useArtistProvider();
+  const { deleteArtist } = useDeleteArtist();
 
   const handleDelete = async () => {
-    const temp = artists.filter(
-      (artistEle: ArtistRecord) => artistEle.account_id !== artist.account_id,
-    );
-    setArtists([...temp]);
-    setMenuVisibleArtistId(null);
-    await fetch(`/api/artist/remove?artistId=${artist.account_id}`);
-    getArtists();
+    await deleteArtist(artist.account_id, {
+      onSuccess: () => setMenuVisibleArtistId(null),
+    });
   };
 
   return (

hooks/useDeleteArtist.ts

@@ -0,0 +1,50 @@
+import { usePrivy } from "@privy-io/react-auth";
+import { toast } from "sonner";
+import { deleteArtist } from "@/lib/artists/deleteArtist";
+import { useArtistProvider } from "@/providers/ArtistProvider";
+
+interface DeleteArtistOptions {
+  onSuccess?: () => void;
+}
+
+interface UseDeleteArtistReturn {
+  deleteArtist: (artistId: string, options?: DeleteArtistOptions) => Promise<void>;
+}
+
+export default function useDeleteArtist(): UseDeleteArtistReturn {
+  const { getAccessToken } = usePrivy();
+  const { artists, setArtists, getArtists } = useArtistProvider();
+
+  const deleteArtistHandler = async (
+    artistId: string,
+    options?: DeleteArtistOptions,
+  ): Promise<void> => {
+    const previousArtists = artists;
+    const nextArtists = artists.filter(artist => artist.account_id !== artistId);
+    setArtists(nextArtists);
+
+    try {
+      const accessToken = await getAccessToken();
+      if (!accessToken) {
+        throw new Error("Please sign in to delete an artist");
+      }
+
+      await deleteArtist(accessToken, artistId);
+      options?.onSuccess?.();
+    } catch (error) {
+      setArtists(previousArtists);
+      toast.error(error instanceof Error ? error.message : "Failed to delete artist");
+      return;
+    }
+
+    try {
+      await getArtists();
+    } catch {
+      toast.error("Artist deleted, but failed to refresh the artist list");
+    }
+  };
+
+  return {
+    deleteArtist: deleteArtistHandler,
+  };
+}

lib/artists/deleteArtist.ts

@@ -0,0 +1,27 @@
+import { getClientApiBaseUrl } from "@/lib/api/getClientApiBaseUrl";
+
+interface DeleteArtistResponse {
+  success?: boolean;
+  error?: string;
+}
+
+/**
+ * Deletes an artist through the dedicated API.
+ *
+ * @param accessToken - Privy access token for Bearer auth
+ * @param artistId - Artist account ID to delete
+ */
+export async function deleteArtist(accessToken: string, artistId: string): Promise<void> {
+  const response = await fetch(`${getClientApiBaseUrl()}/api/artists/${artistId}`, {
+    method: "DELETE",
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+
+  const data: DeleteArtistResponse = await response.json();
+
+  if (!response.ok || !data.success) {
+    throw new Error(data.error || "Failed to delete artist");
+  }
+}