Live location sharing - update beacon tile with latest location (#8265)

* add useBeacon hook

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

* update message tile types to work with function comp with ref

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

* use beacon hook in beacon body

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

* update beacon body with (textual) latest locations, test

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

* language in comment

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

* comments

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

* copyright

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

src/components/views/messages/IBodyProps.ts

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import React, { LegacyRef } from "react";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { Relations } from "matrix-js-sdk/src/models/relations";
 
@@ -52,4 +53,6 @@ export interface IBodyProps {
 
     // helper function to access relations for this event
     getRelationsForEvent?: (eventId: string, relationType: string, eventType: string) => Relations;
+
+    ref?: React.RefObject<any> | LegacyRef<any>;
 }

src/components/views/messages/MBeaconBody.tsx

@@ -15,41 +15,71 @@ limitations under the License.
 */
 
 import React from 'react';
-import { Beacon, getBeaconInfoIdentifier } from 'matrix-js-sdk/src/matrix';
+import { BeaconEvent, MatrixEvent } from 'matrix-js-sdk/src/matrix';
+import { BeaconLocationState } from 'matrix-js-sdk/src/content-helpers';
 
-import MatrixClientContext from '../../../contexts/MatrixClientContext';
 import { IBodyProps } from "./IBodyProps";
+import { useEventEmitterState } from '../../../hooks/useEventEmitter';
+import { useBeacon } from '../../../utils/beacon';
 
-export default class MLocationBody extends React.Component<IBodyProps> {
+const useBeaconState = (beaconInfoEvent: MatrixEvent): {
-    public static contextType = MatrixClientContext;
+    hasBeacon: boolean;
-    public context!: React.ContextType<typeof MatrixClientContext>;
+    description?: string;
-    private beacon: Beacon | undefined;
+    latestLocationState?: BeaconLocationState;
-    private roomId: string;
+    isLive?: boolean;
-    private beaconIdentifier: string;
+} => {
+    const beacon = useBeacon(beaconInfoEvent);
 
-    constructor(props: IBodyProps) {
+    const isLive = useEventEmitterState(
-        super(props);
+        beacon,
+        BeaconEvent.LivenessChange,
+        () => beacon?.isLive);
 
-        this.roomId = props.mxEvent.getRoomId();
+    const latestLocationState = useEventEmitterState(
+        beacon,
+        BeaconEvent.LocationUpdate,
+        () => beacon?.latestLocationState);
 
-        this.beaconIdentifier = getBeaconInfoIdentifier(props.mxEvent);
+    if (!beacon) {
+        return {
+            hasBeacon: false,
+        };
     }
 
-    componentDidMount() {
+    const { description } = beacon.beaconInfo;
-        const roomState = this.context.getRoom(this.roomId)?.currentState;
 
-        const beacon = roomState?.beacons.get(this.beaconIdentifier);
+    return {
+        hasBeacon: true,
+        description,
+        isLive,
+        latestLocationState,
+    };
+};
 
-        this.beacon = beacon;
+const MBeaconBody: React.FC<IBodyProps> = React.forwardRef(({ mxEvent, ...rest }, ref) => {
+    const {
+        hasBeacon,
+        isLive,
+        description,
+        latestLocationState,
+    } = useBeaconState(mxEvent);
+
+    if (!hasBeacon || !isLive) {
+        // TODO stopped, error states
+        return <span ref={ref}>Beacon stopped or replaced</span>;
     }
 
-    render(): React.ReactElement<HTMLDivElement> {
+    return (
-        if (!this.beacon) {
+        // TODO nice map
-            // TODO loading and error states
+        <div className='mx_MBeaconBody' ref={ref}>
-            return null;
+            <code>{ mxEvent.getId() }</code>&nbsp;
-        }
+            <span>Beacon "{ description }" </span>
-        // TODO everything else :~)
+            { latestLocationState ?
-        const description = this.beacon.beaconInfo.description;
+                <span>{ `${latestLocationState.uri} at ${latestLocationState.timestamp}` }</span> :
-        return <div>{ description }</div>;
+                <span data-test-id='beacon-waiting-for-location'>Waiting for location</span> }
-    }
+        </div>
-}
+    );
+});
+
+export default MBeaconBody;
+

src/components/views/messages/MessageEvent.tsx

@@ -94,7 +94,7 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
         };
     }
 
-    private get evTypes(): Record<string, typeof React.Component> {
+    private get evTypes(): Record<string, React.ComponentType<Partial<IBodyProps>>> {
         return {
             [EventType.Sticker]: MStickerBody,
             [M_POLL_START.name]: MPollBody,
@@ -122,7 +122,7 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
         const content = this.props.mxEvent.getContent();
         const type = this.props.mxEvent.getType();
         const msgtype = content.msgtype;
-        let BodyType: typeof React.Component | ReactAnyComponent = RedactedBody;
+        let BodyType: React.ComponentType<Partial<IBodyProps>> | ReactAnyComponent = RedactedBody;
         if (!this.props.mxEvent.isRedacted()) {
             // only resolve BodyType if event is not redacted
             if (type && this.evTypes[type]) {

src/stores/OwnBeaconStore.ts

@@ -125,7 +125,7 @@ export class OwnBeaconStore extends AsyncStoreWithClient<OwnBeaconStoreState> {
     protected async onReady(): Promise<void> {
         this.matrixClient.on(BeaconEvent.LivenessChange, this.onBeaconLiveness);
         this.matrixClient.on(BeaconEvent.New, this.onNewBeacon);
-        this.matrixClient.removeListener(BeaconEvent.Update, this.onUpdateBeacon);
+        this.matrixClient.on(BeaconEvent.Update, this.onUpdateBeacon);
         this.matrixClient.on(RoomStateEvent.Members, this.onRoomStateMembers);
 
         this.initialiseBeaconState();
@@ -213,6 +213,7 @@ export class OwnBeaconStore extends AsyncStoreWithClient<OwnBeaconStoreState> {
         }
 
         this.checkLiveness();
+        beacon.monitorLiveness();
     };
 
     private onBeaconLiveness = (isLive: boolean, beacon: Beacon): void => {

src/utils/beacon/index.ts

@@ -16,3 +16,4 @@ limitations under the License.
 
 export * from './duration';
 export * from './geolocation';
+export * from './useBeacon';

src/utils/beacon/useBeacon.ts

@@ -0,0 +1,72 @@
+/*
+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 { useContext, useEffect, useState } from "react";
+import {
+    Beacon,
+    BeaconEvent,
+    MatrixEvent,
+    getBeaconInfoIdentifier,
+} from "matrix-js-sdk/src/matrix";
+
+import MatrixClientContext from "../../contexts/MatrixClientContext";
+import { useEventEmitterState } from "../../hooks/useEventEmitter";
+
+export const useBeacon = (beaconInfoEvent: MatrixEvent): Beacon | undefined => {
+    const matrixClient = useContext(MatrixClientContext);
+    const [beacon, setBeacon] = useState<Beacon>();
+
+    useEffect(() => {
+        const roomId = beaconInfoEvent.getRoomId();
+        const beaconIdentifier = getBeaconInfoIdentifier(beaconInfoEvent);
+
+        const room = matrixClient.getRoom(roomId);
+        const beaconInstance = room.currentState.beacons.get(beaconIdentifier);
+
+        // TODO could this be less stupid?
+
+        // Beacons are identified by their `state_key`,
+        // where `state_key` is always owner mxid for access control.
+        // Thus, only one beacon is allowed per-user per-room.
+        // See https://github.com/matrix-org/matrix-spec-proposals/pull/3672
+        // When a user creates a new beacon any previous
+        // beacon is replaced and should assume a 'stopped' state
+        // Here we check that this event is the latest beacon for this user
+        // If it is not the beacon instance is set to undefined.
+        // Retired beacons don't get a beacon instance.
+        if (beaconInstance?.beaconInfoId === beaconInfoEvent.getId()) {
+            setBeacon(beaconInstance);
+        } else {
+            setBeacon(undefined);
+        }
+    }, [beaconInfoEvent, matrixClient]);
+
+    // beacon update will fire when this beacon is superceded
+    // check the updated event id for equality to the matrix event
+    const beaconInstanceEventId = useEventEmitterState(
+        beacon,
+        BeaconEvent.Update,
+        () => beacon?.beaconInfoId,
+    );
+
+    useEffect(() => {
+        if (beaconInstanceEventId && beaconInstanceEventId !== beaconInfoEvent.getId()) {
+            setBeacon(undefined);
+        }
+    }, [beaconInstanceEventId, beaconInfoEvent]);
+
+    return beacon;
+};

test/components/views/location/__snapshots__/SmartMarker-test.tsx.snap

@@ -10,6 +10,8 @@ exports[`<SmartMarker /> creates a marker on mount 1`] = `
       "_maxListeners": undefined,
       "addControl": [MockFunction],
       "removeControl": [MockFunction],
+      "zoomIn": [MockFunction],
+      "zoomOut": [MockFunction],
       Symbol(kCapture): false,
     }
   }
@@ -40,6 +42,8 @@ exports[`<SmartMarker /> removes marker on unmount 1`] = `
       "_maxListeners": undefined,
       "addControl": [MockFunction],
       "removeControl": [MockFunction],
+      "zoomIn": [MockFunction],
+      "zoomOut": [MockFunction],
       Symbol(kCapture): false,
     }
   }

test/components/views/messages/MBeaconBody-test.tsx

@@ -0,0 +1,235 @@
+/*
+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 {
+    BeaconEvent,
+    Room,
+    getBeaconInfoIdentifier,
+} from 'matrix-js-sdk/src/matrix';
+
+import MBeaconBody from '../../../../src/components/views/messages/MBeaconBody';
+import { findByTestId, getMockClientWithEventEmitter, makeBeaconEvent, makeBeaconInfoEvent } from '../../../test-utils';
+import { RoomPermalinkCreator } from '../../../../src/utils/permalinks/Permalinks';
+import { MediaEventHelper } from '../../../../src/utils/MediaEventHelper';
+import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
+
+describe('<MBeaconBody />', () => {
+    // 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 mockClient = getMockClientWithEventEmitter({
+        getUserId: jest.fn().mockReturnValue(aliceId),
+        getRoom: jest.fn(),
+    });
+
+    // 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);
+        mockClient.getRoom.mockReturnValue(room1);
+
+        return room1;
+    };
+
+    const defaultEvent = makeBeaconInfoEvent(aliceId,
+        roomId,
+        { isLive: true },
+        '$alice-room1-1',
+    );
+    const defaultProps = {
+        mxEvent: defaultEvent,
+        highlights: [],
+        highlightLink: '',
+        onHeightChanged: jest.fn(),
+        onMessageAllowed: jest.fn(),
+        // we dont use these and they pollute the snapshots
+        permalinkCreator: {} as unknown as RoomPermalinkCreator,
+        mediaEventHelper: {} as unknown as MediaEventHelper,
+    };
+    const getComponent = (props = {}) =>
+        mount(<MBeaconBody {...defaultProps} {...props} />, {
+            wrappingComponent: MatrixClientContext.Provider,
+            wrappingComponentProps: { value: mockClient },
+        });
+
+    it('renders a live beacon with basic stub', () => {
+        const beaconInfoEvent = makeBeaconInfoEvent(aliceId,
+            roomId,
+            { isLive: true },
+            '$alice-room1-1',
+        );
+        makeRoomWithStateEvents([beaconInfoEvent]);
+        const component = getComponent({ mxEvent: beaconInfoEvent });
+        expect(component).toMatchSnapshot();
+    });
+
+    it('renders stopped beacon UI for an explicitly stopped beacon', () => {
+        const beaconInfoEvent = makeBeaconInfoEvent(aliceId,
+            roomId,
+            { isLive: false },
+            '$alice-room1-1',
+        );
+        makeRoomWithStateEvents([beaconInfoEvent]);
+        const component = getComponent({ mxEvent: beaconInfoEvent });
+        expect(component.text()).toEqual("Beacon stopped or replaced");
+    });
+
+    it('renders stopped beacon UI for an expired beacon', () => {
+        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 });
+        expect(component.text()).toEqual("Beacon stopped or replaced");
+    });
+
+    it('renders stopped UI when a beacon event is not the latest beacon for a user', () => {
+        const aliceBeaconInfo1 = makeBeaconInfoEvent(
+            aliceId,
+            roomId,
+            // this one is a little older
+            { isLive: true, timestamp: now - 500 },
+            '$alice-room1-1',
+        );
+        aliceBeaconInfo1.event.origin_server_ts = now - 500;
+        const aliceBeaconInfo2 = makeBeaconInfoEvent(
+            aliceId,
+            roomId,
+            { isLive: true },
+            '$alice-room1-2',
+        );
+
+        makeRoomWithStateEvents([aliceBeaconInfo1, aliceBeaconInfo2]);
+
+        const component = getComponent({ mxEvent: aliceBeaconInfo1 });
+        // beacon1 has been superceded by beacon2
+        expect(component.text()).toEqual("Beacon stopped or replaced");
+    });
+
+    it('renders stopped UI when a beacon event is replaced', () => {
+        const aliceBeaconInfo1 = makeBeaconInfoEvent(
+            aliceId,
+            roomId,
+            // this one is a little older
+            { isLive: true, timestamp: now - 500 },
+            '$alice-room1-1',
+        );
+        aliceBeaconInfo1.event.origin_server_ts = now - 500;
+        const aliceBeaconInfo2 = makeBeaconInfoEvent(
+            aliceId,
+            roomId,
+            { isLive: true },
+            '$alice-room1-2',
+        );
+
+        const room = makeRoomWithStateEvents([aliceBeaconInfo1]);
+        const component = getComponent({ mxEvent: aliceBeaconInfo1 });
+
+        const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(aliceBeaconInfo1));
+        // update alice's beacon with a new edition
+        // beacon instance emits
+        act(() => {
+            beaconInstance.update(aliceBeaconInfo2);
+        });
+
+        component.setProps({});
+
+        // beacon1 has been superceded by beacon2
+        expect(component.text()).toEqual("Beacon stopped or replaced");
+    });
+
+    describe('on liveness change', () => {
+        it('renders stopped UI when a beacon stops being live', () => {
+            const aliceBeaconInfo = makeBeaconInfoEvent(
+                aliceId,
+                roomId,
+                { isLive: true },
+                '$alice-room1-1',
+            );
+
+            const room = makeRoomWithStateEvents([aliceBeaconInfo]);
+            const component = getComponent({ mxEvent: aliceBeaconInfo });
+
+            const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(aliceBeaconInfo));
+            act(() => {
+                // @ts-ignore cheat to force beacon to not live
+                beaconInstance._isLive = false;
+                beaconInstance.emit(BeaconEvent.LivenessChange, false, beaconInstance);
+            });
+
+            component.setProps({});
+
+            // stopped UI
+            expect(component.text()).toEqual("Beacon stopped or replaced");
+        });
+    });
+
+    describe('latestLocationState', () => {
+        const aliceBeaconInfo = makeBeaconInfoEvent(
+            aliceId,
+            roomId,
+            { isLive: true },
+            '$alice-room1-1',
+        );
+
+        const location1 = makeBeaconEvent(
+            aliceId, { beaconInfoId: aliceBeaconInfo.getId(), geoUri: 'geo:foo', timestamp: now + 1 },
+        );
+        const location2 = makeBeaconEvent(
+            aliceId, { beaconInfoId: aliceBeaconInfo.getId(), geoUri: 'geo:bar', timestamp: now + 10000 },
+        );
+
+        it('renders a live beacon without a location correctly', () => {
+            makeRoomWithStateEvents([aliceBeaconInfo]);
+            const component = getComponent({ mxEvent: aliceBeaconInfo });
+
+            // loading map
+            expect(findByTestId(component, 'beacon-waiting-for-location').length).toBeTruthy();
+        });
+
+        it('updates latest location', () => {
+            const room = makeRoomWithStateEvents([aliceBeaconInfo]);
+            const component = getComponent({ mxEvent: aliceBeaconInfo });
+
+            const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(aliceBeaconInfo));
+            act(() => {
+                beaconInstance.addLocations([location1]);
+                component.setProps({});
+            });
+
+            expect(component.text().includes('geo:foo')).toBeTruthy();
+
+            act(() => {
+                beaconInstance.addLocations([location2]);
+                component.setProps({});
+            });
+
+            expect(component.text().includes('geo:bar')).toBeTruthy();
+        });
+    });
+});

test/components/views/messages/__snapshots__/MBeaconBody-test.tsx.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<MBeaconBody /> renders a live beacon with basic stub 1`] = `
+<ForwardRef
+  highlightLink=""
+  highlights={Array []}
+  mediaEventHelper={Object {}}
+  mxEvent={
+    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",
+    }
+  }
+  onHeightChanged={[MockFunction]}
+  onMessageAllowed={[MockFunction]}
+  permalinkCreator={Object {}}
+>
+  <div
+    className="mx_MBeaconBody"
+  >
+    <code>
+      $alice-room1-1
+    </code>
+     
+    <span>
+      Beacon "
+      " 
+    </span>
+    <span
+      data-test-id="beacon-waiting-for-location"
+    >
+      Waiting for location
+    </span>
+  </div>
+</ForwardRef>
+`;