Conform more code to strictNullChecks

package.json

@@ -97,7 +97,7 @@
         "matrix-encrypt-attachment": "^1.0.3",
         "matrix-events-sdk": "0.0.1",
         "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
-        "matrix-widget-api": "^1.1.1",
+        "matrix-widget-api": "^1.2.0",
         "minimist": "^1.2.5",
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",

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/structures/LoggedInView.tsx

@@ -259,7 +259,7 @@ class LoggedInView extends React.Component<IProps, IState> {
             isItemCollapsed: (domNode) => {
                 return domNode.classList.contains("mx_LeftPanel_minimized");
             },
-            handler: this.resizeHandler.current,
+            handler: this.resizeHandler.current ?? undefined,
         };
         const resizer = new Resizer(this._resizeContainer.current, CollapseDistributor, collapseConfig);
         resizer.setClassNames({

src/components/structures/RightPanel.tsx

@@ -90,7 +90,7 @@ export default class RightPanel extends React.Component<IProps, IState> {
     }
 
     public static getDerivedStateFromProps(props: IProps): Partial<IState> {
-        let currentCard: IRightPanelCard;
+        let currentCard: IRightPanelCard | undefined;
         if (props.room) {
             currentCard = RightPanelStore.instance.currentCardForRoom(props.room.roomId);
         }
@@ -111,7 +111,7 @@ export default class RightPanel extends React.Component<IProps, IState> {
             this.delayedUpdate();
         } else if (
             this.state.phase === RightPanelPhases.RoomMemberInfo &&
-            member.userId === this.state.cardState.member.userId
+            member.userId === this.state.cardState.member?.userId
         ) {
             // refresh the member info (e.g. new power level)
             this.delayedUpdate();
@@ -136,7 +136,7 @@ export default class RightPanel extends React.Component<IProps, IState> {
             });
         } else if (
             this.state.phase === RightPanelPhases.EncryptionPanel &&
-            this.state.cardState.verificationRequest?.pending
+            this.state.cardState?.verificationRequest?.pending
         ) {
             // When the user clicks close on the encryption panel cancel the pending request first if any
             this.state.cardState.verificationRequest.cancel();
@@ -171,8 +171,8 @@ export default class RightPanel extends React.Component<IProps, IState> {
             case RightPanelPhases.SpaceMemberList:
                 card = (
                     <MemberList
-                        roomId={cardState.spaceId ? cardState.spaceId : roomId}
-                        key={cardState.spaceId ? cardState.spaceId : roomId}
+                        roomId={cardState?.spaceId ?? roomId}
+                        key={cardState?.spaceId ?? roomId}
                         onClose={this.onClose}
                         searchQuery={this.state.searchQuery}
                         onSearchQueryChanged={this.onSearchQueryChanged}
@@ -183,23 +183,23 @@ export default class RightPanel extends React.Component<IProps, IState> {
             case RightPanelPhases.RoomMemberInfo:
             case RightPanelPhases.SpaceMemberInfo:
             case RightPanelPhases.EncryptionPanel: {
-                const roomMember = cardState.member instanceof RoomMember ? cardState.member : undefined;
+                const roomMember = cardState?.member instanceof RoomMember ? cardState.member : undefined;
                 card = (
                     <UserInfo
-                        user={cardState.member}
+                        user={cardState?.member}
                         room={this.context.getRoom(roomMember?.roomId) ?? this.props.room}
-                        key={roomId || cardState.member.userId}
+                        key={roomId ?? cardState?.member?.userId}
                         onClose={this.onClose}
                         phase={phase}
-                        verificationRequest={cardState.verificationRequest}
-                        verificationRequestPromise={cardState.verificationRequestPromise}
+                        verificationRequest={cardState?.verificationRequest}
+                        verificationRequestPromise={cardState?.verificationRequestPromise}
                     />
                 );
                 break;
             }
             case RightPanelPhases.Room3pidMemberInfo:
             case RightPanelPhases.Space3pidMemberInfo:
-                card = <ThirdPartyMemberInfo event={cardState.memberInfoEvent} key={roomId} />;
+                card = <ThirdPartyMemberInfo event={cardState?.memberInfoEvent} key={roomId} />;
                 break;
 
             case RightPanelPhases.NotificationPanel:
@@ -240,10 +240,10 @@ export default class RightPanel extends React.Component<IProps, IState> {
                         room={this.props.room}
                         resizeNotifier={this.props.resizeNotifier}
                         onClose={this.onClose}
-                        mxEvent={cardState.threadHeadEvent}
-                        initialEvent={cardState.initialEvent}
-                        isInitialEventHighlighted={cardState.isInitialEventHighlighted}
-                        initialEventScrollIntoView={cardState.initialEventScrollIntoView}
+                        mxEvent={cardState?.threadHeadEvent}
+                        initialEvent={cardState?.initialEvent}
+                        isInitialEventHighlighted={cardState?.isInitialEventHighlighted}
+                        initialEventScrollIntoView={cardState?.initialEventScrollIntoView}
                         permalinkCreator={this.props.permalinkCreator}
                         e2eStatus={this.props.e2eStatus}
                     />
@@ -273,7 +273,7 @@ export default class RightPanel extends React.Component<IProps, IState> {
                 break;
 
             case RightPanelPhases.Widget:
-                card = <WidgetCard room={this.props.room} widgetId={cardState.widgetId} onClose={this.onClose} />;
+                card = <WidgetCard room={this.props.room} widgetId={cardState?.widgetId} onClose={this.onClose} />;
                 break;
         }
 

src/components/structures/RoomView.tsx

@@ -132,7 +132,7 @@ if (DEBUG) {
 }
 
 interface IRoomProps {
-    threepidInvite: IThreepidInvite;
+    threepidInvite?: IThreepidInvite;
     oobData?: IOOBData;
 
     resizeNotifier: ResizeNotifier;
@@ -605,8 +605,8 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             return;
         }
 
-        const roomId = this.context.roomViewStore.getRoomId();
-        const room = this.context.client.getRoom(roomId);
+        const roomId = this.context.roomViewStore.getRoomId() ?? null;
+        const room = this.context.client?.getRoom(roomId) ?? null;
 
         const newState: Partial<IRoomState> = {
             roomId,
@@ -624,7 +624,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             showDisplaynameChanges: SettingsStore.getValue("showDisplaynameChanges", roomId),
             wasContextSwitch: this.context.roomViewStore.getWasContextSwitch(),
             mainSplitContentType: room === null ? undefined : this.getMainSplitContentType(room),
-            initialEventId: null, // default to clearing this, will get set later in the method if needed
+            initialEventId: undefined, // default to clearing this, will get set later in the method if needed
             showRightPanel: this.context.rightPanelStore.isOpenForRoom(roomId),
             activeCall: CallStore.instance.getActiveCall(roomId),
         };
@@ -654,12 +654,11 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             // The rest will be lost for now, until the aggregation API on the server
             // becomes available to fetch a whole thread
             if (!initialEvent) {
-                initialEvent = await fetchInitialEvent(this.context.client, roomId, initialEventId);
+                initialEvent = (await fetchInitialEvent(this.context.client, roomId, initialEventId)) ?? undefined;
             }
 
-            // If we have an initial event, we want to reset the event pixel offset to ensure it ends up
-            // visible
-            newState.initialEventPixelOffset = null;
+            // If we have an initial event, we want to reset the event pixel offset to ensure it ends up visible
+            newState.initialEventPixelOffset = undefined;
 
             const thread = initialEvent?.getThread();
             if (thread && !initialEvent?.isThreadRoot) {
@@ -708,7 +707,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
         if (!initial && this.state.shouldPeek && !newState.shouldPeek) {
             // Stop peeking because we have joined this room now
-            this.context.client.stopPeeking();
+            this.context.client?.stopPeeking();
         }
 
         // Temporary logging to diagnose https://github.com/vector-im/element-web/issues/4307
@@ -824,7 +823,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         }
     }
 
-    private setupRoom(room: Room, roomId: string, joining: boolean, shouldPeek: boolean): void {
+    private setupRoom(room: Room | undefined, roomId: string | undefined, joining: boolean, shouldPeek: boolean): void {
         // if this is an unknown room then we're in one of three states:
         // - This is a room we can peek into (search engine) (we can /peek)
         // - This is a room we can publicly join or were invited to. (we can /join)
@@ -1503,7 +1502,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
     private updateDMState(): void {
         const room = this.state.room;
-        if (room.getMyMembership() != "join") {
+        if (room?.getMyMembership() !== "join") {
             return;
         }
         const dmInviter = room.getDMInviter();
@@ -1563,7 +1562,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
     );
 
     private onMessageListScroll = (): void => {
-        if (this.messagePanel.isAtEndOfLiveTimeline()) {
+        if (this.messagePanel?.isAtEndOfLiveTimeline()) {
             this.setState({
                 numUnreadMessages: 0,
                 atEndOfLiveTimeline: true,
@@ -1739,7 +1738,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             this.setState(
                 {
                     timelineRenderingType: TimelineRenderingType.Room,
-                    search: null,
+                    search: undefined,
                 },
                 resolve,
             );
@@ -1759,20 +1758,20 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             });
         } else {
             // Otherwise we have to jump manually
-            this.messagePanel.jumpToLiveTimeline();
+            this.messagePanel?.jumpToLiveTimeline();
             dis.fire(Action.FocusSendMessageComposer);
         }
     };
 
     // jump up to wherever our read marker is
     private jumpToReadMarker = (): void => {
-        this.messagePanel.jumpToReadMarker();
+        this.messagePanel?.jumpToReadMarker();
     };
 
     // update the read marker to match the read-receipt
     private forgetReadMarker = (ev: ButtonEvent): void => {
         ev.stopPropagation();
-        this.messagePanel.forgetReadMarker();
+        this.messagePanel?.forgetReadMarker();
     };
 
     // decide whether or not the top 'unread messages' bar should be shown
@@ -1790,7 +1789,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
     // get the current scroll position of the room, so that it can be
     // restored when we switch back to it.
     //
-    private getScrollState(): ScrollState {
+    private getScrollState(): ScrollState | null {
         const messagePanel = this.messagePanel;
         if (!messagePanel) return null;
 
@@ -1844,7 +1843,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
      * We pass it down to the scroll panel.
      */
     public handleScrollKey = (ev: React.KeyboardEvent | KeyboardEvent): void => {
-        let panel: ScrollPanel | TimelinePanel;
+        let panel: ScrollPanel | TimelinePanel | undefined;
         if (this.searchResultsPanel.current) {
             panel = this.searchResultsPanel.current;
         } else if (this.messagePanel) {
@@ -1857,7 +1856,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
     /**
      * get any current call for this room
      */
-    private getCallForRoom(): MatrixCall {
+    private getCallForRoom(): MatrixCall | null {
         if (!this.state.room) {
             return null;
         }
@@ -1919,7 +1918,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
     }
 
     private renderLocalRoomCreateLoader(): ReactElement {
-        const names = this.state.room.getDefaultRoomName(this.context.client.getUserId());
+        const names = this.state.room.getDefaultRoomName(this.context.client.getSafeUserId());
         return (
             <RoomContext.Provider value={this.state}>
                 <LocalRoomCreateLoader names={names} resizeNotifier={this.props.resizeNotifier} />
@@ -1991,7 +1990,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                     </div>
                 );
             } else {
-                let inviterName = undefined;
+                let inviterName: string | undefined;
                 if (this.props.oobData) {
                     inviterName = this.props.oobData.inviterName;
                 }
@@ -2057,12 +2056,12 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                     </ErrorBoundary>
                 );
             } else {
-                const myUserId = this.context.client.credentials.userId;
+                const myUserId = this.context.client.getSafeUserId();
                 const myMember = this.state.room.getMember(myUserId);
                 const inviteEvent = myMember ? myMember.events.member : null;
                 let inviterName = _t("Unknown");
                 if (inviteEvent) {
-                    inviterName = inviteEvent.sender ? inviteEvent.sender.name : inviteEvent.getSender();
+                    inviterName = inviteEvent.sender?.name ?? inviteEvent.getSender();
                 }
 
                 // We deliberately don't try to peek into invites, even if we have permission to peek
@@ -2139,7 +2138,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         const showRoomUpgradeBar =
             roomVersionRecommendation &&
             roomVersionRecommendation.needsUpgrade &&
-            this.state.room.userMayUpgradeRoom(this.context.client.credentials.userId);
+            this.state.room.userMayUpgradeRoom(this.context.client.getSafeUserId());
 
         const hiddenHighlightCount = this.getHiddenHighlightCount();
 
@@ -2159,7 +2158,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         } else if (myMembership !== "join") {
             // We do have a room object for this room, but we're not currently in it.
             // We may have a 3rd party invite to it.
-            let inviterName = undefined;
+            let inviterName: string | undefined;
             if (this.props.oobData) {
                 inviterName = this.props.oobData.inviterName;
             }
@@ -2206,6 +2205,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                     space={this.state.room}
                     justCreatedOpts={this.props.justCreatedOpts}
                     resizeNotifier={this.props.resizeNotifier}
+                    permalinkCreator={this.permalinkCreator}
                     onJoinButtonClicked={this.onJoinButtonClicked}
                     onRejectButtonClicked={
                         this.props.threepidInvite
@@ -2219,7 +2219,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         const auxPanel = (
             <AuxPanel
                 room={this.state.room}
-                userId={this.context.client.credentials.userId}
+                userId={this.context.client.getSafeUserId()}
                 showApps={this.state.showApps}
                 resizeNotifier={this.props.resizeNotifier}
             >
@@ -2329,7 +2329,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                 permalinkCreator={this.permalinkCreator}
                 e2eStatus={this.state.e2eStatus}
             />
-        ) : null;
+        ) : undefined;
 
         const timelineClasses = classNames("mx_RoomView_timeline", {
             mx_RoomView_timeline_rr_enabled: this.state.showReadReceipts,
@@ -2343,14 +2343,16 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         const showChatEffects = SettingsStore.getValue("showChatEffects");
 
         let mainSplitBody: JSX.Element | undefined;
-        let mainSplitContentClassName: string;
+        let mainSplitContentClassName: string | undefined;
         // Decide what to show in the main split
         switch (this.state.mainSplitContentType) {
             case MainSplitContentType.Timeline:
                 mainSplitContentClassName = "mx_MainSplit_timeline";
                 mainSplitBody = (
                     <>
-                        <Measured sensor={this.roomViewBody.current} onMeasurement={this.onMeasurement} />
+                        {this.roomViewBody.current && (
+                            <Measured sensor={this.roomViewBody.current} onMeasurement={this.onMeasurement} />
+                        )}
                         {auxPanel}
                         <div className={timelineClasses}>
                             <FileDropTarget parent={this.roomView.current} onFileDrop={this.onFileDrop} />
@@ -2371,7 +2373,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                     <>
                         <AppsDrawer
                             room={this.state.room}
-                            userId={this.context.client.credentials.userId}
+                            userId={this.context.client.getSafeUserId()}
                             resizeNotifier={this.props.resizeNotifier}
                             showApps={true}
                         />
@@ -2425,7 +2427,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                 onAppsClick = null;
                 onForgetClick = null;
                 onSearchClick = null;
-                if (this.state.room.canInvite(this.context.client.credentials.userId)) {
+                if (this.state.room.canInvite(this.context.client.getSafeUserId())) {
                     onInviteClick = this.onInviteClick;
                 }
                 viewingCall = true;