45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Loader2 } from "lucide-react";
|
|
|
|
export function GenerateButton({ userId }: { userId: string }) {
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleGenerate = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await fetch("/api/recommendations/generate", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ userId }),
|
|
});
|
|
|
|
if (!res.ok) {
|
|
const error = await res.json();
|
|
alert(`Error: ${error.error}`);
|
|
} else {
|
|
alert("Recommendation generated successfully! Check Pending Approvals.");
|
|
// In a real app, we'd revalidate the path or update state
|
|
window.location.reload();
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
alert("Failed to generate recommendation.");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onClick={handleGenerate}
|
|
disabled={loading}
|
|
className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50 flex items-center"
|
|
>
|
|
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
|
Generate
|
|
</button>
|
|
);
|
|
}
|