Add display mode selection to PollutionMapFilters component

Author: jereze

webapp/components/PollutionMap.tsx

@@ -20,7 +20,6 @@ export default function PollutionMap({
 }) {
   const [period, setPeriod] = useState("dernier_prel");
   const [category, setCategory] = useState("tous");
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [displayMode, setDisplayMode] = useState<"communes" | "udis">("udis");
   const [mapState, setMapState] = useState<{
     longitude: number;
@@ -83,8 +82,8 @@ export default function PollutionMap({
             setPeriod={setPeriod}
             category={category}
             setCategory={setCategory}
-            // displayMode={displayMode}
-            // setDisplayMode={setDisplayMode}
+            displayMode={displayMode}
+            setDisplayMode={setDisplayMode}
           />
         </div>
 

webapp/components/PollutionMapFilters.tsx

@@ -7,14 +7,16 @@ import {
   SelectItem,
 } from "@/components/ui/select";
 import { memo } from "react";
-import { FlaskConical, CalendarDays } from "lucide-react";
+import { FlaskConical, CalendarDays, Diamond } from "lucide-react";
 import { availableCategories, ICategory } from "@/lib/polluants";
 
 type PollutionMapFiltersProps = {
   period: string;
   setPeriod: (year: string) => void;
   category: string;
   setCategory: (type: string) => void;
+  displayMode: "communes" | "udis";
+  setDisplayMode: (mode: "communes" | "udis") => void;
 };
 
 type CategoryItemsProps = {
@@ -67,6 +69,8 @@ export default function PollutionMapFilters({
   setPeriod,
   category,
   setCategory,
+  displayMode,
+  setDisplayMode,
 }: PollutionMapFiltersProps) {
   const availablePeriods = [
     { value: "dernier_prel", label: "Dernière analyse" },
@@ -78,6 +82,11 @@ export default function PollutionMapFilters({
     { value: "bilan_annuel_2020", label: "Bilan 2020" },
   ];
 
+  const availableDisplayModes = [
+    { value: "udis" as const, label: "Réseaux d'eau" },
+    { value: "communes" as const, label: "Communes" },
+  ];
+
   return (
     <div className="flex space-x-6 p-2">
       <div className="shadow-sm">
@@ -117,6 +126,27 @@ export default function PollutionMapFilters({
           </SelectContent>
         </Select>
       </div>
+
+      <div className="shadow-sm">
+        <Select value={displayMode} onValueChange={setDisplayMode}>
+          <SelectTrigger
+            className="bg-white rounded-2xl"
+            aria-label="display-mode-select"
+          >
+            <Diamond size={16} className="text-gray-400" />
+            <div className="block mx-1">
+              <SelectValue placeholder="Affichage" className="mx-1" />
+            </div>
+          </SelectTrigger>
+          <SelectContent className="rounded-xl">
+            {availableDisplayModes.map((mode) => (
+              <SelectItem key={mode.value} value={mode.value}>
+                {mode.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
     </div>
   );
 }