Dropdownmenü Liste kommt von GisStationsStaticDistrict den Area_Name Attribute

components/DataSheet.js

@@ -1,32 +1,45 @@
 import React, { useEffect, useState } from "react";
-import { useRecoilValue } from 'recoil';
-import { gisStationsStaticDistrictState } from '../features/gisStationState';
+import { useRecoilValue } from "recoil";
+import { gisStationsStaticDistrictState } from "../features/gisStationState";
 
 function DataSheet() {
-  const GisStationsStaticDistrict = useRecoilValue(gisStationsStaticDistrictState);
-  useEffect(() => {
-    console.log('GisStationsStaticDistrict in DataSheet:', GisStationsStaticDistrict);
-  }, [GisStationsStaticDistrict]);
-  const stationListing = [
-    { id: 1, name: "Ammersricht BZR (FGN)" },
-    { id: 2, name: "Bad-Bentheim" },
-    { id: 3, name: "Gevelsberg" },
-    { id: 4, name: "Köln" },
-    { id: 5, name: "Olfen-Selm" },
-    { id: 6, name: "Plettenberg" },
-    { id: 7, name: "Renzenhof (RG)" },
-    { id: 8, name: "Schlüchtern II" },
-    { id: 9, name: "Wuppertal" },
-    // Füge hier weitere Stationen hinzu, falls nötig
-  ];
-
-  const [checkedStations, setCheckedStations] = useState(
-    stationListing.reduce((acc, station) => {
-      acc[station.id] = false;
-      return acc;
-    }, {})
+  // useState für uniqueAreas und stationListing
+  const [uniqueAreas, setUniqueAreas] = useState([]);
+  const [stationListing, setStationListing] = useState([]);
+  const GisStationsStaticDistrict = useRecoilValue(
+    gisStationsStaticDistrictState
   );
 
+  useEffect(() => {
+    console.log(
+      "GisStationsStaticDistrict in DataSheet:",
+      GisStationsStaticDistrict
+    );
+
+    const seenNames = new Set();
+    const filteredAreas = GisStationsStaticDistrict.filter((item) => {
+      const isUnique = !seenNames.has(item.Area_Name);
+      if (isUnique) {
+        seenNames.add(item.Area_Name);
+      }
+      return isUnique;
+    });
+
+    setUniqueAreas(filteredAreas);
+
+    // Erzeugen von stationListing aus uniqueAreas und alphabetisches Sortieren
+    const newStationListing = filteredAreas
+      .map((area, index) => ({
+        id: index + 1, // Zuweisung einer eindeutigen ID
+        name: area.Area_Name,
+      }))
+      .sort((a, b) => a.name.localeCompare(b.name)); // Alphabetisches Sortieren der Namen
+
+    setStationListing(newStationListing);
+  }, [GisStationsStaticDistrict]);
+
+  const [checkedStations, setCheckedStations] = useState({});
+
   const handleCheckboxChange = (id) => {
     setCheckedStations((prev) => ({
       ...prev,
@@ -48,12 +61,12 @@ function DataSheet() {
       className="absolute top-3 right-3 w-1/6 min-w-[300px] z-10 bg-white p-2 rounded-lg shadow-lg"
     >
       <div className="flex flex-col gap-4 p-4">
-        <div className="flex items-center justify-between ">
+        <div className="flex items-center justify-between">
           {/* Dropdown */}
           <select
             onChange={handleStationChange}
             id="stationListing"
-            className="border-solid-1 p-2 rounded ml-1 " // Margin Left für Abstand zum Icon
+            className="border-solid-1 p-2 rounded ml-1"
           >
             <option>Station wählen</option>
             {stationListing.map((station) => (
@@ -64,9 +77,9 @@ function DataSheet() {
           </select>
           {/* Icon */}
           <img
-            src="/img/expand-icon.svg" // Pfad zu deinem SVG-Bild
+            src="/img/expand-icon.svg"
             alt="Expand"
-            className="h-6 w-6 ml-2" // Margin Left für Abstand zum Dropdown
+            className="h-6 w-6 ml-2"
           />
         </div>
 
@@ -77,7 +90,7 @@ function DataSheet() {
               type="checkbox"
               id={`box-${station.id}`}
               className="accent-blue-500 checked:bg-blue-500"
-              checked={checkedStations[station.id]}
+              checked={checkedStations[station.id] || false}
               onChange={() => handleCheckboxChange(station.id)}
             />
             <label