feat: add app/utils/request.js

app/components/hello.jsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-//destructure props
-export default function Hello({msg}) {
-    return (
-	<>
-	    <p>{msg}</p>
-	</>
-    );
-}
-
-Hello.propTypes = {
-    msg: PropTypes.string,
-};

app/pages/home.jsx

@@ -1,11 +1,129 @@
-import React from 'react';
-import Hello from '../components/hello';
+import React, { useEffect, useState } from 'react';
+import {get} from '../utils/request';
 
 export default function Home() {
+
+    const [bsRry, setBsRry] = useState([]);
+    const [bpRry, setBpRry] = useState([]);
+    const [prRry, setPrRry] = useState([]);
+    const [shopRry, setShopRry] = useState([]);
+    const [taxiRry, setTaxiRry] = useState([]);
+    const [vmRry, setVmRry] = useState([]);
+
+    useEffect(() => {
+	const address = 'https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];node[uic_ref=8000050];';
+    	//get bus stop
+	get(address + 'nwr[highway=bus_stop](around:200);out body center qt;')
+	    .then(data => {
+		setBsRry((bsRry) => data.elements);
+	    });
+
+    	//get B+R
+	get(address + 'nwr[amenity=bicycle_parking](around:200);out body center qt;')
+	    .then(data => {
+		setBpRry((bpRry) => data.elements);
+	    });
+
+    	//get P+R
+	get(address + 'nwr["park_ride"!="no"]["park_ride"](around:200);out body center qt;')
+	    .then(data => {
+		setPrRry((prRry => data.elements));
+	    });
+
+    	//get shop
+	get(address + 'nwr[shop=ticket]["tickets:public_transport"!=no](around:500);out body center qt;')
+	    .then(data => {
+		setShopRry((shopRry) => data.elements);
+	    });
+
+    	//get taxi
+	get(address + 'nwr[amenity=taxi](around:200);out body center qt;')
+	    .then(data => {
+		setTaxiRry((taxiRry) => data.elements);
+	    });
+
+	//get vending machine
+	get(address + 'nwr[amenity=vending_machine][vending=public_transport_tickets](around:40);out body center qt;')
+	    .then(data => {
+		setVmRry((vmRry) => data.elements);
+	    });
+
+}, []);
+
     return (
 	<>
-	    <p>Home</p>
-	    <Hello msg="Hello World!" />
+	    <p>Bus Stop</p>
+	    <ul>
+		{
+		    bsRry.map((value, index) => {
+			return <li key={index}>
+				   Description: {value.tags.description}
+			       </li>;
+		    })
+		}
+	    </ul>
+	    <p>B+R</p>
+	    <ul>
+		{
+		    bpRry.map((value, index) => {
+			return <li key={index}>
+				   Name: {value.tags.name},
+				   Capacity: {value.tags.capacity},
+				   Covered: {value.tags.covered},
+				   Fee: {value.tags.fee},
+				   Operator: {value.tags.operator}
+			       </li>;
+		    })
+		}
+	    </ul>
+	    <p>P+R</p>
+	    <ul>
+		{
+		    prRry.map((value, index) => {
+			return <li key={index}>
+				   Name: {value.tags.name},
+				   Capacity: {value.tags.capacity},
+				   Fee: {value.tags.fee},
+				   Website: <a href={value.tags.website}>
+						{value.tags.website}
+					    </a>
+			       </li>;
+		    })
+		}
+	    </ul>
+	    <p>Ticket Shop</p>
+	    <ul>
+		{
+		    shopRry.map((value, index) => {
+			return <li key={index}>
+				   Name: {value.tags.name},
+				   Opening Hours: {value.tags.opening_hours}
+			       </li>;
+		    })
+		}
+	    </ul>
+	    <p>Taxi Stop</p>
+	    <ul>
+		{
+		    taxiRry.map((value, index) => {
+			return <li key={index}>
+				   Name: {value.tags.name}
+			       </li>;
+		    })
+		}
+	    </ul>
+	    <p>Vending Machine</p>
+	    <ul>
+		{
+		    vmRry.map((value, index) => {
+			return <li key={index}>
+				   Name: {value.tags.name},
+				   Brand: {value.tags.brand},
+				   Operator: {value.tags.operator}
+			       </li>;
+		    })
+		}
+	    </ul>
 	</>
     );
 }

app/utils/request.js

@@ -0,0 +1,16 @@
+/**
+ * http get request
+ *
+ * @param pth path
+ */
+export async function get(pth) {
+    const data = await fetch(pth, {
+        method: 'GET',
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        }
+    });
+    const jsonData = await data.json();
+    return jsonData;
+}