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/context_menus/MessageContextMenu.tsx

@@ -47,8 +47,8 @@ import { ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInse
 import { WidgetLayoutStore } from '../../../stores/widgets/WidgetLayoutStore';
 import EndPollDialog from '../dialogs/EndPollDialog';
 import { isPollEnded } from '../messages/MPollBody';
-import { createMapSiteLink } from "../messages/MLocationBody";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
+import { createMapSiteLink } from '../../../utils/location';
 
 export function canCancel(status: EventStatus): boolean {
     return status === EventStatus.QUEUED || status === EventStatus.NOT_SENT || status === EventStatus.ENCRYPTING;

src/components/views/location/LocationPicker.tsx

@@ -28,16 +28,16 @@ import MatrixClientContext from '../../../contexts/MatrixClientContext';
 import Modal from '../../../Modal';
 import ErrorDialog from '../dialogs/ErrorDialog';
 import { tileServerFromWellKnown } from '../../../utils/WellKnownUtils';
-import { findMapStyleUrl } from './findMapStyleUrl';
 import { LocationShareType, ShareLocationFn } from './shareLocation';
 import { Icon as LocationIcon } from '../../../../res/img/element-icons/location.svg';
-import { LocationShareError } from './LocationShareErrors';
 import AccessibleButton from '../elements/AccessibleButton';
 import { MapError } from './MapError';
 import { getUserNameColorClass } from '../../../utils/FormattingUtils';
 import LiveDurationDropdown, { DEFAULT_DURATION_MS } from './LiveDurationDropdown';
 import { GenericPosition, genericPositionFromGeolocation, getGeoUri } from '../../../utils/beacon';
 import SdkConfig from '../../../SdkConfig';
+import { LocationShareError, findMapStyleUrl } from '../../../utils/location';
+
 export interface ILocationPickerProps {
     sender: RoomMember;
     shareType: LocationShareType;

src/components/views/location/LocationViewDialog.tsx

@@ -21,8 +21,9 @@ import { ClientEvent, IClientWellKnown, MatrixClient } from 'matrix-js-sdk/src/c
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import BaseDialog from "../dialogs/BaseDialog";
 import { IDialogProps } from "../dialogs/IDialogProps";
-import { createMap, LocationBodyContent, locationEventGeoUri, parseGeoUri } from '../messages/MLocationBody';
+import { LocationBodyContent } from '../messages/MLocationBody';
 import { tileServerFromWellKnown } from '../../../utils/WellKnownUtils';
+import { parseGeoUri, locationEventGeoUri, createMap } from '../../../utils/location';
 
 interface IProps extends IDialogProps {
     matrixClient: MatrixClient;

src/components/views/location/MapError.tsx

@@ -18,9 +18,9 @@ import React from 'react';
 
 import { Icon as WarningBadge } from '../../../../res/img/element-icons/warning-badge.svg';
 import { _t } from '../../../languageHandler';
+import { getLocationShareErrorMessage, LocationShareError } from '../../../utils/location';
 import AccessibleButton from '../elements/AccessibleButton';
 import Heading from '../typography/Heading';
-import { getLocationShareErrorMessage, LocationShareError } from './LocationShareErrors';
 
 interface Props {
     onFinished: () => void;

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;
-}

src/i18n/strings/en_EN.json

@@ -734,6 +734,8 @@
     "Invite to %(spaceName)s": "Invite to %(spaceName)s",
     "Share your public space": "Share your public space",
     "Unknown App": "Unknown App",
+    "This homeserver is not configured to display maps.": "This homeserver is not configured to display maps.",
+    "This homeserver is not configured correctly to display maps, or the configured map server may be unreachable.": "This homeserver is not configured correctly to display maps, or the configured map server may be unreachable.",
     "Are you sure you want to exit during this export?": "Are you sure you want to exit during this export?",
     "Generating a ZIP": "Generating a ZIP",
     "Fetched %(count)s events out of %(total)s|other": "Fetched %(count)s events out of %(total)s",
@@ -2144,8 +2146,6 @@
     "Failed to fetch your location. Please try again later.": "Failed to fetch your location. Please try again later.",
     "Timed out trying to fetch your location. Please try again later.": "Timed out trying to fetch your location. Please try again later.",
     "Unknown error fetching location. Please try again later.": "Unknown error fetching location. Please try again later.",
-    "This homeserver is not configured to display maps.": "This homeserver is not configured to display maps.",
-    "This homeserver is not configured correctly to display maps, or the configured map server may be unreachable.": "This homeserver is not configured correctly to display maps, or the configured map server may be unreachable.",
     "We couldn't send your location": "We couldn't send your location",
     "%(brand)s could not send your location. Please try again later.": "%(brand)s could not send your location. Please try again later.",
     "%(displayName)s's live location": "%(displayName)s's live location",

src/utils/location/LocationShareErrors.ts

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { _t } from "../../../languageHandler";
+import { _t } from "../../languageHandler";
 
 export enum LocationShareError {
     MapStyleUrlNotConfigured = 'MapStyleUrlNotConfigured',

src/utils/location/findMapStyleUrl.ts

@@ -16,8 +16,8 @@ limitations under the License.
 
 import { logger } from "matrix-js-sdk/src/logger";
 
-import SdkConfig from "../../../SdkConfig";
-import { getTileServerWellKnown } from "../../../utils/WellKnownUtils";
+import SdkConfig from "../../SdkConfig";
+import { getTileServerWellKnown } from "../WellKnownUtils";
 import { LocationShareError } from "./LocationShareErrors";
 
 /**

src/utils/location/index.ts

@@ -0,0 +1,21 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export * from './findMapStyleUrl';
+export * from './locationEventGeoUri';
+export * from './LocationShareErrors';
+export * from './map';
+export * from './parseGeoUri';

src/utils/location/locationEventGeoUri.ts

@@ -0,0 +1,31 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { M_LOCATION } from "matrix-js-sdk/src/@types/location";
+
+/**
+ * Find the geo-URI contained within a location event.
+ */
+export const 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'];
+};

src/utils/location/map.ts

@@ -0,0 +1,93 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import maplibregl from "maplibre-gl";
+import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { M_LOCATION } from "matrix-js-sdk/src/@types/location";
+import { logger } from "matrix-js-sdk/src/logger";
+
+import { parseGeoUri } from "./parseGeoUri";
+import { findMapStyleUrl } from "./findMapStyleUrl";
+import { LocationShareError } from "./LocationShareErrors";
+
+export const 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);
+    }
+};
+
+const makeLink = (coords: GeolocationCoordinates): string => {
+    return (
+        "https://www.openstreetmap.org/" +
+        `?mlat=${coords.latitude}` +
+        `&mlon=${coords.longitude}` +
+        `#map=16/${coords.latitude}/${coords.longitude}`
+    );
+};
+
+export const 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;
+};

src/utils/location/parseGeoUri.ts

@@ -0,0 +1,45 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export const 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,
+    };
+};