Live Location Sharing - left panel warning with error (#8201)

* add error style to left panel beacon warning

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

* test

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

* add beacon sort util

* link to latest beacon room from left panel warning

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

src/components/views/beacon/LeftPanelLiveShareWarning.tsx

@@ -21,11 +21,31 @@ import { useEventEmitterState } from '../../../hooks/useEventEmitter';
 import { _t } from '../../../languageHandler';
 import { OwnBeaconStore, OwnBeaconStoreEvent } from '../../../stores/OwnBeaconStore';
 import { Icon as LiveLocationIcon } from '../../../../res/img/location/live-location.svg';
+import { ViewRoomPayload } from '../../../dispatcher/payloads/ViewRoomPayload';
+import { Action } from '../../../dispatcher/actions';
+import dispatcher from '../../../dispatcher/dispatcher';
+import AccessibleButton from '../elements/AccessibleButton';
 
 interface Props {
     isMinimized?: boolean;
 }
 
+/**
+ * Choose the most relevant beacon
+ * and get its roomId
+ */
+const chooseBestBeaconRoomId = (liveBeaconIds, errorBeaconIds): string | undefined => {
+    // both lists are ordered by creation timestamp in store
+    // so select latest beacon
+    const beaconId = errorBeaconIds?.[0] ?? liveBeaconIds?.[0];
+    if (!beaconId) {
+        return undefined;
+    }
+    const beacon = OwnBeaconStore.instance.getBeaconById(beaconId);
+
+    return beacon?.roomId;
+};
+
 const LeftPanelLiveShareWarning: React.FC<Props> = ({ isMinimized }) => {
     const isMonitoringLiveLocation = useEventEmitterState(
         OwnBeaconStore.instance,
@@ -33,18 +53,48 @@ const LeftPanelLiveShareWarning: React.FC<Props> = ({ isMinimized }) => {
         () => OwnBeaconStore.instance.isMonitoringLiveLocation,
     );
 
+    const beaconIdsWithWireError = useEventEmitterState(
+        OwnBeaconStore.instance,
+        OwnBeaconStoreEvent.WireError,
+        () => OwnBeaconStore.instance.getLiveBeaconIdsWithWireError(),
+    );
+
+    const liveBeaconIds = useEventEmitterState(
+        OwnBeaconStore.instance,
+        OwnBeaconStoreEvent.LivenessChange,
+        () => OwnBeaconStore.instance.getLiveBeaconIds(),
+    );
+
+    const hasWireErrors = !!beaconIdsWithWireError.length;
+
     if (!isMonitoringLiveLocation) {
         return null;
     }
 
-    return <div
+    const relevantBeaconRoomId = chooseBestBeaconRoomId(liveBeaconIds, beaconIdsWithWireError);
+
+    const onWarningClick = relevantBeaconRoomId ? () => {
+        dispatcher.dispatch<ViewRoomPayload>({
+            action: Action.ViewRoom,
+            room_id: relevantBeaconRoomId,
+            metricsTrigger: undefined,
+        });
+    } : undefined;
+
+    const label = hasWireErrors ?
+        _t('An error occured whilst sharing your live location') :
+        _t('You are sharing your live location');
+
+    return <AccessibleButton
         className={classNames('mx_LeftPanelLiveShareWarning', {
             'mx_LeftPanelLiveShareWarning__minimized': isMinimized,
+            'mx_LeftPanelLiveShareWarning__error': hasWireErrors,
         })}
-        title={isMinimized ? _t('You are sharing your live location') : undefined}
+        title={isMinimized ? label : undefined}
+        onClick={onWarningClick}
     >
-        { isMinimized ? <LiveLocationIcon height={10} /> : _t('You are sharing your live location') }
-    </div>;
+        { isMinimized ? <LiveLocationIcon height={10} /> : label }
+    </AccessibleButton>;
 };
 
 export default LeftPanelLiveShareWarning;