69 lines
2.8 KiB
TypeScript
69 lines
2.8 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { invokeSeedDatabaseFunction } from '../services/supabaseClient';
|
|
import { SparklesIcon } from './icons/SparklesIcon';
|
|
import { LoadingSpinner } from './LoadingSpinner';
|
|
|
|
interface DatabaseSeederProps {
|
|
onSuccess: () => void;
|
|
}
|
|
|
|
export const DatabaseSeeder: React.FC<DatabaseSeederProps> = ({ onSuccess }) => {
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [message, setMessage] = useState<string | null>(null);
|
|
|
|
const handleSeed = async () => {
|
|
setIsLoading(true);
|
|
setError(null);
|
|
setMessage(null);
|
|
|
|
try {
|
|
const result = await invokeSeedDatabaseFunction();
|
|
setMessage(result.message);
|
|
// Wait a moment for the success message to be readable, then trigger re-check
|
|
setTimeout(() => {
|
|
onSuccess();
|
|
}, 2500);
|
|
} catch (e: any) {
|
|
setError(e.message);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="bg-yellow-50 dark:bg-yellow-900/20 border-l-4 border-yellow-400 p-4">
|
|
<div className="flex">
|
|
<div className="flex-shrink-0">
|
|
<SparklesIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
|
|
</div>
|
|
<div className="ml-3">
|
|
<p className="text-sm text-yellow-700 dark:text-yellow-300">
|
|
It looks like the development users are missing. Use this tool to create them.
|
|
</p>
|
|
<div className="mt-4">
|
|
<button
|
|
onClick={handleSeed}
|
|
disabled={isLoading || !!message}
|
|
className="w-full bg-yellow-500 hover:bg-yellow-600 disabled:bg-yellow-300 disabled:cursor-not-allowed text-white font-bold py-2 px-4 rounded-lg transition-colors duration-300 flex items-center justify-center"
|
|
>
|
|
{isLoading ? (
|
|
<>
|
|
<div className="w-5 h-5 mr-2"><LoadingSpinner /></div>
|
|
Seeding...
|
|
</>
|
|
) : 'Seed Dev Users'}
|
|
</button>
|
|
{error && (
|
|
<p className="mt-2 text-sm text-red-600 dark:text-red-400">{error}</p>
|
|
)}
|
|
{message && (
|
|
<p className="mt-2 text-sm text-green-600 dark:text-green-400">{message}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|