Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix map panning issues related resource info modal #539

Merged
merged 12 commits into from
Oct 15, 2024
Merged

Fix map panning issues related resource info modal #539

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
675e599
Set user location after location fetch
ravicodelabs Oct 6, 2024
bba54f6
Newer action syntax for user location, map center
ravicodelabs Oct 6, 2024
0d60090
Correct info window class on open
ravicodelabs Oct 6, 2024
3c1bc92
Remove old, commented out action syntax
ravicodelabs Oct 6, 2024
30d33bd
Fixes a map panning issue from issue #527
ravicodelabs Oct 6, 2024
a2926f5
Rename redux state mapCenter to lastResourcePan
ravicodelabs Oct 6, 2024
c726d19
Remove debugging statement
ravicodelabs Oct 6, 2024
2307c52
Restore original "Near Me" behavior after fix
ravicodelabs Oct 6, 2024
4967a7a
Add some documentation comments
ravicodelabs Oct 6, 2024
3b0ea6f
Simplify action - setSelectedPlace
ravicodelabs Oct 15, 2024
d6a8246
Remove temp port change for dev
ravicodelabs Oct 15, 2024
0ded650
Small bit of cleanup ahead of merging
gcardonag Oct 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 2 additions & 11 deletions src/actions/actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,17 +57,8 @@ export const pushNewResource = newResource => ({
// Handles the case where an existing resource is updated from the submission form
export const updateExistingResource = createAction('UPDATE_EXISTING_RESOURCE');

export const SET_USER_LOCATION = 'SET_USER_LOCATION';
export const setUserLocation = coords => ({
type: SET_USER_LOCATION,
coords
});

export const SET_MAP_CENTER = 'SET_MAP_CENTER';
export const setMapCenter = coords => ({
type: SET_MAP_CENTER,
coords
});
export const setUserLocation = createAction('SET_USER_LOCATION');
export const setLastResourcePan = createAction('SET_LAST_RESOURCE_PAN');

export const toggleInfoWindow = createAction('TOGGLE_INFO_WINDOW');
export const toggleInfoWindowClass = createAction('TOGGLE_INFO_WINDOW_CLASS');
Expand Down
44 changes: 29 additions & 15 deletions src/components/ReactGoogleMaps/ReactGoogleMaps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
resetFilterFunction,
setEntryFilterFunction,
setFilterFunction,
setMapCenter,
setLastResourcePan,
setSelectedPlace,
setUserLocation,
toggleInfoWindow,
Expand Down Expand Up @@ -207,16 +207,13 @@ export const ReactGoogleMaps = ({ google }) => {
const isMobile = useIsMobile();
const allResources = useSelector(state => state.filterMarkers.allResources);
const filteredResources = useSelector(state => selectFilteredResource(state));
const mapCenter = useSelector(state => state.filterMarkers.mapCenter);
const lastResourcePan = useSelector(state => state.filterMarkers.lastResourcePan);
const resourceType = useSelector(state => state.filterMarkers.resourceType);
const searchBarMapTintOn = useSelector(state => state.filterMarkers.searchBarMapTintOn);
const showingInfoWindow = useSelector(
state => state.filterMarkers.showingInfoWindow
);
const toolbarModal = useSelector(state => state.filterMarkers.toolbarModal);

const [currentLat, setCurrentLat] = useState(CITY_HALL_COORDINATES.latitude);
const [currentLon, setCurrentLon] = useState(CITY_HALL_COORDINATES.longitude);
const [zoom, setZoom] = useState(16);
const [searchedTap, setSearchedTap] = useState(null);
const [map, setMap] = useState(null);
Expand All @@ -237,16 +234,26 @@ export const ReactGoogleMaps = ({ google }) => {
const fetchCoordinates = async () => {
try {
const position = await getCoordinates();
setCurrentLat(position.coords.latitude);
setCurrentLon(position.coords.longitude);
dispatch(
setUserLocation({
lat: position.coords.latitude,
lng: position.coords.longitude
})
);
dispatch(
setLastResourcePan({
lat: position.coords.latitude,
lng: position.coords.longitude
})
)
} catch (error) {
// Do nothing
}
};

fetchCoordinates();
}, []);

//toggle window goes here
const onMarkerClick = (resource, markerProps) => {
dispatch(
Expand All @@ -256,19 +263,26 @@ export const ReactGoogleMaps = ({ google }) => {
})
);
dispatch(setSelectedPlace(resource));
setCurrentLat(resource.latitude);
setCurrentLon(resource.longitude);
dispatch(
setLastResourcePan({
lat: resource.latitude,
lng: resource.longitude
})
)
markerProps.map.panTo({ lat: resource.latitude, lng: resource.longitude });

};

const onReady = (_, map) => {
setMap(map);
};

const searchForLocation = location => {
setCurrentLat(location.lat);
setCurrentLon(location.lng);
dispatch(
setLastResourcePan({
lat: location.lat,
lng: location.lng
})
)
setZoom(16);
setSearchedTap({ lat: location.lat, lng: location.lng });
};
Expand Down Expand Up @@ -339,8 +353,8 @@ export const ReactGoogleMaps = ({ google }) => {
fullscreenControl={false}
onReady={onReady}
center={{
lat: currentLat,
lng: currentLon
lat: lastResourcePan.lat,
lng: lastResourcePan.lng
}}
filterTags={appliedFilterTags}
>
Expand Down
4 changes: 2 additions & 2 deletions src/components/SelectedTap/SelectedTap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,8 +131,8 @@ const SelectedTap = () => {
toggleInfoWindow({
isShown,
infoWindowClass: isMobile
? 'info-window-out'
: 'info-window-out-desktop'
? 'info-window-in'
: 'info-window-in-desktop'
})
);
}
Expand Down
15 changes: 11 additions & 4 deletions src/components/Toolbar/Toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
TOOLBAR_MODAL_NONE,
TOOLBAR_MODAL_RESOURCE,
TOOLBAR_MODAL_SEARCH,
setLastResourcePan,
setSelectedPlace,
setToolbarModal,
toggleInfoWindow,
Expand Down Expand Up @@ -112,15 +113,21 @@ function Toolbar({ map }) {
});
if (!closest) return;

dispatch(toggleInfoWindow({
isShown: true,
infoWindowClass: isMobile ? 'info-window-in' : 'info-window-in-desktop'
}));
dispatch(
setLastResourcePan({
lat: closest.latitude,
lng: closest.longitude
})
)
dispatch(setSelectedPlace(closest));
map.panTo({
lat: closest.latitude,
lng: closest.longitude
});
dispatch(toggleInfoWindow({
isShown: true,
infoWindowClass: isMobile ? 'info-window-in' : 'info-window-in-desktop'
}));
}

function closestButtonClicked() {
Expand Down
15 changes: 8 additions & 7 deletions src/reducers/filterMarkers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@ import * as actions from '../actions/actions';
import { WATER_RESOURCE_TYPE } from '../types/ResourceEntry';

const initialState = {
mapCenter: {
// Captures location when e.g. a pin is clicked or "Near Me" is clicked
lastResourcePan: {
lat: parseFloat(CITY_HALL_COORDINATES.latitude),
lng: parseFloat(CITY_HALL_COORDINATES.longitude)
},
// Change to reflect user's current location
// Changes to reflect user's current location if location is enabled
userLocation: {
lat: parseFloat(CITY_HALL_COORDINATES.latitude),
lng: parseFloat(CITY_HALL_COORDINATES.longitude)
Expand Down Expand Up @@ -72,11 +73,11 @@ export default (state = initialState, act) => {
}
};

case actions.SET_USER_LOCATION:
return { ...state, userLocation: act.coords };
case actions.setUserLocation.type:
return { ...state, userLocation: act.payload };

case actions.SET_MAP_CENTER:
return { ...state, mapCenter: act.coords };
case actions.setLastResourcePan.type:
return { ...state, lastResourcePan: act.payload };

case actions.getResources.fulfilled.type:
return { ...state, allResources: act.payload };
Expand Down Expand Up @@ -129,7 +130,7 @@ export default (state = initialState, act) => {
: {
...state,
selectedPlace: state.allResources[act.selectedPlace],
showingInfoWindow: true
showingInfoWindow: true // debuggin! why is this here, and not in the other branch?
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just checking, does this comment still need to be addressed or can it be removed?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ack (no pun intended!) Thanks for catching this, it was a self-comment while I was working, which has now been removed.

To clarify, by "branch" I meant the if branch in filterReducers, which did not set the selected place, while the else branch did. After a bit more digging, I could not find any instance where we are actually using the resource ID to set the place, hence the if-else seemed unnecessary, removing it altogether removed the need to worry about setting the selected place in both branches.

TL;DR - I have removed the if-else and that comment in the reducer, and also transitioned to the createAction syntax as part of the recent guidelines. Also, some of the commit changes are being caused by prettier formatting, sorry for any confusion!

};

case actions.toggleInfoWindow.type:
Expand Down
Loading