Skip to content

Commit

Permalink
Merge branch 'dev-mapwork' into dev
Browse files Browse the repository at this point in the history
  • Loading branch information
@Falsal
Falsal committed Sep 5, 2024
2 parents c00aa72 + 0910428 commit cf6edca
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 60 deletions.
90 changes: 41 additions & 49 deletions src/components/Map/TourMapContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ import '/src/config.js';
const PopupCard = lazy(() => import("./PopupCard"));

function TourMapContainer({
tours,
filter,
setMapInitialized,
mapInitialized,
Expand Down Expand Up @@ -110,7 +109,7 @@ function TourMapContainer({
useEffect(() => {
if (!isMasterMarkersSet.current && markers && markers.length > 0) {
localStorage.setItem("masterMarkers", JSON.stringify(markers));
console.log("L112 inside markers useEffect")
// console.log("L112 inside markers useEffect")
isMasterMarkersSet.current = true; // Set the flag to true to avoid future updates
}
}, [markers]);
Expand Down Expand Up @@ -144,22 +143,26 @@ function TourMapContainer({
: "no-city";
const [city, setCity] = useState(initialCity);
const [selectedTour, setSelectedTour] = useState(null);
const [isLoading, setIsLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);// TODO : no use of isLoading ?

let filterValuesLocal = !!localStorage.getItem("filterValues")
? localStorage.getItem("filterValues")
: null;
filter = !!filterValuesLocal ? filterValuesLocal : filter;

// console.log("L153 filter", filter)
// console.log("L154 filterValuesLocal", filterValuesLocal)
filter = !!filterValuesLocal ? filterValuesLocal : filter; // TODO: why is that necessary?


//setMapInitialized
useEffect(() => {
if (!mapInitialized) {
setMapInitialized(true);
}
}, [mapInitialized, setMapInitialized]);

// keep checking until mapRef.current is set
useEffect(() => {
// keep checking until mapRef.current is set
const interval = setInterval(() => {
if (mapRef.current) {
setMapLoaded(true);
Expand All @@ -172,19 +175,21 @@ function TourMapContainer({
}, [mapRef]);


// useEffect(() => {
// console.log("L181 mapLoaded :", mapLoaded)
// }, [mapLoaded])


useEffect(() => {
console.log("L197 mapLoaded :", mapLoaded)

}, [mapLoaded])


useEffect(() => {
console.log("L161 mapRef.current :", mapRef.current)
console.log("L162 mapBounds :", mapBounds)
console.log("L163 mapInitialized :", mapInitialized)
if (mapRef.current && mapBounds && mapInitialized) {
// useEffect(() => {
// console.log("L185 mapBounds :", mapBounds)
// }, [mapBounds])


const mapChangeHandler = (bounds)=>{
// console.log("L161 mapRef.current :", mapRef.current)
// console.log("L162 bounds :", bounds)
// console.log("L164 mapInitialized :", mapInitialized)
// console.log("L165 mapLoaded :", mapLoaded)
if ( bounds && mapInitialized) {
let _masterMarkers = {};

// Retrieve master markers from local storage if available
Expand All @@ -196,8 +201,8 @@ function TourMapContainer({
let visibleMarkersArray =[];

// if _masterMarkers is not empty
if (Object.keys(_masterMarkers).length > 0) {
visibleMarkersObj = getMarkersListFromBounds(mapBounds, _masterMarkers);
if (!!_masterMarkers && Object.keys(_masterMarkers).length > 0) {
visibleMarkersObj = getMarkersListFromBounds(bounds, _masterMarkers);

// Early exit if no list of visible markers is found
if (!visibleMarkersObj || Object.keys(visibleMarkersObj).length === 0) {
Expand All @@ -213,9 +218,8 @@ function TourMapContainer({
const storedMarkers = JSON.parse(localStorage.getItem("visibleMarkers")) || [];
const check = checkMarkersChanges(visibleMarkersArray, storedMarkers);

console.log("L294 check : ", check)
console.log("===================")
console.log("L161 check : ", check)
console.log("L162 visibleMarkersObj : ", visibleMarkersObj)
console.log("L163 visibleMarkersArray : ", visibleMarkersArray)
console.log("===================");

Expand All @@ -224,44 +228,28 @@ function TourMapContainer({
handleChangedMarkers(true); // *** handle the Boolean flag in Main /make new call in card container

let newBounds = getMarkersBounds(visibleMarkersObj)
!!newBounds ? handleMapBounds(newBounds) : handleMapBounds(mapBounds)
!!newBounds ? handleMapBounds(newBounds) : handleMapBounds(bounds)

} else {
handleChangedMarkers(false);
}
}
// eslint-disable-next-line no-use-before-define, react-hooks/exhaustive-deps
}, [mapBounds, mapInitialized]);

}


useEffect(()=>{
console.log("L230 mapRef.current:", mapRef.current)
console.log("L231 markers.length:", markers.length)
console.log("L232 mapLoaded:", mapLoaded)
if (markers && markers.length > 0 && mapLoaded) {
// console.log('Update bounds');
const bounds = getMarkersBounds(markers);
console.log("L219 bounds :", bounds)
if(!!bounds && !!mapRef?.current) {
mapRef.current.fitBounds(bounds);
}
}
}, [markers, mapRef, mapLoaded]);

const getMarkersBounds = (markers) => {
const _bounds = L.latLngBounds([]);
console.log("L242 _bounds ", _bounds)
// console.log("L242 _bounds ", _bounds)


if(!!markers){
console.log("L246 markers.length ", markers.length)
// console.log("L246 markers.length ", markers.length)
markers.forEach((marker) => {
if (marker.lat && marker.lon) {
_bounds.extend([marker.lat, marker.lon]);
}
});
console.log("L252 _bounds ", _bounds)
// console.log("L252 _bounds ", _bounds)

return _bounds;
}else return null
Expand Down Expand Up @@ -436,15 +424,16 @@ function TourMapContainer({
moveend: () => {
//Throws an event whenever the bounds of the map change
// if there are markers , fit map to them else use the usual way
let position = null;
if (markers && markers.length > 0 && mapRef.current) {
position = getMarkersBounds(markers);
} else {
position = map.getBounds(); //after moving the map, a position is set and saved
let _bounds = map.getBounds();
// console.log("L443 mapLoaded", mapLoaded)
// console.log("L444 markers.length", markers.length)
if (markers && markers.length > 0 && mapLoaded) {
_bounds = getMarkersBounds(markers);
// console.log("L446 _bounds", _bounds)
}
assignNewMapPosition(position);
assignNewMapPosition(_bounds);
debouncedStoppedMoving(map.getBounds());
handleMapBounds(map.getBounds())
handleMapBounds(_bounds)
},
});
return null;
Expand Down Expand Up @@ -472,12 +461,15 @@ function TourMapContainer({

function stoppedMoving(bounds) {
initiateFilter(bounds);

}

const debouncedStoppedMoving = useMemo(() => makeDebounced(stoppedMoving, 1000), []); //Calls makeDebounce with the function you want to debounce and the debounce time

//Method to load the parameters and the filter call:
const initiateFilter = (bounds) => {
mapChangeHandler(bounds)
// handleMapBounds(bounds);
const searchTerm = !!searchParams.get('search') ? searchParams.get('search') : null;
const filterValues = {
//All Values in the URL
Expand Down
20 changes: 9 additions & 11 deletions src/views/Main/Main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,30 +49,28 @@ export function Main({

const [activeFilter, setActiveFilter] = useState(false); // State used inside Search and TourCardContainer

const [filterValues, setFilterValues] = useState(!!localStorage.getItem("filterValues") ?? null); // pass this to both Search and TourCardContainer
const [filterValues, setFilterValues] = useState(localStorage.getItem("filterValues") ?? null); // pass this to both Search and TourCardContainer
//initial value for filterValues should be
// console.log("L54 filterValues :", filterValues)

const [counter, setCounter] = useState(0);

const [mapInitialized, setMapInitialized] = useState(false);
const [mapInitialized, setMapInitialized] = useState(false); //MAP

const [showMap, setShowMap] = useState(false);
const [mapBounds, setMapBounds] = useState(null);
const [markersChanged, setMarkersChanged] = useState(false);
const [showCardContainer, setShowCardContainer] = useState(true);
const [showMap, setShowMap] = useState(false); //MAP
const [mapBounds, setMapBounds] = useState(null); //MAP
const [markersChanged, setMarkersChanged] = useState(false); //MAP
const [showCardContainer, setShowCardContainer] = useState(true); //MAP
const[filterOn, setFilterOn] = useState(false);

const isMobile = useMediaQuery("(max-width:678px)");


// filter values in localStorage:
// let filterCountLocal = !!localStorage.getItem("filterCount")
// ? localStorage.getItem("filterCount")
// : null;
let filterValuesLocal = !!localStorage.getItem("filterValues")
? localStorage.getItem("filterValues")
: null;

//MAP setting showMap
useEffect(() => {
setShowMap(searchParams.get("map") === "true" ? true : false);
}, [searchParams]);
Expand Down Expand Up @@ -122,7 +120,7 @@ export function Main({
}
}, [allCities]);

//updates the state of activeFilter, filterValues based on the searchParams and filter values whenever there is a change in either searchParams or filter.
//updates the state of the boolean activeFilter based on localStorage values of "filterValues" .
useEffect(() => {
let _filterCountLocal = getFilterCount();
!!_filterCountLocal && _filterCountLocal > 0
Expand Down

0 comments on commit cf6edca

Please sign in to comment.