Conform more of the codebase to strict typescript (#10841)

src/IdentityAuthClient.tsx

@@ -64,7 +64,11 @@ export default class IdentityAuthClient {
 
     private writeToken(): void {
         if (this.tempClient) return; // temporary client: ignore
-        window.localStorage.setItem("mx_is_access_token", this.accessToken);
+        if (this.accessToken) {
+            window.localStorage.setItem("mx_is_access_token", this.accessToken);
+        } else {
+            window.localStorage.removeItem("mx_is_access_token");
+        }
     }
 
     private readToken(): string | null {

src/components/structures/RightPanel.tsx

@@ -44,26 +44,37 @@ import TimelineCard from "../views/right_panel/TimelineCard";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import { IRightPanelCard, IRightPanelCardState } from "../../stores/right-panel/RightPanelStoreIPanelState";
 import { Action } from "../../dispatcher/actions";
+import { XOR } from "../../@types/common";
 
-interface IProps {
+interface BaseProps {
-    room?: Room; // if showing panels for a given room, this is set
     overwriteCard?: IRightPanelCard; // used to display a custom card and ignoring the RightPanelStore (used for UserView)
     resizeNotifier: ResizeNotifier;
-    permalinkCreator?: RoomPermalinkCreator;
     e2eStatus?: E2EStatus;
 }
 
+interface RoomlessProps extends BaseProps {
+    room?: undefined;
+    permalinkCreator?: undefined;
+}
+
+interface RoomProps extends BaseProps {
+    room: Room;
+    permalinkCreator: RoomPermalinkCreator;
+}
+
+type Props = XOR<RoomlessProps, RoomProps>;
+
 interface IState {
     phase?: RightPanelPhases;
     searchQuery: string;
     cardState?: IRightPanelCardState;
 }
 
-export default class RightPanel extends React.Component<IProps, IState> {
+export default class RightPanel extends React.Component<Props, IState> {
     public static contextType = MatrixClientContext;
     public context!: React.ContextType<typeof MatrixClientContext>;
 
-    public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
+    public constructor(props: Props, context: React.ContextType<typeof MatrixClientContext>) {
         super(props, context);
 
         this.state = {
@@ -89,7 +100,7 @@ export default class RightPanel extends React.Component<IProps, IState> {
         RightPanelStore.instance.off(UPDATE_EVENT, this.onRightPanelStoreUpdate);
     }
 
-    public static getDerivedStateFromProps(props: IProps): Partial<IState> {
+    public static getDerivedStateFromProps(props: Props): Partial<IState> {
         let currentCard: IRightPanelCard | undefined;
         if (props.room) {
             currentCard = RightPanelStore.instance.currentCardForRoom(props.room.roomId);
@@ -169,32 +180,36 @@ export default class RightPanel extends React.Component<IProps, IState> {
                 }
                 break;
             case RightPanelPhases.SpaceMemberList:
-                card = (
+                if (!!cardState?.spaceId || !!roomId) {
-                    <MemberList
+                    card = (
-                        roomId={cardState?.spaceId ?? roomId}
+                        <MemberList
-                        key={cardState?.spaceId ?? roomId}
+                            roomId={cardState?.spaceId ?? roomId!}
-                        onClose={this.onClose}
+                            key={cardState?.spaceId ?? roomId!}
-                        searchQuery={this.state.searchQuery}
+                            onClose={this.onClose}
-                        onSearchQueryChanged={this.onSearchQueryChanged}
+                            searchQuery={this.state.searchQuery}
-                    />
+                            onSearchQueryChanged={this.onSearchQueryChanged}
-                );
+                        />
+                    );
+                }
                 break;
 
             case RightPanelPhases.RoomMemberInfo:
             case RightPanelPhases.SpaceMemberInfo:
             case RightPanelPhases.EncryptionPanel: {
-                const roomMember = cardState?.member instanceof RoomMember ? cardState.member : undefined;
+                if (!!cardState?.member) {
-                card = (
+                    const roomMember = cardState.member instanceof RoomMember ? cardState.member : undefined;
-                    <UserInfo
+                    card = (
-                        user={cardState?.member}
+                        <UserInfo
-                        room={this.context.getRoom(roomMember?.roomId) ?? this.props.room}
+                            user={cardState.member}
-                        key={roomId ?? cardState?.member?.userId}
+                            room={this.context.getRoom(roomMember?.roomId) ?? this.props.room}
-                        onClose={this.onClose}
+                            key={roomId ?? cardState.member.userId}
-                        phase={phase}
+                            onClose={this.onClose}
-                        verificationRequest={cardState?.verificationRequest}
+                            phase={phase}
-                        verificationRequestPromise={cardState?.verificationRequestPromise}
+                            verificationRequest={cardState.verificationRequest}
-                    />
+                            verificationRequestPromise={cardState.verificationRequestPromise}
-                );
+                        />
+                    );
+                }
                 break;
             }
             case RightPanelPhases.Room3pidMemberInfo:
@@ -261,10 +276,10 @@ export default class RightPanel extends React.Component<IProps, IState> {
                 break;
 
             case RightPanelPhases.ThreadPanel:
-                if (!!roomId) {
+                if (!!this.props.room) {
                     card = (
                         <ThreadPanel
-                            roomId={roomId}
+                            roomId={this.props.room.roomId}
                             resizeNotifier={this.props.resizeNotifier}
                             onClose={this.onClose}
                             permalinkCreator={this.props.permalinkCreator}

src/components/structures/RoomView.tsx

@@ -1488,6 +1488,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
     // rate limited because a power level change will emit an event for every member in the room.
     private updateRoomMembers = throttle(
         () => {
+            if (!this.state.room) return;
             this.updateDMState();
             this.updateE2EStatus(this.state.room);
         },

src/components/structures/TimelinePanel.tsx

@@ -740,7 +740,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
 
         if (!this.messagePanel.current?.getScrollState()) return;
 
-        if (!this.messagePanel.current.getScrollState().stuckAtBottom) {
+        if (!this.messagePanel.current.getScrollState()?.stuckAtBottom) {
             // we won't load this event now, because we don't want to push any
             // events off the other end of the timeline. But we need to note
             // that we can now paginate.
@@ -981,7 +981,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
         { leading: true, trailing: true },
     );
 
-    private readMarkerTimeout(readMarkerPosition: number): number {
+    private readMarkerTimeout(readMarkerPosition: number | null): number {
         return readMarkerPosition === 0
             ? this.context?.readMarkerInViewThresholdMs ?? this.state.readMarkerInViewThresholdMs
             : this.context?.readMarkerOutOfViewThresholdMs ?? this.state.readMarkerOutOfViewThresholdMs;

src/components/views/dialogs/VerificationRequestDialog.tsx

@@ -51,6 +51,8 @@ export default class VerificationRequestDialog extends React.Component<IProps, I
         const member = this.props.member || (otherUserId ? MatrixClientPeg.get().getUser(otherUserId) : null);
         const title = request?.isSelfVerification ? _t("Verify other device") : _t("Verification Request");
 
+        if (!member) return null;
+
         return (
             <BaseDialog
                 className="mx_InfoDialog"

src/components/views/rooms/EditMessageComposer.tsx

@@ -152,13 +152,10 @@ class EditMessageComposer extends React.Component<IEditMessageComposerProps, ISt
     }
 
     private getRoom(): Room {
-        const roomId = this.props.editState.getEvent().getRoomId();
+        if (!this.context.room) {
-        const room = this.props.mxClient.getRoom(roomId);
+            throw new Error(`Cannot render without room`);
-        // Something is very wrong if we encounter this
-        if (!room) {
-            throw new Error(`Cannot find room for event ${roomId}`);
         }
-        return room;
+        return this.context.room;
     }
 
     private onKeyDown = (event: KeyboardEvent): void => {

src/components/views/rooms/NotificationBadge.tsx

@@ -126,19 +126,23 @@ export default class NotificationBadge extends React.PureComponent<XOR<IProps, I
             tooltip = <Tooltip className="mx_NotificationBadge_tooltip" label={label} />;
         }
 
-        return (
+        const commonProps: React.ComponentProps<typeof StatelessNotificationBadge> = {
-            <StatelessNotificationBadge
+            label,
-                label={label}
+            symbol: notification.symbol,
-                symbol={notification.symbol}
+            count: notification.count,
-                count={notification.count}
+            color: notification.color,
-                color={notification.color}
+            onMouseOver: this.onMouseOver,
-                onClick={onClick}
+            onMouseLeave: this.onMouseLeave,
-                onMouseOver={this.onMouseOver}
+        };
-                onMouseLeave={this.onMouseLeave}
+
-                tabIndex={tabIndex}
+        if (onClick) {
-            >
+            return (
-                {tooltip}
+                <StatelessNotificationBadge {...commonProps} onClick={onClick} tabIndex={tabIndex}>
-            </StatelessNotificationBadge>
+                    {tooltip}
-        );
+                </StatelessNotificationBadge>
+            );
+        }
+
+        return <StatelessNotificationBadge {...commonProps}>{tooltip}</StatelessNotificationBadge>;
     }
 }

src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx

@@ -74,7 +74,7 @@ const KeyboardUserSettingsTab: React.FC = () => {
     return (
         <SettingsTab>
             <SettingsSection heading={_t("Keyboard")}>
-                {visibleCategories.map(([categoryName, category]: [CategoryName, ICategory]) => {
+                {visibleCategories.map(([categoryName, category]) => {
                     return (
                         <KeyboardShortcutSection key={categoryName} categoryName={categoryName} category={category} />
                     );

src/stores/CallStore.ts

@@ -146,7 +146,7 @@ export class CallStore extends AsyncStoreWithClient<{}> {
                 this.calls.set(room.roomId, call);
                 this.callListeners.set(
                     call,
-                    new Map<CallEvent, (...args: unknown[]) => unknown>([
+                    new Map<CallEvent, (...args: any[]) => unknown>([
                         [CallEvent.ConnectionState, onConnectionState],
                         [CallEvent.Destroy, onDestroy],
                     ]),

src/stores/RoomScrollStateStore.ts

@@ -42,8 +42,12 @@ export class RoomScrollStateStore {
         return this.scrollStateMap.get(roomId);
     }
 
-    public setScrollState(roomId: string, scrollState: ScrollState): void {
+    public setScrollState(roomId: string, scrollState: ScrollState | null): void {
-        this.scrollStateMap.set(roomId, scrollState);
+        if (scrollState === null) {
+            this.scrollStateMap.delete(roomId);
+        } else {
+            this.scrollStateMap.set(roomId, scrollState);
+        }
     }
 }
 

src/utils/FormattingUtils.ts

@@ -75,10 +75,10 @@ export function formatCryptoKey(key: string): string {
  *
  * @return {number}
  */
-export function hashCode(str: string): number {
+export function hashCode(str?: string): number {
     let hash = 0;
     let chr: number;
-    if (str.length === 0) {
+    if (!str?.length) {
         return hash;
     }
     for (let i = 0; i < str.length; i++) {
@@ -89,7 +89,7 @@ export function hashCode(str: string): number {
     return Math.abs(hash);
 }
 
-export function getUserNameColorClass(userId: string): string {
+export function getUserNameColorClass(userId?: string): string {
     const colorNumber = (hashCode(userId) % 8) + 1;
     return `mx_Username_color${colorNumber}`;
 }

test/components/views/rooms/EditMessageComposer-test.tsx

@@ -151,7 +151,9 @@ describe("<EditMessageComposer/>", () => {
     it("should throw when room for message is not found", () => {
         mockClient.getRoom.mockReturnValue(null);
         const editState = new EditorStateTransfer(editedEvent);
-        expect(() => getComponent(editState)).toThrow("Cannot find room for event !abc:test");
+        expect(() => getComponent(editState, { ...defaultRoomContext, room: undefined })).toThrow(
+            "Cannot render without room",
+        );
     });
 
     describe("createEditContent", () => {