Merge pull request #13 from aloxe/probleme-liens-popup

refactor popup
aloxe · Jun 3, 2024 · 19f0aea · 19f0aea
2 parents 8b73e8c + 5fa6f49
commit 19f0aea
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 73 deletions.
diff --git a/src/components/MainMap.jsx b/src/components/MainMap.jsx
@@ -2,57 +2,23 @@ import { useEffect, useState } from "react";
 import { Map, GeoJson } from "pigeon-maps"
 import * as Tiles from "../helpers/tiles";
 import { getCenter, getZoom } from "../helpers/gpxUtil";
-import Popup from "./Popup";
-import { useNavigate, useParams } from "react-router-dom";
 import './MainMap.css'
 
-const MainMap = ({geojsonList, tileName}) => {
-  const history = useNavigate();
-  const params = useParams();
-  const track = params.track;
+const MainMap = ({geojsonList, tileName, handleClickPopup, currentGeoJson}) => {
   const [center, setCenter] = useState({lon:3, lat:50});
   const [zoom, setZoom] = useState(8);
-  const [geojson, setGeojson] = useState(null);
   const [currentTiles, setCurrentTiles] = useState(Tiles.CartoDBVoyager)
-  const [currentFocus, setCurrentFocus] = useState(null);
-  const [currentGeoJsonName, setcurrentGeoJsonName] = useState(track);
 
   useEffect(() => {
-    setCurrentFocus(null)
-    if (geojsonList.length) {
+    if (currentGeoJson) {
+      setCenter(getCenter(currentGeoJson))
+      setZoom(getZoom(currentGeoJson))
+    }
+    else if (geojsonList.length) {
       setCenter(getCenter(geojsonList))
       setZoom(getZoom(geojsonList))
     }
-  }, [geojsonList]);
-
-  useEffect(() => {
-    if (geojsonList && currentGeoJsonName) {
-      const focusEl = document.getElementsByClassName("CURRENT");
-      if (focusEl.length >= 1) {
-        // if multi path, focus only on first path
-        const focusArrayChildren = [...focusEl[0].children[0].children[0].children]
-        setCurrentFocus(focusArrayChildren)
-        const currentGeoJson = geojsonList.find(geojson => geojson.url === currentGeoJsonName)
-        setGeojson(currentGeoJson)
-        if (currentGeoJson) {
-          setCenter(getCenter(currentGeoJson))
-          setZoom(getZoom(currentGeoJson))
-        }
-        const popEl = focusEl[0].parentNode.parentNode.children[1].children[0]
-        popEl.style.display = 'block';
-
-        // observe popup mutations to unset GeoJsonName when hidding popup
-        var observer = new MutationObserver(function(mutations) {
-          mutations.forEach(function(mutationRecord) {
-            if (mutationRecord.target.style.display === "none") {
-              setcurrentGeoJsonName(null)
-            }
-          });    
-        });
-        observer.observe(popEl, { attributes : true, attributeFilter : ['style'] });
-      }
-    }
-  }, [geojsonList, currentGeoJsonName]);
+  }, [geojsonList, currentGeoJson]);
 
   useEffect(() => {
     setCurrentTiles(Tiles[tileName])
@@ -63,7 +29,7 @@ const MainMap = ({geojsonList, tileName}) => {
     if (!geojson)  return null;
     return (
       <GeoJson
-      className={geojson.url === currentGeoJsonName && "CURRENT"}
+      className={geojson.url === currentGeoJson?.url && "CURRENT"}
         key={key}
         data={geojson}
         styleCallback={(feature) => {
@@ -73,7 +39,7 @@ const MainMap = ({geojsonList, tileName}) => {
             // use patch-package to update pigeon-maps 
             return { strokeWidth: "0", stroke: "black", r: '0', };
           }
-        if (geojson.url === currentGeoJsonName) {
+        if (geojson.url === currentGeoJson?.url) {
             return {
               strokeWidth: "4",
               stroke: 'MediumBlue',
@@ -95,8 +61,7 @@ const MainMap = ({geojsonList, tileName}) => {
   };
 
   const handleClick = (geojson) => {
-    setcurrentGeoJsonName(geojson.url)
-    history(`/t/${geojson.url}`)
+    handleClickPopup("open", geojson)
   }
 
   return (
@@ -109,7 +74,6 @@ const MainMap = ({geojsonList, tileName}) => {
         center={[center.lat, center.lon]}
         zoom={zoom}
       >
-        {currentFocus && <Popup key='popup' currentFocus={currentFocus} geojson={geojson} />}
         { geojsonList && geojsonList.length>=1 && geojsonList.map((json, i) =>  renderGeoJson(json, i)) }        
       </Map>
     </div>

diff --git a/src/components/Popup.jsx b/src/components/Popup.jsx
@@ -4,18 +4,13 @@ import Elevation from './Elevation';
 import './Popup.css';
 
 
-const Popup = ({currentFocus, geojson}) => { 
+const Popup = ({geojson, handleClickPopup}) => { 
 
-    const handleClick = (e) => {
-        if (currentFocus) {
-            currentFocus.map(el => {
-              el.setAttribute('stroke', 'red');
-              el.setAttribute('opacity', '0.5');
-            })
-          }
-        e.target.parentNode.style.display = 'none'
+    const handleClick = () => {
+        handleClickPopup("close")
     }
 
+    if (!geojson.title) return
     return (
         <>
         <div className='popup-wraper'>

diff --git a/src/components/Wrapper.jsx b/src/components/Wrapper.jsx
@@ -1,10 +1,11 @@
 import { useEffect, useState } from "react";
-import SideBar from "./SideBar";
-import { flagToCountryCode } from "../helpers/countryUtil";
-import { filterGpxList, getGpxList, getYear, loadGeoJson } from "../helpers/gpxUtil";
-import MainMap from "./MainMap";
 import { useNavigate, useParams } from "react-router-dom";
 import { getCountryInParams, getYearInParams } from "../helpers/routerUtils";
+import { filterGpxList, getGpxList, getYear, loadGeoJson } from "../helpers/gpxUtil";
+import { flagToCountryCode } from "../helpers/countryUtil";
+import SideBar from "./SideBar";
+import MainMap from "./MainMap";
+import Popup from "./Popup";
 
 const Wrapper = () => {
   const history = useNavigate();
@@ -21,6 +22,7 @@ const Wrapper = () => {
   const [currentYear, setCurrentYear] = useState(year);
   const [currentCountry, setCurrentCountry] = useState(country);
   const [currentTile, setCurrentTile] = useState('CartoDBVoyager');
+  const [currentGeoJson, setCurrentGeoJson] = useState(null);
 
   useEffect(() => {
     // do not load anything on initial render
@@ -62,9 +64,13 @@ const Wrapper = () => {
         const geojsonList = []
         const requests = gpxList.map( async (url, i) => {
           if (i < gpxList.length) {
-            const geojson = allGeojsonList.find(track => track.url === url) || await loadGeoJson(url)
-            if (!allGeojsonList.find(track => track.url === url)) {
+            const geojson = allGeojsonList.find(json => json.url === url) || await loadGeoJson(url)
+            if (!allGeojsonList.find(json => json.url === url)) {
               geojson["url"] = url;
+              if (url === track) {
+                setCurrentGeoJson(geojson)
+                handleClickPopup("open", geojson)
+              }
               allGeojsonList.push(geojson)
             }
             geojsonList.push(geojson)
@@ -78,28 +84,23 @@ const Wrapper = () => {
       }
       setGeoJsonListAwaited(gpxList)
     }
-  }, [step, gpxList, allGeojsonList]);
+  }, [step, gpxList, allGeojsonList, track]);
 
   const handleClickTile = (e) => {
     setCurrentTile(e.target.alt)
   }
 
   const handleClickSideBar = (e) => {
-    // close popup
-    const PopupEl = e.target.parentNode.parentNode.nextSibling.children[0].children[1].children[0]
-    //avoid hiding tracks
-    if (PopupEl && PopupEl.className === "popup-wraper") {
-      PopupEl.style.display = 'none'
-    }
-    // unset currentFocus: done each time geojsonList changes
+    handleClickPopup("close")
     // get click info
+    const contryCode = currentCountry === 'xx' ? '' : currentCountry;
     if (e.target.innerText >= 2010) {
       setCurrentYear(e.target.innerText)
-      const url = currentCountry ? `${currentCountry}/${e.target.innerText}/` : `${e.target.innerText}/`
+      const url = contryCode ? `${contryCode}/${e.target.innerText}/` : `${e.target.innerText}/`
       history(url)
     } else if (e.target.innerText === 'all') {
       setCurrentYear('')
-      history(currentCountry)
+      history(contryCode)
     } else {
       const cc = flagToCountryCode(e.target.innerText)
       setCurrentCountry(cc)
@@ -109,11 +110,22 @@ const Wrapper = () => {
       } else {
         history(currentYear ? `${currentYear}/` : '')
       }
-
     }
     setStep(2) // > filter list
   }
 
+  const handleClickPopup = (label, geoJsonClick = null) => {
+    const focusEl = document.getElementsByClassName("CURRENT");
+
+    if (label === "close") {
+      focusEl?.classList && focusEl.classList.remove("CURRENT")
+      setCurrentGeoJson(null)
+    } else {
+      setCurrentGeoJson(geoJsonClick)
+      history(`/t/${geoJsonClick.url}`)
+    }
+  }
+
   return (
     <div className='wrapper'>
         <SideBar
@@ -125,7 +137,16 @@ const Wrapper = () => {
             handleClick={handleClickSideBar}
             handleClickTile={handleClickTile}
         />
-        <MainMap geojsonList={geojsonList} tileName={currentTile} />
+        <MainMap 
+          geojsonList={geojsonList}
+          tileName={currentTile}
+          handleClickPopup={handleClickPopup}
+          currentGeoJson={currentGeoJson}
+        />
+        {currentGeoJson && <Popup 
+          geojson={currentGeoJson} 
+          handleClickPopup={handleClickPopup} 
+        />}
     </div>
   );
 }