28131466663

Committed 24 Jun 2026 09:41PM UTC coverage: 74.158%. First build

Build # 28131466663

Build Type

Pull #365

github

Committed by

web-flow

Commit Message

Merge 6f4f8c15d into 27cbf5bb0

Pull Request Pull Request #365: refactor!: aligned with breaking changes on platzky

Coverage Stats

174 of 277 branches covered (62.82%)

Branch coverage included in aggregate %.

575 of 733 new or added lines in 26 files covered. (78.44%)

575 of 733 relevant lines covered (78.44%)

8.77 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

61.9

/frontend/src/components/Map/components/LocationControl.jsx

import React from 'react';
import { Marker, Circle, useMap } from 'react-leaflet';
import MyLocationIcon from '@mui/icons-material/MyLocation';
import ReactDOMServer from 'react-dom/server';
import L from 'leaflet';
import { Button, Tooltip } from '@mui/material';
import Control from 'react-leaflet-custom-control';
import { useTranslation } from 'react-i18next';
import { buttonStyle, getLocationAwareStyles } from '../../../styles/buttonStyle';
import { useLocation } from '../context/LocationContext';

/**
 * Creates a custom Leaflet icon for displaying the user's location marker.
 * Renders a MyLocationIcon as an SVG string and converts it to a Leaflet divIcon.
 *
 * @returns {L.DivIcon} Leaflet divIcon representing the user's location
 */
const createLocationIcon = () => {
    const locationIconJSX = <MyLocationIcon sx={{ color: 'black', fontSize: 22 }} />;
    const svgLocationIcon = ReactDOMServer.renderToString(locationIconJSX);

    return L.divIcon({
        html: svgLocationIcon,
        iconSize: [22, 22],
        iconAnchor: [11, 11],
        popupAnchor: [0, -11],
        className: 'location-icon',
    });
};

/**
 * Location control component that displays and manages the user's current location on the map.
 * Uses shared location context so all location-dependent buttons stay in sync.
 * Provides a button to re-center the map on the user's location.
 *
 * @returns {React.ReactElement} Location markers and control button
 */
const LocationControl = () => {
    const { t } = useTranslation();
    const { locationGranted, userPosition, requestLocationWithFeedback } = useLocation();
    const map = useMap();

    const flyToLocation = (location, mapInstance) => {
        const zoomLevel = Math.max(mapInstance.getZoom(), 16);
        mapInstance.flyTo(location, zoomLevel);
    };

    const handleFlyToLocationClick = () => {
        requestLocationWithFeedback(position => flyToLocation(position, map));
    };

    const { lat, lng } = userPosition || {};

    return (
        <>
            {userPosition && (
                <>
                    <Circle center={[lat, lng]} radius={userPosition.accuracy} />
                    <Marker position={userPosition} icon={createLocationIcon()} />
                </>
            )}
            <Control prepend position="bottomright">
                <Tooltip
                    title={
                        locationGranted ? t('centerOnMyLocation') : t('locationServicesDisabled')
                    }
                    placement="left"
                    arrow
                    enterTouchDelay={0}
                    leaveTouchDelay={1500}
                >
                    <Button
                        onClick={handleFlyToLocationClick}
                        variant="contained"
                        aria-label={t('centerButtonAriaLabel')}
                        sx={{
                            ...buttonStyle,
                            ...getLocationAwareStyles(locationGranted),
                        }}
                    >
                        <MyLocationIcon style={{ color: 'white', fontSize: 24 }} />
                    </Button>
                </Tooltip>
            </Control>
        </>
    );
};

export { LocationControl };

1	import React from 'react';
2	import { Marker, Circle, useMap } from 'react-leaflet';
3	import MyLocationIcon from '@mui/icons-material/MyLocation';
4	import ReactDOMServer from 'react-dom/server';
5	import L from 'leaflet';
6	import { Button, Tooltip } from '@mui/material';
7	import Control from 'react-leaflet-custom-control';
8	import { useTranslation } from 'react-i18next';
9	import { buttonStyle, getLocationAwareStyles } from '../../../styles/buttonStyle';
10	import { useLocation } from '../context/LocationContext';
11
12	/**
13	* Creates a custom Leaflet icon for displaying the user's location marker.
14	* Renders a MyLocationIcon as an SVG string and converts it to a Leaflet divIcon.
15	*
16	* @returns {L.DivIcon} Leaflet divIcon representing the user's location
17	*/
18	const createLocationIcon = () => {	1✔
NEW 19	const locationIconJSX = <MyLocationIcon sx={{ color: 'black', fontSize: 22 }} />;	×
NEW 20	const svgLocationIcon = ReactDOMServer.renderToString(locationIconJSX);	×
21
NEW 22	return L.divIcon({	×
23	html: svgLocationIcon,
24	iconSize: [22, 22],
25	iconAnchor: [11, 11],
26	popupAnchor: [0, -11],
27	className: 'location-icon',
28	});
29	};
30
31	/**
32	* Location control component that displays and manages the user's current location on the map.
33	* Uses shared location context so all location-dependent buttons stay in sync.
34	* Provides a button to re-center the map on the user's location.
35	*
36	* @returns {React.ReactElement} Location markers and control button
37	*/
38	const LocationControl = () => {	1✔
39	const { t } = useTranslation();	2✔
40	const { locationGranted, userPosition, requestLocationWithFeedback } = useLocation();	2✔
41	const map = useMap();	2✔
42
43	const flyToLocation = (location, mapInstance) => {	2✔
NEW 44	const zoomLevel = Math.max(mapInstance.getZoom(), 16);	×
NEW 45	mapInstance.flyTo(location, zoomLevel);	×
46	};
47
48	const handleFlyToLocationClick = () => {	2✔
NEW 49	requestLocationWithFeedback(position => flyToLocation(position, map));	×
50	};
51
52	const { lat, lng } = userPosition \|\| {};	2✔
53
54	return (	2✔
55	<>
56	{userPosition && (	2!
57	<>
58	<Circle center={[lat, lng]} radius={userPosition.accuracy} />
59	<Marker position={userPosition} icon={createLocationIcon()} />
60	</>
61	)}
62	<Control prepend position="bottomright">
63	<Tooltip
64	title={
65	locationGranted ? t('centerOnMyLocation') : t('locationServicesDisabled')	2!
66	}
67	placement="left"
68	arrow
69	enterTouchDelay={0}
70	leaveTouchDelay={1500}
71	>
72	<Button
73	onClick={handleFlyToLocationClick}
74	variant="contained"
75	aria-label={t('centerButtonAriaLabel')}
76	sx={{
77	...buttonStyle,
78	...getLocationAwareStyles(locationGranted),
79	}}
80	>
81	<MyLocationIcon style={{ color: 'white', fontSize: 24 }} />
82	</Button>
83	</Tooltip>
84	</Control>
85	</>
86	);
87	};
88
89	export { LocationControl };

Problematy / goodmap / 28131466663

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous