From 752ad6a9f9d4f01ef676a296a8265b18bb27ff9a Mon Sep 17 00:00:00 2001 From: Kerry Date: Wed, 23 Mar 2022 11:12:58 +0100 Subject: [PATCH] Live location sharing - refresh beacon expiry in room (#8116) * add duration dropdown to live location picker Signed-off-by: Kerry Archibald * tidy comments Signed-off-by: Kerry Archibald * setup component Signed-off-by: Kerry Archibald * replace references to beaconInfoId with beacon.identifier Signed-off-by: Kerry Archibald * icon Signed-off-by: Kerry Archibald * component for styled live beacon icon Signed-off-by: Kerry Archibald * emit liveness change whenever livebeaconIds changes Signed-off-by: Kerry Archibald * Handle multiple live beacons in room share warning, test Signed-off-by: Kerry Archibald * un xdescribe beaconstore tests Signed-off-by: Kerry Archibald * missed copyrights Signed-off-by: Kerry Archibald * i18n Signed-off-by: Kerry Archibald * refresh beacon time remaining Signed-off-by: Kerry Archibald * kill timeout Signed-off-by: Kerry Archibald * use useInterval Signed-off-by: Kerry Archibald * beacon not optional in useMsRemaining Signed-off-by: Kerry Archibald * just use single "you are sharing" message Signed-off-by: Kerry Archibald * trigger Signed-off-by: Kerry Archibald * i18n Signed-off-by: Kerry Archibald * i18n again Signed-off-by: Kerry Archibald --- .../views/beacon/RoomLiveShareWarning.tsx | 73 +++++++++--- src/i18n/strings/en_EN.json | 2 - .../beacon/RoomLiveShareWarning-test.tsx | 57 +++++++-- .../RoomLiveShareWarning-test.tsx.snap | 112 ++++++++++++++++-- 4 files changed, 201 insertions(+), 43 deletions(-) diff --git a/src/components/views/beacon/RoomLiveShareWarning.tsx b/src/components/views/beacon/RoomLiveShareWarning.tsx index 5eb85e71b4..5bbde4ccb0 100644 --- a/src/components/views/beacon/RoomLiveShareWarning.tsx +++ b/src/components/views/beacon/RoomLiveShareWarning.tsx @@ -14,9 +14,9 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { useEffect, useState } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import classNames from 'classnames'; -import { Room } from 'matrix-js-sdk/src/matrix'; +import { Room, Beacon } from 'matrix-js-sdk/src/matrix'; import { _t } from '../../../languageHandler'; import { useEventEmitterState } from '../../../hooks/useEventEmitter'; @@ -26,25 +26,57 @@ import StyledLiveBeaconIcon from './StyledLiveBeaconIcon'; import { formatDuration } from '../../../DateUtils'; import { getBeaconMsUntilExpiry, sortBeaconsByLatestExpiry } from '../../../utils/beacon'; import Spinner from '../elements/Spinner'; +import { useInterval } from '../../../hooks/useTimeout'; interface Props { roomId: Room['roomId']; } +const MINUTE_MS = 60000; +const HOUR_MS = MINUTE_MS * 60; + +const getUpdateInterval = (ms: number) => { + // every 10 mins when more than an hour + if (ms > HOUR_MS) { + return MINUTE_MS * 10; + } + // every minute when more than a minute + if (ms > MINUTE_MS) { + return MINUTE_MS; + } + // otherwise every second + return 1000; +}; +const useMsRemaining = (beacon: Beacon): number => { + const [msRemaining, setMsRemaining] = useState(() => getBeaconMsUntilExpiry(beacon)); + + useEffect(() => { + setMsRemaining(getBeaconMsUntilExpiry(beacon)); + }, [beacon]); + + const updateMsRemaining = useCallback(() => { + const ms = getBeaconMsUntilExpiry(beacon); + setMsRemaining(ms); + }, [beacon]); + + useInterval(updateMsRemaining, getUpdateInterval(msRemaining)); + + return msRemaining; +}; + /** * It's technically possible to have multiple live beacons in one room * Select the latest expiry to display, * and kill all beacons on stop sharing */ type LiveBeaconsState = { - liveBeaconIds: string[]; - msRemaining?: number; + beacon?: Beacon; onStopSharing?: () => void; stoppingInProgress?: boolean; }; - const useLiveBeacons = (roomId: Room['roomId']): LiveBeaconsState => { const [stoppingInProgress, setStoppingInProgress] = useState(false); + const liveBeaconIds = useEventEmitterState( OwnBeaconStore.instance, OwnBeaconStoreEvent.LivenessChange, @@ -57,7 +89,7 @@ const useLiveBeacons = (roomId: Room['roomId']): LiveBeaconsState => { }, [liveBeaconIds]); if (!liveBeaconIds?.length) { - return { liveBeaconIds }; + return {}; } // select the beacon with latest expiry to display expiry time @@ -77,40 +109,43 @@ const useLiveBeacons = (roomId: Room['roomId']): LiveBeaconsState => { } }; - const msRemaining = getBeaconMsUntilExpiry(beacon); + return { onStopSharing, beacon, stoppingInProgress }; +}; - return { liveBeaconIds, onStopSharing, msRemaining, stoppingInProgress }; +const LiveTimeRemaining: React.FC<{ beacon: Beacon }> = ({ beacon }) => { + const msRemaining = useMsRemaining(beacon); + + const timeRemaining = formatDuration(msRemaining); + const liveTimeRemaining = _t(`%(timeRemaining)s left`, { timeRemaining }); + + return { liveTimeRemaining }; }; const RoomLiveShareWarning: React.FC = ({ roomId }) => { const { - liveBeaconIds, onStopSharing, - msRemaining, + beacon, stoppingInProgress, } = useLiveBeacons(roomId); - if (!liveBeaconIds?.length) { + if (!beacon) { return null; } - const timeRemaining = formatDuration(msRemaining); - const liveTimeRemaining = _t(`%(timeRemaining)s left`, { timeRemaining }); - return
- { _t('You are sharing %(count)s live locations', { count: liveBeaconIds.length }) } + { _t('You are sharing your live location') } { stoppingInProgress ? : - { liveTimeRemaining } + } ', () => { // 14.03.2022 16:15 const now = 1647270879403; + const MINUTE_MS = 60000; const HOUR_MS = 3600000; // mock the date so events are stable for snapshots etc jest.spyOn(global.Date, 'now').mockReturnValue(now); - const room1Beacon1 = makeBeaconInfoEvent(aliceId, room1Id, { isLive: true, timeout: HOUR_MS }); - const room2Beacon1 = makeBeaconInfoEvent(aliceId, room2Id, { isLive: true, timeout: HOUR_MS }); - const room2Beacon2 = makeBeaconInfoEvent(aliceId, room2Id, { isLive: true, timeout: HOUR_MS * 12 }); - const room3Beacon1 = makeBeaconInfoEvent(aliceId, room3Id, { isLive: true, timeout: HOUR_MS }); + const room1Beacon1 = makeBeaconInfoEvent(aliceId, room1Id, { + isLive: true, + timeout: HOUR_MS, + }, '$0'); + const room2Beacon1 = makeBeaconInfoEvent(aliceId, room2Id, { isLive: true, timeout: HOUR_MS }, '$1'); + const room2Beacon2 = makeBeaconInfoEvent(aliceId, room2Id, { isLive: true, timeout: HOUR_MS * 12 }, '$2'); + const room3Beacon1 = makeBeaconInfoEvent(aliceId, room3Id, { isLive: true, timeout: HOUR_MS }, '$3'); // make fresh rooms every time // as we update room state @@ -67,7 +71,8 @@ describe('', () => { const advanceDateAndTime = (ms: number) => { // bc liveness check uses Date.now we have to advance this mock - jest.spyOn(global.Date, 'now').mockReturnValue(now + ms); + jest.spyOn(global.Date, 'now').mockReturnValue(Date.now() + ms); + // then advance time for the interval by the same amount jest.advanceTimersByTime(ms); }; @@ -105,6 +110,8 @@ describe('', () => { jest.spyOn(global.Date, 'now').mockRestore(); }); + const getExpiryText = wrapper => findByTestId(wrapper, 'room-live-share-expiry').text(); + it('renders nothing when user has no live beacons at all', async () => { await makeOwnBeaconStore(); const component = getComponent(); @@ -137,7 +144,7 @@ describe('', () => { const component = getComponent({ roomId: room2Id }); expect(component).toMatchSnapshot(); // later expiry displayed - expect(findByTestId(component, 'room-live-share-expiry').text()).toEqual('12h left'); + expect(getExpiryText(component)).toEqual('12h left'); }); it('removes itself when user stops having live beacons', async () => { @@ -146,7 +153,9 @@ describe('', () => { expect(component.html()).toBeTruthy(); // time travel until room1Beacon1 is expired - advanceDateAndTime(HOUR_MS + 1); + act(() => { + advanceDateAndTime(HOUR_MS + 1); + }); act(() => { mockClient.emit(BeaconEvent.LivenessChange, false, new Beacon(room1Beacon1)); component.setProps({}); @@ -168,6 +177,29 @@ describe('', () => { expect(component.html()).toBeTruthy(); }); + it('updates beacon time left periodically', () => { + const component = getComponent({ roomId: room1Id }); + expect(getExpiryText(component)).toEqual('1h left'); + + act(() => { + advanceDateAndTime(MINUTE_MS * 25); + }); + + expect(getExpiryText(component)).toEqual('35m left'); + }); + + it('clears expiry time interval on unmount', () => { + const clearIntervalSpy = jest.spyOn(global, 'clearInterval'); + const component = getComponent({ roomId: room1Id }); + expect(getExpiryText(component)).toEqual('1h left'); + + act(() => { + component.unmount(); + }); + + expect(clearIntervalSpy).toHaveBeenCalled(); + }); + describe('stopping beacons', () => { it('stops beacon on stop sharing click', () => { const component = getComponent({ roomId: room2Id }); @@ -184,25 +216,28 @@ describe('', () => { it('displays again with correct state after stopping a beacon', () => { // make sure the loading state is reset correctly after removing a beacon - const component = getComponent({ roomId: room2Id }); + const component = getComponent({ roomId: room1Id }); + // stop the beacon act(() => { findByTestId(component, 'room-live-share-stop-sharing').at(0).simulate('click'); }); // time travel until room1Beacon1 is expired - advanceDateAndTime(HOUR_MS + 1); + act(() => { + advanceDateAndTime(HOUR_MS + 1); + }); act(() => { mockClient.emit(BeaconEvent.LivenessChange, false, new Beacon(room1Beacon1)); }); - const newLiveBeacon = makeBeaconInfoEvent(aliceId, room2Id, { isLive: true }); + const newLiveBeacon = makeBeaconInfoEvent(aliceId, room1Id, { isLive: true }); act(() => { mockClient.emit(BeaconEvent.New, newLiveBeacon, new Beacon(newLiveBeacon)); }); // button not disabled and expiry time shown expect(findByTestId(component, 'room-live-share-stop-sharing').at(0).props().disabled).toBeFalsy(); - expect(findByTestId(component, 'room-live-share-expiry').text()).toEqual('11h left'); + expect(findByTestId(component, 'room-live-share-expiry').text()).toEqual('1h left'); }); }); }); diff --git a/test/components/views/beacon/__snapshots__/RoomLiveShareWarning-test.tsx.snap b/test/components/views/beacon/__snapshots__/RoomLiveShareWarning-test.tsx.snap index 3079670fc5..d656d57898 100644 --- a/test/components/views/beacon/__snapshots__/RoomLiveShareWarning-test.tsx.snap +++ b/test/components/views/beacon/__snapshots__/RoomLiveShareWarning-test.tsx.snap @@ -19,12 +19,57 @@ exports[` when user has live beacons renders correctly w > You are sharing your live location - - 1h left - + + 1h left + + when user has live beacons renders correctly w - You are sharing 2 live locations + You are sharing your live location - - 12h left - + + 12h left + +