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

Request location only when necessary in MapView #36761

Merged
merged 8 commits into from
Feb 20, 2024
Merged

Request location only when necessary in MapView #36761

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6fb17e7
Request location only when necessary in MapView
esh-g Feb 17, 2024
d1725f4
Fix lint
esh-g Feb 17, 2024
6c1924a
Fix lint
esh-g Feb 18, 2024
59cb60b
Update src/components/MapView/MapView.tsx
esh-g Feb 19, 2024
1faec43
Remove unecessary dependency
esh-g Feb 20, 2024
fde1898
Rename current position
esh-g Feb 20, 2024
75a173f
Prettify 💫
esh-g Feb 20, 2024
b2f2dac
Update src/components/MapView/MapView.tsx
esh-g Feb 20, 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
47 changes: 25 additions & 22 deletions src/components/MapView/MapView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,20 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
const [userInteractedWithMap, setUserInteractedWithMap] = useState(false);
const hasAskedForLocationPermission = useRef(false);

// Determines if map can be panned to user's detected
// location without bothering the user. It will return
// false if user has already started dragging the map or
// if there are one or more waypoints present.
const shouldPanMapToCurrentPosition = useCallback(() => !userInteractedWithMap && (!waypoints || waypoints.length === 0), [userInteractedWithMap, waypoints]);

const setCurrentPositionToInitialState = useCallback(() => {
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
if (cachedUserLocation || !initialState) {
return;
}
setCurrentPosition({longitude: initialState.location[0], latitude: initialState.location[1]});
}, [initialState, setCurrentPosition, cachedUserLocation]);
esh-g marked this conversation as resolved.
Show resolved Hide resolved

useFocusEffect(
useCallback(() => {
if (isOffline) {
Expand All @@ -42,31 +56,20 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
return;
}

if (!shouldPanMapToCurrentPosition()) {
setCurrentPositionToInitialState();
return;
}

Comment on lines +61 to +65
Copy link
Contributor

Choose a reason for hiding this comment

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

Why don't we just return early?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@s77rt It is because currentPosition needs to bet set so that pending view is not displayed.

App/src/components/MapView/MapView.tsx

Line 145 in 6f3d8f6

{!isOffline && Boolean(accessToken) && Boolean(currentPosition) ? (

hasAskedForLocationPermission.current = true;
esh-g marked this conversation as resolved.
Show resolved Hide resolved
getCurrentPosition(
(params) => {
const currentCoords = {longitude: params.coords.longitude, latitude: params.coords.latitude};
setCurrentPosition(currentCoords);
setUserLocation(currentCoords);
},
() => {
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
if (cachedUserLocation || !initialState) {
return;
}

setCurrentPosition({longitude: initialState.location[0], latitude: initialState.location[1]});
},
);
}, [cachedUserLocation, initialState, isOffline]),
getCurrentPosition((params) => {
const currentCoords = {longitude: params.coords.longitude, latitude: params.coords.latitude};
setCurrentPosition(currentCoords);
setUserLocation(currentCoords);
}, setCurrentPositionToInitialState);
}, [isOffline, shouldPanMapToCurrentPosition, setCurrentPositionToInitialState]),
);

// Determines if map can be panned to user's detected
// location without bothering the user. It will return
// false if user has already started dragging the map or
// if there are one or more waypoints present.
const shouldPanMapToCurrentPosition = useCallback(() => !userInteractedWithMap && (!waypoints || waypoints.length === 0), [userInteractedWithMap, waypoints]);

useEffect(() => {
if (!currentPosition || !cameraRef.current) {
return;
Expand Down
47 changes: 25 additions & 22 deletions src/components/MapView/MapView.website.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,20 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
const setRef = useCallback((newRef: MapRef | null) => setMapRef(newRef), []);
const hasAskedForLocationPermission = useRef(false);

// Determines if map can be panned to user's detected
// location without bothering the user. It will return
// false if user has already started dragging the map or
// if there are one or more waypoints present.
const shouldPanMapToCurrentPosition = useCallback(() => !userInteractedWithMap && (!waypoints || waypoints.length === 0), [userInteractedWithMap, waypoints]);

const setCurrentPositionToInitialState = useCallback(() => {
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
if (cachedUserLocation || !initialState) {
return;
}
setCurrentPosition({longitude: initialState.location[0], latitude: initialState.location[1]});
}, [initialState, setCurrentPosition, cachedUserLocation]);

useFocusEffect(
useCallback(() => {
if (isOffline) {
Expand All @@ -65,31 +79,20 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
return;
}

if (!shouldPanMapToCurrentPosition()) {
setCurrentPositionToInitialState();
return;
}

hasAskedForLocationPermission.current = true;
getCurrentPosition(
(params) => {
const currentCoords = {longitude: params.coords.longitude, latitude: params.coords.latitude};
setCurrentPosition(currentCoords);
setUserLocation(currentCoords);
},
() => {
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
if (cachedUserLocation || !initialState) {
return;
}

setCurrentPosition({longitude: initialState.location[0], latitude: initialState.location[1]});
},
);
}, [cachedUserLocation, initialState, isOffline]),
getCurrentPosition((params) => {
const currentCoords = {longitude: params.coords.longitude, latitude: params.coords.latitude};
setCurrentPosition(currentCoords);
setUserLocation(currentCoords);
}, setCurrentPositionToInitialState);
}, [isOffline, shouldPanMapToCurrentPosition, setCurrentPositionToInitialState]),
);

// Determines if map can be panned to user's detected
// location without bothering the user. It will return
// false if user has already started dragging the map or
// if there are one or more waypoints present.
const shouldPanMapToCurrentPosition = useCallback(() => !userInteractedWithMap && (!waypoints || waypoints.length === 0), [userInteractedWithMap, waypoints]);

useEffect(() => {
if (!currentPosition || !mapRef) {
return;
Expand Down
Loading