Conform more code to strictNullChecks (#10374)

* Apply `strictNullChecks` to `src/components/views/room_settings/*`

* Restore tsconfig.json

* Conform more code to `strictNullChecks`

* Iterate

* Update matrix-widget-api

* Conform more code to `strictNullChecks`

Author: t3chguy

src/KeyBindingsManager.ts

@@ -25,7 +25,7 @@ import { IS_MAC } from "./Keyboard";
  * The combo is evaluated strictly, i.e. the KeyboardEvent must match exactly what is specified in the KeyCombo.
  */
 export type KeyCombo = {
-    key?: string;
+    key: string;
 
     /** On PC: ctrl is pressed; on Mac: meta is pressed */
     ctrlOrCmdKey?: boolean;

src/MatrixClientPeg.ts

@@ -306,7 +306,7 @@ class MatrixClientPegClass implements IMatrixClientPeg {
             homeserverUrl: this.matrixClient.baseUrl,
             identityServerUrl: this.matrixClient.idBaseUrl,
             userId: this.matrixClient.credentials.userId,
-            deviceId: this.matrixClient.getDeviceId(),
+            deviceId: this.matrixClient.getDeviceId() ?? undefined,
             accessToken: this.matrixClient.getAccessToken(),
             guest: this.matrixClient.isGuest(),
         };

src/Searching.ts

@@ -576,7 +576,7 @@ async function combinedPagination(searchResult: ISeshatSearchResults): Promise<I
     const newSlice = result.results.slice(Math.max(result.results.length - newResultCount, 0));
     restoreEncryptionInfo(newSlice);
 
-    searchResult.pendingRequest = null;
+    searchResult.pendingRequest = undefined;
 
     return result;
 }

src/components/views/dialogs/CreateRoomDialog.tsx

@@ -41,7 +41,8 @@ interface IProps {
     defaultName?: string;
     parentSpace?: Room;
     defaultEncrypted?: boolean;
-    onFinished(proceed?: boolean, opts?: IOpts): void;
+    onFinished(proceed?: false): void;
+    onFinished(proceed: true, opts: IOpts): void;
 }
 
 interface IState {

src/components/views/dialogs/ModalWidgetDialog.tsx

@@ -46,7 +46,8 @@ interface IProps {
     widgetDefinition: IModalWidgetOpenRequestData;
     widgetRoomId?: string;
     sourceWidgetId: string;
-    onFinished(success?: boolean, data?: IModalWidgetReturnData): void;
+    onFinished(success: true, data: IModalWidgetReturnData): void;
+    onFinished(success?: false, data?: void): void;
 }
 
 interface IState {

src/components/views/elements/ImageView.tsx

@@ -133,13 +133,13 @@ export default class ImageView extends React.Component<IProps, IState> {
         // We want to recalculate zoom whenever the window's size changes
         window.addEventListener("resize", this.recalculateZoom);
         // After the image loads for the first time we want to calculate the zoom
-        this.image.current.addEventListener("load", this.imageLoaded);
+        this.image.current?.addEventListener("load", this.imageLoaded);
     }
 
     public componentWillUnmount(): void {
         this.focusLock.current.removeEventListener("wheel", this.onWheel);
         window.removeEventListener("resize", this.recalculateZoom);
-        this.image.current.removeEventListener("load", this.imageLoaded);
+        this.image.current?.removeEventListener("load", this.imageLoaded);
     }
 
     private imageLoaded = (): void => {
@@ -171,6 +171,7 @@ export default class ImageView extends React.Component<IProps, IState> {
     private setZoomAndRotation = (inputRotation?: number): void => {
         const image = this.image.current;
         const imageWrapper = this.imageWrapper.current;
+        if (!image || !imageWrapper) return;
 
         const rotation = inputRotation ?? this.state.rotation;
 
@@ -236,8 +237,8 @@ export default class ImageView extends React.Component<IProps, IState> {
             // Zoom relative to the given point on the image.
             // First we need to figure out the offset of the anchor point
             // relative to the center of the image, accounting for rotation.
-            let offsetX;
-            let offsetY;
+            let offsetX: number | undefined;
+            let offsetY: number | undefined;
             // The modulo operator can return negative values for some
             // rotations, so we have to do some extra work to normalize it
             switch (((this.state.rotation % 360) + 360) % 360) {
@@ -310,7 +311,7 @@ export default class ImageView extends React.Component<IProps, IState> {
     private onDownloadClick = (): void => {
         const a = document.createElement("a");
         a.href = this.props.src;
-        a.download = this.props.name;
+        if (this.props.name) a.download = this.props.name;
         a.target = "_blank";
         a.rel = "noreferrer noopener";
         a.click();
@@ -334,9 +335,9 @@ export default class ImageView extends React.Component<IProps, IState> {
         ev.preventDefault();
         dis.dispatch<ViewRoomPayload>({
             action: Action.ViewRoom,
-            event_id: this.props.mxEvent.getId(),
+            event_id: this.props.mxEvent?.getId(),
             highlighted: true,
-            room_id: this.props.mxEvent.getRoomId(),
+            room_id: this.props.mxEvent?.getRoomId(),
             metricsTrigger: undefined, // room doesn't change
         });
         this.props.onFinished();
@@ -440,11 +441,11 @@ export default class ImageView extends React.Component<IProps, IState> {
 
         let info: JSX.Element | undefined;
         if (showEventMeta) {
-            const mxEvent = this.props.mxEvent;
+            const mxEvent = this.props.mxEvent!;
             const showTwelveHour = SettingsStore.getValue("showTwelveHourTimestamps");
             let permalink = "#";
             if (this.props.permalinkCreator) {
-                permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
+                permalink = this.props.permalinkCreator.forEvent(mxEvent.getId());
             }
 
             const senderName = mxEvent.sender?.name ?? mxEvent.getSender();
@@ -453,7 +454,7 @@ export default class ImageView extends React.Component<IProps, IState> {
                 <a
                     href={permalink}
                     onClick={this.onPermalinkClicked}
-                    aria-label={formatFullDate(new Date(this.props.mxEvent.getTs()), showTwelveHour, false)}
+                    aria-label={formatFullDate(new Date(mxEvent.getTs()), showTwelveHour, false)}
                 >
                     <MessageTimestamp
                         showFullDate={true}

src/components/views/elements/LazyRenderList.tsx

@@ -66,17 +66,17 @@ interface IProps<T> {
     // should typically be less than `overflowItems` unless applying
     // margins in the parent component when using multiple LazyRenderList in one viewport.
     // use 0 to only rerender when items will come into view.
-    overflowMargin?: number;
+    overflowMargin: number;
     // the amount of items to add at the top and bottom to render,
     // so not every scroll of causes a rerender.
-    overflowItems?: number;
+    overflowItems: number;
 
     element?: string;
     className?: string;
 }
 
 interface IState {
-    renderRange: ItemRange | null;
+    renderRange: ItemRange;
 }
 
 export default class LazyRenderList<T = any> extends React.Component<IProps<T>, IState> {
@@ -88,9 +88,7 @@ export default class LazyRenderList<T = any> extends React.Component<IProps<T>,
     public constructor(props: IProps<T>) {
         super(props);
 
-        this.state = {
-            renderRange: null,
-        };
+        this.state = LazyRenderList.getDerivedStateFromProps(props, {} as IState) as IState;
     }
 
     public static getDerivedStateFromProps(props: IProps<unknown>, state: IState): Partial<IState> | null {

src/components/views/messages/EncryptionEvent.tsx

@@ -35,7 +35,7 @@ const ALGORITHM = "m.megolm.v1.aes-sha2";
 
 const EncryptionEvent = forwardRef<HTMLDivElement, IProps>(({ mxEvent, timestamp }, ref) => {
     const cli = useContext(MatrixClientContext);
-    const roomId = mxEvent.getRoomId();
+    const roomId = mxEvent.getRoomId()!;
     const isRoomEncrypted = MatrixClientPeg.get().isRoomEncrypted(roomId);
 
     const prevContent = mxEvent.getPrevContent() as IRoomEncryption;
@@ -51,13 +51,13 @@ const EncryptionEvent = forwardRef<HTMLDivElement, IProps>(({ mxEvent, timestamp
         if (prevContent.algorithm === ALGORITHM) {
             subtitle = _t("Some encryption parameters have been changed.");
         } else if (dmPartner) {
-            const displayName = room.getMember(dmPartner)?.rawDisplayName || dmPartner;
+            const displayName = room?.getMember(dmPartner)?.rawDisplayName || dmPartner;
             subtitle = _t(
                 "Messages here are end-to-end encrypted. " +
                     "Verify %(displayName)s in their profile - tap on their avatar.",
                 { displayName },
             );
-        } else if (isLocalRoom(room)) {
+        } else if (room && isLocalRoom(room)) {
             subtitle = _t("Messages in this chat will be end-to-end encrypted.");
         } else {
             subtitle = _t(

src/components/views/messages/MBeaconBody.tsx

@@ -183,7 +183,7 @@ const MBeaconBody: React.FC<IBodyProps> = React.forwardRef(({ mxEvent, getRelati
                     <SmartMarker
                         map={map}
                         id={`${mapId}-marker`}
-                        geoUri={latestLocationState.uri}
+                        geoUri={latestLocationState?.uri}
                         roomMember={markerRoomMember ?? undefined}
                         useMemberColor
                     />

src/components/views/right_panel/TimelineCard.tsx

@@ -47,10 +47,10 @@ interface IProps {
     room: Room;
     onClose: () => void;
     resizeNotifier: ResizeNotifier;
-    permalinkCreator?: RoomPermalinkCreator;
+    permalinkCreator: RoomPermalinkCreator;
     e2eStatus?: E2EStatus;
     classNames?: string;
-    timelineSet?: EventTimelineSet;
+    timelineSet: EventTimelineSet;
     timelineRenderingType?: TimelineRenderingType;
     showComposer?: boolean;
     composerRelation?: IEventRelation;
@@ -77,7 +77,7 @@ export default class TimelineCard extends React.Component<IProps, IState> {
     private layoutWatcherRef: string;
     private timelinePanel = React.createRef<TimelinePanel>();
     private card = React.createRef<HTMLDivElement>();
-    private readReceiptsSettingWatcher: string;
+    private readReceiptsSettingWatcher: string | undefined;
 
     public constructor(props: IProps) {
         super(props);
@@ -87,7 +87,6 @@ export default class TimelineCard extends React.Component<IProps, IState> {
             atEndOfLiveTimeline: true,
             narrow: false,
         };
-        this.readReceiptsSettingWatcher = null;
     }
 
     public componentDidMount(): void {
@@ -129,7 +128,7 @@ export default class TimelineCard extends React.Component<IProps, IState> {
             case Action.EditEvent:
                 this.setState(
                     {
-                        editState: payload.event ? new EditorStateTransfer(payload.event) : null,
+                        editState: payload.event ? new EditorStateTransfer(payload.event) : undefined,
                     },
                     () => {
                         if (payload.event) {
@@ -199,7 +198,7 @@ export default class TimelineCard extends React.Component<IProps, IState> {
     };
 
     public render(): React.ReactNode {
-        const highlightedEventId = this.state.isInitialEventHighlighted ? this.state.initialEventId : null;
+        const highlightedEventId = this.state.isInitialEventHighlighted ? this.state.initialEventId : undefined;
 
         let jumpToBottom;
         if (!this.state.atEndOfLiveTimeline) {
@@ -232,7 +231,7 @@ export default class TimelineCard extends React.Component<IProps, IState> {
                     header={this.renderTimelineCardHeader()}
                     ref={this.card}
                 >
-                    <Measured sensor={this.card.current} onMeasurement={this.onMeasurement} />
+                    {this.card.current && <Measured sensor={this.card.current} onMeasurement={this.onMeasurement} />}
                     <div className="mx_TimelineCard_timeline">
                         {jumpToBottom}
                         <TimelinePanel