Commit 0705ed9a authored by Fabien Amarger's avatar Fabien Amarger
Browse files

feat: [link] Adds URL to instance on the BienCulturelClass component

parent dd4b46d8cd89
Pipeline #15029 failed with stages
in 3 minutes and 43 seconds
......@@ -33,13 +33,20 @@ interface BienCulturelClassProps {
label: string;
instances: string[];
dataFetcher?: implementation.DataFetcher;
generateUrl?: (uri: string) => string;
}
interface IBienCulturelInstance extends BienCulturelInfoProps {
locationUri: string;
}
const BienCulturelClass: React.FC<BienCulturelClassProps> = ({ label, instances, dataFetcher }) => {
const BienCulturelClass: React.FC<BienCulturelClassProps> = (props) => {
const {
label,
instances,
dataFetcher = { fetchDataFromURI: () => Promise.reject('Not implemented') },
generateUrl = (uri) => uri,
} = props;
const [bienCulturelInstances, setBienCulturelInstances] = React.useState<IBienCulturelInstance[] | null>(null);
const [bienCulturelLocations, setBienCulturelLocations] = React.useState<
| {
......@@ -49,34 +56,33 @@ const BienCulturelClass: React.FC<BienCulturelClassProps> = ({ label, instances,
| null
>(null);
React.useEffect(() => {
if (dataFetcher !== undefined) {
Promise.all(
instances.map((instance) =>
dataFetcher.fetchDataFromURI(instance, {
typeUris: 'http://www.w3.org/1999/02/22-rdf-syntax-ns#type',
label: 'http://www.w3.org/2000/01/rdf-schema#label',
locationUri: CULT('aPourLocalisation').value,
})
)
).then((instancesData) =>
setBienCulturelInstances(
instancesData.map((instanceData) => ({
typeUris:
instanceData.typeUris instanceof Array ? instanceData.typeUris : [instanceData.typeUris],
label: instanceData.label instanceof Array ? instanceData.label[0] : instanceData.label,
locationUri:
instanceData.locationUri instanceof Array
? instanceData.locationUri[0]
: instanceData.locationUri,
dataFetcher,
}))
)
);
}
Promise.all(
instances.map((instance) =>
dataFetcher.fetchDataFromURI(instance, {
typeUris: 'http://www.w3.org/1999/02/22-rdf-syntax-ns#type',
label: 'http://www.w3.org/2000/01/rdf-schema#label',
locationUri: CULT('aPourLocalisation').value,
})
)
).then((instancesData) =>
setBienCulturelInstances(
instancesData.map((instanceData, index) => ({
uri: instances[index],
typeUris: instanceData.typeUris instanceof Array ? instanceData.typeUris : [instanceData.typeUris],
label: instanceData.label instanceof Array ? instanceData.label[0] : instanceData.label,
locationUri:
instanceData.locationUri instanceof Array
? instanceData.locationUri[0]
: instanceData.locationUri,
dataFetcher,
generateUrl,
}))
)
);
}, [instances, dataFetcher]);
React.useEffect(() => {
if (dataFetcher !== undefined && bienCulturelInstances !== null) {
if (bienCulturelInstances !== null) {
Promise.all(
bienCulturelInstances.map((instance) =>
dataFetcher.fetchDataFromURI(instance.locationUri, {
......@@ -94,7 +100,7 @@ const BienCulturelClass: React.FC<BienCulturelClassProps> = ({ label, instances,
);
}
});
let center = L.latLng([46.7097, 2.4335]);
let center = L.latLng([46.7097, 2.4335]); // default France center
if (bienCulturelLocations !== null) {
center = L.latLngBounds(bienCulturelLocations.map(({ location }) => [location.lat, location.lng])).getCenter();
}
......@@ -102,7 +108,7 @@ const BienCulturelClass: React.FC<BienCulturelClassProps> = ({ label, instances,
return (
<>
<h1>{label}</h1>
{bienCulturelLocations !== null && (
{bienCulturelLocations !== null ? (
<Map center={center} zoom={8} style={{ height: '600px' }}>
<TileLayer
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
......@@ -122,6 +128,8 @@ const BienCulturelClass: React.FC<BienCulturelClassProps> = ({ label, instances,
</Marker>
))}
</Map>
) : (
<>Chargement ...</>
)}
</>
);
......@@ -170,13 +178,15 @@ class BienCulturelClassRendering implements implementation.ViewImplementation {
nodeId: string,
context: $rdf.Formula,
target: string,
dataFetcher?: implementation.DataFetcher
dataFetcher?: implementation.DataFetcher,
generateUrl?: (uri: string) => string
): void {
const targetSym = $rdf.sym(target);
const bienCulturelClass = {
label: context.anyJS(targetSym, RDFS('label')),
instances: context.each(null, RDF('type'), targetSym).map((node) => node.value),
dataFetcher,
generateUrl,
};
ReactDOM.render(<BienCulturelClass {...bienCulturelClass} />, document.getElementById(nodeId));
......
......@@ -38,6 +38,7 @@ interface BienCulturelProps {
}
export interface BienCulturelInfoProps {
uri?: string;
typeUris: string[];
label: string;
dataFetcher?: implementation.DataFetcher;
......@@ -51,6 +52,7 @@ export interface Location {
export const BienCulturelInfo: React.FC<BienCulturelInfoProps> = (props) => {
const {
uri,
typeUris,
label,
dataFetcher = { fetchDataFromURI: () => Promise.reject('Not implemented') },
......@@ -86,7 +88,7 @@ export const BienCulturelInfo: React.FC<BienCulturelInfoProps> = (props) => {
const typesLabel = urisLabel.map((uriLabel) => uriLabel.label ?? uriLabel.uri);
return (
<>
<h1>{label}</h1>
<h1>{uri !== undefined ? <a href={generateUrl(uri)}>{label}</a> : label}</h1>
<h5>
{urisLabel.map(({ label, uri }) => (
<a href={generateUrl(uri)}>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment