Auto deploy: 2025-12-09 04:43:32

src/components/Map/MapView.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import maplibregl from "maplibre-gl";
-import "../../styles/maplibre.css"; // ✅ CSS locale copiée via bash
+import "../../styles/maplibre.css"; // CSS locale copiée depuis maplibre-gl
 
 import { fetchPosts, fetchIpLocation, createPost } from "../../api/client";
 
@@ -28,7 +28,8 @@ export default function MapView() {
   const markersRef = useRef([]); // [{ id, marker, el, ... }]
   const expandedElRef = useRef(null);
 
-  const allPostsRef = useRef([]); // posts bruts (sans filtre temps)
+  // posts bruts (sans filtre temps) – maintenant indépendants du zoom
+  const allPostsRef = useRef([]);
 
   const [status, setStatus] = useState("Loading posts...");
 
@@ -38,6 +39,7 @@ export default function MapView() {
 
   const [userPosition, setUserPosition] = useState(null); // [lng, lat]
 
+  // on garde ça juste pour mémoriser la vue & lastView
   const [viewParams, setViewParams] = useState({
     center: null,
     radiusKm: 250,
@@ -118,7 +120,7 @@ export default function MapView() {
       setViewParams(vp);
     });
 
-    // update viewParams à chaque move
+    // update viewParams à chaque move (juste pour sauvegarder centre/zoom)
     map.on("moveend", () => {
       const vp = getViewFromMap(map);
       setViewParams(vp);
@@ -244,35 +246,25 @@ export default function MapView() {
     setStatus(visible.length ? "" : "No posts found.");
   };
 
-  /* ------------ LOAD POSTS POUR LA ZONE COURANTE + CAT + SOUS-CAT -------------- */
+  /* ------------ LOAD POSTS (cat + sous-cat) – PLUS LIÉ AU ZOOM -------------- */
   useEffect(() => {
-    const map = mapRef.current;
-    if (!map) return;
-    if (!viewParams.center) return;
-
     let cancelled = false;
 
     async function load() {
       try {
         setStatus("Loading posts...");
 
-        const [lng, lat] = viewParams.center;
-        const radiusKm = viewParams.radiusKm || 250;
-
         const catCode = categoryCode(mainFilter);
         const subCatParam =
           subFilter && subFilter.toUpperCase() !== "ALL" && subFilter !== "All"
             ? subFilter
             : "";
 
-        // time="" -> backend renvoie TOUT pour zone + cat + sous-cat
+        // ⚠️ PAS de lat/lon/radius → backend renvoie tout (limité à 500)
         const posts = await fetchPosts({
           category: catCode,
           subCategory: subCatParam,
-          time: "",
-          lat,
-          lon: lng,
-          radiusKm,
+          time: "", // on gère le temps en front
         });
 
         if (cancelled) return;
@@ -291,8 +283,9 @@ export default function MapView() {
     return () => {
       cancelled = true;
     };
+    // déclenche seulement quand la catégorie ou sous-cat change
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [viewParams, mainFilter, subFilter]);
+  }, [mainFilter, subFilter]);
 
   /* ------------ QUAND LE TIME FILTER CHANGE, ON RECONSTRUIT JUSTE LES MARKERS -------------- */
   useEffect(() => {
@@ -324,7 +317,7 @@ export default function MapView() {
         if (msg.type === "new_post" && msg.post) {
           const p = msg.post;
 
-          // Filtrage live: cat + sous-cat + temps + zone
+          // Filtrage live: cat + sous-cat + temps (plus de rayon)
           const catCode = categoryCode(mainFilter);
           if (
             catCode &&
@@ -365,7 +358,7 @@ export default function MapView() {
         ws.close();
       }
     };
-  }, [mainFilter, subFilter, timeFilter, viewParams]);
+  }, [mainFilter, subFilter, timeFilter]);
 
   /* ------------ ACTIONS UI -------------- */