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> {
-    public static contextType = MatrixClientContext;
-    public context!: React.ContextType<typeof MatrixClientContext>;
-    private beacon: Beacon | undefined;
-    private roomId: string;
-    private beaconIdentifier: string;
+const useBeaconState = (beaconInfoEvent: MatrixEvent): {
+    hasBeacon: boolean;
+    description?: string;
+    latestLocationState?: BeaconLocationState;
+    isLive?: boolean;
+} => {
+    const beacon = useBeacon(beaconInfoEvent);
 
-    constructor(props: IBodyProps) {
-        super(props);
+    const isLive = useEventEmitterState(
+        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 roomState = this.context.getRoom(this.roomId)?.currentState;
+    const { description } = beacon.beaconInfo;
 
-        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> {
-        if (!this.beacon) {
-            // TODO loading and error states
-            return null;
-        }
-        // TODO everything else :~)
-        const description = this.beacon.beaconInfo.description;
-        return <div>{ description }</div>;
-    }
-}
+    return (
+        // TODO nice map
+        <div className='mx_MBeaconBody' ref={ref}>
+            <code>{ mxEvent.getId() }</code>&nbsp;
+            <span>Beacon "{ description }" </span>
+            { latestLocationState ?
+                <span>{ `${latestLocationState.uri} at ${latestLocationState.timestamp}` }</span> :
+                <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;
+};