Extract location utils from components (#8152)

* extract util functions from MLocationBody

Signed-off-by: Kerry Archibald <kerrya@element.io>

* disassemble mlocationbody

Signed-off-by: Kerry Archibald <kerrya@element.io>

* tidy and add copyrights

Signed-off-by: Kerry Archibald <kerrya@element.io>

* move types and utils from components/location to utils

Signed-off-by: Kerry Archibald <kerrya@element.io>

* i18n

Signed-off-by: Kerry Archibald <kerrya@element.io>

* empty line

Signed-off-by: Kerry Archibald <kerrya@element.io>

src/components/views/messages/MLocationBody.tsx

@@ -16,13 +16,11 @@ limitations under the License.
 
 import React from 'react';
 import maplibregl from 'maplibre-gl';
-import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
 import {
     M_ASSET,
     LocationAssetType,
     ILocationContent,
-    M_LOCATION,
 } from 'matrix-js-sdk/src/@types/location';
 import { ClientEvent, IClientWellKnown } from 'matrix-js-sdk/src/client';
 
@@ -31,14 +29,19 @@ import { IBodyProps } from "./IBodyProps";
 import { _t } from '../../../languageHandler';
 import MemberAvatar from '../avatars/MemberAvatar';
 import Modal from '../../../Modal';
+import {
+    parseGeoUri,
+    locationEventGeoUri,
+    createMap,
+    getLocationShareErrorMessage,
+    LocationShareError,
+} from '../../../utils/location';
 import LocationViewDialog from '../location/LocationViewDialog';
 import TooltipTarget from '../elements/TooltipTarget';
 import { Alignment } from '../elements/Tooltip';
 import AccessibleButton from '../elements/AccessibleButton';
 import { tileServerFromWellKnown } from '../../../utils/WellKnownUtils';
 import MatrixClientContext from '../../../contexts/MatrixClientContext';
-import { findMapStyleUrl } from '../location/findMapStyleUrl';
-import { getLocationShareErrorMessage, LocationShareError } from '../location/LocationShareErrors';
 
 interface IState {
     error: Error;
@@ -238,114 +241,3 @@ function ZoomButtons(props: IZoomButtonsProps): React.ReactElement<HTMLDivElemen
     </div>;
 }
 
-export function createMap(
-    coords: GeolocationCoordinates,
-    interactive: boolean,
-    bodyId: string,
-    markerId: string,
-    onError: (error: Error) => void,
-): maplibregl.Map {
-    try {
-        const styleUrl = findMapStyleUrl();
-        const coordinates = new maplibregl.LngLat(coords.longitude, coords.latitude);
-
-        const map = new maplibregl.Map({
-            container: bodyId,
-            style: styleUrl,
-            center: coordinates,
-            zoom: 15,
-            interactive,
-        });
-
-        new maplibregl.Marker({
-            element: document.getElementById(markerId),
-            anchor: 'bottom',
-            offset: [0, -1],
-        })
-            .setLngLat(coordinates)
-            .addTo(map);
-
-        map.on('error', (e) => {
-            logger.error(
-                "Failed to load map: check map_style_url in config.json has a "
-                + "valid URL and API key",
-                e.error,
-            );
-            onError(new Error(LocationShareError.MapStyleUrlNotReachable));
-        });
-
-        return map;
-    } catch (e) {
-        logger.error("Failed to render map", e);
-        onError(e);
-    }
-}
-
-/**
- * Find the geo-URI contained within a location event.
- */
-export function locationEventGeoUri(mxEvent: MatrixEvent): string {
-    // unfortunately we're stuck supporting legacy `content.geo_uri`
-    // events until the end of days, or until we figure out mutable
-    // events - so folks can read their old chat history correctly.
-    // https://github.com/matrix-org/matrix-doc/issues/3516
-    const content = mxEvent.getContent();
-    const loc = M_LOCATION.findIn(content) as { uri?: string };
-    return loc ? loc.uri : content['geo_uri'];
-}
-
-export function parseGeoUri(uri: string): GeolocationCoordinates {
-    function parse(s: string): number {
-        const ret = parseFloat(s);
-        if (Number.isNaN(ret)) {
-            return undefined;
-        } else {
-            return ret;
-        }
-    }
-
-    const m = uri.match(/^\s*geo:(.*?)\s*$/);
-    if (!m) return;
-    const parts = m[1].split(';');
-    const coords = parts[0].split(',');
-    let uncertainty: number;
-    for (const param of parts.slice(1)) {
-        const m = param.match(/u=(.*)/);
-        if (m) uncertainty = parse(m[1]);
-    }
-    return {
-        latitude: parse(coords[0]),
-        longitude: parse(coords[1]),
-        altitude: parse(coords[2]),
-        accuracy: uncertainty,
-        altitudeAccuracy: undefined,
-        heading: undefined,
-        speed: undefined,
-    };
-}
-
-function makeLink(coords: GeolocationCoordinates): string {
-    return (
-        "https://www.openstreetmap.org/" +
-        `?mlat=${coords.latitude}` +
-        `&mlon=${coords.longitude}` +
-        `#map=16/${coords.latitude}/${coords.longitude}`
-    );
-}
-
-export function createMapSiteLink(event: MatrixEvent): string {
-    const content: Object = event.getContent();
-    const mLocation = content[M_LOCATION.name];
-    if (mLocation !== undefined) {
-        const uri = mLocation["uri"];
-        if (uri !== undefined) {
-            return makeLink(parseGeoUri(uri));
-        }
-    } else {
-        const geoUri = content["geo_uri"];
-        if (geoUri) {
-            return makeLink(parseGeoUri(geoUri));
-        }
-    }
-    return null;
-}