Enable @typescript-eslint/explicit-function-return-type in /src (#9788)

* Enable `@typescript-eslint/explicit-member-accessibility` on /src

* Prettier

* Enable `@typescript-eslint/explicit-function-return-type` in /src

* Fix types

* tsc strict fixes

* Delint

* Fix test

* Fix bad merge

src/components/views/audio_messages/AudioPlayerBase.tsx

@@ -61,7 +61,7 @@ export default abstract class AudioPlayerBase<T extends IProps = IProps> extends
         });
     }
 
-    protected onKeyDown = (ev: React.KeyboardEvent) => {
+    protected onKeyDown = (ev: React.KeyboardEvent): void => {
         let handled = true;
         const action = getKeyBindingsManager().getAccessibilityAction(ev);
 
@@ -88,7 +88,7 @@ export default abstract class AudioPlayerBase<T extends IProps = IProps> extends
         }
     };
 
-    private onPlaybackUpdate = (ev: PlaybackState) => {
+    private onPlaybackUpdate = (ev: PlaybackState): void => {
         this.setState({ playbackPhase: ev });
     };
 

src/components/views/audio_messages/Clock.tsx

@@ -43,7 +43,7 @@ export default class Clock extends React.Component<Props> {
         return currentFloor !== nextFloor;
     }
 
-    public render() {
+    public render(): JSX.Element {
         return (
             <span aria-live={this.props["aria-live"]} role={this.props.role} className="mx_Clock">
                 {this.props.formatFn(this.props.seconds)}

src/components/views/audio_messages/DurationClock.tsx

@@ -44,11 +44,11 @@ export default class DurationClock extends React.PureComponent<IProps, IState> {
         this.props.playback.clockInfo.liveData.onUpdate(this.onTimeUpdate);
     }
 
-    private onTimeUpdate = (time: number[]) => {
+    private onTimeUpdate = (time: number[]): void => {
         this.setState({ durationSeconds: time[1] });
     };
 
-    public render() {
+    public render(): JSX.Element {
         return <Clock seconds={this.state.durationSeconds} />;
     }
 }

src/components/views/audio_messages/LiveRecordingClock.tsx

@@ -46,20 +46,20 @@ export default class LiveRecordingClock extends React.PureComponent<IProps, ISta
         };
     }
 
-    public componentDidMount() {
+    public componentDidMount(): void {
         this.props.recorder.liveData.onUpdate((update: IRecordingUpdate) => {
             this.seconds = update.timeSeconds;
             this.scheduledUpdate.mark();
         });
     }
 
-    private updateClock() {
+    private updateClock(): void {
         this.setState({
             seconds: this.seconds,
         });
     }
 
-    public render() {
+    public render(): JSX.Element {
         return <Clock seconds={this.state.seconds} aria-live="off" />;
     }
 }

src/components/views/audio_messages/LiveRecordingWaveform.tsx

@@ -51,7 +51,7 @@ export default class LiveRecordingWaveform extends React.PureComponent<IProps, I
         };
     }
 
-    public componentDidMount() {
+    public componentDidMount(): void {
         this.props.recorder.liveData.onUpdate((update: IRecordingUpdate) => {
             // The incoming data is between zero and one, so we don't need to clamp/rescale it.
             this.waveform = arrayFastResample(Array.from(update.waveform), RECORDING_PLAYBACK_SAMPLES);
@@ -59,11 +59,11 @@ export default class LiveRecordingWaveform extends React.PureComponent<IProps, I
         });
     }
 
-    private updateWaveform() {
+    private updateWaveform(): void {
         this.setState({ waveform: this.waveform });
     }
 
-    public render() {
+    public render(): JSX.Element {
         return <Waveform relHeights={this.state.waveform} />;
     }
 }

src/components/views/audio_messages/PlayPauseButton.tsx

@@ -39,12 +39,12 @@ export default class PlayPauseButton extends React.PureComponent<IProps> {
         super(props);
     }
 
-    private onClick = () => {
+    private onClick = (): void => {
         // noinspection JSIgnoredPromiseFromCall
         this.toggleState();
     };
 
-    public async toggleState() {
+    public async toggleState(): Promise<void> {
         await this.props.playback.toggle();
     }
 

src/components/views/audio_messages/PlaybackClock.tsx

@@ -55,17 +55,17 @@ export default class PlaybackClock extends React.PureComponent<IProps, IState> {
         this.props.playback.clockInfo.liveData.onUpdate(this.onTimeUpdate);
     }
 
-    private onPlaybackUpdate = (ev: PlaybackState) => {
+    private onPlaybackUpdate = (ev: PlaybackState): void => {
         // Convert Decoding -> Stopped because we don't care about the distinction here
         if (ev === PlaybackState.Decoding) ev = PlaybackState.Stopped;
         this.setState({ playbackPhase: ev });
     };
 
-    private onTimeUpdate = (time: number[]) => {
+    private onTimeUpdate = (time: number[]): void => {
         this.setState({ seconds: time[0], durationSeconds: time[1] });
     };
 
-    public render() {
+    public render(): JSX.Element {
         let seconds = this.state.seconds;
         if (this.state.playbackPhase === PlaybackState.Stopped) {
             if (Number.isFinite(this.props.defaultDisplaySeconds)) {

src/components/views/audio_messages/PlaybackWaveform.tsx

@@ -46,22 +46,22 @@ export default class PlaybackWaveform extends React.PureComponent<IProps, IState
         this.props.playback.clockInfo.liveData.onUpdate(this.onTimeUpdate);
     }
 
-    private toHeights(waveform: number[]) {
+    private toHeights(waveform: number[]): number[] {
         const seed = arraySeed(0, PLAYBACK_WAVEFORM_SAMPLES);
         return arrayTrimFill(waveform, PLAYBACK_WAVEFORM_SAMPLES, seed);
     }
 
-    private onWaveformUpdate = (waveform: number[]) => {
+    private onWaveformUpdate = (waveform: number[]): void => {
         this.setState({ heights: this.toHeights(waveform) });
     };
 
-    private onTimeUpdate = (time: number[]) => {
+    private onTimeUpdate = (time: number[]): void => {
         // Track percentages to a general precision to avoid over-waking the component.
         const progress = Number(percentageOf(time[0], 0, time[1]).toFixed(3));
         this.setState({ progress });
     };
 
-    public render() {
+    public render(): JSX.Element {
         return <Waveform relHeights={this.state.heights} progress={this.state.progress} />;
     }
 }

src/components/views/audio_messages/SeekBar.tsx

@@ -67,23 +67,23 @@ export default class SeekBar extends React.PureComponent<IProps, IState> {
         this.props.playback.liveData.onUpdate(() => this.animationFrameFn.mark());
     }
 
-    private doUpdate() {
+    private doUpdate(): void {
         this.setState({
             percentage: percentageOf(this.props.playback.timeSeconds, 0, this.props.playback.durationSeconds),
         });
     }
 
-    public left() {
+    public left(): void {
         // noinspection JSIgnoredPromiseFromCall
         this.props.playback.skipTo(this.props.playback.timeSeconds - ARROW_SKIP_SECONDS);
     }
 
-    public right() {
+    public right(): void {
         // noinspection JSIgnoredPromiseFromCall
         this.props.playback.skipTo(this.props.playback.timeSeconds + ARROW_SKIP_SECONDS);
     }
 
-    private onChange = (ev: ChangeEvent<HTMLInputElement>) => {
+    private onChange = (ev: ChangeEvent<HTMLInputElement>): void => {
         // Thankfully, onChange is only called when the user changes the value, not when we
         // change the value on the component. We can use this as a reliable "skip to X" function.
         //
@@ -91,7 +91,7 @@ export default class SeekBar extends React.PureComponent<IProps, IState> {
         this.props.playback.skipTo(Number(ev.target.value) * this.props.playback.durationSeconds);
     };
 
-    private onMouseDown = (event: React.MouseEvent<Element, MouseEvent>) => {
+    private onMouseDown = (event: React.MouseEvent<Element, MouseEvent>): void => {
         // do not propagate mouse down events, because these should be handled by the seekbar
         event.stopPropagation();
     };

src/components/views/audio_messages/Waveform.tsx

@@ -41,7 +41,7 @@ export default class Waveform extends React.PureComponent<IProps, IState> {
         progress: 1,
     };
 
-    public render() {
+    public render(): JSX.Element {
         return (
             <div className="mx_Waveform">
                 {this.props.relHeights.map((h, i) => {

src/components/views/auth/AuthBody.tsx

@@ -22,6 +22,6 @@ interface Props {
     flex?: boolean;
 }
 
-export default function AuthBody({ flex, className, children }: PropsWithChildren<Props>) {
+export default function AuthBody({ flex, className, children }: PropsWithChildren<Props>): JSX.Element {
     return <main className={classNames("mx_AuthBody", className, { mx_AuthBody_flex: flex })}>{children}</main>;
 }

src/components/views/auth/CaptchaForm.tsx

@@ -49,7 +49,7 @@ export default class CaptchaForm extends React.Component<ICaptchaFormProps, ICap
         };
     }
 
-    public componentDidMount() {
+    public componentDidMount(): void {
         // Just putting a script tag into the returned jsx doesn't work, annoyingly,
         // so we do this instead.
         if (this.isRecaptchaReady()) {
@@ -69,7 +69,7 @@ export default class CaptchaForm extends React.Component<ICaptchaFormProps, ICap
         }
     }
 
-    public componentWillUnmount() {
+    public componentWillUnmount(): void {
         this.resetRecaptcha();
     }
 
@@ -82,7 +82,7 @@ export default class CaptchaForm extends React.Component<ICaptchaFormProps, ICap
         );
     }
 
-    private renderRecaptcha(divId: string) {
+    private renderRecaptcha(divId: string): void {
         if (!this.isRecaptchaReady()) {
             logger.error("grecaptcha not loaded!");
             throw new Error("Recaptcha did not load successfully");
@@ -101,13 +101,13 @@ export default class CaptchaForm extends React.Component<ICaptchaFormProps, ICap
         });
     }
 
-    private resetRecaptcha() {
+    private resetRecaptcha(): void {
         if (this.captchaWidgetId) {
             global?.grecaptcha?.reset(this.captchaWidgetId);
         }
     }
 
-    private onCaptchaLoaded() {
+    private onCaptchaLoaded(): void {
         logger.log("Loaded recaptcha script.");
         try {
             this.renderRecaptcha(DIV_ID);
@@ -122,7 +122,7 @@ export default class CaptchaForm extends React.Component<ICaptchaFormProps, ICap
         }
     }
 
-    public render() {
+    public render(): JSX.Element {
         let error = null;
         if (this.state.errorText) {
             error = <div className="error">{this.state.errorText}</div>;

src/components/views/auth/EmailField.tsx

@@ -60,7 +60,7 @@ class EmailField extends PureComponent<IProps> {
         ],
     });
 
-    public onValidate = async (fieldState: IFieldState) => {
+    public onValidate = async (fieldState: IFieldState): Promise<IValidationResult> => {
         let validate = this.validate;
         if (this.props.validationRules) {
             validate = this.props.validationRules;
@@ -74,7 +74,7 @@ class EmailField extends PureComponent<IProps> {
         return result;
     };
 
-    public render() {
+    public render(): JSX.Element {
         return (
             <Field
                 id={this.props.id}

src/components/views/auth/InteractiveAuthEntryComponents.tsx

@@ -108,11 +108,11 @@ export class PasswordAuthEntry extends React.Component<IAuthEntryProps, IPasswor
         };
     }
 
-    public componentDidMount() {
+    public componentDidMount(): void {
         this.props.onPhaseChange(DEFAULT_PHASE);
     }
 
-    private onSubmit = (e: FormEvent) => {
+    private onSubmit = (e: FormEvent): void => {
         e.preventDefault();
         if (this.props.busy) return;
 
@@ -129,14 +129,14 @@ export class PasswordAuthEntry extends React.Component<IAuthEntryProps, IPasswor
         });
     };
 
-    private onPasswordFieldChange = (ev: ChangeEvent<HTMLInputElement>) => {
+    private onPasswordFieldChange = (ev: ChangeEvent<HTMLInputElement>): void => {
         // enable the submit button iff the password is non-empty
         this.setState({
             password: ev.target.value,
         });
     };
 
-    public render() {
+    public render(): JSX.Element {
         const passwordBoxClass = classNames({
             error: this.props.errorText,
         });
@@ -196,18 +196,18 @@ interface IRecaptchaAuthEntryProps extends IAuthEntryProps {
 export class RecaptchaAuthEntry extends React.Component<IRecaptchaAuthEntryProps> {
     public static LOGIN_TYPE = AuthType.Recaptcha;
 
-    public componentDidMount() {
+    public componentDidMount(): void {
         this.props.onPhaseChange(DEFAULT_PHASE);
     }
 
-    private onCaptchaResponse = (response: string) => {
+    private onCaptchaResponse = (response: string): void => {
         this.props.submitAuthDict({
             type: AuthType.Recaptcha,
             response: response,
         });
     };
 
-    public render() {
+    public render(): JSX.Element {
         if (this.props.busy) {
             return <Spinner />;
         }
@@ -320,11 +320,11 @@ export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITerms
         };
     }
 
-    public componentDidMount() {
+    public componentDidMount(): void {
         this.props.onPhaseChange(DEFAULT_PHASE);
     }
 
-    private togglePolicy(policyId: string) {
+    private togglePolicy(policyId: string): void {
         const newToggles = {};
         for (const policy of this.state.policies) {
             let checked = this.state.toggledPolicies[policy.id];
@@ -335,7 +335,7 @@ export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITerms
         this.setState({ toggledPolicies: newToggles });
     }
 
-    private trySubmit = () => {
+    private trySubmit = (): void => {
         let allChecked = true;
         for (const policy of this.state.policies) {
             const checked = this.state.toggledPolicies[policy.id];
@@ -349,7 +349,7 @@ export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITerms
         }
     };
 
-    public render() {
+    public render(): JSX.Element {
         if (this.props.busy) {
             return <Spinner />;
         }
@@ -434,11 +434,11 @@ export class EmailIdentityAuthEntry extends React.Component<
         };
     }
 
-    public componentDidMount() {
+    public componentDidMount(): void {
         this.props.onPhaseChange(DEFAULT_PHASE);
     }
 
-    public render() {
+    public render(): JSX.Element {
         let errorSection;
         // ignore the error when errcode is M_UNAUTHORIZED as we expect that error until the link is clicked.
         if (this.props.errorText && this.props.errorCode !== "M_UNAUTHORIZED") {
@@ -508,7 +508,7 @@ export class EmailIdentityAuthEntry extends React.Component<
                                                     ? () => this.setState({ requested: false })
                                                     : undefined
                                             }
-                                            onClick={async () => {
+                                            onClick={async (): Promise<void> => {
                                                 this.setState({ requesting: true });
                                                 try {
                                                     await this.props.requestEmailToken?.();
@@ -565,7 +565,7 @@ export class MsisdnAuthEntry extends React.Component<IMsisdnAuthEntryProps, IMsi
         };
     }
 
-    public componentDidMount() {
+    public componentDidMount(): void {
         this.props.onPhaseChange(DEFAULT_PHASE);
 
         this.setState({ requestingToken: true });
@@ -596,13 +596,13 @@ export class MsisdnAuthEntry extends React.Component<IMsisdnAuthEntryProps, IMsi
             });
     }
 
-    private onTokenChange = (e: ChangeEvent<HTMLInputElement>) => {
+    private onTokenChange = (e: ChangeEvent<HTMLInputElement>): void => {
         this.setState({
             token: e.target.value,
         });
     };
 
-    private onFormSubmit = async (e: FormEvent) => {
+    private onFormSubmit = async (e: FormEvent): Promise<void> => {
         e.preventDefault();
         if (this.state.token == "") return;
 
@@ -646,7 +646,7 @@ export class MsisdnAuthEntry extends React.Component<IMsisdnAuthEntryProps, IMsi
         }
     };
 
-    public render() {
+    public render(): JSX.Element {
         if (this.state.requestingToken) {
             return <Spinner />;
         } else {
@@ -729,11 +729,11 @@ export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEn
         };
     }
 
-    public componentDidMount() {
+    public componentDidMount(): void {
         this.props.onPhaseChange(SSOAuthEntry.PHASE_PREAUTH);
     }
 
-    public componentWillUnmount() {
+    public componentWillUnmount(): void {
         window.removeEventListener("message", this.onReceiveMessage);
         if (this.popupWindow) {
             this.popupWindow.close();
@@ -741,13 +741,13 @@ export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEn
         }
     }
 
-    public attemptFailed = () => {
+    public attemptFailed = (): void => {
         this.setState({
             attemptFailed: true,
         });
     };
 
-    private onReceiveMessage = (event: MessageEvent) => {
+    private onReceiveMessage = (event: MessageEvent): void => {
         if (event.data === "authDone" && event.origin === this.props.matrixClient.getHomeserverUrl()) {
             if (this.popupWindow) {
                 this.popupWindow.close();
@@ -756,7 +756,7 @@ export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEn
         }
     };
 
-    private onStartAuthClick = () => {
+    private onStartAuthClick = (): void => {
         // Note: We don't use PlatformPeg's startSsoAuth functions because we almost
         // certainly will need to open the thing in a new tab to avoid losing application
         // context.
@@ -766,11 +766,11 @@ export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEn
         this.props.onPhaseChange(SSOAuthEntry.PHASE_POSTAUTH);
     };
 
-    private onConfirmClick = () => {
+    private onConfirmClick = (): void => {
         this.props.submitAuthDict({});
     };
 
-    public render() {
+    public render(): JSX.Element {
         let continueButton = null;
         const cancelButton = (
             <AccessibleButton
@@ -834,24 +834,24 @@ export class FallbackAuthEntry extends React.Component<IAuthEntryProps> {
         window.addEventListener("message", this.onReceiveMessage);
     }
 
-    public componentDidMount() {
+    public componentDidMount(): void {
         this.props.onPhaseChange(DEFAULT_PHASE);
     }
 
-    public componentWillUnmount() {
+    public componentWillUnmount(): void {
         window.removeEventListener("message", this.onReceiveMessage);
         if (this.popupWindow) {
             this.popupWindow.close();
         }
     }
 
-    public focus = () => {
+    public focus = (): void => {
         if (this.fallbackButton.current) {
             this.fallbackButton.current.focus();
         }
     };
 
-    private onShowFallbackClick = (e: MouseEvent) => {
+    private onShowFallbackClick = (e: MouseEvent): void => {
         e.preventDefault();
         e.stopPropagation();
 
@@ -859,13 +859,13 @@ export class FallbackAuthEntry extends React.Component<IAuthEntryProps> {
         this.popupWindow = window.open(url, "_blank");
     };
 
-    private onReceiveMessage = (event: MessageEvent) => {
+    private onReceiveMessage = (event: MessageEvent): void => {
         if (event.data === "authDone" && event.origin === this.props.matrixClient.getHomeserverUrl()) {
             this.props.submitAuthDict({});
         }
     };
 
-    public render() {
+    public render(): JSX.Element {
         let errorSection;
         if (this.props.errorText) {
             errorSection = (

src/components/views/auth/LoginWithQR.tsx

@@ -93,7 +93,7 @@ export default class LoginWithQR extends React.Component<IProps, IState> {
         }
     }
 
-    private async updateMode(mode: Mode) {
+    private async updateMode(mode: Mode): Promise<void> {
         this.setState({ phase: Phase.Loading });
         if (this.state.rendezvous) {
             const rendezvous = this.state.rendezvous;
@@ -150,7 +150,7 @@ export default class LoginWithQR extends React.Component<IProps, IState> {
         }
     };
 
-    private generateCode = async () => {
+    private generateCode = async (): Promise<void> => {
         let rendezvous: MSC3906Rendezvous;
         try {
             const transport = new MSC3886SimpleHttpRendezvousTransport<MSC3903ECDHPayload>({
@@ -190,12 +190,12 @@ export default class LoginWithQR extends React.Component<IProps, IState> {
         }
     };
 
-    private onFailure = (reason: RendezvousFailureReason) => {
+    private onFailure = (reason: RendezvousFailureReason): void => {
         logger.info(`Rendezvous failed: ${reason}`);
         this.setState({ phase: Phase.Error, failureReason: reason });
     };
 
-    public reset() {
+    public reset(): void {
         this.setState({
             rendezvous: undefined,
             confirmationDigits: undefined,
@@ -203,7 +203,7 @@ export default class LoginWithQR extends React.Component<IProps, IState> {
         });
     }
 
-    private onClick = async (type: Click) => {
+    private onClick = async (type: Click): Promise<void> => {
         switch (type) {
             case Click.Cancel:
                 await this.state.rendezvous?.cancel(RendezvousFailureReason.UserCancelled);
@@ -229,7 +229,7 @@ export default class LoginWithQR extends React.Component<IProps, IState> {
         }
     };
 
-    public render() {
+    public render(): JSX.Element {
         return (
             <LoginWithQRFlow
                 onClick={this.onClick}

src/components/views/auth/LoginWithQRFlow.tsx

@@ -45,14 +45,14 @@ export default class LoginWithQRFlow extends React.Component<IProps> {
         super(props);
     }
 
-    private handleClick = (type: Click) => {
-        return async (e: React.FormEvent) => {
+    private handleClick = (type: Click): ((e: React.FormEvent) => Promise<void>) => {
+        return async (e: React.FormEvent): Promise<void> => {
             e.preventDefault();
             await this.props.onClick(type);
         };
     };
 
-    private cancelButton = () => (
+    private cancelButton = (): JSX.Element => (
         <AccessibleButton data-testid="cancel-button" kind="primary_outline" onClick={this.handleClick(Click.Cancel)}>
             {_t("Cancel")}
         </AccessibleButton>
@@ -69,7 +69,7 @@ export default class LoginWithQRFlow extends React.Component<IProps> {
         );
     };
 
-    public render() {
+    public render(): JSX.Element {
         let title = "";
         let titleIcon: JSX.Element | undefined;
         let main: JSX.Element | undefined;

src/components/views/auth/PassphraseConfirmField.tsx

@@ -56,7 +56,7 @@ class PassphraseConfirmField extends PureComponent<IProps> {
         ],
     });
 
-    private onValidate = async (fieldState: IFieldState) => {
+    private onValidate = async (fieldState: IFieldState): Promise<IValidationResult> => {
         const result = await this.validate(fieldState);
         if (this.props.onValidate) {
             this.props.onValidate(result);
@@ -65,7 +65,7 @@ class PassphraseConfirmField extends PureComponent<IProps> {
         return result;
     };
 
-    public render() {
+    public render(): JSX.Element {
         return (
             <Field
                 id={this.props.id}

src/components/views/auth/PassphraseField.tsx

@@ -53,7 +53,7 @@ class PassphraseField extends PureComponent<IProps> {
             const score = complexity ? complexity.score : 0;
             return <progress className="mx_PassphraseField_progress" max={4} value={score} />;
         },
-        deriveData: async ({ value }) => {
+        deriveData: async ({ value }): Promise<zxcvbn.ZXCVBNResult> => {
             if (!value) return null;
             const { scorePassword } = await import("../../../utils/PasswordScorer");
             return scorePassword(value);
@@ -66,7 +66,7 @@ class PassphraseField extends PureComponent<IProps> {
             },
             {
                 key: "complexity",
-                test: async function ({ value }, complexity) {
+                test: async function ({ value }, complexity): Promise<boolean> {
                     if (!value) {
                         return false;
                     }
@@ -94,7 +94,7 @@ class PassphraseField extends PureComponent<IProps> {
         ],
     });
 
-    public onValidate = async (fieldState: IFieldState) => {
+    public onValidate = async (fieldState: IFieldState): Promise<IValidationResult> => {
         const result = await this.validate(fieldState);
         if (this.props.onValidate) {
             this.props.onValidate(result);
@@ -102,7 +102,7 @@ class PassphraseField extends PureComponent<IProps> {
         return result;
     };
 
-    public render() {
+    public render(): JSX.Element {
         return (
             <Field
                 id={this.props.id}

src/components/views/auth/PasswordLogin.tsx

@@ -54,7 +54,7 @@ interface IState {
     password: "";
 }
 
-enum LoginField {
+const enum LoginField {
     Email = "login_field_email",
     MatrixId = "login_field_mxid",
     Phone = "login_field_phone",
@@ -85,13 +85,13 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
         };
     }
 
-    private onForgotPasswordClick = (ev) => {
+    private onForgotPasswordClick = (ev): void => {
         ev.preventDefault();
         ev.stopPropagation();
         this.props.onForgotPasswordClick();
     };
 
-    private onSubmitForm = async (ev) => {
+    private onSubmitForm = async (ev): Promise<void> => {
         ev.preventDefault();
 
         const allFieldsValid = await this.verifyFieldsBeforeSubmit();
@@ -117,33 +117,33 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
         this.props.onSubmit(username, phoneCountry, phoneNumber, this.state.password);
     };
 
-    private onUsernameChanged = (ev) => {
+    private onUsernameChanged = (ev): void => {
         this.props.onUsernameChanged(ev.target.value);
     };
 
-    private onUsernameBlur = (ev) => {
+    private onUsernameBlur = (ev): void => {
         this.props.onUsernameBlur(ev.target.value);
     };
 
-    private onLoginTypeChange = (ev) => {
+    private onLoginTypeChange = (ev): void => {
         const loginType = ev.target.value;
         this.setState({ loginType });
         this.props.onUsernameChanged(""); // Reset because email and username use the same state
     };
 
-    private onPhoneCountryChanged = (country) => {
+    private onPhoneCountryChanged = (country): void => {
         this.props.onPhoneCountryChanged(country.iso2);
     };
 
-    private onPhoneNumberChanged = (ev) => {
+    private onPhoneNumberChanged = (ev): void => {
         this.props.onPhoneNumberChanged(ev.target.value);
     };
 
-    private onPasswordChanged = (ev) => {
+    private onPasswordChanged = (ev): void => {
         this.setState({ password: ev.target.value });
     };
 
-    private async verifyFieldsBeforeSubmit() {
+    private async verifyFieldsBeforeSubmit(): Promise<boolean> {
         // Blur the active element if any, so we first run its blur validation,
         // which is less strict than the pass we're about to do below for all fields.
         const activeElement = document.activeElement as HTMLElement;
@@ -192,7 +192,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
         return Object.values(this.state.fieldValid).every(Boolean);
     }
 
-    private findFirstInvalidField(fieldIDs: LoginField[]) {
+    private findFirstInvalidField(fieldIDs: LoginField[]): Field | null {
         for (const fieldID of fieldIDs) {
             if (!this.state.fieldValid[fieldID] && this[fieldID]) {
                 return this[fieldID];
@@ -201,7 +201,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
         return null;
     }
 
-    private markFieldValid(fieldID: LoginField, valid: boolean) {
+    private markFieldValid(fieldID: LoginField, valid: boolean): void {
         const { fieldValid } = this.state;
         fieldValid[fieldID] = valid;
         this.setState({
@@ -221,13 +221,13 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
         ],
     });
 
-    private onUsernameValidate = async (fieldState) => {
+    private onUsernameValidate = async (fieldState): Promise<IValidationResult> => {
         const result = await this.validateUsernameRules(fieldState);
         this.markFieldValid(LoginField.MatrixId, result.valid);
         return result;
     };
 
-    private onEmailValidate = (result: IValidationResult) => {
+    private onEmailValidate = (result: IValidationResult): void => {
         this.markFieldValid(LoginField.Email, result.valid);
     };
 
@@ -235,20 +235,20 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
         rules: [
             {
                 key: "required",
-                test({ value, allowEmpty }) {
+                test({ value, allowEmpty }): boolean {
                     return allowEmpty || !!value;
                 },
-                invalid: () => _t("Enter phone number"),
+                invalid: (): string => _t("Enter phone number"),
             },
             {
                 key: "number",
-                test: ({ value }) => !value || PHONE_NUMBER_REGEX.test(value),
-                invalid: () => _t("That phone number doesn't look quite right, please check and try again"),
+                test: ({ value }): boolean => !value || PHONE_NUMBER_REGEX.test(value),
+                invalid: (): string => _t("That phone number doesn't look quite right, please check and try again"),
             },
         ],
     });
 
-    private onPhoneNumberValidate = async (fieldState) => {
+    private onPhoneNumberValidate = async (fieldState): Promise<IValidationResult> => {
         const result = await this.validatePhoneNumberRules(fieldState);
         this.markFieldValid(LoginField.Password, result.valid);
         return result;
@@ -258,21 +258,21 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
         rules: [
             {
                 key: "required",
-                test({ value, allowEmpty }) {
+                test({ value, allowEmpty }): boolean {
                     return allowEmpty || !!value;
                 },
-                invalid: () => _t("Enter password"),
+                invalid: (): string => _t("Enter password"),
             },
         ],
     });
 
-    private onPasswordValidate = async (fieldState) => {
+    private onPasswordValidate = async (fieldState): Promise<IValidationResult> => {
         const result = await this.validatePasswordRules(fieldState);
         this.markFieldValid(LoginField.Password, result.valid);
         return result;
     };
 
-    private renderLoginField(loginType: IState["loginType"], autoFocus: boolean) {
+    private renderLoginField(loginType: IState["loginType"], autoFocus: boolean): JSX.Element {
         const classes = {
             error: false,
         };
@@ -295,7 +295,9 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
                         disabled={this.props.busy}
                         autoFocus={autoFocus}
                         onValidate={this.onEmailValidate}
-                        fieldRef={(field) => (this[LoginField.Email] = field)}
+                        fieldRef={(field): void => {
+                            this[LoginField.Email] = field;
+                        }}
                     />
                 );
             case LoginField.MatrixId:
@@ -316,7 +318,9 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
                         disabled={this.props.busy}
                         autoFocus={autoFocus}
                         onValidate={this.onUsernameValidate}
-                        ref={(field) => (this[LoginField.MatrixId] = field)}
+                        ref={(field): void => {
+                            this[LoginField.MatrixId] = field;
+                        }}
                     />
                 );
             case LoginField.Phone: {
@@ -346,14 +350,16 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
                         disabled={this.props.busy}
                         autoFocus={autoFocus}
                         onValidate={this.onPhoneNumberValidate}
-                        ref={(field) => (this[LoginField.Password] = field)}
+                        ref={(field): void => {
+                            this[LoginField.Password] = field;
+                        }}
                     />
                 );
             }
         }
     }
 
-    private isLoginEmpty() {
+    private isLoginEmpty(): boolean {
         switch (this.state.loginType) {
             case LoginField.Email:
             case LoginField.MatrixId:
@@ -363,7 +369,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
         }
     }
 
-    public render() {
+    public render(): JSX.Element {
         let forgotPasswordJsx;
 
         if (this.props.onForgotPasswordClick) {

src/components/views/auth/RegistrationForm.tsx

@@ -115,7 +115,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         };
     }
 
-    private onSubmit = async (ev) => {
+    private onSubmit = async (ev): Promise<void> => {
         ev.preventDefault();
         ev.persist();
 
@@ -129,7 +129,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         if (this.state.email === "") {
             if (this.showEmail()) {
                 Modal.createDialog(RegistrationEmailPromptDialog, {
-                    onFinished: async (confirmed: boolean, email?: string) => {
+                    onFinished: async (confirmed: boolean, email?: string): Promise<void> => {
                         if (confirmed) {
                             this.setState(
                                 {
@@ -152,7 +152,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         }
     };
 
-    private doSubmit(ev) {
+    private doSubmit(ev): void {
         PosthogAnalytics.instance.setAuthenticationType("Password");
 
         const email = this.state.email.trim();
@@ -173,7 +173,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         }
     }
 
-    private async verifyFieldsBeforeSubmit() {
+    private async verifyFieldsBeforeSubmit(): Promise<boolean> {
         // Blur the active element if any, so we first run its blur validation,
         // which is less strict than the pass we're about to do below for all fields.
         const activeElement = document.activeElement as HTMLElement;
@@ -231,7 +231,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         return Object.values(this.state.fieldValid).every(Boolean);
     }
 
-    private findFirstInvalidField(fieldIDs: RegistrationField[]) {
+    private findFirstInvalidField(fieldIDs: RegistrationField[]): Field | null {
         for (const fieldID of fieldIDs) {
             if (!this.state.fieldValid[fieldID] && this[fieldID]) {
                 return this[fieldID];
@@ -240,7 +240,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         return null;
     }
 
-    private markFieldValid(fieldID: RegistrationField, valid: boolean) {
+    private markFieldValid(fieldID: RegistrationField, valid: boolean): void {
         const { fieldValid } = this.state;
         fieldValid[fieldID] = valid;
         this.setState({
@@ -248,13 +248,13 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         });
     }
 
-    private onEmailChange = (ev) => {
+    private onEmailChange = (ev): void => {
         this.setState({
             email: ev.target.value.trim(),
         });
     };
 
-    private onEmailValidate = (result: IValidationResult) => {
+    private onEmailValidate = (result: IValidationResult): void => {
         this.markFieldValid(RegistrationField.Email, result.valid);
     };
 
@@ -277,39 +277,39 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         ],
     });
 
-    private onPasswordChange = (ev) => {
+    private onPasswordChange = (ev): void => {
         this.setState({
             password: ev.target.value,
         });
     };
 
-    private onPasswordValidate = (result) => {
+    private onPasswordValidate = (result: IValidationResult): void => {
         this.markFieldValid(RegistrationField.Password, result.valid);
     };
 
-    private onPasswordConfirmChange = (ev) => {
+    private onPasswordConfirmChange = (ev): void => {
         this.setState({
             passwordConfirm: ev.target.value,
         });
     };
 
-    private onPasswordConfirmValidate = (result: IValidationResult) => {
+    private onPasswordConfirmValidate = (result: IValidationResult): void => {
         this.markFieldValid(RegistrationField.PasswordConfirm, result.valid);
     };
 
-    private onPhoneCountryChange = (newVal) => {
+    private onPhoneCountryChange = (newVal): void => {
         this.setState({
             phoneCountry: newVal.iso2,
         });
     };
 
-    private onPhoneNumberChange = (ev) => {
+    private onPhoneNumberChange = (ev): void => {
         this.setState({
             phoneNumber: ev.target.value,
         });
     };
 
-    private onPhoneNumberValidate = async (fieldState) => {
+    private onPhoneNumberValidate = async (fieldState): Promise<IValidationResult> => {
         const result = await this.validatePhoneNumberRules(fieldState);
         this.markFieldValid(RegistrationField.PhoneNumber, result.valid);
         return result;
@@ -334,13 +334,13 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         ],
     });
 
-    private onUsernameChange = (ev) => {
+    private onUsernameChange = (ev): void => {
         this.setState({
             username: ev.target.value,
         });
     };
 
-    private onUsernameValidate = async (fieldState) => {
+    private onUsernameValidate = async (fieldState): Promise<IValidationResult> => {
         const result = await this.validateUsernameRules(fieldState);
         this.markFieldValid(RegistrationField.Username, result.valid);
         return result;
@@ -384,7 +384,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
             {
                 key: "available",
                 final: true,
-                test: async ({ value }, usernameAvailable) => {
+                test: async ({ value }, usernameAvailable): Promise<boolean> => {
                     if (!value) {
                         return true;
                     }
@@ -405,7 +405,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
      * @param {string} step A stage name to check
      * @returns {boolean} Whether it is required
      */
-    private authStepIsRequired(step: string) {
+    private authStepIsRequired(step: string): boolean {
         return this.props.flows.every((flow) => {
             return flow.stages.includes(step);
         });
@@ -417,20 +417,20 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
      * @param {string} step A stage name to check
      * @returns {boolean} Whether it is used
      */
-    private authStepIsUsed(step: string) {
+    private authStepIsUsed(step: string): boolean {
         return this.props.flows.some((flow) => {
             return flow.stages.includes(step);
         });
     }
 
-    private showEmail() {
+    private showEmail(): boolean {
         if (!this.authStepIsUsed("m.login.email.identity")) {
             return false;
         }
         return true;
     }
 
-    private showPhoneNumber() {
+    private showPhoneNumber(): boolean {
         const threePidLogin = !SdkConfig.get().disable_3pid_login;
         if (!threePidLogin || !this.authStepIsUsed("m.login.msisdn")) {
             return false;
@@ -438,7 +438,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         return true;
     }
 
-    private renderEmail() {
+    private renderEmail(): JSX.Element {
         if (!this.showEmail()) {
             return null;
         }
@@ -455,7 +455,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         );
     }
 
-    private renderPassword() {
+    private renderPassword(): JSX.Element {
         return (
             <PassphraseField
                 id="mx_RegistrationForm_password"
@@ -468,7 +468,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         );
     }
 
-    public renderPasswordConfirm() {
+    public renderPasswordConfirm(): JSX.Element {
         return (
             <PassphraseConfirmField
                 id="mx_RegistrationForm_passwordConfirm"
@@ -482,7 +482,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         );
     }
 
-    public renderPhoneNumber() {
+    public renderPhoneNumber(): JSX.Element {
         if (!this.showPhoneNumber()) {
             return null;
         }
@@ -508,7 +508,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         );
     }
 
-    public renderUsername() {
+    public renderUsername(): JSX.Element {
         return (
             <Field
                 id="mx_RegistrationForm_username"
@@ -524,7 +524,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
         );
     }
 
-    public render() {
+    public render(): JSX.Element {
         const registerButton = (
             <input className="mx_Login_submit" type="submit" value={_t("Register")} disabled={!this.props.canSubmit} />
         );

src/components/views/avatars/BaseAvatar.tsx

@@ -99,7 +99,7 @@ const useImageUrl = ({ url, urls }): [string, () => void] => {
     return [imageUrl, onError];
 };
 
-const BaseAvatar = (props: IProps) => {
+const BaseAvatar: React.FC<IProps> = (props) => {
     const {
         name,
         idName,

src/components/views/avatars/DecoratedRoomAvatar.tsx

@@ -62,7 +62,7 @@ enum Icon {
     PresenceBusy = "BUSY",
 }
 
-function tooltipText(variant: Icon) {
+function tooltipText(variant: Icon): string {
     switch (variant) {
         case Icon.Globe:
             return _t("This room is public");
@@ -91,7 +91,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
         };
     }
 
-    public componentWillUnmount() {
+    public componentWillUnmount(): void {
         this.isUnmounted = true;
         if (this.isWatchingTimeline) this.props.room.off(RoomEvent.Timeline, this.onRoomTimeline);
         this.dmUser = null; // clear listeners, if any
@@ -120,7 +120,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
         }
     }
 
-    private onRoomTimeline = (ev: MatrixEvent, room: Room | null) => {
+    private onRoomTimeline = (ev: MatrixEvent, room: Room | null): void => {
         if (this.isUnmounted) return;
         if (this.props.room.roomId !== room?.roomId) return;
 
@@ -132,7 +132,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
         }
     };
 
-    private onPresenceUpdate = () => {
+    private onPresenceUpdate = (): void => {
         if (this.isUnmounted) return;
 
         const newIcon = this.getPresenceIcon();

src/components/views/avatars/MemberAvatar.tsx

@@ -54,7 +54,7 @@ export default function MemberAvatar({
     hideTitle,
     member: propsMember,
     ...props
-}: IProps) {
+}: IProps): JSX.Element {
     const card = useContext(CardContext);
 
     const member = useRoomMemberProfile({

src/components/views/avatars/RoomAvatar.tsx

@@ -63,11 +63,11 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
         };
     }
 
-    public componentDidMount() {
+    public componentDidMount(): void {
         MatrixClientPeg.get().on(RoomStateEvent.Events, this.onRoomStateEvents);
     }
 
-    public componentWillUnmount() {
+    public componentWillUnmount(): void {
         MatrixClientPeg.get()?.removeListener(RoomStateEvent.Events, this.onRoomStateEvents);
     }
 
@@ -77,7 +77,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
         };
     }
 
-    private onRoomStateEvents = (ev: MatrixEvent) => {
+    private onRoomStateEvents = (ev: MatrixEvent): void => {
         if (ev.getRoomId() !== this.props.room?.roomId || ev.getType() !== EventType.RoomAvatar) return;
 
         this.setState({
@@ -108,7 +108,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
         return Avatar.avatarUrlForRoom(props.room, props.width, props.height, props.resizeMethod);
     }
 
-    private onRoomAvatarClick = () => {
+    private onRoomAvatarClick = (): void => {
         const avatarUrl = Avatar.avatarUrlForRoom(this.props.room, null, null, null);
         const params = {
             src: avatarUrl,
@@ -135,7 +135,7 @@ export default class RoomAvatar extends React.Component<IProps, IState> {
         return this.props.room?.roomId || this.props.oobData?.roomId;
     }
 
-    public render() {
+    public render(): JSX.Element {
         const { room, oobData, viewAvatarOnClick, onClick, className, ...otherProps } = this.props;
         const roomName = room?.name ?? oobData.name;
 

src/components/views/beacon/BeaconViewDialog.tsx

@@ -121,7 +121,7 @@ const BeaconViewDialog: React.FC<IProps> = ({ initialFocusedBeacon, roomId, matr
         }
     }, [mapDisplayError]);
 
-    const onBeaconListItemClick = (beacon: Beacon) => {
+    const onBeaconListItemClick = (beacon: Beacon): void => {
         setFocusedBeaconState({ beacon, ts: Date.now() });
     };
 

src/components/views/beacon/LeftPanelLiveShareWarning.tsx

@@ -65,7 +65,7 @@ const useLivenessMonitor = (liveBeaconIds: BeaconIdentifier[], beacons: Map<Beac
         // chromium sets the minimum timer interval to 1000ms
         // for inactive tabs
         // refresh beacon monitors when the tab becomes active again
-        const onPageVisibilityChanged = () => {
+        const onPageVisibilityChanged = (): void => {
             if (document.visibilityState === "visible") {
                 liveBeaconIds.forEach((identifier) => beacons.get(identifier)?.monitorLiveness());
             }

src/components/views/beacon/LiveTimeRemaining.tsx

@@ -25,7 +25,7 @@ import { getBeaconMsUntilExpiry } from "../../../utils/beacon";
 
 const MINUTE_MS = 60000;
 const HOUR_MS = MINUTE_MS * 60;
-const getUpdateInterval = (ms: number) => {
+const getUpdateInterval = (ms: number): number => {
     // every 10 mins when more than an hour
     if (ms > HOUR_MS) {
         return MINUTE_MS * 10;

src/components/views/beacon/RoomLiveShareWarning.tsx

@@ -62,12 +62,14 @@ const RoomLiveShareWarningInner: React.FC<RoomLiveShareWarningInnerProps> = ({ l
 
     // eat events from buttons so navigate to tile
     // is not triggered
-    const stopPropagationWrapper = (callback: () => void) => (e?: ButtonEvent) => {
-        e?.stopPropagation();
-        callback();
-    };
+    const stopPropagationWrapper =
+        (callback: () => void) =>
+        (e?: ButtonEvent): void => {
+            e?.stopPropagation();
+            callback();
+        };
 
-    const onButtonClick = () => {
+    const onButtonClick = (): void => {
         if (hasLocationPublishError) {
             onResetLocationPublishError();
         } else {
@@ -75,7 +77,7 @@ const RoomLiveShareWarningInner: React.FC<RoomLiveShareWarningInnerProps> = ({ l
         }
     };
 
-    const onClick = () => {
+    const onClick = (): void => {
         dispatcher.dispatch<ViewRoomPayload>({
             action: Action.ViewRoom,
             room_id: beacon.roomId,

src/components/views/beta/BetaCard.tsx

@@ -43,11 +43,11 @@ interface IBetaPillProps {
     tooltipCaption?: string;
 }
 
-export const BetaPill = ({
+export const BetaPill: React.FC<IBetaPillProps> = ({
     onClick,
     tooltipTitle = _t("This is a beta feature"),
     tooltipCaption = _t("Click for more info"),
-}: IBetaPillProps) => {
+}) => {
     if (onClick) {
         return (
             <AccessibleTooltipButton
@@ -69,7 +69,7 @@ export const BetaPill = ({
     return <span className="mx_BetaCard_betaPill">{_t("Beta")}</span>;
 };
 
-const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
+const BetaCard: React.FC<IProps> = ({ title: titleOverride, featureId }) => {
     const info = SettingsStore.getBetaInfo(featureId);
     const value = useFeatureEnabled(featureId);
     const [busy, setBusy] = useState(false);
@@ -120,7 +120,7 @@ const BetaCard = ({ title: titleOverride, featureId }: IProps) => {
                     <div className="mx_BetaCard_buttons">
                         {feedbackButton}
                         <AccessibleButton
-                            onClick={async () => {
+                            onClick={async (): Promise<void> => {
                                 setBusy(true);
                                 // make it look like we're doing something for two seconds,
                                 // otherwise users think clicking did nothing

src/components/views/context_menus/DeviceContextMenu.tsx

@@ -53,7 +53,7 @@ const DeviceContextMenuSection: React.FC<IDeviceContextMenuSectionProps> = ({ de
     const [selectedDevice, setSelectedDevice] = useState(MediaDeviceHandler.getDevice(deviceKind));
 
     useEffect(() => {
-        const getDevices = async () => {
+        const getDevices = async (): Promise<void> => {
             return setDevices((await MediaDeviceHandler.getDevices())[deviceKind]);
         };
         getDevices();

src/components/views/context_menus/DialpadContextMenu.tsx

@@ -42,7 +42,7 @@ export default class DialpadContextMenu extends React.Component<IProps, IState>
         };
     }
 
-    public onDigitPress = (digit: string, ev: ButtonEvent) => {
+    public onDigitPress = (digit: string, ev: ButtonEvent): void => {
         this.props.call.sendDtmfDigit(digit);
         this.setState({ value: this.state.value + digit });
 
@@ -54,22 +54,22 @@ export default class DialpadContextMenu extends React.Component<IProps, IState>
         }
     };
 
-    public onCancelClick = () => {
+    public onCancelClick = (): void => {
         this.props.onFinished();
     };
 
-    public onKeyDown = (ev) => {
+    public onKeyDown = (ev): void => {
         // Prevent Backspace and Delete keys from functioning in the entry field
         if (ev.code === "Backspace" || ev.code === "Delete") {
             ev.preventDefault();
         }
     };
 
-    public onChange = (ev) => {
+    public onChange = (ev): void => {
         this.setState({ value: ev.target.value });
     };
 
-    public render() {
+    public render(): JSX.Element {
         return (
             <ContextMenu {...this.props}>
                 <div className="mx_DialPadContextMenuWrapper">

src/components/views/context_menus/KebabContextMenu.tsx

@@ -17,11 +17,11 @@ limitations under the License.
 import React from "react";
 
 import { Icon as ContextMenuIcon } from "../../../../res/img/element-icons/context-menu.svg";
-import { ChevronFace, ContextMenuButton, useContextMenu } from "../../structures/ContextMenu";
+import { ChevronFace, ContextMenuButton, MenuProps, useContextMenu } from "../../structures/ContextMenu";
 import AccessibleButton from "../elements/AccessibleButton";
 import IconizedContextMenu, { IconizedContextMenuOptionList } from "./IconizedContextMenu";
 
-const contextMenuBelow = (elementRect: DOMRect) => {
+const contextMenuBelow = (elementRect: DOMRect): MenuProps => {
     // align the context menu's icons with the icon which opened the context menu
     const left = elementRect.left + window.scrollX + elementRect.width;
     const top = elementRect.bottom + window.scrollY;

src/components/views/context_menus/LegacyCallContextMenu.tsx

@@ -30,23 +30,23 @@ export default class LegacyCallContextMenu extends React.Component<IProps> {
         super(props);
     }
 
-    public onHoldClick = () => {
+    public onHoldClick = (): void => {
         this.props.call.setRemoteOnHold(true);
         this.props.onFinished();
     };
 
-    public onUnholdClick = () => {
+    public onUnholdClick = (): void => {
         LegacyCallHandler.instance.setActiveCallRoomId(this.props.call.roomId);
 
         this.props.onFinished();
     };
 
-    public onTransferClick = () => {
+    public onTransferClick = (): void => {
         LegacyCallHandler.instance.showTransferDialog(this.props.call);
         this.props.onFinished();
     };
 
-    public render() {
+    public render(): JSX.Element {
         const holdUnholdCaption = this.props.call.isRemoteOnHold() ? _t("Resume") : _t("Hold");
         const handler = this.props.call.isRemoteOnHold() ? this.onUnholdClick : this.onHoldClick;
 

src/components/views/context_menus/MessageContextMenu.tsx

@@ -38,7 +38,7 @@ import { Action } from "../../../dispatcher/actions";
 import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import { ButtonEvent } from "../elements/AccessibleButton";
 import { copyPlaintext, getSelectedText } from "../../../utils/strings";
-import ContextMenu, { toRightOf, IPosition, ChevronFace } from "../../structures/ContextMenu";
+import ContextMenu, { toRightOf, MenuProps } from "../../structures/ContextMenu";
 import ReactionPicker from "../emojipicker/ReactionPicker";
 import ViewSource from "../../structures/ViewSource";
 import { createRedactEventDialog } from "../dialogs/ConfirmRedactDialog";
@@ -63,7 +63,7 @@ interface IReplyInThreadButton {
     closeMenu: () => void;
 }
 
-const ReplyInThreadButton = ({ mxEvent, closeMenu }: IReplyInThreadButton) => {
+const ReplyInThreadButton: React.FC<IReplyInThreadButton> = ({ mxEvent, closeMenu }) => {
     const context = useContext(CardContext);
     const relationType = mxEvent?.getRelation()?.rel_type;
 
@@ -104,8 +104,7 @@ const ReplyInThreadButton = ({ mxEvent, closeMenu }: IReplyInThreadButton) => {
     );
 };
 
-interface IProps extends IPosition {
-    chevronFace: ChevronFace;
+interface IProps extends MenuProps {
     /* the MatrixEvent associated with the context menu */
     mxEvent: MatrixEvent;
     // An optional EventTileOps implementation that can be used to unhide preview widgets
@@ -150,7 +149,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
         };
     }
 
-    public componentDidMount() {
+    public componentDidMount(): void {
         MatrixClientPeg.get().on(RoomMemberEvent.PowerLevel, this.checkPermissions);
         this.checkPermissions();
     }

src/components/views/context_menus/RoomContextMenu.tsx

@@ -55,7 +55,7 @@ interface IProps extends IContextMenuProps {
     room: Room;
 }
 
-const RoomContextMenu = ({ room, onFinished, ...props }: IProps) => {
+const RoomContextMenu: React.FC<IProps> = ({ room, onFinished, ...props }) => {
     const cli = useContext(MatrixClientContext);
     const roomTags = useEventEmitterState(RoomListStore.instance, LISTS_UPDATE_EVENT, () =>
         RoomListStore.instance.getTagsForRoom(room),
@@ -63,7 +63,7 @@ const RoomContextMenu = ({ room, onFinished, ...props }: IProps) => {
 
     let leaveOption: JSX.Element;
     if (roomTags.includes(DefaultTagID.Archived)) {
-        const onForgetRoomClick = (ev: ButtonEvent) => {
+        const onForgetRoomClick = (ev: ButtonEvent): void => {
             ev.preventDefault();
             ev.stopPropagation();
 
@@ -83,7 +83,7 @@ const RoomContextMenu = ({ room, onFinished, ...props }: IProps) => {
             />
         );
     } else {
-        const onLeaveRoomClick = (ev: ButtonEvent) => {
+        const onLeaveRoomClick = (ev: ButtonEvent): void => {
             ev.preventDefault();
             ev.stopPropagation();
 
@@ -114,7 +114,7 @@ const RoomContextMenu = ({ room, onFinished, ...props }: IProps) => {
 
     let inviteOption: JSX.Element;
     if (room.canInvite(cli.getUserId()!) && !isDm) {
-        const onInviteClick = (ev: ButtonEvent) => {
+        const onInviteClick = (ev: ButtonEvent): void => {
             ev.preventDefault();
             ev.stopPropagation();
 
@@ -323,7 +323,7 @@ const RoomContextMenu = ({ room, onFinished, ...props }: IProps) => {
         );
     }
 
-    const onTagRoom = (ev: ButtonEvent, tagId: TagID) => {
+    const onTagRoom = (ev: ButtonEvent, tagId: TagID): void => {
         ev.preventDefault();
         ev.stopPropagation();
 
@@ -346,7 +346,7 @@ const RoomContextMenu = ({ room, onFinished, ...props }: IProps) => {
         }
     };
 
-    const ensureViewingRoom = (ev: ButtonEvent) => {
+    const ensureViewingRoom = (ev: ButtonEvent): void => {
         if (SdkContextClass.instance.roomViewStore.getRoomId() === room.roomId) return;
         dis.dispatch<ViewRoomPayload>(
             {

src/components/views/context_menus/RoomGeneralContextMenu.tsx

@@ -50,7 +50,7 @@ export interface RoomGeneralContextMenuProps extends IContextMenuProps {
     onPostLeaveClick?: (event: ButtonEvent) => void;
 }
 
-export const RoomGeneralContextMenu = ({
+export const RoomGeneralContextMenu: React.FC<RoomGeneralContextMenuProps> = ({
     room,
     onFinished,
     onPostFavoriteClick,
@@ -61,7 +61,7 @@ export const RoomGeneralContextMenu = ({
     onPostLeaveClick,
     onPostForgetClick,
     ...props
-}: RoomGeneralContextMenuProps) => {
+}) => {
     const cli = useContext(MatrixClientContext);
     const roomTags = useEventEmitterState(RoomListStore.instance, LISTS_UPDATE_EVENT, () =>
         RoomListStore.instance.getTagsForRoom(room),
@@ -86,7 +86,7 @@ export const RoomGeneralContextMenu = ({
         };
     };
 
-    const onTagRoom = (ev: ButtonEvent, tagId: TagID) => {
+    const onTagRoom = (ev: ButtonEvent, tagId: TagID): void => {
         if (tagId === DefaultTagID.Favourite || tagId === DefaultTagID.LowPriority) {
             const inverseTag = tagId === DefaultTagID.Favourite ? DefaultTagID.LowPriority : DefaultTagID.Favourite;
             const isApplied = RoomListStore.instance.getTagsForRoom(room).includes(tagId);

src/components/views/context_menus/RoomNotificationContextMenu.tsx

@@ -33,7 +33,7 @@ interface IProps extends IContextMenuProps {
     room: Room;
 }
 
-export const RoomNotificationContextMenu = ({ room, onFinished, ...props }: IProps) => {
+export const RoomNotificationContextMenu: React.FC<IProps> = ({ room, onFinished, ...props }) => {
     const [notificationState, setNotificationState] = useNotificationState(room);
 
     const wrapHandler = (handler: (ev: ButtonEvent) => void, persistent = false): ((ev: ButtonEvent) => void) => {

src/components/views/context_menus/SpaceContextMenu.tsx

@@ -47,13 +47,13 @@ interface IProps extends IContextMenuProps {
     hideHeader?: boolean;
 }
 
-const SpaceContextMenu = ({ space, hideHeader, onFinished, ...props }: IProps) => {
+const SpaceContextMenu: React.FC<IProps> = ({ space, hideHeader, onFinished, ...props }) => {
     const cli = useContext(MatrixClientContext);
     const userId = cli.getUserId()!;
 
     let inviteOption: JSX.Element | null = null;
     if (space.getJoinRule() === "public" || space.canInvite(userId)) {
-        const onInviteClick = (ev: ButtonEvent) => {
+        const onInviteClick = (ev: ButtonEvent): void => {
             ev.preventDefault();
             ev.stopPropagation();
 
@@ -75,7 +75,7 @@ const SpaceContextMenu = ({ space, hideHeader, onFinished, ...props }: IProps) =
     let settingsOption: JSX.Element | null = null;
     let leaveOption: JSX.Element | null = null;
     if (shouldShowSpaceSettings(space)) {
-        const onSettingsClick = (ev: ButtonEvent) => {
+        const onSettingsClick = (ev: ButtonEvent): void => {
             ev.preventDefault();
             ev.stopPropagation();
 
@@ -92,7 +92,7 @@ const SpaceContextMenu = ({ space, hideHeader, onFinished, ...props }: IProps) =
             />
         );
     } else {
-        const onLeaveClick = (ev: ButtonEvent) => {
+        const onLeaveClick = (ev: ButtonEvent): void => {
             ev.preventDefault();
             ev.stopPropagation();
 
@@ -113,7 +113,7 @@ const SpaceContextMenu = ({ space, hideHeader, onFinished, ...props }: IProps) =
 
     let devtoolsOption: JSX.Element | null = null;
     if (SettingsStore.getValue("developerMode")) {
-        const onViewTimelineClick = (ev: ButtonEvent) => {
+        const onViewTimelineClick = (ev: ButtonEvent): void => {
             ev.preventDefault();
             ev.stopPropagation();
 
@@ -145,7 +145,7 @@ const SpaceContextMenu = ({ space, hideHeader, onFinished, ...props }: IProps) =
 
     let newRoomSection: JSX.Element | null = null;
     if (canAddRooms || canAddSubSpaces) {
-        const onNewRoomClick = (ev: ButtonEvent) => {
+        const onNewRoomClick = (ev: ButtonEvent): void => {
             ev.preventDefault();
             ev.stopPropagation();
 
@@ -154,7 +154,7 @@ const SpaceContextMenu = ({ space, hideHeader, onFinished, ...props }: IProps) =
             onFinished();
         };
 
-        const onNewVideoRoomClick = (ev: ButtonEvent) => {
+        const onNewVideoRoomClick = (ev: ButtonEvent): void => {
             ev.preventDefault();
             ev.stopPropagation();
 
@@ -162,7 +162,7 @@ const SpaceContextMenu = ({ space, hideHeader, onFinished, ...props }: IProps) =
             onFinished();
         };
 
-        const onNewSubspaceClick = (ev: ButtonEvent) => {
+        const onNewSubspaceClick = (ev: ButtonEvent): void => {
             ev.preventDefault();
             ev.stopPropagation();
 
@@ -207,7 +207,7 @@ const SpaceContextMenu = ({ space, hideHeader, onFinished, ...props }: IProps) =
         );
     }
 
-    const onPreferencesClick = (ev: ButtonEvent) => {
+    const onPreferencesClick = (ev: ButtonEvent): void => {
         ev.preventDefault();
         ev.stopPropagation();
 
@@ -215,7 +215,7 @@ const SpaceContextMenu = ({ space, hideHeader, onFinished, ...props }: IProps) =
         onFinished();
     };
 
-    const openSpace = (ev: ButtonEvent) => {
+    const openSpace = (ev: ButtonEvent): void => {
         ev.preventDefault();
         ev.stopPropagation();
 
@@ -227,12 +227,12 @@ const SpaceContextMenu = ({ space, hideHeader, onFinished, ...props }: IProps) =
         onFinished();
     };
 
-    const onExploreRoomsClick = (ev: ButtonEvent) => {
+    const onExploreRoomsClick = (ev: ButtonEvent): void => {
         PosthogTrackers.trackInteraction("WebSpaceContextMenuExploreRoomsItem", ev);
         openSpace(ev);
     };
 
-    const onHomeClick = (ev: ButtonEvent) => {
+    const onHomeClick = (ev: ButtonEvent): void => {
         PosthogTrackers.trackInteraction("WebSpaceContextMenuHomeItem", ev);
         openSpace(ev);
     };

src/components/views/context_menus/ThreadListContextMenu.tsx

@@ -22,7 +22,7 @@ import dis from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
 import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import { copyPlaintext } from "../../../utils/strings";
-import { ChevronFace, ContextMenuTooltipButton, useContextMenu } from "../../structures/ContextMenu";
+import { ChevronFace, ContextMenuTooltipButton, MenuProps, useContextMenu } from "../../structures/ContextMenu";
 import { _t } from "../../../languageHandler";
 import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList } from "./IconizedContextMenu";
 import { WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
@@ -35,7 +35,7 @@ export interface ThreadListContextMenuProps {
     onMenuToggle?: (open: boolean) => void;
 }
 
-const contextMenuBelow = (elementRect: DOMRect) => {
+const contextMenuBelow = (elementRect: DOMRect): MenuProps => {
     // align the context menu's icons with the icon which opened the context menu
     const left = elementRect.left + window.scrollX + elementRect.width;
     const top = elementRect.bottom + window.scrollY;
@@ -68,7 +68,7 @@ const ThreadListContextMenu: React.FC<ThreadListContextMenuProps> = ({
     );
 
     const copyLinkToThread = useCallback(
-        async (evt: ButtonEvent | undefined) => {
+        async (evt: ButtonEvent | undefined): Promise<void> => {
             if (permalinkCreator) {
                 evt?.preventDefault();
                 evt?.stopPropagation();

src/components/views/context_menus/WidgetContextMenu.tsx

@@ -62,7 +62,7 @@ const WidgetContextMenu: React.FC<IProps> = ({
 
     let streamAudioStreamButton;
     if (getConfigLivestreamUrl() && WidgetType.JITSI.matches(app.type)) {
-        const onStreamAudioClick = async () => {
+        const onStreamAudioClick = async (): Promise<void> => {
             try {
                 await startJitsiAudioLivestream(widgetMessaging, roomId);
             } catch (err) {
@@ -86,7 +86,7 @@ const WidgetContextMenu: React.FC<IProps> = ({
 
     let editButton;
     if (canModify && WidgetUtils.isManagedByManager(app)) {
-        const _onEditClick = () => {
+        const _onEditClick = (): void => {
             if (onEditClick) {
                 onEditClick();
             } else {
@@ -101,7 +101,7 @@ const WidgetContextMenu: React.FC<IProps> = ({
     let snapshotButton;
     const screenshotsEnabled = SettingsStore.getValue("enableWidgetScreenshots");
     if (screenshotsEnabled && widgetMessaging?.hasCapability(MatrixCapabilities.Screenshots)) {
-        const onSnapshotClick = () => {
+        const onSnapshotClick = (): void => {
             widgetMessaging
                 ?.takeScreenshot()
                 .then((data) => {
@@ -121,7 +121,7 @@ const WidgetContextMenu: React.FC<IProps> = ({
 
     let deleteButton;
     if (onDeleteClick || canModify) {
-        const _onDeleteClick = () => {
+        const _onDeleteClick = (): void => {
             if (onDeleteClick) {
                 onDeleteClick();
             } else {
@@ -158,7 +158,7 @@ const WidgetContextMenu: React.FC<IProps> = ({
     const isLocalWidget = WidgetType.JITSI.matches(app.type);
     let revokeButton;
     if (!userWidget && !isLocalWidget && isAllowedWidget) {
-        const onRevokeClick = () => {
+        const onRevokeClick = (): void => {
             logger.info("Revoking permission for widget to load: " + app.eventId);
             const current = SettingsStore.getValue("allowedWidgets", roomId);
             if (app.eventId !== undefined) current[app.eventId] = false;
@@ -175,7 +175,7 @@ const WidgetContextMenu: React.FC<IProps> = ({
 
     let moveLeftButton;
     if (showUnpin && widgetIndex > 0) {
-        const onClick = () => {
+        const onClick = (): void => {
             WidgetLayoutStore.instance.moveWithinContainer(room, Container.Top, app, -1);
             onFinished();
         };
@@ -185,7 +185,7 @@ const WidgetContextMenu: React.FC<IProps> = ({
 
     let moveRightButton;
     if (showUnpin && widgetIndex < pinnedWidgets.length - 1) {
-        const onClick = () => {
+        const onClick = (): void => {
             WidgetLayoutStore.instance.moveWithinContainer(room, Container.Top, app, 1);
             onFinished();
         };

src/components/views/dialogs/AddExistingToSpaceDialog.tsx

@@ -52,7 +52,11 @@ interface IProps {
     onFinished(added?: boolean): void;
 }
 
-export const Entry = ({ room, checked, onChange }) => {
+export const Entry: React.FC<{
+    room: Room;
+    checked: boolean;
+    onChange(value: boolean): void;
+}> = ({ room, checked, onChange }) => {
     return (
         <label className="mx_AddExistingToSpace_entry">
             {room?.isSpaceRoom() ? (
@@ -62,7 +66,7 @@ export const Entry = ({ room, checked, onChange }) => {
             )}
             <span className="mx_AddExistingToSpace_entry_name">{room.name}</span>
             <StyledCheckbox
-                onChange={onChange ? (e) => onChange(e.target.checked) : null}
+                onChange={onChange ? (e) => onChange(e.currentTarget.checked) : null}
                 checked={checked}
                 disabled={!onChange}
             />
@@ -183,7 +187,7 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
         );
     }, [visibleRooms, space, lcQuery, existingRoomsSet, existingSubspacesSet]);
 
-    const addRooms = async () => {
+    const addRooms = async (): Promise<void> => {
         setError(null);
         setProgress(0);
 
@@ -192,10 +196,11 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
         for (const room of selectedToAdd) {
             const via = calculateRoomVia(room);
             try {
-                await SpaceStore.instance.addRoomToSpace(space, room.roomId, via).catch(async (e) => {
+                await SpaceStore.instance.addRoomToSpace(space, room.roomId, via).catch(async (e): Promise<void> => {
                     if (e.errcode === "M_LIMIT_EXCEEDED") {
                         await sleep(e.data.retry_after_ms);
-                        return SpaceStore.instance.addRoomToSpace(space, room.roomId, via); // retry
+                        await SpaceStore.instance.addRoomToSpace(space, room.roomId, via); // retry
+                        return;
                     }
 
                     throw e;
@@ -291,7 +296,7 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
         noResults = false;
     }
 
-    const onScroll = () => {
+    const onScroll = (): void => {
         const body = scrollRef.current?.containerRef.current;
         setScrollState({
             scrollTop: body.scrollTop,
@@ -299,7 +304,7 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
         });
     };
 
-    const wrappedRef = (body: HTMLDivElement) => {
+    const wrappedRef = (body: HTMLDivElement): void => {
         setScrollState({
             scrollTop: body.scrollTop,
             height: body.clientHeight,
@@ -382,7 +387,7 @@ interface ISubspaceSelectorProps {
     onChange(space: Room): void;
 }
 
-export const SubspaceSelector = ({ title, space, value, onChange }: ISubspaceSelectorProps) => {
+export const SubspaceSelector: React.FC<ISubspaceSelectorProps> = ({ title, space, value, onChange }) => {
     const options = useMemo(() => {
         return [
             space,

src/components/views/dialogs/AnalyticsLearnMoreDialog.tsx

@@ -45,8 +45,8 @@ export const AnalyticsLearnMoreDialog: React.FC<IProps> = ({
     cancelButton,
     hasCancel,
 }) => {
-    const onPrimaryButtonClick = () => onFinished && onFinished(ButtonClicked.Primary);
-    const onCancelButtonClick = () => onFinished && onFinished(ButtonClicked.Cancel);
+    const onPrimaryButtonClick = (): void => onFinished?.(ButtonClicked.Primary);
+    const onCancelButtonClick = (): void => onFinished?.(ButtonClicked.Cancel);
     const privacyPolicyLink = privacyPolicyUrl ? (
         <span>
             {_t(

src/components/views/dialogs/AskInviteAnywayDialog.tsx

@@ -48,7 +48,7 @@ export default class AskInviteAnywayDialog extends React.Component<IProps> {
         this.props.onFinished(false);
     };
 
-    public render() {
+    public render(): JSX.Element {
         const errorList = this.props.unknownProfileUsers.map((address) => (
             <li key={address.userId}>
                 {address.userId}: {address.errorText}

src/components/views/dialogs/BugReportDialog.tsx

@@ -79,7 +79,7 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
         });
     }
 
-    public componentWillUnmount() {
+    public componentWillUnmount(): void {
         this.unmounted = true;
     }
 
@@ -180,7 +180,7 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
         this.setState({ downloadProgress });
     };
 
-    public render() {
+    public render(): JSX.Element {
         let error = null;
         if (this.state.err) {
             error = <div className="error">{this.state.err}</div>;

src/components/views/dialogs/BulkRedactDialog.tsx

@@ -79,7 +79,7 @@ const BulkRedactDialog: React.FC<IBulkRedactDialogProps> = (props) => {
         const count = eventsToRedact.length;
         const user = member.name;
 
-        const redact = async () => {
+        const redact = async (): Promise<void> => {
             logger.info(`Started redacting recent ${count} messages for ${member.userId} in ${room.roomId}`);
             dis.dispatch({
                 action: Action.BulkRedactStart,
@@ -90,7 +90,7 @@ const BulkRedactDialog: React.FC<IBulkRedactDialogProps> = (props) => {
             // so first yield to allow to rerender after closing the dialog.
             await Promise.resolve();
             await Promise.all(
-                eventsToRedact.reverse().map(async (event) => {
+                eventsToRedact.reverse().map(async (event): Promise<void> => {
                     try {
                         await cli.redactEvent(room.roomId, event.getId());
                     } catch (err) {

src/components/views/dialogs/ChangelogDialog.tsx

@@ -54,7 +54,7 @@ export default class ChangelogDialog extends React.Component<IProps> {
         }
     }
 
-    public componentDidMount() {
+    public componentDidMount(): void {
         const version = this.props.newVersion.split("-");
         const version2 = this.props.version.split("-");
         if (version == null || version2 == null) return;
@@ -76,7 +76,7 @@ export default class ChangelogDialog extends React.Component<IProps> {
         );
     }
 
-    public render() {
+    public render(): JSX.Element {
         const logs = REPOS.map((repo) => {
             let content;
             if (this.state[repo] == null) {

src/components/views/dialogs/ConfirmAndWaitRedactDialog.tsx

@@ -72,7 +72,7 @@ export default class ConfirmAndWaitRedactDialog extends React.PureComponent<IPro
         }
     };
 
-    public render() {
+    public render(): JSX.Element {
         if (this.state.isRedacting) {
             if (this.state.redactionErrorCode) {
                 const code = this.state.redactionErrorCode;

src/components/views/dialogs/ConfirmRedactDialog.tsx

@@ -33,7 +33,7 @@ interface IProps {
  * A dialog for confirming a redaction.
  */
 export default class ConfirmRedactDialog extends React.Component<IProps> {
-    public render() {
+    public render(): JSX.Element {
         return (
             <TextInputDialog
                 onFinished={this.props.onFinished}
@@ -56,7 +56,7 @@ export function createRedactEventDialog({
 }: {
     mxEvent: MatrixEvent;
     onCloseDialog?: () => void;
-}) {
+}): void {
     const eventId = mxEvent.getId();
 
     if (!eventId) throw new Error("cannot redact event without ID");
@@ -64,11 +64,10 @@ export function createRedactEventDialog({
     const roomId = mxEvent.getRoomId();
 
     if (!roomId) throw new Error(`cannot redact event ${mxEvent.getId()} without room ID`);
-
     Modal.createDialog(
         ConfirmRedactDialog,
         {
-            onFinished: async (proceed: boolean, reason?: string) => {
+            onFinished: async (proceed: boolean, reason?: string): Promise<void> => {
                 if (!proceed) return;
 
                 const cli = MatrixClientPeg.get();

src/components/views/dialogs/ConfirmUserActionDialog.tsx

@@ -77,13 +77,13 @@ export default class ConfirmUserActionDialog extends React.Component<IProps, ISt
         this.props.onFinished(false);
     };
 
-    private onReasonChange = (ev: ChangeEvent<HTMLInputElement>) => {
+    private onReasonChange = (ev: ChangeEvent<HTMLInputElement>): void => {
         this.setState({
             reason: ev.target.value,
         });
     };
 
-    public render() {
+    public render(): JSX.Element {
         const confirmButtonClass = this.props.danger ? "danger" : "";
 
         let reasonBox;

src/components/views/dialogs/ConfirmWipeDeviceDialog.tsx

@@ -33,7 +33,7 @@ export default class ConfirmWipeDeviceDialog extends React.Component<IProps> {
         this.props.onFinished(false);
     };
 
-    public render() {
+    public render(): JSX.Element {
         return (
             <BaseDialog
                 className="mx_ConfirmWipeDeviceDialog"

src/components/views/dialogs/CreateRoomDialog.tsx

@@ -21,7 +21,7 @@ import { RoomType } from "matrix-js-sdk/src/@types/event";
 import { JoinRule, Preset, Visibility } from "matrix-js-sdk/src/@types/partials";
 
 import SdkConfig from "../../../SdkConfig";
-import withValidation, { IFieldState } from "../elements/Validation";
+import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
 import { _t } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { IOpts } from "../../../createRoom";
@@ -92,7 +92,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
             .then((isForced) => this.setState({ canChangeEncryption: !isForced }));
     }
 
-    private roomCreateOptions() {
+    private roomCreateOptions(): IOpts {
         const opts: IOpts = {};
         const createOpts: IOpts["createOpts"] = (opts.createOpts = {});
         opts.roomType = this.props.type;
@@ -124,12 +124,12 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
         return opts;
     }
 
-    public componentDidMount() {
+    public componentDidMount(): void {
         // move focus to first field when showing dialog
         this.nameField.current.focus();
     }
 
-    private onKeyDown = (event: KeyboardEvent) => {
+    private onKeyDown = (event: KeyboardEvent): void => {
         const action = getKeyBindingsManager().getAccessibilityAction(event);
         switch (action) {
             case KeyBindingAction.Enter:
@@ -140,7 +140,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
         }
     };
 
-    private onOk = async () => {
+    private onOk = async (): Promise<void> => {
         const activeElement = document.activeElement as HTMLElement;
         if (activeElement) {
             activeElement.blur();
@@ -168,39 +168,39 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
         }
     };
 
-    private onCancel = () => {
+    private onCancel = (): void => {
         this.props.onFinished(false);
     };
 
-    private onNameChange = (ev: ChangeEvent<HTMLInputElement>) => {
+    private onNameChange = (ev: ChangeEvent<HTMLInputElement>): void => {
         this.setState({ name: ev.target.value });
     };
 
-    private onTopicChange = (ev: ChangeEvent<HTMLInputElement>) => {
+    private onTopicChange = (ev: ChangeEvent<HTMLInputElement>): void => {
         this.setState({ topic: ev.target.value });
     };
 
-    private onJoinRuleChange = (joinRule: JoinRule) => {
+    private onJoinRuleChange = (joinRule: JoinRule): void => {
         this.setState({ joinRule });
     };
 
-    private onEncryptedChange = (isEncrypted: boolean) => {
+    private onEncryptedChange = (isEncrypted: boolean): void => {
         this.setState({ isEncrypted });
     };
 
-    private onAliasChange = (alias: string) => {
+    private onAliasChange = (alias: string): void => {
         this.setState({ alias });
     };
 
-    private onDetailsToggled = (ev: SyntheticEvent<HTMLDetailsElement>) => {
+    private onDetailsToggled = (ev: SyntheticEvent<HTMLDetailsElement>): void => {
         this.setState({ detailsOpen: (ev.target as HTMLDetailsElement).open });
     };
 
-    private onNoFederateChange = (noFederate: boolean) => {
+    private onNoFederateChange = (noFederate: boolean): void => {
         this.setState({ noFederate });
     };
 
-    private onNameValidate = async (fieldState: IFieldState) => {
+    private onNameValidate = async (fieldState: IFieldState): Promise<IValidationResult> => {
         const result = await CreateRoomDialog.validateRoomName(fieldState);
         this.setState({ nameIsValid: result.valid });
         return result;
@@ -216,7 +216,7 @@ export default class CreateRoomDialog extends React.Component<IProps, IState> {
         ],
     });
 
-    public render() {
+    public render(): JSX.Element {
         const isVideoRoom = this.props.type === RoomType.ElementVideo;
 
         let aliasField: JSX.Element;

src/components/views/dialogs/CreateSubspaceDialog.tsx

@@ -54,7 +54,7 @@ const CreateSubspaceDialog: React.FC<IProps> = ({ space, onAddExistingSpaceClick
     }
     const [joinRule, setJoinRule] = useState<JoinRule>(defaultJoinRule);
 
-    const onCreateSubspaceClick = async (e) => {
+    const onCreateSubspaceClick = async (e): Promise<void> => {
         e.preventDefault();
         if (busy) return;
 

src/components/views/dialogs/CryptoStoreTooNewDialog.tsx

@@ -31,7 +31,7 @@ interface IProps extends IDialogProps {}
 const CryptoStoreTooNewDialog: React.FC<IProps> = (props: IProps) => {
     const brand = SdkConfig.get().brand;
 
-    const _onLogoutClicked = () => {
+    const _onLogoutClicked = (): void => {
         Modal.createDialog(QuestionDialog, {
             title: _t("Sign out"),
             description: _t(

src/components/views/dialogs/DeactivateAccountDialog.tsx

@@ -172,7 +172,7 @@ export default class DeactivateAccountDialog extends React.Component<IProps, ISt
             });
     }
 
-    public render() {
+    public render(): JSX.Element {
         let error = null;
         if (this.state.errStr) {
             error = <div className="error">{this.state.errStr}</div>;

src/components/views/dialogs/DevtoolsDialog.tsx

@@ -81,7 +81,7 @@ const DevtoolsDialog: React.FC<IProps> = ({ roomId, onFinished }) => {
         const Tool = tool[1];
         body = <Tool onBack={onBack} setTool={(label, tool) => setTool([label, tool])} />;
     } else {
-        const onBack = () => {
+        const onBack = (): void => {
             onFinished(false);
         };
         body = (
@@ -90,7 +90,7 @@ const DevtoolsDialog: React.FC<IProps> = ({ roomId, onFinished }) => {
                     <div key={category}>
                         <h3>{_t(categoryLabels[category])}</h3>
                         {tools.map(([label, tool]) => {
-                            const onClick = () => {
+                            const onClick = (): void => {
                                 setTool([label, tool]);
                             };
                             return (

src/components/views/dialogs/EndPollDialog.tsx

@@ -35,7 +35,7 @@ interface IProps extends IDialogProps {
 }
 
 export default class EndPollDialog extends React.Component<IProps> {
-    private onFinished = (endPoll: boolean) => {
+    private onFinished = (endPoll: boolean): void => {
         const topAnswer = findTopAnswer(this.props.event, this.props.matrixClient, this.props.getRelationsForEvent);
 
         const message =
@@ -59,7 +59,7 @@ export default class EndPollDialog extends React.Component<IProps> {
         this.props.onFinished(endPoll);
     };
 
-    public render() {
+    public render(): JSX.Element {
         return (
             <QuestionDialog
                 title={_t("End Poll")}

src/components/views/dialogs/ErrorDialog.tsx

@@ -51,11 +51,11 @@ export default class ErrorDialog extends React.Component<IProps, IState> {
         button: null,
     };
 
-    private onClick = () => {
+    private onClick = (): void => {
         this.props.onFinished(true);
     };
 
-    public render() {
+    public render(): JSX.Element {
         return (
             <BaseDialog
                 className="mx_ErrorDialog"

src/components/views/dialogs/ExportDialog.tsx

@@ -103,13 +103,13 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
     const [displayCancel, setCancelWarning] = useState(false);
     const [exportCancelled, setExportCancelled] = useState(false);
     const [exportSuccessful, setExportSuccessful] = useState(false);
-    const [exporter, setExporter] = useStateCallback<Exporter>(null, async (exporter: Exporter) => {
+    const [exporter, setExporter] = useStateCallback<Exporter>(null, async (exporter: Exporter): Promise<void> => {
         await exporter?.export().then(() => {
             if (!exportCancelled) setExportSuccessful(true);
         });
     });
 
-    const startExport = async () => {
+    const startExport = async (): Promise<void> => {
         const exportOptions = {
             numberOfMessages,
             attachmentsIncluded: includeAttachments,
@@ -131,7 +131,7 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
         }
     };
 
-    const onExportClick = async () => {
+    const onExportClick = async (): Promise<void> => {
         const isValidSize =
             !setSizeLimit ||
             (await sizeLimitRef.current.validate({
@@ -225,12 +225,12 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
         return result;
     };
 
-    const onCancel = async () => {
+    const onCancel = async (): Promise<void> => {
         if (isExporting) setCancelWarning(true);
         else onFinished(false);
     };
 
-    const confirmCancel = async () => {
+    const confirmCancel = async (): Promise<void> => {
         await exporter?.cancelExport();
         setExportCancelled(true);
         setExporting(false);

src/components/views/dialogs/ForwardDialog.tsx

@@ -82,7 +82,7 @@ enum SendState {
 const Entry: React.FC<IEntryProps> = ({ room, type, content, matrixClient: cli, onFinished }) => {
     const [sendState, setSendState] = useState<SendState>(SendState.CanSend);
 
-    const jumpToRoom = (ev: ButtonEvent) => {
+    const jumpToRoom = (ev: ButtonEvent): void => {
         dis.dispatch<ViewRoomPayload>({
             action: Action.ViewRoom,
             room_id: room.roomId,
@@ -91,7 +91,7 @@ const Entry: React.FC<IEntryProps> = ({ room, type, content, matrixClient: cli,
         });
         onFinished(true);
     };
-    const send = async () => {
+    const send = async (): Promise<void> => {
         setSendState(SendState.Sending);
         try {
             await cli.sendEvent(room.roomId, type, content);
@@ -243,7 +243,7 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
     }
 
     const [truncateAt, setTruncateAt] = useState(20);
-    function overflowTile(overflowCount, totalCount) {
+    function overflowTile(overflowCount, totalCount): JSX.Element {
         const text = _t("and %(count)s others...", { count: overflowCount });
         return (
             <EntityTile

src/components/views/dialogs/GenericFeatureFeedbackDialog.tsx

@@ -44,7 +44,7 @@ const GenericFeatureFeedbackDialog: React.FC<IProps> = ({
     const [comment, setComment] = useState("");
     const [canContact, setCanContact] = useState(false);
 
-    const sendFeedback = async (ok: boolean) => {
+    const sendFeedback = async (ok: boolean): Promise<void> => {
         if (!ok) return onFinished(false);
 
         submitFeedback(SdkConfig.get().bug_report_endpoint_url, rageshakeLabel, comment, canContact, rageshakeData);

src/components/views/dialogs/HostSignupDialog.tsx

@@ -54,7 +54,7 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
         this.config = SdkConfig.getObject("host_signup");
     }
 
-    private messageHandler = async (message: IPostmessage) => {
+    private messageHandler = async (message: IPostmessage): Promise<void> => {
         if (!this.config.get("url").startsWith(message.origin)) {
             return;
         }
@@ -82,7 +82,7 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
         }
     };
 
-    private maximizeDialog = () => {
+    private maximizeDialog = (): void => {
         this.setState({
             minimized: false,
         });
@@ -92,7 +92,7 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
         });
     };
 
-    private minimizeDialog = () => {
+    private minimizeDialog = (): void => {
         this.setState({
             minimized: true,
         });
@@ -102,13 +102,13 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
         });
     };
 
-    private closeDialog = async () => {
+    private closeDialog = async (): Promise<void> => {
         window.removeEventListener("message", this.messageHandler);
         // Finally clear the flag in
         return HostSignupStore.instance.setHostSignupActive(false);
     };
 
-    private onCloseClick = async () => {
+    private onCloseClick = async (): Promise<void> => {
         if (this.state.completed) {
             // We're done, close
             return this.closeDialog();
@@ -128,11 +128,11 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
         }
     };
 
-    private sendMessage = (message: IPostmessageResponseData) => {
+    private sendMessage = (message: IPostmessageResponseData): void => {
         this.iframeRef.current.contentWindow.postMessage(message, this.config.get("url"));
     };
 
-    private async sendAccountDetails() {
+    private async sendAccountDetails(): Promise<void> {
         const openIdToken = await MatrixClientPeg.get().getOpenIdToken();
         if (!openIdToken || !openIdToken.access_token) {
             logger.warn("Failed to connect to homeserver for OpenID token.");
@@ -155,14 +155,14 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
         });
     }
 
-    private onAccountDetailsDialogFinished = async (result) => {
+    private onAccountDetailsDialogFinished = async (result): Promise<void> => {
         if (result) {
             return this.sendAccountDetails();
         }
         return this.closeDialog();
     };
 
-    private onAccountDetailsRequest = () => {
+    private onAccountDetailsRequest = (): void => {
         const cookiePolicyUrl = this.config.get("cookie_policy_url");
         const privacyPolicyUrl = this.config.get("privacy_policy_url");
         const tosUrl = this.config.get("terms_of_service_url");
@@ -211,14 +211,14 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
         });
     };
 
-    public componentDidMount() {
+    public componentDidMount(): void {
         window.addEventListener("message", this.messageHandler);
     }
 
-    public componentWillUnmount() {
+    public componentWillUnmount(): void {
         if (HostSignupStore.instance.isHostSignupActive) {
             // Run the close dialog actions if we're still active, otherwise good to go
-            return this.closeDialog();
+            this.closeDialog();
         }
     }
 

src/components/views/dialogs/InfoDialog.tsx

@@ -40,11 +40,11 @@ export default class InfoDialog extends React.Component<IProps> {
         hasCloseButton: false,
     };
 
-    private onFinished = () => {
+    private onFinished = (): void => {
         this.props.onFinished();
     };
 
-    public render() {
+    public render(): JSX.Element {
         return (
             <BaseDialog
                 className="mx_InfoDialog"

src/components/views/dialogs/InviteDialog.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createRef } from "react";
+import React, { createRef, ReactNode } from "react";
 import classNames from "classnames";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { Room } from "matrix-js-sdk/src/models/room";
@@ -77,10 +77,10 @@ import dis from "../../../dispatcher/dispatcher";
 // we have a number of types defined from the Matrix spec which can't reasonably be altered here.
 /* eslint-disable camelcase */
 
-interface IRecentUser {
+interface Result {
     userId: string;
-    user: RoomMember;
-    lastActive: number;
+    user: RoomMember | DirectoryMember | ThreepidMember;
+    lastActive?: number;
 }
 
 const INITIAL_ROOMS_SHOWN = 3; // Number of rooms to show at first
@@ -92,7 +92,7 @@ enum TabId {
 }
 
 class DMUserTile extends React.PureComponent<IDMUserTileProps> {
-    private onRemove = (e) => {
+    private onRemove = (e): void => {
         // Stop the browser from highlighting text
         e.preventDefault();
         e.stopPropagation();
@@ -100,7 +100,7 @@ class DMUserTile extends React.PureComponent<IDMUserTileProps> {
         this.props.onRemove(this.props.member);
     };
 
-    public render() {
+    public render(): JSX.Element {
         const avatarSize = 20;
         const avatar = <SearchResultAvatar user={this.props.member} size={avatarSize} />;
 
@@ -139,7 +139,7 @@ interface IDMRoomTileProps {
 }
 
 class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
-    private onClick = (e) => {
+    private onClick = (e): void => {
         // Stop the browser from highlighting text
         e.preventDefault();
         e.stopPropagation();
@@ -147,7 +147,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
         this.props.onToggle(this.props.member);
     };
 
-    private highlightName(str: string) {
+    private highlightName(str: string): ReactNode {
         if (!this.props.highlightWord) return str;
 
         // We convert things to lowercase for index searching, but pull substrings from
@@ -156,10 +156,10 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
         const lowerStr = str.toLowerCase();
         const filterStr = this.props.highlightWord.toLowerCase();
 
-        const result = [];
+        const result: JSX.Element[] = [];
 
         let i = 0;
-        let ii;
+        let ii: number;
         while ((ii = lowerStr.indexOf(filterStr, i)) >= 0) {
             // Push any text we missed (first bit/middle of text)
             if (ii > i) {
@@ -187,7 +187,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
         return result;
     }
 
-    public render() {
+    public render(): JSX.Element {
         let timestamp = null;
         if (this.props.lastActiveTs) {
             const humanTs = humanizeTime(this.props.lastActiveTs);
@@ -283,12 +283,12 @@ type Props = InviteDMProps | InviteRoomProps | InviteCallProps;
 interface IInviteDialogState {
     targets: Member[]; // array of Member objects (see interface above)
     filterText: string;
-    recents: { user: Member; userId: string }[];
+    recents: Result[];
     numRecentsShown: number;
-    suggestions: { user: Member; userId: string }[];
+    suggestions: Result[];
     numSuggestionsShown: number;
-    serverResultsMixin: { user: Member; userId: string }[];
-    threepidResultsMixin: { user: Member; userId: string }[];
+    serverResultsMixin: Result[];
+    threepidResultsMixin: Result[];
     canUseIdentityServer: boolean;
     tryingIdentityServer: boolean;
     consultFirst: boolean;
@@ -351,21 +351,21 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         };
     }
 
-    public componentDidMount() {
+    public componentDidMount(): void {
         if (this.props.initialText) {
             this.updateSuggestions(this.props.initialText);
         }
     }
 
-    public componentWillUnmount() {
+    public componentWillUnmount(): void {
         this.unmounted = true;
     }
 
-    private onConsultFirstChange = (ev) => {
+    private onConsultFirstChange = (ev): void => {
         this.setState({ consultFirst: ev.target.checked });
     };
 
-    public static buildRecents(excludedTargetIds: Set<string>): IRecentUser[] {
+    public static buildRecents(excludedTargetIds: Set<string>): Result[] {
         const rooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals(); // map of userId => js-sdk Room
 
         // Also pull in all the rooms tagged as DefaultTagID.DM so we don't miss anything. Sometimes the
@@ -464,7 +464,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         return newTargets;
     }
 
-    private startDm = async () => {
+    private startDm = async (): Promise<void> => {
         try {
             const cli = MatrixClientPeg.get();
             const targets = this.convertFilter();
@@ -479,7 +479,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         }
     };
 
-    private inviteUsers = async () => {
+    private inviteUsers = async (): Promise<void> => {
         if (this.props.kind !== KIND_INVITE) return;
         this.setState({ busy: true });
         this.convertFilter();
@@ -514,7 +514,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         }
     };
 
-    private transferCall = async () => {
+    private transferCall = async (): Promise<void> => {
         if (this.props.kind !== KIND_CALL_TRANSFER) return;
         if (this.state.currentTabId == TabId.UserDirectory) {
             this.convertFilter();
@@ -538,7 +538,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         this.props.onFinished(true);
     };
 
-    private onKeyDown = (e) => {
+    private onKeyDown = (e): void => {
         if (this.state.busy) return;
 
         let handled = false;
@@ -574,14 +574,14 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         }
     };
 
-    private onCancel = () => {
+    private onCancel = (): void => {
         this.props.onFinished(false);
     };
 
-    private updateSuggestions = async (term: string) => {
+    private updateSuggestions = async (term: string): Promise<void> => {
         MatrixClientPeg.get()
             .searchUserDirectory({ term })
-            .then(async (r) => {
+            .then(async (r): Promise<void> => {
                 if (term !== this.state.filterText) {
                     // Discard the results - we were probably too slow on the server-side to make
                     // these results useful. This is a race we want to avoid because we could overwrite
@@ -692,7 +692,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         }
     };
 
-    private updateFilter = (e) => {
+    private updateFilter = (e): void => {
         const term = e.target.value;
         this.setState({ filterText: term });
 
@@ -707,15 +707,15 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         }, 150); // 150ms debounce (human reaction time + some)
     };
 
-    private showMoreRecents = () => {
+    private showMoreRecents = (): void => {
         this.setState({ numRecentsShown: this.state.numRecentsShown + INCREMENT_ROOMS_SHOWN });
     };
 
-    private showMoreSuggestions = () => {
+    private showMoreSuggestions = (): void => {
         this.setState({ numSuggestionsShown: this.state.numSuggestionsShown + INCREMENT_ROOMS_SHOWN });
     };
 
-    private toggleMember = (member: Member) => {
+    private toggleMember = (member: Member): void => {
         if (!this.state.busy) {
             let filterText = this.state.filterText;
             let targets = this.state.targets.map((t) => t); // cheap clone for mutation
@@ -737,7 +737,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         }
     };
 
-    private removeMember = (member: Member) => {
+    private removeMember = (member: Member): void => {
         const targets = this.state.targets.map((t) => t); // cheap clone for mutation
         const idx = targets.indexOf(member);
         if (idx >= 0) {
@@ -750,7 +750,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         }
     };
 
-    private onPaste = async (e) => {
+    private onPaste = async (e): Promise<void> => {
         if (this.state.filterText) {
             // if the user has already typed something, just let them
             // paste normally.
@@ -825,7 +825,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         this.setState({ targets: [...this.state.targets, ...toAdd] });
     };
 
-    private onClickInputArea = (e) => {
+    private onClickInputArea = (e): void => {
         // Stop the browser from highlighting text
         e.preventDefault();
         e.stopPropagation();
@@ -835,7 +835,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         }
     };
 
-    private onUseDefaultIdentityServerClick = (e) => {
+    private onUseDefaultIdentityServerClick = (e): void => {
         e.preventDefault();
 
         // Update the IS in account data. Actually using it may trigger terms.
@@ -844,17 +844,17 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         this.setState({ canUseIdentityServer: true, tryingIdentityServer: false });
     };
 
-    private onManageSettingsClick = (e) => {
+    private onManageSettingsClick = (e): void => {
         e.preventDefault();
         dis.fire(Action.ViewUserSettings);
         this.props.onFinished(false);
     };
 
-    private renderSection(kind: "recents" | "suggestions") {
+    private renderSection(kind: "recents" | "suggestions"): JSX.Element {
         let sourceMembers = kind === "recents" ? this.state.recents : this.state.suggestions;
         let showNum = kind === "recents" ? this.state.numRecentsShown : this.state.numSuggestionsShown;
         const showMoreFn = kind === "recents" ? this.showMoreRecents.bind(this) : this.showMoreSuggestions.bind(this);
-        const lastActive = (m) => (kind === "recents" ? m.lastActive : null);
+        const lastActive = (m: Result): number | null => (kind === "recents" ? m.lastActive : null);
         let sectionName = kind === "recents" ? _t("Recent Conversations") : _t("Suggestions");
 
         if (this.props.kind === KIND_INVITE) {
@@ -945,7 +945,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         );
     }
 
-    private renderEditor() {
+    private renderEditor(): JSX.Element {
         const hasPlaceholder =
             this.props.kind == KIND_CALL_TRANSFER &&
             this.state.targets.length === 0 &&
@@ -976,7 +976,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         );
     }
 
-    private renderIdentityServerWarning() {
+    private renderIdentityServerWarning(): JSX.Element {
         if (
             !this.state.tryingIdentityServer ||
             this.state.canUseIdentityServer ||
@@ -1030,16 +1030,16 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         }
     }
 
-    private onDialFormSubmit = (ev) => {
+    private onDialFormSubmit = (ev): void => {
         ev.preventDefault();
         this.transferCall();
     };
 
-    private onDialChange = (ev) => {
+    private onDialChange = (ev): void => {
         this.setState({ dialPadValue: ev.currentTarget.value });
     };
 
-    private onDigitPress = (digit: string, ev: ButtonEvent) => {
+    private onDigitPress = (digit: string, ev: ButtonEvent): void => {
         this.setState({ dialPadValue: this.state.dialPadValue + digit });
 
         // Keep the number field focused so that keyboard entry is still available
@@ -1050,7 +1050,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         }
     };
 
-    private onDeletePress = (ev: ButtonEvent) => {
+    private onDeletePress = (ev: ButtonEvent): void => {
         if (this.state.dialPadValue.length === 0) return;
         this.setState({ dialPadValue: this.state.dialPadValue.slice(0, -1) });
 
@@ -1062,11 +1062,11 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         }
     };
 
-    private onTabChange = (tabId: TabId) => {
+    private onTabChange = (tabId: TabId): void => {
         this.setState({ currentTabId: tabId });
     };
 
-    private async onLinkClick(e) {
+    private async onLinkClick(e): Promise<void> {
         e.preventDefault();
         selectText(e.target);
     }
@@ -1078,7 +1078,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         }
     }
 
-    public render() {
+    public render(): JSX.Element {
         let spinner = null;
         if (this.state.busy) {
             spinner = <Spinner w={20} h={20} />;

src/components/views/dialogs/KeySignatureUploadFailedDialog.tsx

@@ -53,7 +53,7 @@ const KeySignatureUploadFailedDialog: React.FC<IProps> = ({ failures, source, co
     ]);
     const defaultCause = _t("a key signature");
 
-    const onRetry = useCallback(async () => {
+    const onRetry = useCallback(async (): Promise<void> => {
         try {
             setRetrying(true);
             const cancel = new Promise((resolve, reject) => {

src/components/views/dialogs/LogoutDialog.tsx

@@ -63,7 +63,7 @@ export default class LogoutDialog extends React.Component<IProps, IState> {
         }
     }
 
-    private async loadBackupStatus() {
+    private async loadBackupStatus(): Promise<void> {
         try {
             const backupInfo = await MatrixClientPeg.get().getKeyBackupVersion();
             this.setState({
@@ -127,7 +127,7 @@ export default class LogoutDialog extends React.Component<IProps, IState> {
         this.props.onFinished(true);
     };
 
-    public render() {
+    public render(): JSX.Element {
         if (this.state.shouldLoadBackupStatus) {
             const description = (
                 <div>

src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx

@@ -33,7 +33,11 @@ interface IProps extends IDialogProps {
     selected?: string[];
 }
 
-const Entry = ({ room, checked, onChange }) => {
+const Entry: React.FC<{
+    room: Room;
+    checked: boolean;
+    onChange(value: boolean): void;
+}> = ({ room, checked, onChange }) => {
     const localRoom = room instanceof Room;
 
     let description;

src/components/views/dialogs/ModalWidgetDialog.tsx

@@ -76,33 +76,33 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
         this.possibleButtons = (this.props.widgetDefinition.buttons || []).map((b) => b.id);
     }
 
-    public componentDidMount() {
+    public componentDidMount(): void {
         const driver = new StopGapWidgetDriver([], this.widget, WidgetKind.Modal, false);
         const messaging = new ClientWidgetApi(this.widget, this.appFrame.current, driver);
         this.setState({ messaging });
     }
 
-    public componentWillUnmount() {
+    public componentWillUnmount(): void {
         this.state.messaging.off("ready", this.onReady);
         this.state.messaging.off(`action:${WidgetApiFromWidgetAction.CloseModalWidget}`, this.onWidgetClose);
         this.state.messaging.stop();
     }
 
-    private onReady = () => {
+    private onReady = (): void => {
         this.state.messaging.sendWidgetConfig(this.props.widgetDefinition);
     };
 
-    private onLoad = () => {
+    private onLoad = (): void => {
         this.state.messaging.once("ready", this.onReady);
         this.state.messaging.on(`action:${WidgetApiFromWidgetAction.CloseModalWidget}`, this.onWidgetClose);
         this.state.messaging.on(`action:${WidgetApiFromWidgetAction.SetModalButtonEnabled}`, this.onButtonEnableToggle);
     };
 
-    private onWidgetClose = (ev: CustomEvent<IModalWidgetCloseRequest>) => {
+    private onWidgetClose = (ev: CustomEvent<IModalWidgetCloseRequest>): void => {
         this.props.onFinished(true, ev.detail.data);
     };
 
-    private onButtonEnableToggle = (ev: CustomEvent<ISetModalButtonEnabledActionRequest>) => {
+    private onButtonEnableToggle = (ev: CustomEvent<ISetModalButtonEnabledActionRequest>): void => {
         ev.preventDefault();
         const isClose = ev.detail.data.button === BuiltInModalButtonID.Close;
         if (isClose || !this.possibleButtons.includes(ev.detail.data.button)) {
@@ -124,7 +124,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
         this.state.messaging.transport.reply(ev.detail, {} as IWidgetApiAcknowledgeResponseData);
     };
 
-    public render() {
+    public render(): JSX.Element {
         const templated = this.widget.getCompleteUrl({
             widgetRoomId: this.props.widgetRoomId,
             currentUserId: MatrixClientPeg.get().getUserId(),
@@ -167,7 +167,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
                             break;
                     }
 
-                    const onClick = () => {
+                    const onClick = (): void => {
                         this.state.messaging.notifyModalWidgetButtonClicked(def.id);
                     };
 

src/components/views/dialogs/ModuleUiDialog.tsx

@@ -45,7 +45,7 @@ export class ModuleUiDialog extends ScrollableBaseModal<IProps, IState> {
         };
     }
 
-    protected async submit() {
+    protected async submit(): Promise<void> {
         try {
             const model = await this.contentRef.current.trySubmit();
             this.props.onFinished(true, model);

src/components/views/dialogs/RegistrationEmailPromptDialog.tsx

@@ -32,7 +32,7 @@ const RegistrationEmailPromptDialog: React.FC<IProps> = ({ onFinished }) => {
     const [email, setEmail] = useState("");
     const fieldRef = useRef<Field>();
 
-    const onSubmit = async (e) => {
+    const onSubmit = async (e): Promise<void> => {
         e.preventDefault();
         if (email) {
             const valid = await fieldRef.current.validate({});

src/components/views/dialogs/ReportEventDialog.tsx

@@ -204,7 +204,7 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
     };
 
     // The user has clicked "submit".
-    private onSubmit = async () => {
+    private onSubmit = async (): Promise<void> => {
         let reason = this.state.reason || "";
         reason = reason.trim();
         if (this.moderation) {
@@ -273,7 +273,7 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
         }
     };
 
-    public render() {
+    public render(): JSX.Element {
         let error = null;
         if (this.state.err) {
             error = <div className="error">{this.state.err}</div>;

src/components/views/dialogs/RoomSettingsDialog.tsx

@@ -60,13 +60,13 @@ export default class RoomSettingsDialog extends React.Component<IProps, IState>
         this.state = { roomName: "" };
     }
 
-    public componentDidMount() {
+    public componentDidMount(): void {
         this.dispatcherRef = dis.register(this.onAction);
         MatrixClientPeg.get().on(RoomEvent.Name, this.onRoomName);
         this.onRoomName();
     }
 
-    public componentWillUnmount() {
+    public componentWillUnmount(): void {
         if (this.dispatcherRef) {
             dis.unregister(this.dispatcherRef);
         }
@@ -180,7 +180,7 @@ export default class RoomSettingsDialog extends React.Component<IProps, IState>
         return tabs;
     }
 
-    public render() {
+    public render(): JSX.Element {
         const roomName = this.state.roomName;
         return (
             <BaseDialog

src/components/views/dialogs/RoomUpgradeDialog.tsx

@@ -41,7 +41,7 @@ export default class RoomUpgradeDialog extends React.Component<IProps, IState> {
         busy: true,
     };
 
-    public async componentDidMount() {
+    public async componentDidMount(): Promise<void> {
         const recommended = await this.props.room.getRecommendedVersion();
         this.targetVersion = recommended.version;
         this.setState({ busy: false });
@@ -68,7 +68,7 @@ export default class RoomUpgradeDialog extends React.Component<IProps, IState> {
             });
     };
 
-    public render() {
+    public render(): JSX.Element {
         let buttons;
         if (this.state.busy) {
             buttons = <Spinner />;

src/components/views/dialogs/RoomUpgradeWarningDialog.tsx

@@ -70,7 +70,7 @@ export default class RoomUpgradeWarningDialog extends React.Component<IProps, IS
         this.setState({ progressText, progress, total });
     };
 
-    private onContinue = () => {
+    private onContinue = (): void => {
         const opts = {
             continue: true,
             invite: this.isPrivate && this.state.inviteUsersToNewRoom,
@@ -85,22 +85,22 @@ export default class RoomUpgradeWarningDialog extends React.Component<IProps, IS
         }
     };
 
-    private onCancel = () => {
+    private onCancel = (): void => {
         this.props.onFinished({ continue: false, invite: false });
     };
 
-    private onInviteUsersToggle = (inviteUsersToNewRoom: boolean) => {
+    private onInviteUsersToggle = (inviteUsersToNewRoom: boolean): void => {
         this.setState({ inviteUsersToNewRoom });
     };
 
-    private openBugReportDialog = (e) => {
+    private openBugReportDialog = (e): void => {
         e.preventDefault();
         e.stopPropagation();
 
         Modal.createDialog(BugReportDialog, {});
     };
 
-    public render() {
+    public render(): JSX.Element {
         const brand = SdkConfig.get().brand;
 
         let inviteToggle = null;

src/components/views/dialogs/ScrollableBaseModal.tsx

@@ -58,11 +58,11 @@ export default abstract class ScrollableBaseModal<
         }
     };
 
-    private onCancel = () => {
+    private onCancel = (): void => {
         this.cancel();
     };
 
-    private onSubmit = (e: MouseEvent | FormEvent) => {
+    private onSubmit = (e: MouseEvent | FormEvent): void => {
         e.stopPropagation();
         e.preventDefault();
         if (!this.state.canSubmit) return; // pretend the submit button was disabled

src/components/views/dialogs/ServerOfflineDialog.tsx

@@ -33,15 +33,15 @@ import { IDialogProps } from "./IDialogProps";
 interface IProps extends IDialogProps {}
 
 export default class ServerOfflineDialog extends React.PureComponent<IProps> {
-    public componentDidMount() {
+    public componentDidMount(): void {
         EchoStore.instance.on(UPDATE_EVENT, this.onEchosUpdated);
     }
 
-    public componentWillUnmount() {
+    public componentWillUnmount(): void {
         EchoStore.instance.off(UPDATE_EVENT, this.onEchosUpdated);
     }
 
-    private onEchosUpdated = () => {
+    private onEchosUpdated = (): void => {
         this.forceUpdate(); // no state to worry about
     };
 
@@ -87,7 +87,7 @@ export default class ServerOfflineDialog extends React.PureComponent<IProps> {
         });
     }
 
-    public render() {
+    public render(): JSX.Element {
         let timeline = this.renderTimeline().filter((c) => !!c); // remove nulls for next check
         if (timeline.length === 0) {
             timeline = [<div key={1}>{_t("You're all caught up.")}</div>];

src/components/views/dialogs/ServerPickerDialog.tsx

@@ -26,7 +26,7 @@ import SdkConfig from "../../../SdkConfig";
 import Field from "../elements/Field";
 import StyledRadioButton from "../elements/StyledRadioButton";
 import TextWithTooltip from "../elements/TextWithTooltip";
-import withValidation, { IFieldState } from "../elements/Validation";
+import withValidation, { IFieldState, IValidationResult } from "../elements/Validation";
 import { ValidatedServerConfig } from "../../../utils/ValidatedServerConfig";
 
 interface IProps {
@@ -67,15 +67,15 @@ export default class ServerPickerDialog extends React.PureComponent<IProps, ISta
         };
     }
 
-    private onDefaultChosen = () => {
+    private onDefaultChosen = (): void => {
         this.setState({ defaultChosen: true });
     };
 
-    private onOtherChosen = () => {
+    private onOtherChosen = (): void => {
         this.setState({ defaultChosen: false });
     };
 
-    private onHomeserverChange = (ev) => {
+    private onHomeserverChange = (ev): void => {
         this.setState({ otherHomeserver: ev.target.value });
     };
 
@@ -83,7 +83,7 @@ export default class ServerPickerDialog extends React.PureComponent<IProps, ISta
     // If for some reason someone enters "matrix.org" for a URL, we could do a lookup to
     // find their homeserver without demanding they use "https://matrix.org"
     private validate = withValidation<this, { error?: string }>({
-        deriveData: async ({ value }) => {
+        deriveData: async ({ value }): Promise<{ error?: string }> => {
             let hsUrl = value.trim(); // trim to account for random whitespace
 
             // if the URL has no protocol, try validate it as a serverName via well-known
@@ -136,7 +136,7 @@ export default class ServerPickerDialog extends React.PureComponent<IProps, ISta
             },
             {
                 key: "valid",
-                test: async function ({ value }, { error }) {
+                test: async function ({ value }, { error }): Promise<boolean> {
                     if (!value) return true;
                     return !error;
                 },
@@ -147,9 +147,9 @@ export default class ServerPickerDialog extends React.PureComponent<IProps, ISta
         ],
     });
 
-    private onHomeserverValidate = (fieldState: IFieldState) => this.validate(fieldState);
+    private onHomeserverValidate = (fieldState: IFieldState): Promise<IValidationResult> => this.validate(fieldState);
 
-    private onSubmit = async (ev) => {
+    private onSubmit = async (ev): Promise<void> => {
         ev.preventDefault();
 
         const valid = await this.fieldRef.current.validate({ allowEmpty: false });
@@ -163,7 +163,7 @@ export default class ServerPickerDialog extends React.PureComponent<IProps, ISta
         this.props.onFinished(this.state.defaultChosen ? this.defaultServer : this.validatedConf);
     };
 
-    public render() {
+    public render(): JSX.Element {
         let text;
         if (this.defaultServer.hsName === "matrix.org") {
             text = _t("Matrix.org is the biggest public homeserver in the world, so it's a good place for many.");

src/components/views/dialogs/SeshatResetDialog.tsx

@@ -22,7 +22,7 @@ import DialogButtons from "../elements/DialogButtons";
 import { IDialogProps } from "./IDialogProps";
 
 export default class SeshatResetDialog extends React.PureComponent<IDialogProps> {
-    public render() {
+    public render(): JSX.Element {
         return (
             <BaseDialog
                 hasCancel={true}

src/components/views/dialogs/ShareDialog.tsx

@@ -91,18 +91,18 @@ export default class ShareDialog extends React.PureComponent<IProps, IState> {
         };
     }
 
-    public static onLinkClick(e) {
+    public static onLinkClick(e): void {
         e.preventDefault();
         selectText(e.target);
     }
 
-    private onLinkSpecificEventCheckboxClick = () => {
+    private onLinkSpecificEventCheckboxClick = (): void => {
         this.setState({
             linkSpecificEvent: !this.state.linkSpecificEvent,
         });
     };
 
-    private getUrl() {
+    private getUrl(): string {
         let matrixToUrl;
 
         if (this.props.target instanceof Room) {
@@ -124,7 +124,7 @@ export default class ShareDialog extends React.PureComponent<IProps, IState> {
         return matrixToUrl;
     }
 
-    public render() {
+    public render(): JSX.Element {
         let title;
         let checkbox;
 

src/components/views/dialogs/SpacePreferencesDialog.tsx

@@ -33,7 +33,7 @@ interface IProps extends IDialogProps {
     initialTabId?: SpacePreferenceTab;
 }
 
-const SpacePreferencesAppearanceTab = ({ space }: Pick<IProps, "space">) => {
+const SpacePreferencesAppearanceTab: React.FC<Pick<IProps, "space">> = ({ space }) => {
     const showPeople = useSettingValue("Spaces.showPeopleInSpace", space.roomId);
 
     return (

src/components/views/dialogs/TermsDialog.tsx

@@ -33,7 +33,7 @@ class TermsCheckbox extends React.PureComponent<ITermsCheckboxProps> {
         this.props.onChange(this.props.url, ev.currentTarget.checked);
     };
 
-    public render() {
+    public render(): JSX.Element {
         return <input type="checkbox" onChange={this.onChange} checked={this.props.checked} />;
     }
 }
@@ -119,13 +119,13 @@ export default class TermsDialog extends React.PureComponent<ITermsDialogProps,
         }
     }
 
-    private onTermsCheckboxChange = (url: string, checked: boolean) => {
+    private onTermsCheckboxChange = (url: string, checked: boolean): void => {
         this.setState({
             agreedUrls: Object.assign({}, this.state.agreedUrls, { [url]: checked }),
         });
     };
 
-    public render() {
+    public render(): JSX.Element {
         const rows = [];
         for (const policiesAndService of this.props.policiesAndServicePairs) {
             const parsedBaseUrl = url.parse(policiesAndService.service.baseUrl);

src/components/views/dialogs/UploadConfirmDialog.tsx

@@ -49,23 +49,23 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
         this.objectUrl = URL.createObjectURL(blob);
     }
 
-    public componentWillUnmount() {
+    public componentWillUnmount(): void {
         if (this.objectUrl) URL.revokeObjectURL(this.objectUrl);
     }
 
-    private onCancelClick = () => {
+    private onCancelClick = (): void => {
         this.props.onFinished(false);
     };
 
-    private onUploadClick = () => {
+    private onUploadClick = (): void => {
         this.props.onFinished(true);
     };
 
-    private onUploadAllClick = () => {
+    private onUploadAllClick = (): void => {
         this.props.onFinished(true, true);
     };
 
-    public render() {
+    public render(): JSX.Element {
         let title: string;
         if (this.props.totalFiles > 1 && this.props.currentIndex !== undefined) {
             title = _t("Upload files (%(current)s of %(total)s)", {

src/components/views/dialogs/UserSettingsDialog.tsx

@@ -80,7 +80,7 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
         this.setState({ newSessionManagerEnabled: newValue });
     };
 
-    private getTabs() {
+    private getTabs(): Tab[] {
         const tabs: Tab[] = [];
 
         tabs.push(
@@ -210,7 +210,7 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
         return tabs;
     }
 
-    public render() {
+    public render(): JSX.Element {
         return (
             <BaseDialog
                 className="mx_UserSettingsDialog"

src/components/views/dialogs/VerificationRequestDialog.tsx

@@ -47,7 +47,7 @@ export default class VerificationRequestDialog extends React.Component<IProps, I
         }
     }
 
-    public render() {
+    public render(): JSX.Element {
         const request = this.state.verificationRequest;
         const otherUserId = request && request.otherUserId;
         const member = this.props.member || (otherUserId && MatrixClientPeg.get().getUser(otherUserId));

src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx

@@ -61,17 +61,17 @@ export default class WidgetCapabilitiesPromptDialog extends React.PureComponent<
         };
     }
 
-    private onToggle = (capability: Capability) => {
+    private onToggle = (capability: Capability): void => {
         const newStates = objectShallowClone(this.state.booleanStates);
         newStates[capability] = !newStates[capability];
         this.setState({ booleanStates: newStates });
     };
 
-    private onRememberSelectionChange = (newVal: boolean) => {
+    private onRememberSelectionChange = (newVal: boolean): void => {
         this.setState({ rememberSelection: newVal });
     };
 
-    private onSubmit = async (ev) => {
+    private onSubmit = async (ev): Promise<void> => {
         this.closeAndTryRemember(
             Object.entries(this.state.booleanStates)
                 .filter(([_, isSelected]) => isSelected)
@@ -79,15 +79,15 @@ export default class WidgetCapabilitiesPromptDialog extends React.PureComponent<
         );
     };
 
-    private onReject = async (ev) => {
+    private onReject = async (ev): Promise<void> => {
         this.closeAndTryRemember([]); // nothing was approved
     };
 
-    private closeAndTryRemember(approved: Capability[]) {
+    private closeAndTryRemember(approved: Capability[]): void {
         this.props.onFinished({ approved, remember: this.state.rememberSelection });
     }
 
-    public render() {
+    public render(): JSX.Element {
         // We specifically order the timeline capabilities down to the bottom. The capability text
         // generation cares strongly about this.
         const orderedCapabilities = Object.entries(this.state.booleanStates).sort(([capA], [capB]) => {

src/components/views/dialogs/devtools/AccountData.tsx

@@ -23,27 +23,27 @@ import { EventEditor, EventViewer, eventTypeField, IEditorProps, stringify } fro
 import FilteredList from "./FilteredList";
 import { _t } from "../../../../languageHandler";
 
-export const AccountDataEventEditor = ({ mxEvent, onBack }: IEditorProps) => {
+export const AccountDataEventEditor: React.FC<IEditorProps> = ({ mxEvent, onBack }) => {
     const cli = useContext(MatrixClientContext);
 
     const fields = useMemo(() => [eventTypeField(mxEvent?.getType())], [mxEvent]);
 
-    const onSend = ([eventType]: string[], content?: IContent) => {
-        return cli.setAccountData(eventType, content);
+    const onSend = async ([eventType]: string[], content?: IContent): Promise<void> => {
+        await cli.setAccountData(eventType, content);
     };
 
     const defaultContent = mxEvent ? stringify(mxEvent.getContent()) : undefined;
     return <EventEditor fieldDefs={fields} defaultContent={defaultContent} onSend={onSend} onBack={onBack} />;
 };
 
-export const RoomAccountDataEventEditor = ({ mxEvent, onBack }: IEditorProps) => {
+export const RoomAccountDataEventEditor: React.FC<IEditorProps> = ({ mxEvent, onBack }) => {
     const context = useContext(DevtoolsContext);
     const cli = useContext(MatrixClientContext);
 
     const fields = useMemo(() => [eventTypeField(mxEvent?.getType())], [mxEvent]);
 
-    const onSend = ([eventType]: string[], content?: IContent) => {
-        return cli.setRoomAccountData(context.room.roomId, eventType, content);
+    const onSend = async ([eventType]: string[], content?: IContent): Promise<void> => {
+        await cli.setRoomAccountData(context.room.roomId, eventType, content);
     };
 
     const defaultContent = mxEvent ? stringify(mxEvent.getContent()) : undefined;
@@ -56,18 +56,18 @@ interface IProps extends IDevtoolsProps {
     actionLabel: string;
 }
 
-const BaseAccountDataExplorer = ({ events, Editor, actionLabel, onBack, setTool }: IProps) => {
+const BaseAccountDataExplorer: React.FC<IProps> = ({ events, Editor, actionLabel, onBack, setTool }) => {
     const [query, setQuery] = useState("");
     const [event, setEvent] = useState<MatrixEvent>(null);
 
     if (event) {
-        const onBack = () => {
+        const onBack = (): void => {
             setEvent(null);
         };
         return <EventViewer mxEvent={event} onBack={onBack} Editor={Editor} />;
     }
 
-    const onAction = async () => {
+    const onAction = async (): Promise<void> => {
         setTool(actionLabel, Editor);
     };
 
@@ -75,7 +75,7 @@ const BaseAccountDataExplorer = ({ events, Editor, actionLabel, onBack, setTool
         <BaseTool onBack={onBack} actionLabel={actionLabel} onAction={onAction}>
             <FilteredList query={query} onChange={setQuery}>
                 {Object.entries(events).map(([eventType, ev]) => {
-                    const onClick = () => {
+                    const onClick = (): void => {
                         setEvent(ev);
                     };
 
@@ -90,7 +90,7 @@ const BaseAccountDataExplorer = ({ events, Editor, actionLabel, onBack, setTool
     );
 };
 
-export const AccountDataExplorer = ({ onBack, setTool }: IDevtoolsProps) => {
+export const AccountDataExplorer: React.FC<IDevtoolsProps> = ({ onBack, setTool }) => {
     const cli = useContext(MatrixClientContext);
 
     return (
@@ -104,7 +104,7 @@ export const AccountDataExplorer = ({ onBack, setTool }: IDevtoolsProps) => {
     );
 };
 
-export const RoomAccountDataExplorer = ({ onBack, setTool }: IDevtoolsProps) => {
+export const RoomAccountDataExplorer: React.FC<IDevtoolsProps> = ({ onBack, setTool }) => {
     const context = useContext(DevtoolsContext);
 
     return (

src/components/views/dialogs/devtools/BaseTool.tsx

@@ -39,7 +39,7 @@ interface IProps extends IMinProps {
 const BaseTool: React.FC<XOR<IMinProps, IProps>> = ({ className, actionLabel, onBack, onAction, children }) => {
     const [message, setMessage] = useState<string>(null);
 
-    const onBackClick = () => {
+    const onBackClick = (): void => {
         if (message) {
             setMessage(null);
         } else {
@@ -51,7 +51,7 @@ const BaseTool: React.FC<XOR<IMinProps, IProps>> = ({ className, actionLabel, on
     if (message) {
         children = message;
     } else if (onAction) {
-        const onActionClick = () => {
+        const onActionClick = (): void => {
             onAction().then((msg) => {
                 if (typeof msg === "string") {
                     setMessage(msg);

src/components/views/dialogs/devtools/Event.tsx

@@ -72,7 +72,7 @@ const validateEventContent = withValidation<any, Error | undefined>({
     ],
 });
 
-export const EventEditor = ({ fieldDefs, defaultContent = "{\n\n}", onSend, onBack }: IEventEditorProps) => {
+export const EventEditor: React.FC<IEventEditorProps> = ({ fieldDefs, defaultContent = "{\n\n}", onSend, onBack }) => {
     const [fieldData, setFieldData] = useState<string[]>(fieldDefs.map((def) => def.default ?? ""));
     const [content, setContent] = useState<string>(defaultContent);
     const contentField = useRef<Field>();
@@ -96,7 +96,7 @@ export const EventEditor = ({ fieldDefs, defaultContent = "{\n\n}", onSend, onBa
         />
     ));
 
-    const onAction = async () => {
+    const onAction = async (): Promise<string> => {
         const valid = await contentField.current.validate({});
 
         if (!valid) {
@@ -143,17 +143,17 @@ interface IViewerProps extends Required<IEditorProps> {
     Editor: React.FC<Required<IEditorProps>>;
 }
 
-export const EventViewer = ({ mxEvent, onBack, Editor }: IViewerProps) => {
+export const EventViewer: React.FC<IViewerProps> = ({ mxEvent, onBack, Editor }) => {
     const [editing, setEditing] = useState(false);
 
     if (editing) {
-        const onBack = () => {
+        const onBack = (): void => {
             setEditing(false);
         };
         return <Editor mxEvent={mxEvent} onBack={onBack} />;
     }
 
-    const onAction = async () => {
+    const onAction = async (): Promise<void> => {
         setEditing(true);
     };
 
@@ -171,13 +171,13 @@ const getBaseEventId = (baseEvent: MatrixEvent): string => {
     return mxEvent.getWireContent()["m.relates_to"]?.event_id ?? baseEvent.getId();
 };
 
-export const TimelineEventEditor = ({ mxEvent, onBack }: IEditorProps) => {
+export const TimelineEventEditor: React.FC<IEditorProps> = ({ mxEvent, onBack }) => {
     const context = useContext(DevtoolsContext);
     const cli = useContext(MatrixClientContext);
 
     const fields = useMemo(() => [eventTypeField(mxEvent?.getType())], [mxEvent]);
 
-    const onSend = ([eventType]: string[], content?: IContent) => {
+    const onSend = ([eventType]: string[], content?: IContent): Promise<unknown> => {
         return cli.sendEvent(context.room.roomId, eventType, content);
     };
 

src/components/views/dialogs/devtools/FilteredList.tsx

@@ -29,7 +29,7 @@ interface IProps {
     onChange(value: string): void;
 }
 
-const FilteredList = ({ children, query, onChange }: IProps) => {
+const FilteredList: React.FC<IProps> = ({ children, query, onChange }) => {
     const [truncateAt, setTruncateAt] = useState<number>(INITIAL_LOAD_TILES);
     const [filteredChildren, setFilteredChildren] = useState<React.ReactElement[]>(children);
 
@@ -51,8 +51,8 @@ const FilteredList = ({ children, query, onChange }: IProps) => {
         return filteredChildren.length;
     };
 
-    const createOverflowElement = (overflowCount: number, totalCount: number) => {
-        const showMore = () => {
+    const createOverflowElement = (overflowCount: number, totalCount: number): JSX.Element => {
+        const showMore = (): void => {
             setTruncateAt((num) => num + LOAD_TILES_STEP_SIZE);
         };
 

src/components/views/dialogs/devtools/RoomState.tsx

@@ -24,7 +24,7 @@ import MatrixClientContext from "../../../../contexts/MatrixClientContext";
 import { EventEditor, EventViewer, eventTypeField, stateKeyField, IEditorProps, stringify } from "./Event";
 import FilteredList from "./FilteredList";
 
-export const StateEventEditor = ({ mxEvent, onBack }: IEditorProps) => {
+export const StateEventEditor: React.FC<IEditorProps> = ({ mxEvent, onBack }) => {
     const context = useContext(DevtoolsContext);
     const cli = useContext(MatrixClientContext);
 
@@ -33,8 +33,8 @@ export const StateEventEditor = ({ mxEvent, onBack }: IEditorProps) => {
         [mxEvent],
     );
 
-    const onSend = ([eventType, stateKey]: string[], content?: IContent) => {
-        return cli.sendStateEvent(context.room.roomId, eventType, content, stateKey);
+    const onSend = async ([eventType, stateKey]: string[], content?: IContent): Promise<void> => {
+        await cli.sendStateEvent(context.room.roomId, eventType, content, stateKey);
     };
 
     const defaultContent = mxEvent ? stringify(mxEvent.getContent()) : undefined;
@@ -46,7 +46,7 @@ interface StateEventButtonProps {
     onClick(): void;
 }
 
-const StateEventButton = ({ label, onClick }: StateEventButtonProps) => {
+const StateEventButton: React.FC<StateEventButtonProps> = ({ label, onClick }) => {
     const trimmed = label.trim();
 
     return (
@@ -66,7 +66,7 @@ interface IEventTypeProps extends Pick<IDevtoolsProps, "onBack"> {
     eventType: string;
 }
 
-const RoomStateExplorerEventType = ({ eventType, onBack }: IEventTypeProps) => {
+const RoomStateExplorerEventType: React.FC<IEventTypeProps> = ({ eventType, onBack }) => {
     const context = useContext(DevtoolsContext);
     const [query, setQuery] = useState("");
     const [event, setEvent] = useState<MatrixEvent | null>(null);
@@ -82,7 +82,7 @@ const RoomStateExplorerEventType = ({ eventType, onBack }: IEventTypeProps) => {
     }, [events]);
 
     if (event) {
-        const _onBack = () => {
+        const _onBack = (): void => {
             if (events?.size === 1 && events.has("")) {
                 onBack();
             } else {
@@ -103,7 +103,7 @@ const RoomStateExplorerEventType = ({ eventType, onBack }: IEventTypeProps) => {
     );
 };
 
-export const RoomStateExplorer = ({ onBack, setTool }: IDevtoolsProps) => {
+export const RoomStateExplorer: React.FC<IDevtoolsProps> = ({ onBack, setTool }) => {
     const context = useContext(DevtoolsContext);
     const [query, setQuery] = useState("");
     const [eventType, setEventType] = useState<string | null>(null);
@@ -111,13 +111,13 @@ export const RoomStateExplorer = ({ onBack, setTool }: IDevtoolsProps) => {
     const events = context.room.currentState.events;
 
     if (eventType !== null) {
-        const onBack = () => {
+        const onBack = (): void => {
             setEventType(null);
         };
         return <RoomStateExplorerEventType eventType={eventType} onBack={onBack} />;
     }
 
-    const onAction = async () => {
+    const onAction = async (): Promise<void> => {
         setTool(_t("Send custom state event"), StateEventEditor);
     };
 

src/components/views/dialogs/devtools/ServerInfo.tsx

@@ -33,11 +33,11 @@ interface IServerWellKnown {
     };
 }
 
-const ServerInfo = ({ onBack }: IDevtoolsProps) => {
+const ServerInfo: React.FC<IDevtoolsProps> = ({ onBack }) => {
     const cli = useContext(MatrixClientContext);
     const capabilities = useAsyncMemo(() => cli.getCapabilities(true).catch(() => FAILED_TO_LOAD), [cli]);
     const clientVersions = useAsyncMemo(() => cli.getVersions().catch(() => FAILED_TO_LOAD), [cli]);
-    const serverVersions = useAsyncMemo<IServerWellKnown | symbol>(async () => {
+    const serverVersions = useAsyncMemo(async (): Promise<IServerWellKnown | symbol> => {
         let baseUrl = cli.getHomeserverUrl();
 
         try {

src/components/views/dialogs/devtools/ServersInRoom.tsx

@@ -20,7 +20,7 @@ import { EventType } from "matrix-js-sdk/src/@types/event";
 import BaseTool, { DevtoolsContext, IDevtoolsProps } from "./BaseTool";
 import { _t } from "../../../../languageHandler";
 
-const ServersInRoom = ({ onBack }: IDevtoolsProps) => {
+const ServersInRoom: React.FC<IDevtoolsProps> = ({ onBack }) => {
     const context = useContext(DevtoolsContext);
 
     const servers = useMemo<Record<string, number>>(() => {

src/components/views/dialogs/devtools/SettingExplorer.tsx

@@ -26,28 +26,28 @@ import { SettingLevel } from "../../../../settings/SettingLevel";
 import { SETTINGS } from "../../../../settings/Settings";
 import Field from "../../elements/Field";
 
-const SettingExplorer = ({ onBack }: IDevtoolsProps) => {
+const SettingExplorer: React.FC<IDevtoolsProps> = ({ onBack }) => {
     const [setting, setSetting] = useState<string>(null);
     const [editing, setEditing] = useState(false);
 
     if (setting && editing) {
-        const onBack = () => {
+        const onBack = (): void => {
             setEditing(false);
         };
         return <EditSetting setting={setting} onBack={onBack} />;
     } else if (setting) {
-        const onBack = () => {
+        const onBack = (): void => {
             setSetting(null);
         };
-        const onEdit = async () => {
+        const onEdit = async (): Promise<void> => {
             setEditing(true);
         };
         return <ViewSetting setting={setting} onBack={onBack} onEdit={onEdit} />;
     } else {
-        const onView = (setting: string) => {
+        const onView = (setting: string): void => {
             setSetting(setting);
         };
-        const onEdit = (setting: string) => {
+        const onEdit = (setting: string): void => {
             setSetting(setting);
             setEditing(true);
         };
@@ -63,7 +63,7 @@ interface ICanEditLevelFieldProps {
     roomId?: string;
 }
 
-const CanEditLevelField = ({ setting, roomId, level }: ICanEditLevelFieldProps) => {
+const CanEditLevelField: React.FC<ICanEditLevelFieldProps> = ({ setting, roomId, level }) => {
     const canEdit = SettingsStore.canSetValue(setting, roomId, level);
     const className = canEdit ? "mx_DevTools_SettingsExplorer_mutable" : "mx_DevTools_SettingsExplorer_immutable";
     return (
@@ -92,14 +92,14 @@ interface IEditSettingProps extends Pick<IDevtoolsProps, "onBack"> {
     setting: string;
 }
 
-const EditSetting = ({ setting, onBack }: IEditSettingProps) => {
+const EditSetting: React.FC<IEditSettingProps> = ({ setting, onBack }) => {
     const context = useContext(DevtoolsContext);
     const [explicitValue, setExplicitValue] = useState(renderExplicitSettingValues(setting, null));
     const [explicitRoomValue, setExplicitRoomValue] = useState(
         renderExplicitSettingValues(setting, context.room.roomId),
     );
 
-    const onSave = async () => {
+    const onSave = async (): Promise<string> => {
         try {
             const parsedExplicit = JSON.parse(explicitValue);
             const parsedExplicitRoom = JSON.parse(explicitRoomValue);
@@ -203,7 +203,7 @@ interface IViewSettingProps extends Pick<IDevtoolsProps, "onBack"> {
     onEdit(): Promise<void>;
 }
 
-const ViewSetting = ({ setting, onEdit, onBack }: IViewSettingProps) => {
+const ViewSetting: React.FC<IViewSettingProps> = ({ setting, onEdit, onBack }) => {
     const context = useContext(DevtoolsContext);
 
     return (
@@ -261,7 +261,7 @@ interface ISettingsListProps extends Pick<IDevtoolsProps, "onBack"> {
     onEdit(setting: string): void;
 }
 
-const SettingsList = ({ onBack, onView, onEdit }: ISettingsListProps) => {
+const SettingsList: React.FC<ISettingsListProps> = ({ onBack, onView, onEdit }) => {
     const context = useContext(DevtoolsContext);
     const [query, setQuery] = useState("");
 

src/components/views/dialogs/devtools/VerificationExplorer.tsx

@@ -25,7 +25,8 @@ import { CryptoEvent } from "matrix-js-sdk/src/crypto";
 import { useTypedEventEmitter, useTypedEventEmitterState } from "../../../../hooks/useEventEmitter";
 import { _t, _td } from "../../../../languageHandler";
 import MatrixClientContext from "../../../../contexts/MatrixClientContext";
-import BaseTool, { DevtoolsContext, IDevtoolsProps } from "./BaseTool";
+import BaseTool, { DevtoolsContext } from "./BaseTool";
+import { Tool } from "../DevtoolsDialog";
 
 const PHASE_MAP: Record<Phase, string> = {
     [Phase.Unsent]: _td("Unsent"),
@@ -80,7 +81,7 @@ const VerificationRequestExplorer: React.FC<{
     );
 };
 
-const VerificationExplorer = ({ onBack }: IDevtoolsProps) => {
+const VerificationExplorer: Tool = ({ onBack }) => {
     const cli = useContext(MatrixClientContext);
     const context = useContext(DevtoolsContext);
 

src/components/views/dialogs/devtools/WidgetExplorer.tsx

@@ -25,7 +25,7 @@ import { UPDATE_EVENT } from "../../../../stores/AsyncStore";
 import FilteredList from "./FilteredList";
 import { StateEventEditor } from "./RoomState";
 
-const WidgetExplorer = ({ onBack }: IDevtoolsProps) => {
+const WidgetExplorer: React.FC<IDevtoolsProps> = ({ onBack }) => {
     const context = useContext(DevtoolsContext);
     const [query, setQuery] = useState("");
     const [widget, setWidget] = useState<IApp>(null);
@@ -35,7 +35,7 @@ const WidgetExplorer = ({ onBack }: IDevtoolsProps) => {
     });
 
     if (widget && widgets.includes(widget)) {
-        const onBack = () => {
+        const onBack = (): void => {
             setWidget(null);
         };
 

src/components/views/dialogs/security/AccessSecretStorageDialog.tsx

@@ -77,24 +77,24 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
         };
     }
 
-    private onCancel = () => {
+    private onCancel = (): void => {
         if (this.state.resetting) {
             this.setState({ resetting: false });
         }
         this.props.onFinished(false);
     };
 
-    private onUseRecoveryKeyClick = () => {
+    private onUseRecoveryKeyClick = (): void => {
         this.setState({
             forceRecoveryKey: true,
         });
     };
 
-    private validateRecoveryKeyOnChange = debounce(async () => {
+    private validateRecoveryKeyOnChange = debounce(async (): Promise<void> => {
         await this.validateRecoveryKey();
     }, VALIDATION_THROTTLE_MS);
 
-    private async validateRecoveryKey() {
+    private async validateRecoveryKey(): Promise<void> {
         if (this.state.recoveryKey === "") {
             this.setState({
                 recoveryKeyValid: null,
@@ -119,7 +119,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
         }
     }
 
-    private onRecoveryKeyChange = (ev: ChangeEvent<HTMLInputElement>) => {
+    private onRecoveryKeyChange = (ev: ChangeEvent<HTMLInputElement>): void => {
         this.setState({
             recoveryKey: ev.target.value,
             recoveryKeyFileError: null,
@@ -136,7 +136,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
         this.validateRecoveryKeyOnChange();
     };
 
-    private onRecoveryKeyFileChange = async (ev: ChangeEvent<HTMLInputElement>) => {
+    private onRecoveryKeyFileChange = async (ev: ChangeEvent<HTMLInputElement>): Promise<void> => {
         if (ev.target.files.length === 0) return;
 
         const f = ev.target.files[0];
@@ -169,11 +169,11 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
         }
     };
 
-    private onRecoveryKeyFileUploadClick = () => {
+    private onRecoveryKeyFileUploadClick = (): void => {
         this.fileUpload.current.click();
     };
 
-    private onPassPhraseNext = async (ev: FormEvent<HTMLFormElement> | React.MouseEvent) => {
+    private onPassPhraseNext = async (ev: FormEvent<HTMLFormElement> | React.MouseEvent): Promise<void> => {
         ev.preventDefault();
 
         if (this.state.passPhrase.length <= 0) return;
@@ -188,7 +188,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
         }
     };
 
-    private onRecoveryKeyNext = async (ev: FormEvent<HTMLFormElement> | React.MouseEvent) => {
+    private onRecoveryKeyNext = async (ev: FormEvent<HTMLFormElement> | React.MouseEvent): Promise<void> => {
         ev.preventDefault();
 
         if (!this.state.recoveryKeyValid) return;
@@ -203,19 +203,19 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
         }
     };
 
-    private onPassPhraseChange = (ev: ChangeEvent<HTMLInputElement>) => {
+    private onPassPhraseChange = (ev: ChangeEvent<HTMLInputElement>): void => {
         this.setState({
             passPhrase: ev.target.value,
             keyMatches: null,
         });
     };
 
-    private onResetAllClick = (ev: React.MouseEvent<HTMLAnchorElement>) => {
+    private onResetAllClick = (ev: React.MouseEvent<HTMLAnchorElement>): void => {
         ev.preventDefault();
         this.setState({ resetting: true });
     };
 
-    private onConfirmResetAllClick = async () => {
+    private onConfirmResetAllClick = async (): Promise<void> => {
         // Hide ourselves so the user can interact with the reset dialogs.
         // We don't conclude the promise chain (onFinished) yet to avoid confusing
         // any upstream code flows.
@@ -226,11 +226,11 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
 
         try {
             // Force reset secret storage (which resets the key backup)
-            await accessSecretStorage(async () => {
+            await accessSecretStorage(async (): Promise<void> => {
                 // Now reset cross-signing so everything Just Works™ again.
                 const cli = MatrixClientPeg.get();
                 await cli.bootstrapCrossSigning({
-                    authUploadDeviceSigningKeys: async (makeRequest) => {
+                    authUploadDeviceSigningKeys: async (makeRequest): Promise<void> => {
                         const { finished } = Modal.createDialog(InteractiveAuthDialog, {
                             title: _t("Setting up keys"),
                             matrixClient: cli,
@@ -268,7 +268,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
         }
     }
 
-    public render() {
+    public render(): JSX.Element {
         const hasPassphrase =
             this.props.keyInfo &&
             this.props.keyInfo.passphrase &&

src/components/views/dialogs/security/ConfirmDestroyCrossSigningDialog.tsx

@@ -33,7 +33,7 @@ export default class ConfirmDestroyCrossSigningDialog extends React.Component<IP
         this.props.onFinished(false);
     };
 
-    public render() {
+    public render(): JSX.Element {
         return (
             <BaseDialog
                 className="mx_ConfirmDestroyCrossSigningDialog"

src/components/views/dialogs/security/CreateCrossSigningDialog.tsx

@@ -167,7 +167,7 @@ export default class CreateCrossSigningDialog extends React.PureComponent<IProps
         this.props.onFinished(false);
     };
 
-    public render() {
+    public render(): JSX.Element {
         let content;
         if (this.state.error) {
             content = (

src/components/views/dialogs/security/RestoreKeyBackupDialog.tsx

@@ -125,7 +125,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
 
     private onResetRecoveryClick = (): void => {
         this.props.onFinished(false);
-        accessSecretStorage(async () => {}, /* forceReset = */ true);
+        accessSecretStorage(async (): Promise<void> => {}, /* forceReset = */ true);
     };
 
     private onRecoveryKeyChange = (e): void => {
@@ -227,7 +227,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
         });
         try {
             // `accessSecretStorage` may prompt for storage access as needed.
-            await accessSecretStorage(async () => {
+            await accessSecretStorage(async (): Promise<void> => {
                 await MatrixClientPeg.get().restoreKeyBackupWithSecretStorage(
                     this.state.backupInfo,
                     undefined,

src/components/views/dialogs/security/SetupEncryptionDialog.tsx

@@ -22,7 +22,7 @@ import { _t } from "../../../../languageHandler";
 import { SetupEncryptionStore, Phase } from "../../../../stores/SetupEncryptionStore";
 import { IDialogProps } from "../IDialogProps";
 
-function iconFromPhase(phase: Phase) {
+function iconFromPhase(phase: Phase): string {
     if (phase === Phase.Done) {
         return require("../../../../../res/img/e2e/verified-deprecated.svg").default;
     } else {
@@ -45,11 +45,11 @@ export default class SetupEncryptionDialog extends React.Component<IProps, IStat
         this.state = { icon: iconFromPhase(this.store.phase) };
     }
 
-    public componentDidMount() {
+    public componentDidMount(): void {
         this.store.on("update", this.onStoreUpdate);
     }
 
-    public componentWillUnmount() {
+    public componentWillUnmount(): void {
         this.store.removeListener("update", this.onStoreUpdate);
     }
 
@@ -57,7 +57,7 @@ export default class SetupEncryptionDialog extends React.Component<IProps, IStat
         this.setState({ icon: iconFromPhase(this.store.phase) });
     };
 
-    public render() {
+    public render(): JSX.Element {
         return (
             <BaseDialog
                 headerImage={this.state.icon}

src/components/views/dialogs/spotlight/RoomResultContextMenus.tsx

@@ -32,7 +32,7 @@ interface Props {
     room: Room;
 }
 
-export function RoomResultContextMenus({ room }: Props) {
+export function RoomResultContextMenus({ room }: Props): JSX.Element {
     const [notificationState] = useNotificationState(room);
 
     const [generalMenuPosition, setGeneralMenuPosition] = useState<DOMRect | null>(null);