apply strictnullchecks to src/components/views/beacon/* (#10272)

src/components/views/beacon/BeaconListItem.tsx

@@ -42,14 +42,14 @@ const BeaconListItem: React.FC<Props & HTMLProps<HTMLLIElement>> = ({ beacon, ..
     const matrixClient = useContext(MatrixClientContext);
     const room = matrixClient.getRoom(beacon.roomId);
 
-    if (!latestLocationState || !beacon.isLive) {
+    if (!latestLocationState || !beacon.isLive || !room) {
         return null;
     }
 
-    const isSelfLocation = beacon.beaconInfo.assetType === LocationAssetType.Self;
+    const isSelfLocation = beacon.beaconInfo?.assetType === LocationAssetType.Self;
-    const beaconMember = isSelfLocation ? room.getMember(beacon.beaconInfoOwner) : undefined;
+    const beaconMember = isSelfLocation ? room.getMember(beacon.beaconInfoOwner) : null;
 
-    const humanizedUpdateTime = humanizeTime(latestLocationState.timestamp);
+    const humanizedUpdateTime = (latestLocationState.timestamp && humanizeTime(latestLocationState.timestamp)) || "";
 
     return (
         <li className="mx_BeaconListItem" {...rest}>
@@ -62,7 +62,7 @@ const BeaconListItem: React.FC<Props & HTMLProps<HTMLLIElement>> = ({ beacon, ..
                 <BeaconStatus
                     className="mx_BeaconListItem_status"
                     beacon={beacon}
-                    label={beaconMember?.name || beacon.beaconInfo.description || beacon.beaconInfoOwner}
+                    label={beaconMember?.name || beacon.beaconInfo?.description || beacon.beaconInfoOwner}
                     displayStatus={BeaconDisplayStatus.Active}
                 >
                     {/* eat events from interactive share buttons

src/components/views/beacon/BeaconStatusTooltip.tsx

@@ -27,11 +27,11 @@ interface Props {
     beacon: Beacon;
 }
 
-const useBeaconName = (beacon: Beacon): string => {
+const useBeaconName = (beacon: Beacon): string | undefined => {
     const matrixClient = useContext(MatrixClientContext);
 
-    if (beacon.beaconInfo.assetType !== LocationAssetType.Self) {
+    if (beacon.beaconInfo?.assetType !== LocationAssetType.Self) {
-        return beacon.beaconInfo.description;
+        return beacon.beaconInfo?.description;
     }
     const room = matrixClient.getRoom(beacon.roomId);
     const member = room?.getMember(beacon.beaconInfoOwner);

src/components/views/beacon/BeaconViewDialog.tsx

@@ -54,7 +54,7 @@ interface FocusedBeaconState {
     beacon?: Beacon;
 }
 
-const getBoundsCenter = (bounds: Bounds): string | undefined => {
+const getBoundsCenter = (bounds?: Bounds): string | undefined => {
     if (!bounds) {
         return;
     }
@@ -70,10 +70,10 @@ const useMapPosition = (
     { beacon, ts }: FocusedBeaconState,
 ): {
     bounds?: Bounds;
-    centerGeoUri: string;
+    centerGeoUri?: string;
 } => {
     const [bounds, setBounds] = useState<Bounds | undefined>(getBeaconBounds(liveBeacons));
-    const [centerGeoUri, setCenterGeoUri] = useState<string>(
+    const [centerGeoUri, setCenterGeoUri] = useState<string | undefined>(
         beacon?.latestLocationState?.uri || getBoundsCenter(bounds),
     );
 

src/components/views/beacon/DialogOwnBeaconStatus.tsx

@@ -45,12 +45,12 @@ const DialogOwnBeaconStatus: React.FC<Props> = ({ roomId }) => {
     const matrixClient = useContext(MatrixClientContext);
     const room = matrixClient.getRoom(roomId);
 
-    if (!beacon?.isLive) {
+    if (!beacon?.isLive || !room) {
         return null;
     }
 
-    const isSelfLocation = beacon.beaconInfo.assetType === LocationAssetType.Self;
+    const isSelfLocation = beacon.beaconInfo?.assetType === LocationAssetType.Self;
-    const beaconMember = isSelfLocation ? room.getMember(beacon.beaconInfoOwner) : undefined;
+    const beaconMember = isSelfLocation ? room.getMember(beacon.beaconInfoOwner) : null;
 
     return (
         <div className="mx_DialogOwnBeaconStatus">

src/components/views/beacon/LeftPanelLiveShareWarning.tsx

@@ -25,7 +25,7 @@ import { Icon as LiveLocationIcon } from "../../../../res/img/location/live-loca
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { Action } from "../../../dispatcher/actions";
 import dispatcher from "../../../dispatcher/dispatcher";
-import AccessibleButton from "../elements/AccessibleButton";
+import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
 
 interface Props {
     isMinimized?: boolean;
@@ -121,7 +121,7 @@ const LeftPanelLiveShareWarning: React.FC<Props> = ({ isMinimized }) => {
     );
 
     const onWarningClick = relevantBeacon
-        ? () => {
+        ? (_e: ButtonEvent) => {
               dispatcher.dispatch<ViewRoomPayload>({
                   action: Action.ViewRoom,
                   room_id: relevantBeacon.roomId,
@@ -131,7 +131,7 @@ const LeftPanelLiveShareWarning: React.FC<Props> = ({ isMinimized }) => {
                   highlighted: true,
               });
           }
-        : undefined;
+        : null;
 
     const label = getLabel(hasStoppingErrors, hasLocationPublishErrors);
 

src/components/views/beacon/LiveTimeRemaining.tsx

@@ -40,13 +40,19 @@ const getUpdateInterval = (ms: number): number => {
 const useMsRemaining = (beacon: Beacon): number => {
     const beaconInfo = useEventEmitterState(beacon, BeaconEvent.Update, () => beacon.beaconInfo);
 
-    const [msRemaining, setMsRemaining] = useState(() => getBeaconMsUntilExpiry(beaconInfo));
+    const [msRemaining, setMsRemaining] = useState(() => (beaconInfo ? getBeaconMsUntilExpiry(beaconInfo) : 0));
 
     useEffect(() => {
+        if (!beaconInfo) {
+            return;
+        }
         setMsRemaining(getBeaconMsUntilExpiry(beaconInfo));
     }, [beaconInfo]);
 
     const updateMsRemaining = useCallback(() => {
+        if (!beaconInfo) {
+            return;
+        }
         const ms = getBeaconMsUntilExpiry(beaconInfo);
         setMsRemaining(ms);
     }, [beaconInfo]);

src/components/views/beacon/OwnBeaconStatus.tsx

@@ -42,7 +42,7 @@ const OwnBeaconStatus: React.FC<Props & HTMLProps<HTMLDivElement>> = ({ beacon,
         stoppingInProgress,
         onStopSharing,
         onResetLocationPublishError,
-    } = useOwnLiveBeacons([beacon?.identifier]);
+    } = useOwnLiveBeacons(beacon?.identifier ? [beacon?.identifier] : []);
 
     // combine display status with errors that only occur for user's own beacons
     const ownDisplayStatus = hasLocationPublishError || hasStopSharingError ? BeaconDisplayStatus.Error : displayStatus;

src/components/views/beacon/ShareLatestLocation.tsx

@@ -28,9 +28,9 @@ interface Props {
 }
 
 const ShareLatestLocation: React.FC<Props> = ({ latestLocationState }) => {
-    const [coords, setCoords] = useState(null);
+    const [coords, setCoords] = useState<GeolocationCoordinates | undefined>();
     useEffect(() => {
-        if (!latestLocationState) {
+        if (!latestLocationState?.uri) {
             return;
         }
         const coords = parseGeoUri(latestLocationState.uri);

src/components/views/beacon/displayStatus.ts

@@ -40,7 +40,5 @@ export const getBeaconDisplayStatus = (
     if (!latestLocationState) {
         return BeaconDisplayStatus.Loading;
     }
-    if (latestLocationState) {
+    return BeaconDisplayStatus.Active;
-        return BeaconDisplayStatus.Active;
-    }
 };

src/utils/beacon/useOwnLiveBeacons.ts

@@ -23,11 +23,11 @@ import { sortBeaconsByLatestExpiry } from "./duration";
 
 type LiveBeaconsState = {
     beacon?: Beacon;
-    onStopSharing?: () => void;
+    onStopSharing: () => void;
-    onResetLocationPublishError?: () => void;
+    onResetLocationPublishError: () => void;
-    stoppingInProgress?: boolean;
+    stoppingInProgress: boolean;
-    hasStopSharingError?: boolean;
+    hasStopSharingError: boolean;
-    hasLocationPublishError?: boolean;
+    hasLocationPublishError: boolean;
 };
 
 /**

test/components/views/beacon/OwnBeaconStatus-test.tsx

@@ -29,6 +29,14 @@ jest.mock("../../../../src/utils/beacon/useOwnLiveBeacons", () => ({
     useOwnLiveBeacons: jest.fn(),
 }));
 
+const defaultLiveBeaconsState = {
+    onStopSharing: jest.fn(),
+    onResetLocationPublishError: jest.fn(),
+    stoppingInProgress: false,
+    hasStopSharingError: false,
+    hasLocationPublishError: false,
+};
+
 describe("<OwnBeaconStatus />", () => {
     const defaultProps = {
         displayStatus: BeaconDisplayStatus.Loading,
@@ -43,7 +51,7 @@ describe("<OwnBeaconStatus />", () => {
 
     beforeEach(() => {
         jest.spyOn(global.Date, "now").mockReturnValue(123456789);
-        mocked(useOwnLiveBeacons).mockClear().mockReturnValue({});
+        mocked(useOwnLiveBeacons).mockClear().mockReturnValue(defaultLiveBeaconsState);
 
         defaultBeacon = new Beacon(makeBeaconInfoEvent(userId, roomId));
     });
@@ -57,6 +65,7 @@ describe("<OwnBeaconStatus />", () => {
         it("renders stop button", () => {
             const displayStatus = BeaconDisplayStatus.Active;
             mocked(useOwnLiveBeacons).mockReturnValue({
+                ...defaultLiveBeaconsState,
                 onStopSharing: jest.fn(),
             });
             renderComponent({ displayStatus, beacon: defaultBeacon });
@@ -68,6 +77,7 @@ describe("<OwnBeaconStatus />", () => {
             const displayStatus = BeaconDisplayStatus.Active;
             const onStopSharing = jest.fn();
             mocked(useOwnLiveBeacons).mockReturnValue({
+                ...defaultLiveBeaconsState,
                 onStopSharing,
             });
             renderComponent({ displayStatus, beacon: defaultBeacon });
@@ -90,6 +100,7 @@ describe("<OwnBeaconStatus />", () => {
             it("renders in error mode", () => {
                 const displayStatus = BeaconDisplayStatus.Active;
                 mocked(useOwnLiveBeacons).mockReturnValue({
+                    ...defaultLiveBeaconsState,
                     hasLocationPublishError: true,
                     onResetLocationPublishError: jest.fn(),
                 });
@@ -103,6 +114,7 @@ describe("<OwnBeaconStatus />", () => {
                 const displayStatus = BeaconDisplayStatus.Active;
                 const onResetLocationPublishError = jest.fn();
                 mocked(useOwnLiveBeacons).mockReturnValue({
+                    ...defaultLiveBeaconsState,
                     hasLocationPublishError: true,
                     onResetLocationPublishError,
                 });
@@ -117,6 +129,7 @@ describe("<OwnBeaconStatus />", () => {
             it("renders in error mode", () => {
                 const displayStatus = BeaconDisplayStatus.Active;
                 mocked(useOwnLiveBeacons).mockReturnValue({
+                    ...defaultLiveBeaconsState,
                     hasLocationPublishError: false,
                     hasStopSharingError: true,
                     onStopSharing: jest.fn(),
@@ -131,6 +144,7 @@ describe("<OwnBeaconStatus />", () => {
                 const displayStatus = BeaconDisplayStatus.Active;
                 const onStopSharing = jest.fn();
                 mocked(useOwnLiveBeacons).mockReturnValue({
+                    ...defaultLiveBeaconsState,
                     hasStopSharingError: true,
                     onStopSharing,
                 });