District API route - Request electroral district data and cache the d…

…ata #74 Add DistrictCard component #73

src/components/Card/DistrictCard.js

@@ -1,5 +1,4 @@
 const renderExternalDistrictData = (data) => {
-    console.log(data);
     const renderValue = (key, value) => {
         // Handle null or undefined values
         if (value === null || value === undefined) {

src/components/Map/DynamicMap.js

@@ -105,9 +105,9 @@ const DynamicMap = ({ polygons = [],
     setSelectedMap(event.target.value);
   }; 
 
-  const fetchDistrictData = async (code) => {
+  const fetchDistrictData = async (code, state) => {
     try {
-      const response = await fetch(`/api/district?code=${code}`);
+      const response = await fetch(`/api/district?code=${code}&state=${state}`);
       if (!response.ok) {
         throw new Error('Failed to fetch data');
       }
@@ -118,14 +118,14 @@ const DynamicMap = ({ polygons = [],
     }
   };
 
-  const onEachFeature = (feature, layer) => {
+  const onEachFeature = (feature, layer, state) => {
     // Check if feature has a code (for fetching data) or use its properties directly
     if (feature.properties.code) {
         // Add a click event listener to the layer
         layer.on('click', async (e) => {
             try {
                 // Fetch district data asynchronously
-                const districtData = await fetchDistrictData(feature.properties.code);
+                const districtData = await fetchDistrictData(feature.properties.code, state);
 
                 // Render the DistrictCard component with the fetched data
                 const popupContent = ReactDOMServer.renderToString(
@@ -285,11 +285,11 @@ const DynamicMap = ({ polygons = [],
             />
             <GeoJSON data={hessenGeoData}
               style={() => ({ color: 'green', weight: 1, fillColor: 'green', fillOpacity: 0.1 })}
-              onEachFeature={onEachFeature}
+              onEachFeature={(feature, layer) => onEachFeature(feature, layer, 'hessen')}
             />
             <GeoJSON data={rheinlandPfalzGeoData}
               style={() => ({ color: 'green', weight: 1, fillColor: 'green', fillOpacity: 0.1 })}
-              onEachFeature={onEachFeature}
+              onEachFeature={(feature, layer) => onEachFeature(feature, layer, 'rlp')}
             />
           </>
         )}

src/data/hesse/getBezeichnung.py

@@ -0,0 +1,26 @@
+import json
+
+# Load wk-vec-tree.json
+with open('wk-vec-tree.json', 'r', encoding='utf-8') as wk_vec_file:
+    wk_vec_data = json.load(wk_vec_file)
+
+# Load geo.json
+with open('geo.json', 'r', encoding='utf-8') as geo_file:
+    geo_data = json.load(geo_file)
+
+# Loop through the features in geo.json
+for feature in geo_data['features']:
+    lwk = int(feature['properties']['LWK'])  # Get LWK value, convert to int
+    index = lwk  # Adjust LWK to 0-based index
+
+    # Check if the index is valid for wk-vec-tree.json
+    if 0 <= index < len(wk_vec_data):
+        bezeichnung = wk_vec_data[index].get('bezeichnung')
+        # Add the "code" key with the corresponding bezeichnung
+        feature['properties']['code'] = bezeichnung
+
+# Write the updated geo.json back to a file
+with open('geo.json', 'w', encoding='utf-8') as updated_geo_file:
+    json.dump(geo_data, updated_geo_file, ensure_ascii=False, indent=4)
+
+print("geo.json updated successfully with 'code' from wk-vec-tree.json!")

src/pages/api/district.js

@@ -1,23 +1,37 @@
-// pages/api/district.js
-
-export default async function handler(req, res) {
-    const { code } = req.query; // Get the district code from the query string
-
-    if (!code) {
-      return res.status(400).json({ error: "District code is required" });
-    }
-
+const fetchResponse = async (url, res) => {   
     try {
-      const response = await fetch(`https://wahlen.rlp-ltw-2021.23degrees.eu/assets/json/${code}.json`);
-
-      if (!response.ok) {
-        throw new Error('Failed to fetch data');
+        const response = await fetch(url);
+
+        if (!response.ok) {
+          throw new Error('Failed to fetch data');
+        }
+
+        const data = await response.json();
+        res.status(200).json(data);
+      } catch (error) {
+        res.status(500).json({ error: error.message });
       }
-
-      const data = await response.json();
-      res.status(200).json(data);
-    } catch (error) {
-      res.status(500).json({ error: error.message });
+}
+
+const fetchData = async (code, state, res) => {
+    const stateStruc = {
+        'rlp': `https://wahlen.rlp-ltw-2021.23degrees.eu/assets/json/${code}.json`,
+        'hessen': `https://wahlen.hessen-ltw23.23degrees.eu/assets/json/${code}.json`
     }
-  }
+
+    switch(state) {
+        case 'rlp':
+            return fetchResponse(stateStruc[state], res);
+        case 'hessen':
+            return fetchResponse(stateStruc[state], res);
+        default:
+            return stateStruc['rlp'];
+    }
+};
+
+export default async function handler(req, res) {
+    const { code } = req.query; 
+    const { state } = req.query; 
+    const data = await fetchData(code, state, res);
+}