fixes?? nominations??

frontend/src/app/nominations/page.tsx

@@ -1,14 +1,31 @@
 "use client";
 import { useState } from "react";
 import { Nunito } from "next/font/google";
+import { api } from "muzak/data/fetcher";
 
 const nunito = Nunito({
   weight: "900",
   subsets: ["latin"],
 });
 
+async function nominate(spotifyLink: string) {
+  console.log(spotifyLink);
+  try {
+    const response = await api.tracks.nominate({
+      spotify_link: spotifyLink,
+    });
+    console.log("Nomination successful:", response);
+    return { success: true, data: response.data };
+  } catch (error) {
+    console.error("Nomination failed:", error);
+    return { success: false, error };
+  }
+}
+
 export default function Nominations() {
   const [songURL, setSongURL] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [message, setMessage] = useState("");
 
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
@@ -33,16 +50,36 @@ export default function Nominations() {
           </label>
 
           <button
-            className="w-full rounded bg-blue-500 px-4 py-2 text-center font-bold text-white hover:bg-blue-400"
+            className="w-full rounded bg-blue-500 px-4 py-2 text-center font-bold text-white hover:bg-blue-400 disabled:cursor-not-allowed disabled:bg-gray-500"
             type="submit"
-            onClick={(e) => {
+            disabled={isLoading || !songURL.trim()}
+            onClick={async (e) => {
               e.preventDefault();
-              console.log("Zojuist genomineerd:", songURL);
+              if (!songURL.trim()) return;
+
+              setIsLoading(true);
+              setMessage("");
+
+              const result = await nominate(songURL);
+
+              if (result.success) {
+                setMessage("✅ Nominatie succesvol ingediend!");
+                setSongURL("");
+              } else {
+                setMessage("❌ Er ging iets mis. Probeer het opnieuw.");
+              }
+
+              setIsLoading(false);
             }}
           >
-            Nomineer
+            {isLoading ? "Nomineren..." : "Nomineer"}
           </button>
         </form>
+        {message && (
+          <div className="mt-4 rounded bg-gray-800 p-3 text-center text-white">
+            {message}
+          </div>
+        )}
       </div>
       <footer>
         <p>© 2020-2025 Hoestende Draken PartyCo</p>

frontend/src/data/fetcher.ts

@@ -22,6 +22,7 @@ fetcher.configure({
         init.headers = {
           ...init.headers,
           Authorization: `Bearer ${user.access_token}`,
+          "Content-Type": "application/json",
         };
       }
       return next(url, init);
@@ -50,6 +51,7 @@ export const api = {
     list: fetcher.path("/api/track/").method("get").create(),
     detail: fetcher.path("/api/track/{id}").method("get").create(),
     vote: fetcher.path("/api/track/vote").method("get").create(),
+    nominate: fetcher.path("/api/track/").method("post").create(),
   },
   artists: {
     list: fetcher.path("/api/artist").method("get").create(),