Conform more of the code base to strict null checking (#10147)

* Conform more of the code base to strict null checking

* More strict fixes

* More strict work

* Fix missing optional type

* Iterate

src/components/views/rooms/AppsDrawer.tsx

@@ -219,7 +219,7 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (!this.props.showApps) return <div />;
         const widgetIsMaxmised: boolean = this.centerApps().length > 0;
         const appsToDisplay = widgetIsMaxmised ? this.centerApps() : this.topApps();

src/components/views/rooms/Autocomplete.tsx

@@ -280,7 +280,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
         }
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let position = 1;
         const renderedCompletions = this.state.completions
             .map((completionResult, i) => {

src/components/views/rooms/AuxPanel.tsx

@@ -125,7 +125,7 @@ export default class AuxPanel extends React.Component<IProps, IState> {
         return counters;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const callView = (
             <LegacyCallViewForRoom
                 roomId={this.props.room.roomId}

src/components/views/rooms/BasicMessageComposer.tsx

@@ -749,7 +749,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         formatRange(range, action);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let autoComplete;
         if (this.state.autoComplete) {
             const query = this.state.query;

src/components/views/rooms/EditMessageComposer.tsx

@@ -446,7 +446,7 @@ class EditMessageComposer extends React.Component<IEditMessageComposerProps, ISt
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <div className={classNames("mx_EditMessageComposer", this.props.className)} onKeyDown={this.onKeyDown}>
                 <BasicMessageComposer

src/components/views/rooms/EntityTile.tsx

@@ -105,7 +105,7 @@ export default class EntityTile extends React.PureComponent<IProps, IState> {
         };
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const mainClassNames: Record<string, boolean> = {
             mx_EntityTile: true,
             mx_EntityTile_noHover: this.props.suppressOnHover,

src/components/views/rooms/EventTile.tsx

@@ -873,7 +873,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
         );
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const msgtype = this.props.mxEvent.getContent().msgtype;
         const eventType = this.props.mxEvent.getType();
         const {
@@ -1488,7 +1488,7 @@ class E2ePadlock extends React.Component<IE2ePadlockProps, IE2ePadlockState> {
         this.setState({ hover: false });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let tooltip = null;
         if (this.state.hover) {
             tooltip = <Tooltip className="mx_EventTile_e2eIcon_tooltip" label={this.props.title} />;

src/components/views/rooms/LinkPreviewWidget.tsx

@@ -70,7 +70,7 @@ export default class LinkPreviewWidget extends React.Component<IProps> {
         Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const p = this.props.preview;
         if (!p || Object.keys(p).length === 0) {
             return <div />;

src/components/views/rooms/MemberList.tsx

@@ -361,7 +361,7 @@ export default class MemberList extends React.Component<IProps, IState> {
         return this.state.filteredInvitedMembers.length + (this.getPending3PidInvites() || []).length;
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.state.loading) {
             return (
                 <BaseCard className="mx_MemberList" onClose={this.props.onClose}>

src/components/views/rooms/MemberTile.tsx

@@ -184,7 +184,7 @@ export default class MemberTile extends React.Component<IProps, IState> {
         }).trim();
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const member = this.props.member;
         const name = this.getDisplayName();
         const presenceState = member.user?.presence ?? null;

src/components/views/rooms/MessageComposer.tsx

@@ -465,7 +465,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const hasE2EIcon = Boolean(!this.state.isWysiwygLabEnabled && this.props.e2eStatus);
         const e2eIcon = hasE2EIcon && (
             <E2EIcon key="e2eIcon" status={this.props.e2eStatus} className="mx_MessageComposer_e2eIcon" />

src/components/views/rooms/MessageComposerButtons.tsx

@@ -330,7 +330,7 @@ class PollButton extends React.PureComponent<IPollButtonProps> {
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         // do not allow sending polls within threads at this time
         if (this.props.relation?.rel_type === THREAD_RELATION_TYPE.name) return null;
 

src/components/views/rooms/MessageComposerFormatBar.tsx

@@ -46,7 +46,7 @@ export default class MessageComposerFormatBar extends React.PureComponent<IProps
         this.state = { visible: false };
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const classes = classNames("mx_MessageComposerFormatBar", {
             mx_MessageComposerFormatBar_shown: this.state.visible,
         });
@@ -124,7 +124,7 @@ interface IFormatButtonProps {
 }
 
 class FormatButton extends React.PureComponent<IFormatButtonProps> {
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const className = `mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIcon${this.props.icon}`;
         let shortcut;
         if (this.props.shortcut) {

src/components/views/rooms/PinnedEventTile.tsx

@@ -68,7 +68,7 @@ export default class PinnedEventTile extends React.Component<IProps> {
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const sender = this.props.event.getSender();
 
         let unpinButton = null;

src/components/views/rooms/PresenceLabel.tsx

@@ -81,7 +81,7 @@ export default class PresenceLabel extends React.Component<IProps> {
         }
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <div className="mx_PresenceLabel">
                 {this.getPrettyPresence(this.props.presenceState, this.props.activeAgo, this.props.currentlyActive)}

src/components/views/rooms/ReadReceiptMarker.tsx

@@ -197,7 +197,7 @@ export default class ReadReceiptMarker extends React.PureComponent<IProps, IStat
         });
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.state.suppressDisplay) {
             return <div ref={this.avatar as RefObject<HTMLDivElement>} />;
         }

src/components/views/rooms/ReplyTile.tsx

@@ -104,7 +104,7 @@ export default class ReplyTile extends React.PureComponent<IProps> {
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const mxEvent = this.props.mxEvent;
         const msgType = mxEvent.getContent().msgtype;
         const evType = mxEvent.getType();

src/components/views/rooms/RoomHeader.tsx

@@ -715,7 +715,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
         return <div className="mx_RoomHeader_name mx_RoomHeader_name--textonly">{roomName}</div>;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const isVideoRoom = SettingsStore.getValue("feature_video_rooms") && calcIsVideoRoom(this.props.room);
 
         let roomAvatar: JSX.Element | null = null;

src/components/views/rooms/RoomList.tsx

@@ -687,7 +687,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
         [...treeItems].find((e) => e.offsetParent !== null)?.focus();
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const sublists = this.renderSublists();
         return (
             <RovingTabIndexProvider handleHomeEnd handleUpDown onKeyDown={this.props.onKeyDown}>

src/components/views/rooms/RoomPreviewBar.tsx

@@ -270,7 +270,7 @@ export default class RoomPreviewBar extends React.Component<IProps, IState> {
         dis.dispatch({ action: "start_registration", screenAfterLogin: this.makeScreenAfterLogin() });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const brand = SdkConfig.get().brand;
         const roomName = this.props.room?.name ?? this.props.roomAlias ?? "";
         const isSpace = this.props.room?.isSpaceRoom() ?? this.props.oobData?.roomType === RoomType.Space;

src/components/views/rooms/RoomUpgradeWarningBar.tsx

@@ -69,7 +69,7 @@ export default class RoomUpgradeWarningBar extends React.PureComponent<IProps, I
         Modal.createDialog(RoomUpgradeDialog, { room: this.props.room });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let doUpgradeWarnings = (
             <div>
                 <div className="mx_RoomUpgradeWarningBar_body">

src/components/views/rooms/SearchBar.tsx

@@ -82,7 +82,7 @@ export default class SearchBar extends React.Component<IProps, IState> {
         this.props.onSearch(this.searchTerm.current.value, this.state.scope);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const searchButtonClasses = classNames("mx_SearchBar_searchButton", {
             mx_SearchBar_searching: this.props.searchInProgress,
         });

src/components/views/rooms/SearchResultTile.tsx

@@ -58,7 +58,7 @@ export default class SearchResultTile extends React.Component<IProps> {
         this.callEventGroupers = buildLegacyCallEventGroupers(this.callEventGroupers, events);
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const timeline = this.props.timeline;
         const resultEvent = timeline[this.props.ourEventsIndexes[0]];
         const eventId = resultEvent.getId();

src/components/views/rooms/SendMessageComposer.tsx

@@ -573,7 +573,7 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
         this.editorRef.current?.focus();
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const threadId =
             this.props.relation?.rel_type === THREAD_RELATION_TYPE.name ? this.props.relation.event_id : null;
         return (

src/components/views/rooms/Stickerpicker.tsx

@@ -351,7 +351,7 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
             .open(this.props.room, `type_${WidgetType.STICKERPICKER.preferred}`, this.state.widgetId);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (!this.props.isStickerPickerOpen) return null;
 
         return (

src/components/views/rooms/ThirdPartyMemberInfo.tsx

@@ -120,7 +120,7 @@ export default class ThirdPartyMemberInfo extends React.Component<IProps, IState
         this.setState({ invited: false });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let adminTools = null;
         if (this.state.canKick && this.state.invited) {
             adminTools = (

src/components/views/rooms/TopUnreadMessagesBar.tsx

@@ -25,7 +25,7 @@ interface IProps {
 }
 
 export default class TopUnreadMessagesBar extends React.PureComponent<IProps> {
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <div className="mx_TopUnreadMessagesBar">
                 <AccessibleButton

src/components/views/rooms/WhoIsTypingTile.tsx

@@ -199,7 +199,7 @@ export default class WhoIsTypingTile extends React.Component<IProps, IState> {
         return avatars;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let usersTyping = this.state.usersTyping;
         const stoppedUsersOnTimer = Object.keys(this.state.delayedStopTypingTimers).map((userId) =>
             this.props.room.getMember(userId),