From 810b53625ac7eff653821142d1ab58587f9f6bfd Mon Sep 17 00:00:00 2001
From: "Begerad, Stefan" <dialog@swingbe.de>
Date: Thu, 4 Jan 2024 14:03:03 +0100
Subject: [PATCH] feat(webpack-react): read *.json file

---
 webpack-react/app/osm-query.json | 20 ++++++++++++++++++++
 webpack-react/app/pages/home.jsx | 18 ++++++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 webpack-react/app/osm-query.json

diff --git a/webpack-react/app/osm-query.json b/webpack-react/app/osm-query.json
new file mode 100644
index 0000000..32798ee
--- /dev/null
+++ b/webpack-react/app/osm-query.json
@@ -0,0 +1,20 @@
+{
+    "queries": [
+	{
+	    "title": "Second hand shops",
+	    "query": "https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];relation(62531);map_to_area;nwr[shop=second_hand](area)->.shops;nwr[second_hand=yes](area)->.secondHands;(.shops;.secondHands;);out body center qt;"
+	},
+	{
+	    "title": "Organic bakeries",
+	    "query": "https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];relation(62531);map_to_area;nwr[shop=bakery][organic=yes](area);out body center qt;"
+	},
+	{
+	    "title": "Organic only shops",
+	    "query": "https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];relation(62531);map_to_area;nwr[shop][organic=only](area);out body center qt;"
+	},
+	{
+	    "title": "Public bookcases",
+	    "query": "https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];relation(62531);map_to_area;nwr[amenity=public_bookcase](area);out body center qt;"
+	}
+    ]
+}
diff --git a/webpack-react/app/pages/home.jsx b/webpack-react/app/pages/home.jsx
index c8fcf32..0ec65f9 100644
--- a/webpack-react/app/pages/home.jsx
+++ b/webpack-react/app/pages/home.jsx
@@ -1,12 +1,30 @@
 import React from 'react';
 import Hello from '../components/hello';
 import '../style.css';
+
+// import JSON osmQueryJson
+import jsonOsmQuery from '../osm-query.json';
+
 const Home = () => {
+
+    const rryOsmQuery = jsonOsmQuery.queries;
+
     return (
 	<>
 	    <h2>Home</h2>
 	    <h3>(React.js Lambda Function Component)</h3>
 	    <Hello msg="Hello World!" />
+      <div className='container'>
+        <p>Blog RryOsmQuery</p>
+        <div className='rryOsmQuery'>
+          {rryOsmQuery.map((post) => (
+            <div className='post' key={post.id}>
+              <p className='title'>{post.title}</p>
+              <p className='content'>{post.query}</p>
+            </div>
+          ))}
+        </div>
+      </div>
 	</>
     );
 }