feat: 支持删除

app/songs/actions.tsx

@@ -4,6 +4,7 @@ import {
   InternetProviderLyricSearchResponse,
   getSearchResults,
 } from "@/lib/actions/lyrics";
+import { revalidateTag } from "next/cache";
 import { LyricSource } from "@/lib/types";
 import { cookies } from "next/headers";
 
@@ -23,7 +24,7 @@ export async function searchSongs(
 export async function addSong(
   _: unknown,
   item: InternetProviderLyricSearchResponse
-): Promise<unknown> {
+) {
   const token = cookies().get("token");
   await fetch("https://tachy.daoyoucloud.com/api/songs:create", {
     method: "POST",
@@ -40,37 +41,51 @@ export async function addSong(
       source_id: item.id,
     }),
   });
-  const params = new URLSearchParams();
-  params.append('pageSize', '99999');
-  params.append('filter', JSON.stringify({"$and":[{"createdBy":{"id":{"$eq":"{{$user.id}}"}}}]}))
-  const songs = await fetch("https://tachy.daoyoucloud.com/api/songs:list?" + params.toString(), {
-    method: "GET",
-    headers: {
-      "X-App": "danmu-sim",
-      "X-Authenticator": "basic",
-      authorization: "Bearer " + token?.value,
-      "content-type": "application/json",
-    },
-  });
-  const result = await songs.json();
-  console.log(result.data);
-  return result?.data;
+  revalidateTag("songs");
 }
 
 export async function listSongs(): Promise<any[]> {
   const token = cookies().get("token");
   const params = new URLSearchParams();
-  params.append('pageSize', '99999');
-  params.append('filter', JSON.stringify({"$and":[{"createdBy":{"id":{"$eq":"{{$user.id}}"}}}]}))
-  const songs = await fetch("https://tachy.daoyoucloud.com/api/songs:list?" + params.toString(), {
-    method: "GET",
-    headers: {
-      "X-App": "danmu-sim",
-      "X-Authenticator": "basic",
-      authorization: "Bearer " + token?.value,
-      "content-type": "application/json",
-    },
-  });
+  params.append("pageSize", "99999");
+  params.append(
+    "filter",
+    JSON.stringify({ $and: [{ createdBy: { id: { $eq: "{{$user.id}}" } } }] })
+  );
+  const songs = await fetch(
+    "https://tachy.daoyoucloud.com/api/songs:list?" + params.toString(),
+    {
+      method: "GET",
+      headers: {
+        "X-App": "danmu-sim",
+        "X-Authenticator": "basic",
+        authorization: "Bearer " + token?.value,
+        "content-type": "application/json",
+      },
+      next: {
+        tags: ["songs"],
+      },
+    }
+  );
   const result = await songs.json();
   return result?.data ?? [];
 }
+
+export async function deleteSong(id: number): Promise<void> {
+  const token = cookies().get("token");
+  const params = new URLSearchParams();
+  params.append('filterByTk', id.toString());
+  await fetch(
+    "https://tachy.daoyoucloud.com/api/songs:destroy?" + params.toString(),
+    {
+      method: "GET",
+      headers: {
+        "X-App": "danmu-sim",
+        "X-Authenticator": "basic",
+        authorization: "Bearer " + token?.value,
+        "content-type": "application/json",
+      },
+    }
+  );
+  revalidateTag("songs");
+}

app/songs/delete-song-button.tsx

@@ -0,0 +1,21 @@
+"use client";
+import { deleteSong } from "./actions";
+
+export default function DeleteSongButton({
+  className,
+  id,
+}: {
+  className?: string | undefined;
+  id: number;
+}) {
+  return (
+    <button
+      className={className}
+      onClick={() => {
+        deleteSong(id);
+      }}
+    >
+      删除
+    </button>
+  );
+}

app/songs/page.tsx

@@ -1,4 +1,5 @@
-import { listSongs } from "./actions";
+import { deleteSong, listSongs } from "./actions";
+import DeleteSongButton from "./delete-song-button";
 import SearchForm from "./search-form";
 
 export default async function Page() {
@@ -18,9 +19,10 @@ export default async function Page() {
                   <span>
                     {song.name} - {song.artist}
                   </span>
-                  <button className="text-red-500 hover:text-red-700">
-                    删除
-                  </button>
+                  <DeleteSongButton
+                    className="text-red-500 hover:text-red-700"
+                    id={song.id}
+                  />
                 </li>
               ))}
             </ul>