LLS: error handling on stopping beacon (#8406)

* shared stopping error state for timeline, maxi and room warnign

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

* check for stopping errors in roomlist share warning

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

* lint

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

* test stopping errors in OwnBeaconStore

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

* update LeftPanelLiveShareWarning tests for stopping errors

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

* reinstate try/catch for stopping beacons in create

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

* remove unnecessary and buggy beacon stopping on creation

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

src/components/views/beacon/LeftPanelLiveShareWarning.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 
 import classNames from 'classnames';
 import React from 'react';
+import { BeaconIdentifier, Room } from 'matrix-js-sdk/src/matrix';
 
 import { useEventEmitterState } from '../../../hooks/useEventEmitter';
 import { _t } from '../../../languageHandler';
@@ -34,10 +35,14 @@ interface Props {
  * Choose the most relevant beacon
  * and get its roomId
  */
-const chooseBestBeaconRoomId = (liveBeaconIds, errorBeaconIds): string | undefined => {
+const chooseBestBeaconRoomId = (
+    liveBeaconIds: BeaconIdentifier[],
+    updateErrorBeaconIds: BeaconIdentifier[],
+    locationErrorBeaconIds: BeaconIdentifier[],
+): Room['roomId'] | undefined => {
     // both lists are ordered by creation timestamp in store
     // so select latest beacon
-    const beaconId = errorBeaconIds?.[0] ?? liveBeaconIds?.[0];
+    const beaconId = updateErrorBeaconIds?.[0] ?? locationErrorBeaconIds?.[0] ?? liveBeaconIds?.[0];
     if (!beaconId) {
         return undefined;
     }
@@ -46,6 +51,16 @@ const chooseBestBeaconRoomId = (liveBeaconIds, errorBeaconIds): string | undefin
     return beacon?.roomId;
 };
 
+const getLabel = (hasStoppingErrors: boolean, hasLocationErrors: boolean): string => {
+    if (hasStoppingErrors) {
+        return _t('An error occurred while stopping your live location');
+    }
+    if (hasLocationErrors) {
+        return _t('An error occured whilst sharing your live location');
+    }
+    return _t('You are sharing your live location');
+};
+
 const LeftPanelLiveShareWarning: React.FC<Props> = ({ isMinimized }) => {
     const isMonitoringLiveLocation = useEventEmitterState(
         OwnBeaconStore.instance,
@@ -59,6 +74,14 @@ const LeftPanelLiveShareWarning: React.FC<Props> = ({ isMinimized }) => {
         () => OwnBeaconStore.instance.getLiveBeaconIdsWithLocationPublishError(),
     );
 
+    const beaconIdsWithStoppingError = useEventEmitterState(
+        OwnBeaconStore.instance,
+        OwnBeaconStoreEvent.BeaconUpdateError,
+        () => OwnBeaconStore.instance.getLiveBeaconIds().filter(
+            beaconId => OwnBeaconStore.instance.beaconUpdateErrors.has(beaconId),
+        ),
+    );
+
     const liveBeaconIds = useEventEmitterState(
         OwnBeaconStore.instance,
         OwnBeaconStoreEvent.LivenessChange,
@@ -66,12 +89,15 @@ const LeftPanelLiveShareWarning: React.FC<Props> = ({ isMinimized }) => {
     );
 
     const hasLocationPublishErrors = !!beaconIdsWithLocationPublishError.length;
+    const hasStoppingErrors = !!beaconIdsWithStoppingError.length;
 
     if (!isMonitoringLiveLocation) {
         return null;
     }
 
-    const relevantBeaconRoomId = chooseBestBeaconRoomId(liveBeaconIds, beaconIdsWithLocationPublishError);
+    const relevantBeaconRoomId = chooseBestBeaconRoomId(
+        liveBeaconIds, beaconIdsWithStoppingError, beaconIdsWithLocationPublishError,
+    );
 
     const onWarningClick = relevantBeaconRoomId ? () => {
         dispatcher.dispatch<ViewRoomPayload>({
@@ -81,14 +107,12 @@ const LeftPanelLiveShareWarning: React.FC<Props> = ({ isMinimized }) => {
         });
     } : undefined;
 
-    const label = hasLocationPublishErrors ?
-        _t('An error occured whilst sharing your live location') :
-        _t('You are sharing your live location');
+    const label = getLabel(hasStoppingErrors, hasLocationPublishErrors);
 
     return <AccessibleButton
         className={classNames('mx_LeftPanelLiveShareWarning', {
             'mx_LeftPanelLiveShareWarning__minimized': isMinimized,
-            'mx_LeftPanelLiveShareWarning__error': hasLocationPublishErrors,
+            'mx_LeftPanelLiveShareWarning__error': hasLocationPublishErrors || hasStoppingErrors,
         })}
         title={isMinimized ? label : undefined}
         onClick={onWarningClick}

src/components/views/beacon/RoomLiveShareWarning.tsx

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import classNames from 'classnames';
 import { Room } from 'matrix-js-sdk/src/matrix';
 
 import { _t } from '../../../languageHandler';
@@ -67,7 +66,7 @@ const RoomLiveShareWarningInner: React.FC<RoomLiveShareWarningInnerProps> = ({ l
     };
 
     return <div
-        className={classNames('mx_RoomLiveShareWarning')}
+        className='mx_RoomLiveShareWarning'
     >
         <StyledLiveBeaconIcon className="mx_RoomLiveShareWarning_icon" withError={hasError} />
 

src/components/views/messages/MBeaconBody.tsx

@@ -146,6 +146,7 @@ const MBeaconBody: React.FC<IBodyProps> = React.forwardRef(({ mxEvent }, ref) =>
                     className='mx_MBeaconBody_chin'
                     beacon={beacon}
                     displayStatus={displayStatus}
+                    withIcon
                 /> :
                 <BeaconStatus
                     className='mx_MBeaconBody_chin'