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/messages/DateSeparator.tsx

@@ -218,7 +218,7 @@ export default class DateSeparator extends React.Component<IProps, IState> {
         );
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const label = this.getLabel();
 
         let dateHeaderContent;

src/components/views/messages/DisambiguatedProfile.tsx

@@ -33,7 +33,7 @@ interface IProps {
 }
 
 export default class DisambiguatedProfile extends React.Component<IProps> {
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const { fallbackName, member, colored, emphasizeDisplayName, withTooltip, onClick } = this.props;
         const rawDisplayName = member?.rawDisplayName || fallbackName;
         const mxid = member?.userId;

src/components/views/messages/DownloadActionButton.tsx

@@ -79,7 +79,7 @@ export default class DownloadActionButton extends React.PureComponent<IProps, IS
         this.setState({ loading: false });
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         let spinner: JSX.Element;
         if (this.state.loading) {
             spinner = <Spinner w={18} h={18} />;

src/components/views/messages/EditHistoryMessage.tsx

@@ -152,7 +152,7 @@ export default class EditHistoryMessage extends React.PureComponent<IProps, ISta
         );
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const { mxEvent } = this.props;
         const content = getReplacedContent(mxEvent);
         let contentContainer;

src/components/views/messages/LegacyCallEvent.tsx

@@ -261,7 +261,7 @@ export default class LegacyCallEvent extends React.PureComponent<IProps, IState>
         );
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const event = this.props.mxEvent;
         const sender = event.sender ? event.sender.name : event.getSender();
         const isVoice = this.props.callEventGrouper.isVoice;

src/components/views/messages/MAudioBody.tsx

@@ -94,7 +94,7 @@ export default class MAudioBody extends React.PureComponent<IBodyProps, IState>
         );
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.state.error) {
             return (
                 <MediaProcessingError className="mx_MAudioBody">

src/components/views/messages/MFileBody.tsx

@@ -194,7 +194,7 @@ export default class MFileBody extends React.Component<IProps, IState> {
         }
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const isEncrypted = this.props.mediaEventHelper?.media.isEncrypted;
         const contentUrl = this.getContentUrl();
         const fileSize = this.content.info ? this.content.info.size : null;

src/components/views/messages/MImageBody.tsx

@@ -562,7 +562,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         }
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const content = this.props.mxEvent.getContent<IMediaEventContent>();
 
         if (this.state.error) {
@@ -605,7 +605,7 @@ interface PlaceholderIProps {
 }
 
 export class HiddenImagePlaceholder extends React.PureComponent<PlaceholderIProps> {
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const maxWidth = this.props.maxWidth ? this.props.maxWidth + "px" : null;
         let className = "mx_HiddenImagePlaceholder";
         if (this.props.hover) className += " mx_HiddenImagePlaceholder_hover";

src/components/views/messages/MImageReplyBody.tsx

@@ -30,7 +30,7 @@ export default class MImageReplyBody extends MImageBody {
         return children;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.state.error) {
             return super.render();
         }

src/components/views/messages/MJitsiWidgetEvent.tsx

@@ -33,7 +33,7 @@ export default class MJitsiWidgetEvent extends React.PureComponent<IProps> {
         super(props);
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const url = this.props.mxEvent.getContent()["url"];
         const prevUrl = this.props.mxEvent.getPrevContent()["url"];
         const senderName = this.props.mxEvent.sender?.name || this.props.mxEvent.getSender();

src/components/views/messages/MKeyVerificationRequest.tsx

@@ -114,7 +114,7 @@ export default class MKeyVerificationRequest extends React.Component<IProps> {
         }
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const { mxEvent } = this.props;
         const request = mxEvent.verificationRequest;
 

src/components/views/messages/MVideoBody.tsx

@@ -232,7 +232,7 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
         return this.showFileBody && <MFileBody {...this.props} showGenericPlaceholder={false} />;
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const content = this.props.mxEvent.getContent();
         const autoplay = SettingsStore.getValue("autoplayVideo");
 

src/components/views/messages/MVoiceMessageBody.tsx

@@ -25,7 +25,7 @@ import MediaProcessingError from "./shared/MediaProcessingError";
 
 export default class MVoiceMessageBody extends MAudioBody {
     // A voice message is an audio file but rendered in a special way.
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.state.error) {
             return (
                 <MediaProcessingError className="mx_MVoiceMessageBody">

src/components/views/messages/MVoiceOrAudioBody.tsx

@@ -22,7 +22,7 @@ import { IBodyProps } from "./IBodyProps";
 import { isVoiceMessage } from "../../../utils/EventUtils";
 
 export default class MVoiceOrAudioBody extends React.PureComponent<IBodyProps> {
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (!this.props.forExport && isVoiceMessage(this.props.mxEvent)) {
             return <MVoiceMessageBody {...this.props} />;
         } else {

src/components/views/messages/MessageActionBar.tsx

@@ -440,7 +440,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
         );
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const toolbarOpts = [];
         if (canEditContent(this.props.mxEvent)) {
             toolbarOpts.push(

src/components/views/messages/MessageEvent.tsx

@@ -149,7 +149,7 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
         this.forceUpdate();
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const content = this.props.mxEvent.getContent();
         const type = this.props.mxEvent.getType();
         const msgtype = content.msgtype;

src/components/views/messages/MessageTimestamp.tsx

@@ -28,7 +28,7 @@ interface IProps {
 }
 
 export default class MessageTimestamp extends React.Component<IProps> {
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const date = new Date(this.props.ts);
         let timestamp;
         if (this.props.showRelative) {

src/components/views/messages/MjolnirBody.tsx

@@ -35,7 +35,7 @@ export default class MjolnirBody extends React.Component<IProps> {
         this.props.onMessageAllowed();
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         return (
             <div className="mx_MjolnirBody">
                 <i>

src/components/views/messages/ReactionsRow.tsx

@@ -161,7 +161,7 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const { mxEvent, reactions } = this.props;
         const { myReactions, showAll } = this.state;
 

src/components/views/messages/ReactionsRowButton.tsx

@@ -85,7 +85,7 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
         });
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const { mxEvent, content, count, reactionEvents, myReactionEvent } = this.props;
 
         const classes = classNames({

src/components/views/messages/ReactionsRowButtonTooltip.tsx

@@ -37,7 +37,7 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent<IProp
     public static contextType = MatrixClientContext;
     public context!: React.ContextType<typeof MatrixClientContext>;
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const { content, reactionEvents, mxEvent, visible } = this.props;
 
         const room = this.context.getRoom(mxEvent.getRoomId());

src/components/views/messages/RoomAvatarEvent.tsx

@@ -51,7 +51,7 @@ export default class RoomAvatarEvent extends React.Component<IProps> {
         Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", null, true);
     };
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const ev = this.props.mxEvent;
         const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
 

src/components/views/messages/TextualBody.tsx

@@ -562,7 +562,7 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         return <span className="mx_EventTile_pendingModeration">{`(${text})`}</span>;
     }
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         if (this.props.editState) {
             const isWysiwygComposerEnabled = SettingsStore.getValue("feature_wysiwyg_composer");
             return isWysiwygComposerEnabled ? (

src/components/views/messages/TextualEvent.tsx

@@ -27,7 +27,7 @@ interface IProps {
 export default class TextualEvent extends React.Component<IProps> {
     public static contextType = RoomContext;
 
-    public render(): JSX.Element {
+    public render(): React.ReactNode {
         const text = TextForEvent.textForEvent(this.props.mxEvent, true, this.context?.showHiddenEvents);
         if (!text) return null;
         return <div className="mx_TextualEvent">{text}</div>;