64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
import { GraphQLClient, gql } from "graphql-request";
|
|
import { useEffect, useState } from "react";
|
|
|
|
interface Resource {
|
|
id: string;
|
|
name: string;
|
|
description?: string;
|
|
indicator: string;
|
|
scopes: string[];
|
|
}
|
|
|
|
const client = new GraphQLClient(process.env.NEXT_PUBLIC_APP_URL + "/api/graphql");
|
|
|
|
export default function ResourcesSelector({
|
|
selectedResource,
|
|
onChange,
|
|
}: {
|
|
selectedResource: string | null;
|
|
onChange: (id: string | null) => void;
|
|
}) {
|
|
const [resources, setResources] = useState<Resource[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
client
|
|
.request<{ resources: Resource[] }>(gql`
|
|
{
|
|
resources {
|
|
id
|
|
name
|
|
indicator
|
|
}
|
|
}
|
|
`)
|
|
.then(data => {
|
|
setResources(data.resources);
|
|
setLoading(false);
|
|
})
|
|
.catch(() => {
|
|
setError("Erreur lors du chargement des ressources");
|
|
setLoading(false);
|
|
});
|
|
}, []);
|
|
|
|
if (loading) return <div>Chargement des ressources...</div>;
|
|
if (error) return <div className="text-red-500">{error}</div>;
|
|
|
|
return (
|
|
<select
|
|
className="w-full rounded border p-2"
|
|
value={selectedResource || ""}
|
|
onChange={e => onChange(e.target.value || null)}
|
|
>
|
|
<option value="">Aucune ressource</option>
|
|
{resources.map(resource => (
|
|
<option key={resource.id} value={resource.id}>
|
|
{resource.name} ({resource.indicator})
|
|
</option>
|
|
))}
|
|
</select>
|
|
);
|
|
}
|