Prep for pin drop location sharing (#7919)

* add labs flag feature_location_share_pin_drop

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

* split LocationButton into two components

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

* rethemendex

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

* copyright

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

* one more (c)

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>

* use same matrix client import

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

src/components/views/location/LocationButton.tsx

@@ -17,18 +17,12 @@ limitations under the License.
 import React, { ReactElement, SyntheticEvent, useContext } from 'react';
 import classNames from 'classnames';
 import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
-import { logger } from "matrix-js-sdk/src/logger";
-import { MatrixClient } from 'matrix-js-sdk/src/client';
-import { makeLocationContent } from "matrix-js-sdk/src/content-helpers";
 
 import { _t } from '../../../languageHandler';
-import LocationPicker from './LocationPicker';
 import { CollapsibleButton } from '../rooms/CollapsibleButton';
-import ContextMenu, { aboveLeftOf, useContextMenu, AboveLeftOf } from "../../structures/ContextMenu";
-import Modal from '../../../Modal';
-import QuestionDialog from '../dialogs/QuestionDialog';
-import MatrixClientContext from '../../../contexts/MatrixClientContext';
+import { aboveLeftOf, useContextMenu, AboveLeftOf } from "../../structures/ContextMenu";
 import { OverflowMenuContext } from "../rooms/MessageComposerButtons";
+import LocationShareMenu from './LocationShareMenu';
 
 interface IProps {
     roomId: string;
@@ -39,7 +33,6 @@ interface IProps {
 export const LocationButton: React.FC<IProps> = ({ roomId, sender, menuPosition }) => {
     const overflowMenuCloser = useContext(OverflowMenuContext);
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
-    const matrixClient = useContext(MatrixClientContext);
 
     const _onFinished = (ev?: SyntheticEvent) => {
         closeMenu(ev);
@@ -51,17 +44,12 @@ export const LocationButton: React.FC<IProps> = ({ roomId, sender, menuPosition
         const position = menuPosition ?? aboveLeftOf(
             button.current.getBoundingClientRect());
 
-        contextMenu = <ContextMenu
-            {...position}
+        contextMenu = <LocationShareMenu
+            menuPosition={position}
             onFinished={_onFinished}
-            managed={false}
-        >
-            <LocationPicker
-                sender={sender}
-                onChoose={shareLocation(matrixClient, roomId, openMenu)}
-                onFinished={_onFinished}
-            />
-        </ContextMenu>;
+            sender={sender}
+            roomId={roomId}
+            openMenu={openMenu} />;
     }
 
     const className = classNames(
@@ -83,47 +71,4 @@ export const LocationButton: React.FC<IProps> = ({ roomId, sender, menuPosition
     </React.Fragment>;
 };
 
-const shareLocation = (client: MatrixClient, roomId: string, openMenu: () => void) =>
-    (uri: string, ts: number) => {
-        if (!uri) return false;
-        try {
-            const text = textForLocation(uri, ts, null);
-            client.sendMessage(
-                roomId,
-                makeLocationContent(text, uri, ts, null),
-            );
-        } catch (e) {
-            logger.error("We couldn’t send your location", e);
-
-            const analyticsAction = 'We couldn’t send your location';
-            const params = {
-                title: _t("We couldn’t send your location"),
-                description: _t(
-                    "Element could not send your location. Please try again later."),
-                button: _t('Try again'),
-                cancelButton: _t('Cancel'),
-                onFinished: (tryAgain: boolean) => {
-                    if (tryAgain) {
-                        openMenu();
-                    }
-                },
-            };
-            Modal.createTrackedDialog(analyticsAction, '', QuestionDialog, params);
-        }
-        return true;
-    };
-
-export function textForLocation(
-    uri: string,
-    ts: number,
-    description: string | null,
-): string {
-    const date = new Date(ts).toISOString();
-    if (description) {
-        return `Location "${description}" ${uri} at ${date}`;
-    } else {
-        return `Location ${uri} at ${date}`;
-    }
-}
-
 export default LocationButton;

src/components/views/location/LocationPicker.tsx

@@ -30,7 +30,7 @@ import ErrorDialog from '../dialogs/ErrorDialog';
 import { findMapStyleUrl } from '../messages/MLocationBody';
 import { tileServerFromWellKnown } from '../../../utils/WellKnownUtils';
 
-interface IProps {
+export interface ILocationPickerProps {
     sender: RoomMember;
     onChoose(uri: string, ts: number): boolean;
     onFinished(ev?: SyntheticEvent): void;
@@ -50,14 +50,14 @@ interface IState {
  */
 
 @replaceableComponent("views.location.LocationPicker")
-class LocationPicker extends React.Component<IProps, IState> {
+class LocationPicker extends React.Component<ILocationPickerProps, IState> {
     public static contextType = MatrixClientContext;
     public context!: React.ContextType<typeof MatrixClientContext>;
     private map?: maplibregl.Map = null;
     private geolocate?: maplibregl.GeolocateControl = null;
     private marker?: maplibregl.Marker = null;
 
-    constructor(props: IProps) {
+    constructor(props: ILocationPickerProps) {
         super(props);
 
         this.state = {

src/components/views/location/LocationShareMenu.tsx

@@ -0,0 +1,52 @@
+/*
+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 React, { SyntheticEvent, useContext } from 'react';
+import { Room } from 'matrix-js-sdk';
+
+import MatrixClientContext from '../../../contexts/MatrixClientContext';
+import ContextMenu, { AboveLeftOf } from '../../structures/ContextMenu';
+import LocationPicker, { ILocationPickerProps } from "./LocationPicker";
+import { shareLocation } from './shareLocation';
+
+type Props = Omit<ILocationPickerProps, 'onChoose'> & {
+    onFinished: (ev?: SyntheticEvent) => void;
+    menuPosition: AboveLeftOf;
+    openMenu: () => void;
+    roomId: Room["roomId"];
+};
+
+const LocationShareMenu: React.FC<Props> = ({
+    menuPosition, onFinished, sender, roomId, openMenu,
+}) => {
+    const matrixClient = useContext(MatrixClientContext);
+
+    return <ContextMenu
+        {...menuPosition}
+        onFinished={onFinished}
+        managed={false}
+    >
+        <div className="mx_LocationShareMenu">
+            <LocationPicker
+                sender={sender}
+                onChoose={shareLocation(matrixClient, roomId, openMenu)}
+                onFinished={onFinished}
+            />
+        </div>
+    </ContextMenu>;
+};
+
+export default LocationShareMenu;

src/components/views/location/shareLocation.ts

@@ -0,0 +1,67 @@
+
+/*
+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 { MatrixClient } from "matrix-js-sdk/src/client";
+import { makeLocationContent } from "matrix-js-sdk/src/content-helpers";
+import { logger } from "matrix-js-sdk/src/logger";
+
+import { _t } from "../../../languageHandler";
+import Modal from "../../../Modal";
+import QuestionDialog from "../dialogs/QuestionDialog";
+
+export const shareLocation = (client: MatrixClient, roomId: string, openMenu: () => void) =>
+    (uri: string, ts: number) => {
+        if (!uri) return false;
+        try {
+            const text = textForLocation(uri, ts, null);
+            client.sendMessage(
+                roomId,
+                makeLocationContent(text, uri, ts, null),
+            );
+        } catch (e) {
+            logger.error("We couldn’t send your location", e);
+
+            const analyticsAction = 'We couldn’t send your location';
+            const params = {
+                title: _t("We couldn’t send your location"),
+                description: _t(
+                    "Element could not send your location. Please try again later."),
+                button: _t('Try again'),
+                cancelButton: _t('Cancel'),
+                onFinished: (tryAgain: boolean) => {
+                    if (tryAgain) {
+                        openMenu();
+                    }
+                },
+            };
+            Modal.createTrackedDialog(analyticsAction, '', QuestionDialog, params);
+        }
+        return true;
+    };
+
+export function textForLocation(
+    uri: string,
+    ts: number,
+    description: string | null,
+): string {
+    const date = new Date(ts).toISOString();
+    if (description) {
+        return `Location "${description}" ${uri} at ${date}`;
+    } else {
+        return `Location ${uri} at ${date}`;
+    }
+}