From cbb23642a1adaeff0949c7f465950e3357eaa43a Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 13 Apr 2022 14:45:54 +0200
Subject: [PATCH 01/12] open a dialog with map centered around first beacon

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 res/css/_components.scss                      |  1 +
 .../views/beacon/_BeaconViewDialog.scss       | 57 +++++++++++++
 .../views/beacon/BeaconViewDialog.tsx         | 82 +++++++++++++++++++
 .../views/location/LocationViewDialog.tsx     |  3 +
 src/components/views/messages/MBeaconBody.tsx | 25 +++++-
 src/utils/beacon/useLiveBeacons.ts            | 42 ++++++++++
 .../views/beacon/BeaconViewDialog-test.tsx    | 16 ++++
 7 files changed, 225 insertions(+), 1 deletion(-)
 create mode 100644 res/css/components/views/beacon/_BeaconViewDialog.scss
 create mode 100644 src/components/views/beacon/BeaconViewDialog.tsx
 create mode 100644 src/utils/beacon/useLiveBeacons.ts
 create mode 100644 test/components/views/beacon/BeaconViewDialog-test.tsx

diff --git a/res/css/_components.scss b/res/css/_components.scss
index 38d539248ca..6964f79d2ff 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -5,6 +5,7 @@
 @import "./_font-weights.scss";
 @import "./_spacing.scss";
 @import "./components/views/beacon/_BeaconStatus.scss";
+@import "./components/views/beacon/_BeaconViewDialog.scss";
 @import "./components/views/beacon/_LeftPanelLiveShareWarning.scss";
 @import "./components/views/beacon/_LiveTimeRemaining.scss";
 @import "./components/views/beacon/_RoomLiveShareWarning.scss";
diff --git a/res/css/components/views/beacon/_BeaconViewDialog.scss b/res/css/components/views/beacon/_BeaconViewDialog.scss
new file mode 100644
index 00000000000..901b4564395
--- /dev/null
+++ b/res/css/components/views/beacon/_BeaconViewDialog.scss
@@ -0,0 +1,57 @@
+/*
+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.
+*/
+
+.mx_BeaconViewDialog_wrapper .mx_Dialog {
+    padding: 0px;
+
+    /* Unset contain and position to allow the close button
+    to appear outside the dialog */
+    contain: unset;
+    position: unset;
+}
+
+.mx_BeaconViewDialog {
+    /* subtract 0.5px to prevent single-pixel margin due to rounding */
+    width: calc(80vw - 0.5px);
+    height: calc(80vh - 0.5px);
+    overflow: hidden;
+
+    .mx_Dialog_header {
+        margin: 0px;
+        padding: 0px;
+        position: unset;
+
+        .mx_Dialog_title {
+            display: none;
+        }
+
+        .mx_Dialog_cancelButton {
+            z-index: 4010;
+            position: absolute;
+            right: 5vw;
+            top: 5vh;
+            width: 20px;
+            height: 20px;
+            background-color: $dialog-close-external-color;
+        }
+    }
+}
+
+.mx_BeaconViewDialog_map {
+    width: 80vw;
+    height: 80vh;
+    border-radius: 8px;
+}
diff --git a/src/components/views/beacon/BeaconViewDialog.tsx b/src/components/views/beacon/BeaconViewDialog.tsx
new file mode 100644
index 00000000000..77adf929f51
--- /dev/null
+++ b/src/components/views/beacon/BeaconViewDialog.tsx
@@ -0,0 +1,82 @@
+/*
+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 from 'react';
+import { MatrixClient } from 'matrix-js-sdk/src/client';
+import {
+    Beacon,
+    Room,
+} from 'matrix-js-sdk/src/matrix';
+
+import BaseDialog from "../dialogs/BaseDialog";
+import { IDialogProps } from "../dialogs/IDialogProps";
+import Map from '../location/Map';
+import SmartMarker from '../location/SmartMarker';
+import { useLiveBeacons } from '../../../utils/beacon/useLiveBeacons';
+
+interface IProps extends IDialogProps {
+    roomId: Room['roomId'];
+    matrixClient: MatrixClient;
+}
+
+// TODO actual center is coming soon
+// for now just center around first beacon in list
+const useMapCenterUri = (beacons: Beacon[]): string => {
+    const firstBeacon = beacons[0];
+
+    return firstBeacon.latestLocationState?.uri;
+};
+
+/**
+ * Dialog to view live beacons maximised
+ */
+const BeaconViewDialog: React.FC<IProps> = ({ roomId, matrixClient, onFinished }) => {
+    const liveBeacons = useLiveBeacons(roomId, matrixClient);
+
+    const mapCenterUri = useMapCenterUri(liveBeacons);
+
+    // only pass member to marker when should render avatar marker
+    // const markerRoomMember = isSelfLocation(mxEvent.getContent()) ? mxEvent.sender : undefined;
+    // const geoUri = locationEventGeoUri(mxEvent);
+    return (
+        <BaseDialog
+            className='mx_BeaconViewDialog'
+            onFinished={onFinished}
+            fixedWidth={false}
+        >
+            <Map
+                id='mx_BeaconViewDialog'
+                centerGeoUri={mapCenterUri}
+                interactive
+                className="mx_BeaconViewDialog_map"
+            >
+                {
+                    ({ map }) =>
+                        <>
+                            { /* <SmartMarker
+                                map={map}
+                                id={`${this.getBodyId()}-marker`}
+                                geoUri={geoUri}
+                                roomMember={markerRoomMember}
+                            /> */ }
+                        </>
+                }
+            </Map>
+        </BaseDialog>
+    );
+};
+
+export default BeaconViewDialog;
diff --git a/src/components/views/location/LocationViewDialog.tsx b/src/components/views/location/LocationViewDialog.tsx
index 9719013ee4c..9651b744584 100644
--- a/src/components/views/location/LocationViewDialog.tsx
+++ b/src/components/views/location/LocationViewDialog.tsx
@@ -34,6 +34,9 @@ interface IState {
     error: Error;
 }
 
+/**
+ * Dialog to view m.location events maximised
+ */
 export default class LocationViewDialog extends React.Component<IProps, IState> {
     constructor(props: IProps) {
         super(props);
diff --git a/src/components/views/messages/MBeaconBody.tsx b/src/components/views/messages/MBeaconBody.tsx
index ed40bfdda75..181f4067d08 100644
--- a/src/components/views/messages/MBeaconBody.tsx
+++ b/src/components/views/messages/MBeaconBody.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { Beacon, BeaconEvent, MatrixEvent } from 'matrix-js-sdk/src/matrix';
 import { BeaconLocationState } from 'matrix-js-sdk/src/content-helpers';
 import { randomString } from 'matrix-js-sdk/src/randomstring';
@@ -30,6 +30,9 @@ import SmartMarker from '../location/SmartMarker';
 import BeaconStatus from '../beacon/BeaconStatus';
 import { IBodyProps } from "./IBodyProps";
 import { _t } from '../../../languageHandler';
+import Modal from '../../../Modal';
+import BeaconViewDialog from '../beacon/BeaconViewDialog';
+import MatrixClientContext from '../../../contexts/MatrixClientContext';
 
 const useBeaconState = (beaconInfoEvent: MatrixEvent): {
     beacon?: Beacon;
@@ -84,12 +87,31 @@ const MBeaconBody: React.FC<IBodyProps> = React.forwardRef(({ mxEvent }, ref) =>
     } = useBeaconState(mxEvent);
     const mapId = useUniqueId(mxEvent.getId());
 
+    const matrixClient = useContext(MatrixClientContext);
     const [error, setError] = useState<Error>();
 
     const displayStatus = getBeaconDisplayStatus(isLive, latestLocationState, error);
 
     const markerRoomMember = isSelfLocation(mxEvent.getContent()) ? mxEvent.sender : undefined;
 
+    const onClick = () => {
+        if (displayStatus !== BeaconDisplayStatus.Active) {
+            return;
+        }
+        Modal.createTrackedDialog(
+            'Beacon View',
+            '',
+            BeaconViewDialog,
+            {
+                roomId: mxEvent.getRoomId(),
+                matrixClient,
+            },
+            "mx_BeaconViewDialog_wrapper",
+            false, // isPriority
+            true, // isStatic
+        );
+    };
+
     return (
         <div className='mx_MBeaconBody' ref={ref}>
             { displayStatus === BeaconDisplayStatus.Active ?
@@ -97,6 +119,7 @@ const MBeaconBody: React.FC<IBodyProps> = React.forwardRef(({ mxEvent }, ref) =>
                     id={mapId}
                     centerGeoUri={latestLocationState.uri}
                     onError={setError}
+                    onClick={onClick}
                     className="mx_MBeaconBody_map"
                 >
                     {
diff --git a/src/utils/beacon/useLiveBeacons.ts b/src/utils/beacon/useLiveBeacons.ts
new file mode 100644
index 00000000000..b3bfc573d15
--- /dev/null
+++ b/src/utils/beacon/useLiveBeacons.ts
@@ -0,0 +1,42 @@
+/*
+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 {
+    Beacon,
+    Room,
+    RoomStateEvent,
+    MatrixClient,
+} from "matrix-js-sdk/src/matrix";
+
+import { useEventEmitterState } from "../../hooks/useEventEmitter";
+
+/**
+ * Returns an array of all active beacon ids for a given room
+ * (live = active) TODO
+ *
+ * Beacons are removed from array when they become inactive
+ */
+export const useLiveBeacons = (roomId: Room['roomId'], matrixClient: MatrixClient): Beacon[] => {
+    const room = matrixClient.getRoom(roomId);
+
+    const liveBeacons = useEventEmitterState(
+        room.currentState,
+        RoomStateEvent.BeaconLiveness,
+        () => room.currentState?.liveBeaconIds.map(beaconIdentifier => room.currentState.beacons.get(beaconIdentifier)),
+    );
+
+    return liveBeacons;
+};
diff --git a/test/components/views/beacon/BeaconViewDialog-test.tsx b/test/components/views/beacon/BeaconViewDialog-test.tsx
new file mode 100644
index 00000000000..623c3957f77
--- /dev/null
+++ b/test/components/views/beacon/BeaconViewDialog-test.tsx
@@ -0,0 +1,16 @@
+
+import React from 'react';
+import { mount } from 'enzyme';
+
+import BeaconViewDialog from '../../../../src/components/views/beacon/BeaconViewDialog';
+
+describe('<BeaconViewDialog />', () => {
+    const defaultProps = {};
+    const getComponent = (props = {}) =>
+        mount(<BeaconViewDialog {...defaultProps} {...props} />);
+
+    it('renders', () => {
+        const component = getComponent();
+        expect(component).toBeTruthy();
+    });
+});

From 625937a9324e36e137d9d985b5a4828a8e4a1472 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 13 Apr 2022 15:14:13 +0200
Subject: [PATCH 02/12] add room member markers

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 src/components/views/beacon/BeaconMarker.tsx  | 64 +++++++++++++++++++
 .../views/beacon/BeaconViewDialog.tsx         | 46 ++++++-------
 .../views/beacon/BeaconMarker-test.tsx        | 16 +++++
 3 files changed, 103 insertions(+), 23 deletions(-)
 create mode 100644 src/components/views/beacon/BeaconMarker.tsx
 create mode 100644 test/components/views/beacon/BeaconMarker-test.tsx

diff --git a/src/components/views/beacon/BeaconMarker.tsx b/src/components/views/beacon/BeaconMarker.tsx
new file mode 100644
index 00000000000..fb9b85c1eaa
--- /dev/null
+++ b/src/components/views/beacon/BeaconMarker.tsx
@@ -0,0 +1,64 @@
+/*
+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, { useContext } from 'react';
+import maplibregl from 'maplibre-gl';
+import {
+    Beacon,
+    BeaconEvent,
+} from 'matrix-js-sdk/src/matrix';
+import { LocationAssetType } from 'matrix-js-sdk/src/@types/location';
+
+import { useEventEmitterState } from '../../../hooks/useEventEmitter';
+import SmartMarker from '../location/SmartMarker';
+import MatrixClientContext from '../../../contexts/MatrixClientContext';
+
+interface Props {
+    map: maplibregl.Map;
+    beacon: Beacon;
+}
+
+/**
+ * Updates a map SmartMarker with latest location from given beacon
+ */
+const BeaconMarker: React.FC<Props> = ({ map, beacon }) => {
+    const latestLocationState = useEventEmitterState(
+        beacon,
+        BeaconEvent.LocationUpdate,
+        () => beacon.latestLocationState,
+    );
+    const matrixClient = useContext(MatrixClientContext);
+    const room = matrixClient.getRoom(beacon.roomId);
+
+    if (!latestLocationState || !beacon.isLive) {
+        return null;
+    }
+
+    const geoUri = latestLocationState?.uri;
+
+    const markerRoomMember = beacon.beaconInfo.assetType === LocationAssetType.Self ?
+        room.getMember(beacon.beaconInfoOwner) :
+        undefined;
+
+    return <SmartMarker
+        map={map}
+        id={beacon.identifier}
+        geoUri={geoUri}
+        roomMember={markerRoomMember}
+    />;
+};
+
+export default BeaconMarker;
diff --git a/src/components/views/beacon/BeaconViewDialog.tsx b/src/components/views/beacon/BeaconViewDialog.tsx
index 77adf929f51..c2ef5a3088c 100644
--- a/src/components/views/beacon/BeaconViewDialog.tsx
+++ b/src/components/views/beacon/BeaconViewDialog.tsx
@@ -20,12 +20,14 @@ import {
     Beacon,
     Room,
 } from 'matrix-js-sdk/src/matrix';
+import maplibregl from 'maplibre-gl';
 
+import { useLiveBeacons } from '../../../utils/beacon/useLiveBeacons';
 import BaseDialog from "../dialogs/BaseDialog";
 import { IDialogProps } from "../dialogs/IDialogProps";
 import Map from '../location/Map';
-import SmartMarker from '../location/SmartMarker';
-import { useLiveBeacons } from '../../../utils/beacon/useLiveBeacons';
+import BeaconMarker from './BeaconMarker';
+import MatrixClientContext from '../../../contexts/MatrixClientContext';
 
 interface IProps extends IDialogProps {
     roomId: Room['roomId'];
@@ -48,33 +50,31 @@ const BeaconViewDialog: React.FC<IProps> = ({ roomId, matrixClient, onFinished }
 
     const mapCenterUri = useMapCenterUri(liveBeacons);
 
-    // only pass member to marker when should render avatar marker
-    // const markerRoomMember = isSelfLocation(mxEvent.getContent()) ? mxEvent.sender : undefined;
-    // const geoUri = locationEventGeoUri(mxEvent);
     return (
         <BaseDialog
             className='mx_BeaconViewDialog'
             onFinished={onFinished}
             fixedWidth={false}
         >
-            <Map
-                id='mx_BeaconViewDialog'
-                centerGeoUri={mapCenterUri}
-                interactive
-                className="mx_BeaconViewDialog_map"
-            >
-                {
-                    ({ map }) =>
-                        <>
-                            { /* <SmartMarker
-                                map={map}
-                                id={`${this.getBodyId()}-marker`}
-                                geoUri={geoUri}
-                                roomMember={markerRoomMember}
-                            /> */ }
-                        </>
-                }
-            </Map>
+            <MatrixClientContext.Provider value={matrixClient}>
+                <Map
+                    id='mx_BeaconViewDialog'
+                    centerGeoUri={mapCenterUri}
+                    interactive
+                    className="mx_BeaconViewDialog_map"
+                >
+                    {
+                        ({ map }: { map: maplibregl.Map}) =>
+                            <>
+                                { liveBeacons.map(beacon => <BeaconMarker
+                                    key={beacon.identifier}
+                                    map={map}
+                                    beacon={beacon}
+                                />) }
+                            </>
+                    }
+                </Map>
+            </MatrixClientContext.Provider>
         </BaseDialog>
     );
 };
diff --git a/test/components/views/beacon/BeaconMarker-test.tsx b/test/components/views/beacon/BeaconMarker-test.tsx
new file mode 100644
index 00000000000..986fc8d1615
--- /dev/null
+++ b/test/components/views/beacon/BeaconMarker-test.tsx
@@ -0,0 +1,16 @@
+
+import React from 'react';
+import { mount } from 'enzyme';
+
+import BeaconMarker from '../../../../src/components/views/beacon/BeaconMarker';
+
+describe('<BeaconMarker />', () => {
+    const defaultProps = {};
+    const getComponent = (props = {}) =>
+        mount(<BeaconMarker {...defaultProps} {...props} />);
+
+    it('renders', () => {
+        const component = getComponent();
+        expect(component).toBeTruthy();
+    });
+});

From 18bdeed15d14e0219e238a2488f71b9617e2e3ab Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 13 Apr 2022 16:02:21 +0200
Subject: [PATCH 03/12] fix unmount issue in smart marker

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 src/components/views/location/SmartMarker.tsx | 21 +++++++---
 .../__snapshots__/SmartMarker-test.tsx.snap   | 40 ++++++++++---------
 2 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/src/components/views/location/SmartMarker.tsx b/src/components/views/location/SmartMarker.tsx
index 29207eb6e35..c4a7c61e32b 100644
--- a/src/components/views/location/SmartMarker.tsx
+++ b/src/components/views/location/SmartMarker.tsx
@@ -72,12 +72,21 @@ interface SmartMarkerProps {
 const SmartMarker: React.FC<SmartMarkerProps> = ({ id, map, geoUri, roomMember, useMemberColor }) => {
     const { onElementRef } = useMapMarker(map, geoUri);
 
-    return <Marker
-        ref={onElementRef}
-        id={id}
-        roomMember={roomMember}
-        useMemberColor={useMemberColor}
-    />;
+    return (
+        // maplibregl hijacks the Marker dom element
+        // and removes it from the dom when the maplibregl.Marker instance
+        // is removed
+        // wrap in a span so that react doesn't get confused
+        // when trying to unmount this component
+        <span>
+            <Marker
+                ref={onElementRef}
+                id={id}
+                roomMember={roomMember}
+                useMemberColor={useMemberColor}
+            />
+        </span>
+    );
 };
 
 export default SmartMarker;
diff --git a/test/components/views/location/__snapshots__/SmartMarker-test.tsx.snap b/test/components/views/location/__snapshots__/SmartMarker-test.tsx.snap
index 064b3ccff66..b2da037e221 100644
--- a/test/components/views/location/__snapshots__/SmartMarker-test.tsx.snap
+++ b/test/components/views/location/__snapshots__/SmartMarker-test.tsx.snap
@@ -18,19 +18,21 @@ exports[`<SmartMarker /> creates a marker on mount 1`] = `
     }
   }
 >
-  <ForwardRef>
-    <div
-      className="mx_Marker mx_Marker_defaultColor"
-    >
+  <span>
+    <ForwardRef>
       <div
-        className="mx_Marker_border"
+        className="mx_Marker mx_Marker_defaultColor"
       >
         <div
-          className="mx_Marker_icon"
-        />
+          className="mx_Marker_border"
+        >
+          <div
+            className="mx_Marker_icon"
+          />
+        </div>
       </div>
-    </div>
-  </ForwardRef>
+    </ForwardRef>
+  </span>
 </SmartMarker>
 `;
 
@@ -52,18 +54,20 @@ exports[`<SmartMarker /> removes marker on unmount 1`] = `
     }
   }
 >
-  <ForwardRef>
-    <div
-      className="mx_Marker mx_Marker_defaultColor"
-    >
+  <span>
+    <ForwardRef>
       <div
-        className="mx_Marker_border"
+        className="mx_Marker mx_Marker_defaultColor"
       >
         <div
-          className="mx_Marker_icon"
-        />
+          className="mx_Marker_border"
+        >
+          <div
+            className="mx_Marker_icon"
+          />
+        </div>
       </div>
-    </div>
-  </ForwardRef>
+    </ForwardRef>
+  </span>
 </SmartMarker>
 `;

From 20fe6372a4b61f7118528ba9892d8c989b6efc9f Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 13 Apr 2022 16:03:19 +0200
Subject: [PATCH 04/12] dont throw on no more live locations

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 src/components/views/beacon/BeaconViewDialog.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/views/beacon/BeaconViewDialog.tsx b/src/components/views/beacon/BeaconViewDialog.tsx
index c2ef5a3088c..0f797bd9a97 100644
--- a/src/components/views/beacon/BeaconViewDialog.tsx
+++ b/src/components/views/beacon/BeaconViewDialog.tsx
@@ -28,6 +28,7 @@ import { IDialogProps } from "../dialogs/IDialogProps";
 import Map from '../location/Map';
 import BeaconMarker from './BeaconMarker';
 import MatrixClientContext from '../../../contexts/MatrixClientContext';
+import ZoomButtons from '../location/ZoomButtons';
 
 interface IProps extends IDialogProps {
     roomId: Room['roomId'];
@@ -36,10 +37,10 @@ interface IProps extends IDialogProps {
 
 // TODO actual center is coming soon
 // for now just center around first beacon in list
-const useMapCenterUri = (beacons: Beacon[]): string => {
-    const firstBeacon = beacons[0];
+const getMapCenterUri = (beacons: Beacon[]): string => {
+    const firstBeaconWithLocation = beacons.find(beacon => beacon.latestLocationState);
 
-    return firstBeacon.latestLocationState?.uri;
+    return firstBeaconWithLocation?.latestLocationState?.uri;
 };
 
 /**
@@ -48,7 +49,9 @@ const useMapCenterUri = (beacons: Beacon[]): string => {
 const BeaconViewDialog: React.FC<IProps> = ({ roomId, matrixClient, onFinished }) => {
     const liveBeacons = useLiveBeacons(roomId, matrixClient);
 
-    const mapCenterUri = useMapCenterUri(liveBeacons);
+    const mapCenterUri = getMapCenterUri(liveBeacons);
+    // TODO probably show loader or placeholder when there is no location
+    // to center the map on
 
     return (
         <BaseDialog
@@ -71,6 +74,7 @@ const BeaconViewDialog: React.FC<IProps> = ({ roomId, matrixClient, onFinished }
                                     map={map}
                                     beacon={beacon}
                                 />) }
+                                <ZoomButtons map={map} />
                             </>
                     }
                 </Map>

From 163f2ea7932392f88c25a8294469827b81ffc887 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 13 Apr 2022 16:13:03 +0200
Subject: [PATCH 05/12] cursor on beacon maps

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 res/css/components/views/messages/_MBeaconBody.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/res/css/components/views/messages/_MBeaconBody.scss b/res/css/components/views/messages/_MBeaconBody.scss
index ae90d251326..dc63d6676db 100644
--- a/res/css/components/views/messages/_MBeaconBody.scss
+++ b/res/css/components/views/messages/_MBeaconBody.scss
@@ -27,6 +27,10 @@ limitations under the License.
     height: 100%;
     width: 100%;
     z-index: 0; // keeps the entire map under the message action bar
+
+    &:not(.mx_MBeaconBody_mapFallback) {
+        cursor: pointer;
+    }
 }
 
 .mx_MBeaconBody_mapFallback {

From 987bd4fd6d97e81c895d4d8221a487b60e44f2dc Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 13 Apr 2022 16:18:54 +0200
Subject: [PATCH 06/12] fussy import ordering

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 src/components/views/beacon/BeaconMarker.tsx     | 2 +-
 src/components/views/beacon/BeaconViewDialog.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/views/beacon/BeaconMarker.tsx b/src/components/views/beacon/BeaconMarker.tsx
index fb9b85c1eaa..8c176ab9c07 100644
--- a/src/components/views/beacon/BeaconMarker.tsx
+++ b/src/components/views/beacon/BeaconMarker.tsx
@@ -22,9 +22,9 @@ import {
 } from 'matrix-js-sdk/src/matrix';
 import { LocationAssetType } from 'matrix-js-sdk/src/@types/location';
 
+import MatrixClientContext from '../../../contexts/MatrixClientContext';
 import { useEventEmitterState } from '../../../hooks/useEventEmitter';
 import SmartMarker from '../location/SmartMarker';
-import MatrixClientContext from '../../../contexts/MatrixClientContext';
 
 interface Props {
     map: maplibregl.Map;
diff --git a/src/components/views/beacon/BeaconViewDialog.tsx b/src/components/views/beacon/BeaconViewDialog.tsx
index 0f797bd9a97..052a456fe69 100644
--- a/src/components/views/beacon/BeaconViewDialog.tsx
+++ b/src/components/views/beacon/BeaconViewDialog.tsx
@@ -23,12 +23,12 @@ import {
 import maplibregl from 'maplibre-gl';
 
 import { useLiveBeacons } from '../../../utils/beacon/useLiveBeacons';
+import MatrixClientContext from '../../../contexts/MatrixClientContext';
 import BaseDialog from "../dialogs/BaseDialog";
 import { IDialogProps } from "../dialogs/IDialogProps";
 import Map from '../location/Map';
-import BeaconMarker from './BeaconMarker';
-import MatrixClientContext from '../../../contexts/MatrixClientContext';
 import ZoomButtons from '../location/ZoomButtons';
+import BeaconMarker from './BeaconMarker';
 
 interface IProps extends IDialogProps {
     roomId: Room['roomId'];

From def8e38e21ba97f18b330dddba074edc4ca0e125 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 13 Apr 2022 16:26:51 +0200
Subject: [PATCH 07/12] test dialog opening from beacon body

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 .../views/messages/MBeaconBody-test.tsx       | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/test/components/views/messages/MBeaconBody-test.tsx b/test/components/views/messages/MBeaconBody-test.tsx
index 772d83ae022..7dd3218e204 100644
--- a/test/components/views/messages/MBeaconBody-test.tsx
+++ b/test/components/views/messages/MBeaconBody-test.tsx
@@ -29,6 +29,7 @@ import { getMockClientWithEventEmitter, makeBeaconEvent, makeBeaconInfoEvent } f
 import { RoomPermalinkCreator } from '../../../../src/utils/permalinks/Permalinks';
 import { MediaEventHelper } from '../../../../src/utils/MediaEventHelper';
 import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
+import Modal from '../../../../src/Modal';
 
 describe('<MBeaconBody />', () => {
     // 14.03.2022 16:15
@@ -83,6 +84,8 @@ describe('<MBeaconBody />', () => {
             wrappingComponentProps: { value: mockClient },
         });
 
+    const modalSpy = jest.spyOn(Modal, 'createTrackedDialog').mockReturnValue(undefined);
+    
     beforeEach(() => {
         jest.clearAllMocks();
     });
@@ -110,6 +113,23 @@ describe('<MBeaconBody />', () => {
         expect(component.text()).toEqual("Live location ended");
     });
 
+    it('does not open maximised map when on click when beacon is stopped', () => {
+        const beaconInfoEvent = makeBeaconInfoEvent(aliceId,
+            roomId,
+            // puts this beacons live period in the past
+            { isLive: true, timestamp: now - 600000, timeout: 500 },
+            '$alice-room1-1',
+        );
+        makeRoomWithStateEvents([beaconInfoEvent]);
+        const component = getComponent({ mxEvent: beaconInfoEvent });
+        
+        act(() => {
+            component.find('.mx_MBeaconBody_map').simulate('click');
+        });
+
+        expect(modalSpy).not.toHaveBeenCalled();
+    });
+
     it('renders stopped UI when a beacon event is not the latest beacon for a user', () => {
         const aliceBeaconInfo1 = makeBeaconInfoEvent(
             aliceId,
@@ -212,6 +232,40 @@ describe('<MBeaconBody />', () => {
 
             expect(component.text()).toEqual("Loading live location...");
         });
+        
+        it('does nothing on click when a beacon has no location', () => {
+            makeRoomWithStateEvents([aliceBeaconInfo]);
+            const component = getComponent({ mxEvent: aliceBeaconInfo });
+
+            act(() => {
+                component.find('.mx_MBeaconBody_map').simulate('click');
+            });
+    
+            expect(modalSpy).not.toHaveBeenCalled();
+        });
+
+        it('renders a live beacon with a location correctly', () => {
+            const room = makeRoomWithStateEvents([aliceBeaconInfo]);
+            const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(aliceBeaconInfo));
+            beaconInstance.addLocations([location1]);
+            const component = getComponent({ mxEvent: aliceBeaconInfo });
+
+            expect(component.find('Map').length).toBeTruthy;
+        });
+
+        it('opens maximised map view on click when beacon has a live location', () => {
+            const room = makeRoomWithStateEvents([aliceBeaconInfo]);
+            const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(aliceBeaconInfo));
+            beaconInstance.addLocations([location1]);
+            const component = getComponent({ mxEvent: aliceBeaconInfo });
+
+            act(() => {
+                component.find('Map').simulate('click');
+            });
+    
+            // opens modal
+            expect(modalSpy).toHaveBeenCalled();
+        });
 
         it('updates latest location', () => {
             const room = makeRoomWithStateEvents([aliceBeaconInfo]);

From 69729f12e68d442731dfb8d48ea1455f1a8245cc Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 13 Apr 2022 16:40:24 +0200
Subject: [PATCH 08/12] test beaconmarker

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 .../views/beacon/BeaconMarker-test.tsx        | 129 +++++++++-
 .../__snapshots__/BeaconMarker-test.tsx.snap  | 229 ++++++++++++++++++
 .../views/messages/MBeaconBody-test.tsx       |  10 +-
 3 files changed, 358 insertions(+), 10 deletions(-)
 create mode 100644 test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap

diff --git a/test/components/views/beacon/BeaconMarker-test.tsx b/test/components/views/beacon/BeaconMarker-test.tsx
index 986fc8d1615..9b339b33853 100644
--- a/test/components/views/beacon/BeaconMarker-test.tsx
+++ b/test/components/views/beacon/BeaconMarker-test.tsx
@@ -1,16 +1,135 @@
+/*
+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 from 'react';
 import { mount } from 'enzyme';
+import maplibregl from 'maplibre-gl';
+import { act } from 'react-dom/test-utils';
+import {
+    Beacon,
+    Room,
+    RoomMember,
+    getBeaconInfoIdentifier,
+} from 'matrix-js-sdk/src/matrix';
 
 import BeaconMarker from '../../../../src/components/views/beacon/BeaconMarker';
+import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
+import { getMockClientWithEventEmitter, makeBeaconEvent, makeBeaconInfoEvent } from '../../../test-utils';
 
 describe('<BeaconMarker />', () => {
-    const defaultProps = {};
+    // 14.03.2022 16:15
+    const now = 1647270879403;
+    // stable date for snapshots
+    jest.spyOn(global.Date, 'now').mockReturnValue(now);
+    const roomId = '!room:server';
+    const aliceId = '@alice:server';
+
+    const aliceMember = new RoomMember(roomId, aliceId);
+
+    const mockMap = new maplibregl.Map();
+
+    const mockClient = getMockClientWithEventEmitter({
+        getClientWellKnown: jest.fn().mockReturnValue({
+            "m.tile_server": { map_style_url: 'maps.com' },
+        }),
+        getUserId: jest.fn().mockReturnValue(aliceId),
+        getRoom: jest.fn(),
+        isGuest: jest.fn().mockReturnValue(false),
+    });
+
+    // make fresh rooms every time
+    // as we update room state
+    const makeRoomWithStateEvents = (stateEvents = []): Room => {
+        const room1 = new Room(roomId, mockClient, aliceId);
+
+        room1.currentState.setStateEvents(stateEvents);
+        jest.spyOn(room1, 'getMember').mockReturnValue(aliceMember);
+        mockClient.getRoom.mockReturnValue(room1);
+
+        return room1;
+    };
+
+    const defaultEvent = makeBeaconInfoEvent(aliceId,
+        roomId,
+        { isLive: true },
+        '$alice-room1-1',
+    );
+    const notLiveEvent = makeBeaconInfoEvent(aliceId,
+        roomId,
+        { isLive: false },
+        '$alice-room1-2',
+    );
+
+    const location1 = makeBeaconEvent(
+        aliceId, { beaconInfoId: defaultEvent.getId(), geoUri: 'geo:51,41', timestamp: now + 1 },
+    );
+    const location2 = makeBeaconEvent(
+        aliceId, { beaconInfoId: defaultEvent.getId(), geoUri: 'geo:52,42', timestamp: now + 10000 },
+    );
+
+    const defaultProps = {
+        map: mockMap,
+        beacon: new Beacon(defaultEvent),
+    };
+
     const getComponent = (props = {}) =>
-        mount(<BeaconMarker {...defaultProps} {...props} />);
+        mount(<BeaconMarker {...defaultProps} {...props} />, {
+            wrappingComponent: MatrixClientContext.Provider,
+            wrappingComponentProps: { value: mockClient },
+        });
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('renders nothing when beacon is not live', () => {
+        const room = makeRoomWithStateEvents([notLiveEvent]);
+        const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(notLiveEvent));
+        const component = getComponent({ beacon });
+        expect(component.html()).toBe(null);
+    });
+
+    it('renders nothing when beacon has no location', () => {
+        const room = makeRoomWithStateEvents([defaultEvent]);
+        const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
+        const component = getComponent({ beacon });
+        expect(component.html()).toBe(null);
+    });
+
+    it('renders marker when beacon has location', () => {
+        const room = makeRoomWithStateEvents([defaultEvent]);
+        const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
+        beacon.addLocations([location1]);
+        const component = getComponent({ beacon });
+        expect(component).toMatchSnapshot();
+    });
+
+    it('updates with new locations', () => {
+        const room = makeRoomWithStateEvents([defaultEvent]);
+        const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
+        beacon.addLocations([location1]);
+        const component = getComponent({ beacon });
+        expect(component.find('SmartMarker').props()['geoUri']).toEqual('geo:51,41');
+
+        act(() => {
+            beacon.addLocations([location2]);
+        });
+        component.setProps({});
 
-    it('renders', () => {
-        const component = getComponent();
-        expect(component).toBeTruthy();
+        // updated to latest location
+        expect(component.find('SmartMarker').props()['geoUri']).toEqual('geo:52,42');
     });
 });
diff --git a/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap
new file mode 100644
index 00000000000..cde5fd8232c
--- /dev/null
+++ b/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap
@@ -0,0 +1,229 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<BeaconMarker /> renders marker when beacon has location 1`] = `
+<BeaconMarker
+  beacon={
+    Beacon {
+      "_beaconInfo": Object {
+        "assetType": "m.self",
+        "description": undefined,
+        "live": true,
+        "timeout": 3600000,
+        "timestamp": 1647270879403,
+      },
+      "_events": Object {
+        "Beacon.Destroy": Array [
+          [Function],
+          [Function],
+        ],
+        "Beacon.LivenessChange": Array [
+          [Function],
+          [Function],
+        ],
+        "Beacon.LocationUpdate": [Function],
+        "Beacon.new": [Function],
+        "Beacon.update": [Function],
+      },
+      "_eventsCount": 5,
+      "_isLive": true,
+      "_latestLocationState": Object {
+        "description": undefined,
+        "timestamp": 1647270879404,
+        "uri": "geo:51,41",
+      },
+      "_maxListeners": undefined,
+      "clearLatestLocation": [Function],
+      "livenessWatchInterval": undefined,
+      "roomId": "!room:server",
+      "rootEvent": Object {
+        "content": Object {
+          "description": undefined,
+          "live": true,
+          "org.matrix.msc3488.asset": Object {
+            "type": "m.self",
+          },
+          "org.matrix.msc3488.ts": 1647270879403,
+          "timeout": 3600000,
+        },
+        "event_id": "$alice-room1-1",
+        "origin_server_ts": 1647270879403,
+        "room_id": "!room:server",
+        "sender": "@alice:server",
+        "state_key": "@alice:server",
+        "type": "org.matrix.msc3672.beacon_info",
+      },
+      Symbol(kCapture): false,
+    }
+  }
+  map={
+    MockMap {
+      "_events": Object {},
+      "_eventsCount": 0,
+      "_maxListeners": undefined,
+      "addControl": [MockFunction],
+      "removeControl": [MockFunction],
+      "setCenter": [MockFunction],
+      "setStyle": [MockFunction],
+      "zoomIn": [MockFunction],
+      "zoomOut": [MockFunction],
+      Symbol(kCapture): false,
+    }
+  }
+>
+  <SmartMarker
+    geoUri="geo:51,41"
+    id="!room:server_@alice:server"
+    map={
+      MockMap {
+        "_events": Object {},
+        "_eventsCount": 0,
+        "_maxListeners": undefined,
+        "addControl": [MockFunction],
+        "removeControl": [MockFunction],
+        "setCenter": [MockFunction],
+        "setStyle": [MockFunction],
+        "zoomIn": [MockFunction],
+        "zoomOut": [MockFunction],
+        Symbol(kCapture): false,
+      }
+    }
+    roomMember={
+      RoomMember {
+        "_events": Object {},
+        "_eventsCount": 0,
+        "_isOutOfBand": false,
+        "_maxListeners": undefined,
+        "_modified": 1647270879403,
+        "_requestedProfileInfo": undefined,
+        "disambiguate": false,
+        "events": Object {
+          "member": null,
+        },
+        "membership": null,
+        "name": "@alice:server",
+        "powerLevel": 0,
+        "powerLevelNorm": 0,
+        "rawDisplayName": "@alice:server",
+        "roomId": "!room:server",
+        "typing": false,
+        "user": null,
+        "userId": "@alice:server",
+        Symbol(kCapture): false,
+      }
+    }
+  >
+    <span>
+      <ForwardRef
+        id="!room:server_@alice:server"
+        roomMember={
+          RoomMember {
+            "_events": Object {},
+            "_eventsCount": 0,
+            "_isOutOfBand": false,
+            "_maxListeners": undefined,
+            "_modified": 1647270879403,
+            "_requestedProfileInfo": undefined,
+            "disambiguate": false,
+            "events": Object {
+              "member": null,
+            },
+            "membership": null,
+            "name": "@alice:server",
+            "powerLevel": 0,
+            "powerLevelNorm": 0,
+            "rawDisplayName": "@alice:server",
+            "roomId": "!room:server",
+            "typing": false,
+            "user": null,
+            "userId": "@alice:server",
+            Symbol(kCapture): false,
+          }
+        }
+      >
+        <div
+          className="mx_Marker mx_Marker_defaultColor"
+          id="!room:server_@alice:server"
+        >
+          <div
+            className="mx_Marker_border"
+          >
+            <MemberAvatar
+              height={36}
+              member={
+                RoomMember {
+                  "_events": Object {},
+                  "_eventsCount": 0,
+                  "_isOutOfBand": false,
+                  "_maxListeners": undefined,
+                  "_modified": 1647270879403,
+                  "_requestedProfileInfo": undefined,
+                  "disambiguate": false,
+                  "events": Object {
+                    "member": null,
+                  },
+                  "membership": null,
+                  "name": "@alice:server",
+                  "powerLevel": 0,
+                  "powerLevelNorm": 0,
+                  "rawDisplayName": "@alice:server",
+                  "roomId": "!room:server",
+                  "typing": false,
+                  "user": null,
+                  "userId": "@alice:server",
+                  Symbol(kCapture): false,
+                }
+              }
+              resizeMethod="crop"
+              viewUserOnClick={false}
+              width={36}
+            >
+              <BaseAvatar
+                height={36}
+                idName="@alice:server"
+                name="@alice:server"
+                resizeMethod="crop"
+                title="@alice:server"
+                url={null}
+                width={36}
+              >
+                <span
+                  className="mx_BaseAvatar"
+                  role="presentation"
+                >
+                  <span
+                    aria-hidden="true"
+                    className="mx_BaseAvatar_initial"
+                    style={
+                      Object {
+                        "fontSize": "23.400000000000002px",
+                        "lineHeight": "36px",
+                        "width": "36px",
+                      }
+                    }
+                  >
+                    A
+                  </span>
+                  <img
+                    alt=""
+                    aria-hidden="true"
+                    className="mx_BaseAvatar_image"
+                    onError={[Function]}
+                    src="data:image/png;base64,00"
+                    style={
+                      Object {
+                        "height": "36px",
+                        "width": "36px",
+                      }
+                    }
+                    title="@alice:server"
+                  />
+                </span>
+              </BaseAvatar>
+            </MemberAvatar>
+          </div>
+        </div>
+      </ForwardRef>
+    </span>
+  </SmartMarker>
+</BeaconMarker>
+`;
diff --git a/test/components/views/messages/MBeaconBody-test.tsx b/test/components/views/messages/MBeaconBody-test.tsx
index 7dd3218e204..6f841748a4d 100644
--- a/test/components/views/messages/MBeaconBody-test.tsx
+++ b/test/components/views/messages/MBeaconBody-test.tsx
@@ -85,7 +85,7 @@ describe('<MBeaconBody />', () => {
         });
 
     const modalSpy = jest.spyOn(Modal, 'createTrackedDialog').mockReturnValue(undefined);
-    
+
     beforeEach(() => {
         jest.clearAllMocks();
     });
@@ -122,7 +122,7 @@ describe('<MBeaconBody />', () => {
         );
         makeRoomWithStateEvents([beaconInfoEvent]);
         const component = getComponent({ mxEvent: beaconInfoEvent });
-        
+
         act(() => {
             component.find('.mx_MBeaconBody_map').simulate('click');
         });
@@ -232,7 +232,7 @@ describe('<MBeaconBody />', () => {
 
             expect(component.text()).toEqual("Loading live location...");
         });
-        
+
         it('does nothing on click when a beacon has no location', () => {
             makeRoomWithStateEvents([aliceBeaconInfo]);
             const component = getComponent({ mxEvent: aliceBeaconInfo });
@@ -240,7 +240,7 @@ describe('<MBeaconBody />', () => {
             act(() => {
                 component.find('.mx_MBeaconBody_map').simulate('click');
             });
-    
+
             expect(modalSpy).not.toHaveBeenCalled();
         });
 
@@ -262,7 +262,7 @@ describe('<MBeaconBody />', () => {
             act(() => {
                 component.find('Map').simulate('click');
             });
-    
+
             // opens modal
             expect(modalSpy).toHaveBeenCalled();
         });

From 9cf47ce414ffeb859f30232294069c5c694742c7 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 13 Apr 2022 17:15:31 +0200
Subject: [PATCH 09/12] test BeaconViewDialog

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 .../views/beacon/BeaconViewDialog-test.tsx    | 110 +++++++++++++++++-
 .../LocationViewDialog-test.tsx.snap          |  22 ++--
 .../__snapshots__/MLocationBody-test.tsx.snap |  22 ++--
 3 files changed, 131 insertions(+), 23 deletions(-)

diff --git a/test/components/views/beacon/BeaconViewDialog-test.tsx b/test/components/views/beacon/BeaconViewDialog-test.tsx
index 623c3957f77..0e6d1e6e466 100644
--- a/test/components/views/beacon/BeaconViewDialog-test.tsx
+++ b/test/components/views/beacon/BeaconViewDialog-test.tsx
@@ -1,16 +1,120 @@
+/*
+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 from 'react';
 import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+import {
+    MatrixClient,
+    Room,
+    RoomMember,
+    getBeaconInfoIdentifier,
+} from 'matrix-js-sdk/src/matrix';
 
 import BeaconViewDialog from '../../../../src/components/views/beacon/BeaconViewDialog';
+import {
+    getMockClientWithEventEmitter,
+    makeBeaconEvent,
+    makeBeaconInfoEvent,
+} from '../../../test-utils';
 
 describe('<BeaconViewDialog />', () => {
-    const defaultProps = {};
+    // 14.03.2022 16:15
+    const now = 1647270879403;
+    // stable date for snapshots
+    jest.spyOn(global.Date, 'now').mockReturnValue(now);
+    const roomId = '!room:server';
+    const aliceId = '@alice:server';
+    const bobId = '@bob:server';
+
+    const aliceMember = new RoomMember(roomId, aliceId);
+
+    const mockClient = getMockClientWithEventEmitter({
+        getClientWellKnown: jest.fn().mockReturnValue({
+            "m.tile_server": { map_style_url: 'maps.com' },
+        }),
+        getUserId: jest.fn().mockReturnValue(aliceId),
+        getRoom: jest.fn(),
+        isGuest: jest.fn().mockReturnValue(false),
+    });
+
+    // make fresh rooms every time
+    // as we update room state
+    const makeRoomWithStateEvents = (stateEvents = []): Room => {
+        const room1 = new Room(roomId, mockClient, aliceId);
+
+        room1.currentState.setStateEvents(stateEvents);
+        jest.spyOn(room1, 'getMember').mockReturnValue(aliceMember);
+        mockClient.getRoom.mockReturnValue(room1);
+
+        return room1;
+    };
+
+    const defaultEvent = makeBeaconInfoEvent(aliceId,
+        roomId,
+        { isLive: true },
+        '$alice-room1-1',
+    );
+
+    const location1 = makeBeaconEvent(
+        aliceId, { beaconInfoId: defaultEvent.getId(), geoUri: 'geo:51,41', timestamp: now + 1 },
+    );
+
+    const defaultProps = {
+        onFinished: jest.fn(),
+        roomId,
+        matrixClient: mockClient as MatrixClient,
+    };
+
     const getComponent = (props = {}) =>
         mount(<BeaconViewDialog {...defaultProps} {...props} />);
 
-    it('renders', () => {
+    it('renders a map with markers', () => {
+        const room = makeRoomWithStateEvents([defaultEvent]);
+        const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
+        beacon.addLocations([location1]);
+        const component = getComponent();
+        expect(component.find('Map').props()).toEqual(expect.objectContaining({
+            centerGeoUri: 'geo:51,41',
+            interactive: true,
+        }));
+        expect(component.find('SmartMarker').length).toEqual(1);
+    });
+
+    it('updates markers on changes to beacons', () => {
+        const room = makeRoomWithStateEvents([defaultEvent]);
+        const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
+        beacon.addLocations([location1]);
         const component = getComponent();
-        expect(component).toBeTruthy();
+        expect(component.find('BeaconMarker').length).toEqual(1);
+
+        const anotherBeaconEvent = makeBeaconInfoEvent(bobId,
+            roomId,
+            { isLive: true },
+            '$bob-room1-1',
+        );
+
+        act(() => {
+            // emits RoomStateEvent.BeaconLiveness
+            room.currentState.setStateEvents([anotherBeaconEvent]);
+        });
+
+        component.setProps({});
+
+        // two markers now!
+        expect(component.find('BeaconMarker').length).toEqual(2);
     });
 });
diff --git a/test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap b/test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap
index 99cd996a102..41b4044c5aa 100644
--- a/test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap
+++ b/test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap
@@ -48,22 +48,24 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
         }
       }
     >
-      <ForwardRef
-        id="mx_LocationViewDialog_$2-marker"
-      >
-        <div
-          className="mx_Marker mx_Marker_defaultColor"
+      <span>
+        <ForwardRef
           id="mx_LocationViewDialog_$2-marker"
         >
           <div
-            className="mx_Marker_border"
+            className="mx_Marker mx_Marker_defaultColor"
+            id="mx_LocationViewDialog_$2-marker"
           >
             <div
-              className="mx_Marker_icon"
-            />
+              className="mx_Marker_border"
+            >
+              <div
+                className="mx_Marker_icon"
+              />
+            </div>
           </div>
-        </div>
-      </ForwardRef>
+        </ForwardRef>
+      </span>
     </SmartMarker>
     <ZoomButtons
       map={
diff --git a/test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap b/test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
index c422d64fcad..e32cedfde48 100644
--- a/test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
+++ b/test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
@@ -158,22 +158,24 @@ exports[`MLocationBody <MLocationBody> without error renders map correctly 1`] =
                   }
                 }
               >
-                <ForwardRef
-                  id="mx_MLocationBody_$2_1f9acffa-marker"
-                >
-                  <div
-                    className="mx_Marker mx_Marker_defaultColor"
+                <span>
+                  <ForwardRef
                     id="mx_MLocationBody_$2_1f9acffa-marker"
                   >
                     <div
-                      className="mx_Marker_border"
+                      className="mx_Marker mx_Marker_defaultColor"
+                      id="mx_MLocationBody_$2_1f9acffa-marker"
                     >
                       <div
-                        className="mx_Marker_icon"
-                      />
+                        className="mx_Marker_border"
+                      >
+                        <div
+                          className="mx_Marker_icon"
+                        />
+                      </div>
                     </div>
-                  </div>
-                </ForwardRef>
+                  </ForwardRef>
+                </span>
               </SmartMarker>
             </div>
           </Map>

From 58c91b5807f4ebac4789ee91dc739d4670f364de Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Wed, 13 Apr 2022 17:17:12 +0200
Subject: [PATCH 10/12] comment

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 src/utils/beacon/useLiveBeacons.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/utils/beacon/useLiveBeacons.ts b/src/utils/beacon/useLiveBeacons.ts
index b3bfc573d15..cbde1a40e76 100644
--- a/src/utils/beacon/useLiveBeacons.ts
+++ b/src/utils/beacon/useLiveBeacons.ts
@@ -24,8 +24,7 @@ import {
 import { useEventEmitterState } from "../../hooks/useEventEmitter";
 
 /**
- * Returns an array of all active beacon ids for a given room
- * (live = active) TODO
+ * Returns an array of all live beacon ids for a given room
  *
  * Beacons are removed from array when they become inactive
  */

From d73f510abe7dcc69309bbed351f725f56f94c390 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Thu, 14 Apr 2022 10:38:41 +0200
Subject: [PATCH 11/12] use unstable prefix for wk tile_Server

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 src/utils/WellKnownUtils.ts                              | 2 +-
 .../views/location/LocationViewDialog-test.tsx           | 3 ++-
 test/components/views/location/Map-test.tsx              | 9 +++++----
 test/components/views/messages/MBeaconBody-test.tsx      | 3 ++-
 test/components/views/messages/MLocationBody-test.tsx    | 7 ++++---
 5 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/utils/WellKnownUtils.ts b/src/utils/WellKnownUtils.ts
index cb3e92a7bde..e41adabb903 100644
--- a/src/utils/WellKnownUtils.ts
+++ b/src/utils/WellKnownUtils.ts
@@ -22,7 +22,7 @@ import { MatrixClientPeg } from '../MatrixClientPeg';
 const CALL_BEHAVIOUR_WK_KEY = "io.element.call_behaviour";
 const E2EE_WK_KEY = "io.element.e2ee";
 const E2EE_WK_KEY_DEPRECATED = "im.vector.riot.e2ee";
-const TILE_SERVER_WK_KEY = new UnstableValue(
+export const TILE_SERVER_WK_KEY = new UnstableValue(
     "m.tile_server", "org.matrix.msc3488.tile_server");
 
 /* eslint-disable camelcase */
diff --git a/test/components/views/location/LocationViewDialog-test.tsx b/test/components/views/location/LocationViewDialog-test.tsx
index 432d7107fb2..fa23192bbfb 100644
--- a/test/components/views/location/LocationViewDialog-test.tsx
+++ b/test/components/views/location/LocationViewDialog-test.tsx
@@ -20,6 +20,7 @@ import { RoomMember } from 'matrix-js-sdk/src/matrix';
 import { LocationAssetType } from 'matrix-js-sdk/src/@types/location';
 
 import LocationViewDialog from '../../../../src/components/views/location/LocationViewDialog';
+import { TILE_SERVER_WK_KEY } from '../../../../src/utils/WellKnownUtils';
 import { getMockClientWithEventEmitter, makeLocationEvent } from '../../../test-utils';
 
 describe('<LocationViewDialog />', () => {
@@ -27,7 +28,7 @@ describe('<LocationViewDialog />', () => {
     const userId = '@user:server';
     const mockClient = getMockClientWithEventEmitter({
         getClientWellKnown: jest.fn().mockReturnValue({
-            "m.tile_server": { map_style_url: 'maps.com' },
+            [TILE_SERVER_WK_KEY.name]: { map_style_url: 'maps.com' },
         }),
         isGuest: jest.fn().mockReturnValue(false),
     });
diff --git a/test/components/views/location/Map-test.tsx b/test/components/views/location/Map-test.tsx
index b5fce12a88d..40aaee01a07 100644
--- a/test/components/views/location/Map-test.tsx
+++ b/test/components/views/location/Map-test.tsx
@@ -24,6 +24,7 @@ import { logger } from 'matrix-js-sdk/src/logger';
 import Map from '../../../../src/components/views/location/Map';
 import { findByTestId, getMockClientWithEventEmitter } from '../../../test-utils';
 import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
+import { TILE_SERVER_WK_KEY } from '../../../../src/utils/WellKnownUtils';
 
 describe('<Map />', () => {
     const defaultProps = {
@@ -34,7 +35,7 @@ describe('<Map />', () => {
     };
     const matrixClient = getMockClientWithEventEmitter({
         getClientWellKnown: jest.fn().mockReturnValue({
-            "m.tile_server": { map_style_url: 'maps.com' },
+            [TILE_SERVER_WK_KEY.name]: { map_style_url: 'maps.com' },
         }),
     });
     const getComponent = (props = {}) =>
@@ -46,7 +47,7 @@ describe('<Map />', () => {
     beforeEach(() => {
         jest.clearAllMocks();
         matrixClient.getClientWellKnown.mockReturnValue({
-            "m.tile_server": { map_style_url: 'maps.com' },
+            [TILE_SERVER_WK_KEY.name]: { map_style_url: 'maps.com' },
         });
 
         jest.spyOn(logger, 'error').mockRestore();
@@ -65,7 +66,7 @@ describe('<Map />', () => {
 
             act(() => {
                 matrixClient.emit(ClientEvent.ClientWellKnown, {
-                    "m.tile_server": { map_style_url: 'new.maps.com' },
+                    [TILE_SERVER_WK_KEY.name]: { map_style_url: 'new.maps.com' },
                 });
             });
 
@@ -77,7 +78,7 @@ describe('<Map />', () => {
 
             act(() => {
                 matrixClient.emit(ClientEvent.ClientWellKnown, {
-                    "m.tile_server": { map_style_url: undefined },
+                    [TILE_SERVER_WK_KEY.name]: { map_style_url: undefined },
                 });
             });
 
diff --git a/test/components/views/messages/MBeaconBody-test.tsx b/test/components/views/messages/MBeaconBody-test.tsx
index 772d83ae022..535e471a275 100644
--- a/test/components/views/messages/MBeaconBody-test.tsx
+++ b/test/components/views/messages/MBeaconBody-test.tsx
@@ -29,6 +29,7 @@ import { getMockClientWithEventEmitter, makeBeaconEvent, makeBeaconInfoEvent } f
 import { RoomPermalinkCreator } from '../../../../src/utils/permalinks/Permalinks';
 import { MediaEventHelper } from '../../../../src/utils/MediaEventHelper';
 import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
+import { TILE_SERVER_WK_KEY } from '../../../../src/utils/WellKnownUtils';
 
 describe('<MBeaconBody />', () => {
     // 14.03.2022 16:15
@@ -43,7 +44,7 @@ describe('<MBeaconBody />', () => {
 
     const mockClient = getMockClientWithEventEmitter({
         getClientWellKnown: jest.fn().mockReturnValue({
-            "m.tile_server": { map_style_url: 'maps.com' },
+            [TILE_SERVER_WK_KEY.name]: { map_style_url: 'maps.com' },
         }),
         getUserId: jest.fn().mockReturnValue(aliceId),
         getRoom: jest.fn(),
diff --git a/test/components/views/messages/MLocationBody-test.tsx b/test/components/views/messages/MLocationBody-test.tsx
index c1133e81c0a..cc5a6105e50 100644
--- a/test/components/views/messages/MLocationBody-test.tsx
+++ b/test/components/views/messages/MLocationBody-test.tsx
@@ -28,6 +28,7 @@ import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalink
 import { MediaEventHelper } from "../../../../src/utils/MediaEventHelper";
 import Modal from '../../../../src/Modal';
 import SdkConfig from "../../../../src/SdkConfig";
+import { TILE_SERVER_WK_KEY } from '../../../../src/utils/WellKnownUtils';
 import { makeLocationEvent } from "../../../test-utils/location";
 import { getMockClientWithEventEmitter } from '../../../test-utils';
 
@@ -37,7 +38,7 @@ describe("MLocationBody", () => {
         const userId = '@user:server';
         const mockClient = getMockClientWithEventEmitter({
             getClientWellKnown: jest.fn().mockReturnValue({
-                "m.tile_server": { map_style_url: 'maps.com' },
+                [TILE_SERVER_WK_KEY.name]: { map_style_url: 'maps.com' },
             }),
             isGuest: jest.fn().mockReturnValue(false),
         });
@@ -78,7 +79,7 @@ describe("MLocationBody", () => {
             it('displays correct fallback content when map_style_url is misconfigured', () => {
                 const mockMap = new maplibregl.Map();
                 mockClient.getClientWellKnown.mockReturnValue({
-                    "m.tile_server": { map_style_url: 'bad-tile-server.com' },
+                    [TILE_SERVER_WK_KEY.name]: { map_style_url: 'bad-tile-server.com' },
                 });
                 const component = getComponent();
 
@@ -93,7 +94,7 @@ describe("MLocationBody", () => {
         describe('without error', () => {
             beforeEach(() => {
                 mockClient.getClientWellKnown.mockReturnValue({
-                    "m.tile_server": { map_style_url: 'maps.com' },
+                    [TILE_SERVER_WK_KEY.name]: { map_style_url: 'maps.com' },
                 });
 
                 // MLocationBody uses random number for map id

From 05a1f67362a6d751cca6a246cb5f19ebce7704b4 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Thu, 14 Apr 2022 10:45:56 +0200
Subject: [PATCH 12/12] unstable prefix for new m.tile_server use in test

Signed-off-by: Kerry Archibald <kerrya@element.io>
---
 test/components/views/beacon/BeaconMarker-test.tsx     | 3 ++-
 test/components/views/beacon/BeaconViewDialog-test.tsx | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/test/components/views/beacon/BeaconMarker-test.tsx b/test/components/views/beacon/BeaconMarker-test.tsx
index 9b339b33853..5b730ff4387 100644
--- a/test/components/views/beacon/BeaconMarker-test.tsx
+++ b/test/components/views/beacon/BeaconMarker-test.tsx
@@ -28,6 +28,7 @@ import {
 import BeaconMarker from '../../../../src/components/views/beacon/BeaconMarker';
 import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
 import { getMockClientWithEventEmitter, makeBeaconEvent, makeBeaconInfoEvent } from '../../../test-utils';
+import { TILE_SERVER_WK_KEY } from '../../../../src/utils/WellKnownUtils';
 
 describe('<BeaconMarker />', () => {
     // 14.03.2022 16:15
@@ -43,7 +44,7 @@ describe('<BeaconMarker />', () => {
 
     const mockClient = getMockClientWithEventEmitter({
         getClientWellKnown: jest.fn().mockReturnValue({
-            "m.tile_server": { map_style_url: 'maps.com' },
+            [TILE_SERVER_WK_KEY.name]: { map_style_url: 'maps.com' },
         }),
         getUserId: jest.fn().mockReturnValue(aliceId),
         getRoom: jest.fn(),
diff --git a/test/components/views/beacon/BeaconViewDialog-test.tsx b/test/components/views/beacon/BeaconViewDialog-test.tsx
index 0e6d1e6e466..70dddd2710d 100644
--- a/test/components/views/beacon/BeaconViewDialog-test.tsx
+++ b/test/components/views/beacon/BeaconViewDialog-test.tsx
@@ -30,6 +30,7 @@ import {
     makeBeaconEvent,
     makeBeaconInfoEvent,
 } from '../../../test-utils';
+import { TILE_SERVER_WK_KEY } from '../../../../src/utils/WellKnownUtils';
 
 describe('<BeaconViewDialog />', () => {
     // 14.03.2022 16:15
@@ -44,7 +45,7 @@ describe('<BeaconViewDialog />', () => {
 
     const mockClient = getMockClientWithEventEmitter({
         getClientWellKnown: jest.fn().mockReturnValue({
-            "m.tile_server": { map_style_url: 'maps.com' },
+            [TILE_SERVER_WK_KEY.name]: { map_style_url: 'maps.com' },
         }),
         getUserId: jest.fn().mockReturnValue(aliceId),
         getRoom: jest.fn(),