From aecd71ad15236b5bca1d00187c0d6081860126dc Mon Sep 17 00:00:00 2001 From: Kerry Date: Mon, 11 Apr 2022 11:16:32 +0200 Subject: [PATCH] Live location sharing - update beacon tile with latest location (#8265) * add useBeacon hook Signed-off-by: Kerry Archibald * update message tile types to work with function comp with ref Signed-off-by: Kerry Archibald * use beacon hook in beacon body Signed-off-by: Kerry Archibald * update beacon body with (textual) latest locations, test Signed-off-by: Kerry Archibald * language in comment Signed-off-by: Kerry Archibald * comments Signed-off-by: Kerry Archibald * copyright Signed-off-by: Kerry Archibald --- src/components/views/messages/IBodyProps.ts | 3 + src/components/views/messages/MBeaconBody.tsx | 82 ++++-- .../views/messages/MessageEvent.tsx | 4 +- src/stores/OwnBeaconStore.ts | 3 +- src/utils/beacon/index.ts | 1 + src/utils/beacon/useBeacon.ts | 72 ++++++ .../__snapshots__/SmartMarker-test.tsx.snap | 4 + .../views/messages/MBeaconBody-test.tsx | 235 ++++++++++++++++++ .../__snapshots__/MBeaconBody-test.tsx.snap | 49 ++++ 9 files changed, 424 insertions(+), 29 deletions(-) create mode 100644 src/utils/beacon/useBeacon.ts create mode 100644 test/components/views/messages/MBeaconBody-test.tsx create mode 100644 test/components/views/messages/__snapshots__/MBeaconBody-test.tsx.snap diff --git a/src/components/views/messages/IBodyProps.ts b/src/components/views/messages/IBodyProps.ts index 76c823b185..2487f2c1a9 100644 --- a/src/components/views/messages/IBodyProps.ts +++ b/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 | LegacyRef; } diff --git a/src/components/views/messages/MBeaconBody.tsx b/src/components/views/messages/MBeaconBody.tsx index ec601aa298..bbd7fb446f 100644 --- a/src/components/views/messages/MBeaconBody.tsx +++ b/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 { - public static contextType = MatrixClientContext; - public context!: React.ContextType; - 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 = React.forwardRef(({ mxEvent, ...rest }, ref) => { + const { + hasBeacon, + isLive, + description, + latestLocationState, + } = useBeaconState(mxEvent); + + if (!hasBeacon || !isLive) { + // TODO stopped, error states + return Beacon stopped or replaced; } - render(): React.ReactElement { - if (!this.beacon) { - // TODO loading and error states - return null; - } - // TODO everything else :~) - const description = this.beacon.beaconInfo.description; - return
{ description }
; - } -} + return ( + // TODO nice map +
+ { mxEvent.getId() }  + Beacon "{ description }" + { latestLocationState ? + { `${latestLocationState.uri} at ${latestLocationState.timestamp}` } : + Waiting for location } +
+ ); +}); + +export default MBeaconBody; + diff --git a/src/components/views/messages/MessageEvent.tsx b/src/components/views/messages/MessageEvent.tsx index 319a044873..2bafadf517 100644 --- a/src/components/views/messages/MessageEvent.tsx +++ b/src/components/views/messages/MessageEvent.tsx @@ -94,7 +94,7 @@ export default class MessageEvent extends React.Component implements IMe }; } - private get evTypes(): Record { + private get evTypes(): Record>> { return { [EventType.Sticker]: MStickerBody, [M_POLL_START.name]: MPollBody, @@ -122,7 +122,7 @@ export default class MessageEvent extends React.Component 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> | ReactAnyComponent = RedactedBody; if (!this.props.mxEvent.isRedacted()) { // only resolve BodyType if event is not redacted if (type && this.evTypes[type]) { diff --git a/src/stores/OwnBeaconStore.ts b/src/stores/OwnBeaconStore.ts index 0bb76afdd4..eabe9ea083 100644 --- a/src/stores/OwnBeaconStore.ts +++ b/src/stores/OwnBeaconStore.ts @@ -125,7 +125,7 @@ export class OwnBeaconStore extends AsyncStoreWithClient { protected async onReady(): Promise { 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 { } this.checkLiveness(); + beacon.monitorLiveness(); }; private onBeaconLiveness = (isLive: boolean, beacon: Beacon): void => { diff --git a/src/utils/beacon/index.ts b/src/utils/beacon/index.ts index 1308e03878..62db92dc1a 100644 --- a/src/utils/beacon/index.ts +++ b/src/utils/beacon/index.ts @@ -16,3 +16,4 @@ limitations under the License. export * from './duration'; export * from './geolocation'; +export * from './useBeacon'; diff --git a/src/utils/beacon/useBeacon.ts b/src/utils/beacon/useBeacon.ts new file mode 100644 index 0000000000..fbe5d2ff8a --- /dev/null +++ b/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(); + + 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; +}; diff --git a/test/components/views/location/__snapshots__/SmartMarker-test.tsx.snap b/test/components/views/location/__snapshots__/SmartMarker-test.tsx.snap index 5b6bcf6a95..724e0b3fc8 100644 --- a/test/components/views/location/__snapshots__/SmartMarker-test.tsx.snap +++ b/test/components/views/location/__snapshots__/SmartMarker-test.tsx.snap @@ -10,6 +10,8 @@ exports[` creates a marker on mount 1`] = ` "_maxListeners": undefined, "addControl": [MockFunction], "removeControl": [MockFunction], + "zoomIn": [MockFunction], + "zoomOut": [MockFunction], Symbol(kCapture): false, } } @@ -40,6 +42,8 @@ exports[` removes marker on unmount 1`] = ` "_maxListeners": undefined, "addControl": [MockFunction], "removeControl": [MockFunction], + "zoomIn": [MockFunction], + "zoomOut": [MockFunction], Symbol(kCapture): false, } } diff --git a/test/components/views/messages/MBeaconBody-test.tsx b/test/components/views/messages/MBeaconBody-test.tsx new file mode 100644 index 0000000000..dc8ec31903 --- /dev/null +++ b/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('', () => { + // 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(, { + 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(); + }); + }); +}); diff --git a/test/components/views/messages/__snapshots__/MBeaconBody-test.tsx.snap b/test/components/views/messages/__snapshots__/MBeaconBody-test.tsx.snap new file mode 100644 index 0000000000..81850608f6 --- /dev/null +++ b/test/components/views/messages/__snapshots__/MBeaconBody-test.tsx.snap @@ -0,0 +1,49 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders a live beacon with basic stub 1`] = ` + +
+ + $alice-room1-1 + +   + + Beacon " + " + + + Waiting for location + +
+ +`;