feat: add Wikidata content

app/components/wikidata.jsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+    get,
+    getWikidata
+} from '../utils/request';
+
+/**
+ * @param osmSttn array of object of OSM station
+ * @return object
+ */
+async function fetchWikidata(osmSttn) {
+    	const objct = await getWikidata(osmSttn[0].tags.wikidata);
+	//console.log('fetchWikidata() objct.type: ' + objct.type);
+	const strng = JSON.stringify(objct);
+	//console.log('fetchWikidata() strng: ' + strng);
+	return objct;
+    };
+
+/*destructure props object*/
+export default function Wikidata ({ sttn }) {
+
+    const [wikidata, setWikidata] = useState({});
+
+    /*fetch array in a JavaScript function*/
+    const fetch = async () => {
+	if ((sttn !== undefined || sttn !== null ) && sttn.length > 0) {
+	    //console.log('fetch() sttn.length: ' + sttn.length);
+
+
+	    const objct = await getWikidata(sttn[0].tags.wikidata);
+	    //console.log('fetch() objct.type: ' + objct.type);
+	    const strng = JSON.stringify(objct);
+	    //console.log('fetch() strng: ' + strng);
+	    setWikidata((wikidata) => objct);
+	} else {
+	    //console.log('fetch() sttn NOT valid');
+	}
+    };
+    
+    useEffect(() => {
+	/*effect goes here*/
+	fetch();
+	/*use an empty dependency array to ensure the hook is running only once*/
+	/*TODO study dependency array: https://reactjs.org/docs/hooks-effect.html*/
+    }, [sttn]);
+
+	return (
+	    <>
+		<p>Wikidata</p>
+		<pre>
+		    {JSON.stringify(wikidata, null, '\t')}
+		</pre>
+	</>
+    );
+};
+Wikidata.propTypes = {
+    sttn: PropTypes.array
+};

app/pages/station-profile.jsx

@@ -1,7 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { useParams } from "react-router-dom";
 
-import {get} from '../utils/request';
+import {
+    get
+} from '../utils/request';
+
+import Wikidata from '../components/wikidata';
 
 export default function StationProfile() {
 
@@ -18,10 +22,10 @@ export default function StationProfile() {
 
     useEffect(() => {
 
-	//console.log('StationProfile:useEffect() uic: ' + uic);
+	////console.log('StationProfile:useEffect() uic: ' + uic);
 
 	const address = 'https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];node[uic_ref=' + uic + '];';
-	//console.log('StationProfile:useEffect() address: ' + address);/
+	////console.log('StationProfile:useEffect() address: ' + address);/
 
 	//get station array
 	get(address + 'node[public_transport=station][railway=station](around:2);out body center qt;')
@@ -187,6 +191,7 @@ export default function StationProfile() {
 		    })
 		}
 	    </ul>
+	    <Wikidata sttn={sttnRry} />
 	</>
     );
 }

app/utils/request.js

@@ -1,7 +1,25 @@
+/**
+ * get Wikidata content as string
+ * @param unique q Wikidata content identifier
+ * @return Wikidata content as string
+ */
+export async function getWikidata(q) {
+    //console.log('request:getWikidata() q: ' + q);
+    const address = 'https://www.wikidata.org/w/rest.php/wikibase/v0/entities/items/' + q;
+    //console.log('request:getWikidata() address: ' + address)
+    const objct = await get(address);
+    ////console.log('request:getWikidata() objct: ' + JSON.stringify(objct));
+    //const strng = JSON.stringify(objct);
+    ////console.log('request:getWikidata() strng: ' + strng);
+    //return strng;
+    return objct
+};
+
 /**
  * http get request
  *
  * @param pth path
+ * @return response as JSON data
  */
 export async function get(pth) {
     const data = await fetch(pth, {
@@ -11,6 +29,6 @@ export async function get(pth) {
             'Content-Type': 'application/json'
         }
     });
-    const jsonData = await data.json();
-    return jsonData;
-}
+    const objct = await data.json();
+    return objct;
+};