Merge pull request #6285 from matrix-org/jryans/rework-linting-2

Migrate to `eslint-plugin-matrix-org`

.eslintrc.js

@@ -1,7 +1,9 @@
 module.exports = {
-    extends: ["matrix-org", "matrix-org/react-legacy"],
+    plugins: ["matrix-org"],
-    parser: "babel-eslint",
+    extends: [
-
+        "plugin:matrix-org/babel",
+        "plugin:matrix-org/react",
+    ],
     env: {
         browser: true,
         node: true,
@@ -15,12 +17,32 @@ module.exports = {
         "prefer-promise-reject-errors": "off",
         "no-async-promise-executor": "off",
         "quotes": "off",
-    },
+        "no-extra-boolean-cast": "off",
 
+        // Bind or arrow functions in props causes performance issues (but we
+        // currently use them in some places).
+        // It's disabled here, but we should using it sparingly.
+        "react/jsx-no-bind": "off",
+        "react/jsx-key": ["error"],
+    },
     overrides: [{
-        "files": ["src/**/*.{ts,tsx}", "test/**/*.{ts,tsx}"],
+        files: [
-        "extends": ["matrix-org/ts"],
+            "src/**/*.{ts,tsx}",
-        "rules": {
+            "test/**/*.{ts,tsx}",
+        ],
+        extends: [
+            "plugin:matrix-org/typescript",
+            "plugin:matrix-org/react",
+        ],
+        rules: {
+            // Things we do that break the ideal style
+            "prefer-promise-reject-errors": "off",
+            "quotes": "off",
+            "no-extra-boolean-cast": "off",
+
+            // Remove Babel things manually due to override limitations
+            "@babel/no-invalid-this": ["off"],
+
             // We're okay being explicit at the moment
             "@typescript-eslint/no-empty-interface": "off",
             // We disable this while we're transitioning
@@ -28,8 +50,6 @@ module.exports = {
             // We'd rather not do this but we do
             "@typescript-eslint/ban-ts-comment": "off",
 
-            "quotes": "off",
-            "no-extra-boolean-cast": "off",
             "no-restricted-properties": [
                 "error",
                 ...buildRestrictedPropertiesOptions(

.flowconfig

@@ -1,6 +0,0 @@
-[include]
-src/**/*.js
-test/**/*.js
-
-[ignore]
-node_modules/

babel.config.js

@@ -10,7 +10,6 @@ module.exports = {
             ],
         }],
         "@babel/preset-typescript",
-        "@babel/preset-flow",
         "@babel/preset-react",
     ],
     "plugins": [
@@ -19,7 +18,6 @@ module.exports = {
         "@babel/plugin-proposal-numeric-separator",
         "@babel/plugin-proposal-class-properties",
         "@babel/plugin-proposal-object-rest-spread",
-        "@babel/plugin-transform-flow-comments",
         "@babel/plugin-syntax-dynamic-import",
         "@babel/plugin-transform-runtime",
     ],

package.json

@@ -104,16 +104,16 @@
   "devDependencies": {
     "@babel/cli": "^7.12.10",
     "@babel/core": "^7.12.10",
+    "@babel/eslint-parser": "^7.12.10",
+    "@babel/eslint-plugin": "^7.12.10",
     "@babel/parser": "^7.12.11",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
     "@babel/plugin-proposal-decorators": "^7.12.12",
     "@babel/plugin-proposal-export-default-from": "^7.12.1",
     "@babel/plugin-proposal-numeric-separator": "^7.12.7",
     "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
-    "@babel/plugin-transform-flow-comments": "^7.12.1",
     "@babel/plugin-transform-runtime": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
-    "@babel/preset-flow": "^7.12.1",
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
     "@babel/register": "^7.12.10",
@@ -139,18 +139,16 @@
     "@types/react-transition-group": "^4.4.0",
     "@types/sanitize-html": "^2.3.1",
     "@types/zxcvbn": "^4.4.0",
-    "@typescript-eslint/eslint-plugin": "^4.14.0",
+    "@typescript-eslint/eslint-plugin": "^4.17.0",
-    "@typescript-eslint/parser": "^4.14.0",
+    "@typescript-eslint/parser": "^4.17.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
-    "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
     "chokidar": "^3.5.1",
     "concurrently": "^5.3.0",
     "enzyme": "^3.11.0",
     "eslint": "7.18.0",
-    "eslint-config-matrix-org": "^0.2.0",
+    "eslint-config-google": "^0.14.0",
-    "eslint-plugin-babel": "^5.3.1",
+    "eslint-plugin-matrix-org": "github:matrix-org/eslint-plugin-matrix-org#main",
-    "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "glob": "^7.1.6",

src/AddThreepid.js

@@ -189,7 +189,6 @@ export default class AddThreepid {
                         // pop up an interactive auth dialog
                         const InteractiveAuthDialog = sdk.getComponent("dialogs.InteractiveAuthDialog");
 
-
                         const dialogAesthetics = {
                             [SSOAuthEntry.PHASE_PREAUTH]: {
                                 title: _t("Use Single Sign On to continue"),

src/CallHandler.tsx

@@ -80,7 +80,7 @@ import CountlyAnalytics from "./CountlyAnalytics";
 import { UIFeature } from "./settings/UIFeature";
 import { CallError } from "matrix-js-sdk/src/webrtc/call";
 import { logger } from 'matrix-js-sdk/src/logger';
-import DesktopCapturerSourcePicker from "./components/views/elements/DesktopCapturerSourcePicker"
+import DesktopCapturerSourcePicker from "./components/views/elements/DesktopCapturerSourcePicker";
 import { Action } from './dispatcher/actions';
 import VoipUserMapper from './VoipUserMapper';
 import { addManagedHybridWidget, isManagedHybridWidgetEnabled } from './widgets/ManagedHybrid';
@@ -166,7 +166,7 @@ export default class CallHandler extends EventEmitter {
 
     static sharedInstance() {
         if (!window.mxCallHandler) {
-            window.mxCallHandler = new CallHandler()
+            window.mxCallHandler = new CallHandler();
         }
 
         return window.mxCallHandler;
@@ -185,7 +185,7 @@ export default class CallHandler extends EventEmitter {
             const nativeUser = this.assertedIdentityNativeUsers[call.callId];
             if (nativeUser) {
                 const room = findDMForUser(MatrixClientPeg.get(), nativeUser);
-                if (room) return room.roomId
+                if (room) return room.roomId;
             }
         }
 
@@ -299,7 +299,7 @@ export default class CallHandler extends EventEmitter {
             action: 'incoming_call',
             call: call,
         }, true);
-    }
+    };
 
     getCallForRoom(roomId: string): MatrixCall {
         return this.calls.get(roomId) || null;
@@ -816,7 +816,7 @@ export default class CallHandler extends EventEmitter {
 
                     Analytics.trackEvent('voip', 'receiveCall', 'type', call.type);
                     console.log("Adding call for room ", mappedRoomId);
-                    this.calls.set(mappedRoomId, call)
+                    this.calls.set(mappedRoomId, call);
                     this.emit(CallHandlerEvent.CallsChanged, this.calls);
                     this.setCallListeners(call);
 
@@ -872,7 +872,7 @@ export default class CallHandler extends EventEmitter {
                 this.dialNumber(payload.number);
                 break;
         }
-    }
+    };
 
     private async dialNumber(number: string) {
         const results = await this.pstnLookup(number);

src/CountlyAnalytics.ts

@@ -338,8 +338,8 @@ const getRoomStats = (roomId: string) => {
         "is_encrypted": cli?.isRoomEncrypted(roomId),
         // eslint-disable-next-line camelcase
         "is_public": room?.currentState.getStateEvents("m.room.join_rules", "")?.getContent()?.join_rule === "public",
-    }
+    };
-}
+};
 
 // async wrapper for regex-powered String.prototype.replace
 const strReplaceAsync = async (str: string, regex: RegExp, fn: (...args: string[]) => Promise<string>) => {
@@ -414,7 +414,7 @@ export default class CountlyAnalytics {
 
         this.anonymous = anonymous;
         if (anonymous) {
-            await this.changeUserKey(randomString(64))
+            await this.changeUserKey(randomString(64));
         } else {
             await this.changeUserKey(await hashHex(MatrixClientPeg.get().getUserId()), true);
         }
@@ -438,7 +438,7 @@ export default class CountlyAnalytics {
         await this.track("Opt-Out" );
         this.endSession();
         window.clearInterval(this.heartbeatIntervalId);
-        window.clearTimeout(this.activityIntervalId)
+        window.clearTimeout(this.activityIntervalId);
         this.baseUrl = null;
         // remove listeners bound in trackSessions()
         window.removeEventListener("beforeunload", this.endSession);
@@ -669,7 +669,7 @@ export default class CountlyAnalytics {
             count,
             platform: this.appPlatform,
             app_version: this.appVersion,
-        }
+        };
 
         this.pendingEvents.push(ev);
         if (this.pendingEvents.length > MAX_PENDING_EVENTS) {
@@ -680,7 +680,7 @@ export default class CountlyAnalytics {
     private getOrientation = (): Orientation => {
         return window.matchMedia("(orientation: landscape)").matches
             ? Orientation.Landscape
-            : Orientation.Portrait
+            : Orientation.Portrait;
     };
 
     private reportOrientation = () => {
@@ -749,7 +749,7 @@ export default class CountlyAnalytics {
             const request: Parameters<typeof CountlyAnalytics.prototype.request>[0] = {
                 begin_session: 1,
                 user_details: JSON.stringify(userDetails),
-            }
+            };
 
             const metrics = this.getMetrics();
             if (metrics) {
@@ -773,7 +773,7 @@ export default class CountlyAnalytics {
 
     private endSession = () => {
         if (this.sessionStarted) {
-            window.removeEventListener("resize", this.reportOrientation)
+            window.removeEventListener("resize", this.reportOrientation);
 
             this.reportViewDuration();
             this.request({

src/HtmlUtils.tsx

@@ -138,7 +138,7 @@ export function getHtmlText(insaneHtml: string): string {
         selfClosing: [],
         allowedSchemes: [],
         disallowedTagsMode: 'discard',
-    })
+    });
 }
 
 /**

src/KeyBindingsDefaults.ts

@@ -156,7 +156,7 @@ const messageComposerBindings = (): KeyBinding<MessageComposerAction>[] => {
         }
     }
     return bindings;
-}
+};
 
 const autocompleteBindings = (): KeyBinding<AutocompleteAction>[] => {
     return [
@@ -207,7 +207,7 @@ const autocompleteBindings = (): KeyBinding<AutocompleteAction>[] => {
             },
         },
     ];
-}
+};
 
 const roomListBindings = (): KeyBinding<RoomListAction>[] => {
     return [
@@ -248,7 +248,7 @@ const roomListBindings = (): KeyBinding<RoomListAction>[] => {
             },
         },
     ];
-}
+};
 
 const roomBindings = (): KeyBinding<RoomAction>[] => {
     const bindings: KeyBinding<RoomAction>[] = [
@@ -312,7 +312,7 @@ const roomBindings = (): KeyBinding<RoomAction>[] => {
     }
 
     return bindings;
-}
+};
 
 const navigationBindings = (): KeyBinding<NavigationAction>[] => {
     return [
@@ -396,7 +396,7 @@ const navigationBindings = (): KeyBinding<NavigationAction>[] => {
             },
         },
     ];
-}
+};
 
 export const defaultBindingsProvider: IKeyBindingsProvider = {
     getMessageComposerBindings: messageComposerBindings,
@@ -404,4 +404,4 @@ export const defaultBindingsProvider: IKeyBindingsProvider = {
     getRoomListBindings: roomListBindings,
     getRoomBindings: roomBindings,
     getNavigationBindings: navigationBindings,
-}
+};

src/KeyBindingsManager.ts

@@ -140,12 +140,12 @@ export type KeyCombo = {
     ctrlKey?: boolean;
     metaKey?: boolean;
     shiftKey?: boolean;
-}
+};
 
 export type KeyBinding<T extends string> = {
     action: T;
     keyCombo: KeyCombo;
-}
+};
 
 /**
  * Helper method to check if a KeyboardEvent matches a KeyCombo

src/Login.ts

@@ -190,7 +190,6 @@ export default class Login {
     }
 }
 
-
 /**
  * Send a login request to the given server, and format the response
  * as a MatrixClientCreds

src/Modal.tsx

@@ -15,7 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';

src/Presence.ts

@@ -78,7 +78,7 @@ class Presence {
             this.setState(State.Online);
             this.unavailableTimer.restart();
         }
-    }
+    };
 
     /**
      * Set the presence state.

src/Rooms.ts

@@ -104,7 +104,6 @@ export function setDMRoom(roomId: string, userId: string): Promise<void> {
         dmRoomMap[userId] = roomList;
     }
 
-
     return MatrixClientPeg.get().setAccountData('m.direct', dmRoomMap);
 }
 

src/ScalarMessaging.js

@@ -208,7 +208,6 @@ Example:
     ]
 }
 
-
 membership_state AND bot_options
 --------------------------------
 Get the content of the "m.room.member" or "m.room.bot.options" state event respectively.

src/SecurityManager.ts

@@ -135,7 +135,7 @@ async function getSecretStorageKey(
 
     const keyFromCustomisations = SecurityCustomisations.getSecretStorageKey?.();
     if (keyFromCustomisations) {
-        console.log("Using key from security customisations (secret storage)")
+        console.log("Using key from security customisations (secret storage)");
         cacheSecretStorageKey(keyId, keyInfo, keyFromCustomisations);
         return [keyId, keyFromCustomisations];
     }
@@ -185,7 +185,7 @@ export async function getDehydrationKey(
 ): Promise<Uint8Array> {
     const keyFromCustomisations = SecurityCustomisations.getSecretStorageKey?.();
     if (keyFromCustomisations) {
-        console.log("Using key from security customisations (dehydration)")
+        console.log("Using key from security customisations (dehydration)");
         return keyFromCustomisations;
     }
 

src/SendHistoryManager.ts

@@ -1,4 +1,3 @@
-//@flow
 /*
 Copyright 2017 Aviral Dasgupta
 

src/SlashCommands.tsx

@@ -47,7 +47,7 @@ import { EffectiveMembership, getEffectiveMembership, leaveRoomBehaviour } from
 import SdkConfig from "./SdkConfig";
 import SettingsStore from "./settings/SettingsStore";
 import { UIFeature } from "./settings/UIFeature";
-import {CHAT_EFFECTS} from "./effects"
+import { CHAT_EFFECTS } from "./effects";
 import CallHandler from "./CallHandler";
 import { guessAndSetDMRoom } from "./Rooms";
 
@@ -1176,7 +1176,7 @@ export const Commands = [
                 })());
             },
             category: CommandCategories.effects,
-        })
+        });
     }),
 ];
 

src/TextForEvent.tsx

@@ -112,7 +112,7 @@ function textForMemberEvent(ev): () => string | null {
                         targetName,
                         reason,
                     })
-                    : _t('%(senderName)s withdrew %(targetName)s\'s invitation', { senderName, targetName })
+                    : _t('%(senderName)s withdrew %(targetName)s\'s invitation', { senderName, targetName });
             } else if (prevContent.membership === "join") {
                 return () => reason
                     ? _t('%(senderName)s kicked %(targetName)s: %(reason)s', {
@@ -492,7 +492,7 @@ const onPinnedMessagesClick = (): void => {
         phase: RightPanelPhases.PinnedMessages,
         allowClose: false,
     });
-}
+};
 
 function textForPinnedEvent(event: MatrixEvent, allowJSX: boolean): () => string | JSX.Element | null {
     if (!SettingsStore.getValue("feature_pinning")) return null;

src/autocomplete/CommandProvider.tsx

@@ -68,7 +68,6 @@ export default class CommandProvider extends AutocompleteProvider {
             }
         }
 
-
         return matches.filter(cmd => cmd.isEnabled()).map((result) => {
             let completion = result.getCommand() + ' ';
             const usedAlias = result.aliases.find(alias => `/${alias}` === command[1]);

src/components/structures/GroupView.js

@@ -361,7 +361,10 @@ class FeaturedUser extends React.Component {
                         "Failed to remove a user from the summary of %(groupId)s",
                         { groupId: this.props.groupId },
                     ),
-                    description: _t("The user '%(displayName)s' could not be removed from the summary.", {displayName}),
+                    description: _t(
+                        "The user '%(displayName)s' could not be removed from the summary.",
+                        { displayName },
+                    ),
                 },
             );
         });

src/components/structures/HomePage.tsx

@@ -117,7 +117,6 @@ const HomePage: React.FC<IProps> = ({ justRegistered = false }) => {
         </React.Fragment>;
     }
 
-
     return <AutoHideScrollbar className="mx_HomePage mx_HomePage_default">
         <div className="mx_HomePage_default_wrapper">
             { introSection }

src/components/structures/HostSignupAction.tsx

@@ -35,7 +35,7 @@ export default class HostSignupAction extends React.PureComponent<IProps, IState
     private openDialog = async () => {
         this.props.onClick?.();
         await HostSignupStore.instance.setHostSignupActive(true);
-    }
+    };
 
     public render(): React.ReactNode {
         const hostSignupConfig = SdkConfig.get().hostSignup;

src/components/structures/IndicatorScrollbar.js

@@ -70,7 +70,6 @@ export default class IndicatorScrollbar extends React.Component {
         this._autoHideScrollbar = autoHideScrollbar;
     }
 
-
     componentDidUpdate(prevProps) {
         const prevLen = prevProps && prevProps.children && prevProps.children.length || 0;
         const curLen = this.props.children && this.props.children.length || 0;

src/components/structures/LeftPanel.tsx

@@ -127,7 +127,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
 
     private onDialPad = () => {
         dis.fire(Action.OpenDialPad);
-    }
+    };
 
     private onExplore = () => {
         dis.fire(Action.ViewRoomDirectory);
@@ -136,7 +136,7 @@ export default class LeftPanel extends React.Component<IProps, IState> {
     private refreshStickyHeaders = () => {
         if (!this.listContainerRef.current) return; // ignore: no headers to sticky
         this.handleStickyHeaders(this.listContainerRef.current);
-    }
+    };
 
     private onBreadcrumbsUpdate = () => {
         const newVal = BreadcrumbsStore.instance.visible;

src/components/structures/LoggedInView.tsx

@@ -319,7 +319,7 @@ class LoggedInView extends React.Component<IProps, IState> {
         this.setState({
             usageLimitDismissed: true,
         });
-    }
+    };
 
     _calculateServerLimitToast(syncError: IState["syncErrorData"], usageLimitEventContent?: IUsageLimit) {
         const error = syncError && syncError.error && syncError.error.errcode === "M_RESOURCE_LIMIT_EXCEEDED";

src/components/structures/MatrixChat.tsx

@@ -662,7 +662,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 this.createRoom(payload.public, payload.defaultName);
                 break;
             case 'view_create_group': {
-                let CreateGroupDialog = sdk.getComponent("dialogs.CreateGroupDialog")
+                let CreateGroupDialog = sdk.getComponent("dialogs.CreateGroupDialog");
                 if (SettingsStore.getValue("feature_communities_v2_prototypes")) {
                     CreateGroupDialog = CreateCommunityPrototypeDialog;
                 }
@@ -1125,8 +1125,14 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             description: (
                 <span>
                     { isSpace
-                        ? _t("Are you sure you want to leave the space '%(spaceName)s'?", {spaceName: roomToLeave.name})
+                        ? _t(
-                        : _t("Are you sure you want to leave the room '%(roomName)s'?", {roomName: roomToLeave.name}) }
+                            "Are you sure you want to leave the space '%(spaceName)s'?",
+                            { spaceName: roomToLeave.name },
+                        )
+                        : _t(
+                            "Are you sure you want to leave the room '%(roomName)s'?",
+                            { roomName: roomToLeave.name },
+                        )}
                     { warnings }
                 </span>
             ),
@@ -1257,7 +1263,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 // HACK: This is a pretty brutal way of threading the invite back through
                 // our systems, but it's the safest we have for now.
                 const params = ThreepidInviteStore.instance.translateToWireFormat(threepidInvite);
-                this.showScreen(`room/${threepidInvite.roomId}`, params)
+                this.showScreen(`room/${threepidInvite.roomId}`, params);
             } else {
                 // The user has just logged in after registering,
                 // so show the homepage.

src/components/structures/RoomDirectory.tsx

@@ -45,7 +45,6 @@ import ScrollPanel from "./ScrollPanel";
 import Spinner from "../views/elements/Spinner";
 import { ActionPayload } from "../../dispatcher/payloads";
 
-
 const MAX_NAME_LENGTH = 80;
 const MAX_TOPIC_LENGTH = 800;
 
@@ -95,7 +94,7 @@ interface IPublicRoomsRequest {
 @replaceableComponent("structures.RoomDirectory")
 export default class RoomDirectory extends React.Component<IProps, IState> {
     private readonly startTime: number;
-    private unmounted = false
+    private unmounted = false;
     private nextBatch: string = null;
     private filterTimeout: NodeJS.Timeout;
     private protocols: Protocols;

src/components/structures/RoomView.tsx

@@ -286,7 +286,7 @@ export default class RoomView extends React.Component<IProps, IState> {
         if (this.state.room) {
             this.checkWidgets(this.state.room);
         }
-    }
+    };
 
     private checkWidgets = (room) => {
         this.setState({
@@ -693,7 +693,7 @@ export default class RoomView extends React.Component<IProps, IState> {
                 replyingToEvent: this.state.replyToEvent,
             });
         }
-    }
+    };
 
     private onRightPanelStoreUpdate = () => {
         this.setState({

src/components/structures/SpaceRoomDirectory.tsx

@@ -112,12 +112,12 @@ const Tile: React.FC<ITileProps> = ({
         ev.preventDefault();
         ev.stopPropagation();
         onViewRoomClick(false);
-    }
+    };
     const onJoinClick = (ev: ButtonEvent) => {
         ev.preventDefault();
         ev.stopPropagation();
         onViewRoomClick(true);
-    }
+    };
 
     let button;
     if (joinedRoom) {
@@ -137,7 +137,7 @@ const Tile: React.FC<ITileProps> = ({
         } else {
             checkbox = <TextWithTooltip
                 tooltip={_t("You don't have permission")}
-                onClick={ev => { ev.stopPropagation() }}
+                onClick={ev => { ev.stopPropagation(); }}
             >
                 <StyledCheckbox disabled={true} />
             </TextWithTooltip>;
@@ -340,7 +340,7 @@ export const HierarchyLevel = ({
                 </Tile>
             ))
         }
-    </React.Fragment>
+    </React.Fragment>;
 };
 
 // mutate argument refreshToken to force a reload

src/components/structures/SpaceRoomView.tsx

@@ -37,7 +37,7 @@ import * as Email from "../../email";
 import defaultDispatcher from "../../dispatcher/dispatcher";
 import dis from "../../dispatcher/dispatcher";
 import { Action } from "../../dispatcher/actions";
-import ResizeNotifier from "../../utils/ResizeNotifier"
+import ResizeNotifier from "../../utils/ResizeNotifier";
 import MainSplit from './MainSplit';
 import ErrorBoundary from "../views/elements/ErrorBoundary";
 import { ActionPayload } from "../../dispatcher/payloads";
@@ -162,7 +162,7 @@ const SpaceInfo = ({ space }) => {
                 </AccessibleButton>
             ) : null}
         </RoomMemberCount> }
-    </div>
+    </div>;
 };
 
 const onBetaClick = () => {
@@ -592,14 +592,14 @@ const SpaceSetupPrivateScope = ({ space, justCreatedOpts, onFinished }) => {
 
         <AccessibleButton
             className="mx_SpaceRoomView_privateScope_justMeButton"
-            onClick={() => { onFinished(false) }}
+            onClick={() => { onFinished(false); }}
         >
             <h3>{ _t("Just me") }</h3>
             <div>{ _t("A private space to organise your rooms") }</div>
         </AccessibleButton>
         <AccessibleButton
             className="mx_SpaceRoomView_privateScope_meAndMyTeammatesButton"
-            onClick={() => { onFinished(true) }}
+            onClick={() => { onFinished(true); }}
         >
             <h3>{ _t("Me and my teammates") }</h3>
             <div>{ _t("A private space for you and your teammates") }</div>
@@ -686,7 +686,7 @@ const SpaceSetupPrivateInvite = ({ space, onFinished }) => {
     let buttonLabel = _t("Skip for now");
     if (emailAddresses.some(name => name.trim())) {
         onClick = onNextClick;
-        buttonLabel = busy ? _t("Inviting...") : _t("Continue")
+        buttonLabel = busy ? _t("Inviting...") : _t("Continue");
     }
 
     return <div className="mx_SpaceRoomView_inviteTeammates">

src/components/structures/TimelinePanel.js

@@ -781,7 +781,6 @@ class TimelinePanel extends React.Component {
         this.sendReadReceipt();
     };
 
-
     // advance the read marker past any events we sent ourselves.
     _advanceReadMarkerPastMyEvents() {
         if (!this.props.manageReadMarkers) return;
@@ -899,7 +898,6 @@ class TimelinePanel extends React.Component {
             && !this._timelineWindow.canPaginate(EventTimeline.FORWARDS);
     }
 
-
     /* get the current scroll state. See ScrollPanel.getScrollState for
      * details.
      *

src/components/structures/UserMenu.tsx

@@ -123,7 +123,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
 
     private onRoom = (room: Room): void => {
         this.removePendingJoinRoom(room.roomId);
-    }
+    };
 
     private onTagStoreUpdate = () => {
         this.forceUpdate(); // we don't have anything useful in state to update
@@ -185,7 +185,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
         if (this.state.pendingRoomJoin.delete(roomId)) {
             this.setState({
                 pendingRoomJoin: new Set<string>(this.state.pendingRoomJoin),
-            })
+            });
         }
     }
 
@@ -357,7 +357,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
                         ),
                     })}
                 </div>
-            )
+            );
         } else if (hostSignupConfig) {
             if (hostSignupConfig && hostSignupConfig.url) {
                 // If hostSignup.domains is set to a non-empty array, only show
@@ -509,7 +509,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
                         />
                     </IconizedContextMenuOptionList>
                 </React.Fragment>
-            )
+            );
         } else if (MatrixClientPeg.get().isGuest()) {
             primaryOptionList = (
                 <React.Fragment>

src/components/structures/auth/Login.tsx

@@ -501,9 +501,9 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
         return <React.Fragment>
             { flows.map(flow => {
                 const stepRenderer = this.stepRendererMap[flow.type];
-                return <React.Fragment key={flow.type}>{ stepRenderer() }</React.Fragment>
+                return <React.Fragment key={flow.type}>{ stepRenderer() }</React.Fragment>;
             }) }
-        </React.Fragment>
+        </React.Fragment>;
     }
 
     private renderPasswordStep = () => {

src/components/structures/auth/Registration.tsx

@@ -267,7 +267,7 @@ export default class Registration extends React.Component<IProps, IState> {
                 session_id: sessionId,
             }),
         );
-    }
+    };
 
     private onUIAuthFinished = async (success: boolean, response: any) => {
         if (!success) {
@@ -487,7 +487,13 @@ export default class Registration extends React.Component<IProps, IState> {
                         fragmentAfterLogin={this.props.fragmentAfterLogin}
                     />
                     <h3 className="mx_AuthBody_centered">
-                        { _t("%(ssoButtons)s Or %(usernamePassword)s", { ssoButtons: "", usernamePassword: ""}).trim() }
+                        {_t(
+                            "%(ssoButtons)s Or %(usernamePassword)s",
+                            {
+                                ssoButtons: "",
+                                usernamePassword: "",
+                            },
+                        ).trim()}
                     </h3>
                 </React.Fragment>;
             }

src/components/views/auth/InteractiveAuthEntryComponents.tsx

@@ -354,7 +354,6 @@ export class TermsAuthEntry extends React.Component<ITermsAuthEntryProps, ITerms
         CountlyAnalytics.instance.track("onboarding_terms_begin");
     }
 
-
     componentDidMount() {
         this.props.onPhaseChange(DEFAULT_PHASE);
     }

src/components/views/auth/PasswordLogin.tsx

@@ -322,7 +322,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
         const result = await this.validatePasswordRules(fieldState);
         this.markFieldValid(LoginField.Password, result.valid);
         return result;
-    }
+    };
 
     private renderLoginField(loginType: IState["loginType"], autoFocus: boolean) {
         const classes = {

src/components/views/avatars/WidgetAvatar.tsx

@@ -49,7 +49,7 @@ const WidgetAvatar: React.FC<IProps> = ({ app, className, width = 20, height = 2
             width={width}
             height={height}
         />
-    )
+    );
 };
 
 export default WidgetAvatar;

src/components/views/context_menus/CallContextMenu.tsx

@@ -42,13 +42,13 @@ export default class CallContextMenu extends React.Component<IProps> {
     onHoldClick = () => {
         this.props.call.setRemoteOnHold(true);
         this.props.onFinished();
-    }
+    };
 
     onUnholdClick = () => {
         CallHandler.sharedInstance().setActiveCallRoomId(this.props.call.roomId);
 
         this.props.onFinished();
-    }
+    };
 
     onTransferClick = () => {
         Modal.createTrackedDialog(
@@ -56,7 +56,7 @@ export default class CallContextMenu extends React.Component<IProps> {
             /*className=*/null, /*isPriority=*/false, /*isStatic=*/true,
         );
         this.props.onFinished();
-    }
+    };
 
     render() {
         const holdUnholdCaption = this.props.call.isRemoteOnHold() ? _t("Resume") : _t("Hold");

src/components/views/context_menus/DialpadContextMenu.tsx

@@ -37,18 +37,17 @@ export default class DialpadContextMenu extends React.Component<IProps, IState>
 
         this.state = {
             value: '',
-        }
+        };
     }
 
     onDigitPress = (digit) => {
         this.props.call.sendDtmfDigit(digit);
         this.setState({ value: this.state.value + digit });
-    }
+    };
 
     onChange = (ev) => {
         this.setState({ value: ev.target.value });
-    }
+    };
-
 
     render() {
         return <ContextMenu {...this.props}>

src/components/views/context_menus/GenericElementContextMenu.js

@@ -23,7 +23,6 @@ import {replaceableComponent} from "../../../utils/replaceableComponent";
  * menu.
  */
 
-
 @replaceableComponent("views.context_menus.GenericElementContextMenu")
 export default class GenericElementContextMenu extends React.Component {
     static propTypes = {

src/components/views/context_menus/MessageContextMenu.js

@@ -207,7 +207,7 @@ export default class MessageContextMenu extends React.Component {
         this.closeMenu();
     };
 
-    onPermalinkClick = (e: Event) => {
+    onPermalinkClick = (e) => {
         e.preventDefault();
         const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
         Modal.createTrackedDialog('share room message dialog', '', ShareDialog, {

src/components/views/dialogs/BugReportDialog.tsx

@@ -68,7 +68,7 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
 
     private onCancel = (): void => {
         this.props.onFinished(false);
-    }
+    };
 
     private onSubmit = (): void => {
         if ((!this.state.text || !this.state.text.trim()) && (!this.state.issueUrl || !this.state.issueUrl.trim())) {
@@ -110,7 +110,7 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
                 });
             }
         });
-    }
+    };
 
     private onDownload = async (): Promise<void> => {
         this.setState({ downloadBusy: true });
@@ -139,25 +139,25 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
 
     private onTextChange = (ev: React.FormEvent<HTMLTextAreaElement>): void => {
         this.setState({ text: ev.currentTarget.value });
-    }
+    };
 
     private onIssueUrlChange = (ev: React.FormEvent<HTMLInputElement>): void => {
         this.setState({ issueUrl: ev.currentTarget.value });
-    }
+    };
 
     private sendProgressCallback = (progress: string): void => {
         if (this.unmounted) {
             return;
         }
         this.setState({ progress });
-    }
+    };
 
     private downloadProgressCallback = (downloadProgress: string): void => {
         if (this.unmounted) {
             return;
         }
         this.setState({ downloadProgress });
-    }
+    };
 
     public render() {
         const Loader = sdk.getComponent("elements.Spinner");

src/components/views/dialogs/ChangelogDialog.tsx

@@ -93,7 +93,6 @@ export default class ChangelogDialog extends React.Component<IProps> {
             </div>
         );
 
-
         return (
             <QuestionDialog
                 title={_t("Changelog")}

src/components/views/dialogs/CreateCommunityPrototypeDialog.tsx

@@ -175,7 +175,7 @@ export default class CreateCommunityPrototypeDialog extends React.PureComponent<
 
         let preview = <img src={this.state.avatarPreview} className="mx_CreateCommunityPrototypeDialog_avatar" />;
         if (!this.state.avatarPreview) {
-            preview = <div className="mx_CreateCommunityPrototypeDialog_placeholderAvatar" />
+            preview = <div className="mx_CreateCommunityPrototypeDialog_placeholderAvatar" />;
         }
 
         return (

src/components/views/dialogs/DevtoolsDialog.tsx

@@ -62,13 +62,13 @@ abstract class GenericEditor<
         } else {
             this.props.onBack();
         }
-    }
+    };
 
     protected onChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
         // @ts-ignore: Unsure how to convince TS this is okay when the state
         // type can be extended.
         this.setState({ [e.target.id]: e.target.type === 'checkbox' ? e.target.checked : e.target.value });
-    }
+    };
 
     protected abstract send();
 
@@ -158,7 +158,7 @@ export class SendCustomEvent extends GenericEditor<ISendCustomEventProps, ISendC
             message = _t('Failed to send custom event.') + ' (' + e.toString() + ')';
         }
         this.setState({ message });
-    }
+    };
 
     render() {
         if (this.state.message) {
@@ -264,7 +264,7 @@ class SendAccountData extends GenericEditor<ISendAccountDataProps, ISendAccountD
             message = _t('Failed to send custom event.') + ' (' + e.toString() + ')';
         }
         this.setState({ message });
-    }
+    };
 
     render() {
         if (this.state.message) {
@@ -442,19 +442,19 @@ class RoomStateExplorer extends React.PureComponent<IExplorerProps, IRoomStateEx
         } else {
             this.props.onBack();
         }
-    }
+    };
 
     private editEv = () => {
         this.setState({ editing: true });
-    }
+    };
 
     private onQueryEventType = (filterEventType: string) => {
         this.setState({ queryEventType: filterEventType });
-    }
+    };
 
     private onQueryStateKey = (filterStateKey: string) => {
         this.setState({ queryStateKey: filterStateKey });
-    }
+    };
 
     render() {
         if (this.state.event) {
@@ -570,19 +570,19 @@ class AccountDataExplorer extends React.PureComponent<IExplorerProps, IAccountDa
         } else {
             this.props.onBack();
         }
-    }
+    };
 
     private onChange = (e: ChangeEvent<HTMLInputElement>) => {
         this.setState({ [e.target.id]: e.target.type === 'checkbox' ? e.target.checked : e.target.value });
-    }
+    };
 
     private editEv = () => {
         this.setState({ editing: true });
-    }
+    };
 
     private onQueryEventType = (queryEventType: string) => {
         this.setState({ queryEventType });
-    }
+    };
 
     render() {
         if (this.state.event) {
@@ -676,7 +676,7 @@ class ServersInRoomList extends React.PureComponent<IExplorerProps, IServersInRo
 
     private onQuery = (query: string) => {
         this.setState({ query });
-    }
+    };
 
     render() {
         return <div>
@@ -739,7 +739,7 @@ const VerificationRequestExplorer: React.FC<{
             <dd>{JSON.stringify(request.observeOnly)}</dd>
         </dl>
     </div>);
-}
+};
 
 class VerificationExplorer extends React.PureComponent<IExplorerProps> {
     static getLabel() {
@@ -751,7 +751,7 @@ class VerificationExplorer extends React.PureComponent<IExplorerProps> {
 
     private onNewRequest = () => {
         this.forceUpdate();
-    }
+    };
 
     componentDidMount() {
         const cli = this.context;
@@ -1221,11 +1221,11 @@ export default class DevtoolsDialog extends React.PureComponent<IProps, IState>
 
     private onBack = () => {
         this.setState({ mode: null });
-    }
+    };
 
     private onCancel = () => {
         this.props.onFinished(false);
-    }
+    };
 
     render() {
         let body;

src/components/views/dialogs/EditCommunityPrototypeDialog.tsx

@@ -122,7 +122,7 @@ export default class EditCommunityPrototypeDialog extends React.PureComponent<IP
                 const url = mediaFromMxc(this.state.currentAvatarUrl).srcHttp;
                 preview = <img src={url} className="mx_EditCommunityPrototypeDialog_avatar" />;
             } else {
-                preview = <div className="mx_EditCommunityPrototypeDialog_placeholderAvatar" />
+                preview = <div className="mx_EditCommunityPrototypeDialog_placeholderAvatar" />;
             }
         }
 

src/components/views/dialogs/FeedbackDialog.js

@@ -30,7 +30,6 @@ const existingIssuesUrl = "https://github.com/vector-im/element-web/issues" +
     "?q=is%3Aopen+is%3Aissue+sort%3Areactions-%2B1-desc";
 const newIssueUrl = "https://github.com/vector-im/element-web/issues/new";
 
-
 export default (props) => {
     const [rating, setRating] = useState("");
     const [comment, setComment] = useState("");

src/components/views/dialogs/HostSignupDialog.tsx

@@ -86,7 +86,7 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
             case PostmessageAction.CloseDialog:
                 return this.closeDialog();
         }
-    }
+    };
 
     private maximizeDialog = () => {
         this.setState({
@@ -96,7 +96,7 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
         this.sendMessage({
             action: PostmessageAction.Maximize,
         });
-    }
+    };
 
     private minimizeDialog = () => {
         this.setState({
@@ -106,7 +106,7 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
         this.sendMessage({
             action: PostmessageAction.Minimize,
         });
-    }
+    };
 
     private closeDialog = async () => {
         window.removeEventListener("message", this.messageHandler);
@@ -114,7 +114,7 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
         PersistedElement.destroyElement("host_signup");
         // Finally clear the flag in
         return HostSignupStore.instance.setHostSignupActive(false);
-    }
+    };
 
     private onCloseClick = async () => {
         if (this.state.completed) {
@@ -137,16 +137,16 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
                 },
             );
         }
-    }
+    };
 
     private sendMessage = (message: IPostmessageResponseData) => {
         this.iframeRef.current.contentWindow.postMessage(message, this.config.url);
-    }
+    };
 
     private async sendAccountDetails() {
         const openIdToken = await MatrixClientPeg.get().getOpenIdToken();
         if (!openIdToken || !openIdToken.access_token) {
-            console.warn("Failed to connect to homeserver for OpenID token.")
+            console.warn("Failed to connect to homeserver for OpenID token.");
             this.setState({
                 completed: true,
                 error: _t("Failed to connect to your homeserver. Please close this dialog and try again."),
@@ -171,7 +171,7 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
             return this.sendAccountDetails();
         }
         return this.closeDialog();
-    }
+    };
 
     private onAccountDetailsRequest = () => {
         const textComponent = (
@@ -215,7 +215,7 @@ export default class HostSignupDialog extends React.PureComponent<IProps, IState
                 onFinished: this.onAccountDetailsDialogFinished,
             },
         );
-    }
+    };
 
     public componentDidMount() {
         window.addEventListener("message", this.messageHandler);

src/components/views/dialogs/InviteDialog.tsx

@@ -427,7 +427,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
 
     private onConsultFirstChange = (ev) => {
         this.setState({ consultFirst: ev.target.checked });
-    }
+    };
 
     public static buildRecents(excludedTargetIds: Set<string>): IRecentUser[] {
         const rooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals(); // map of userId => js-sdk Room
@@ -696,7 +696,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                         return roomOptions;
                     },
                     { invite: [], invite_3pid: [] },
-                )
+                );
             }
 
             await createRoom(createRoomOptions);
@@ -729,7 +729,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
         }
 
         try {
-            const result = await inviteMultipleToRoom(this.props.roomId, targetIds)
+            const result = await inviteMultipleToRoom(this.props.roomId, targetIds);
             CountlyAnalytics.instance.trackSendInvite(startTime, this.props.roomId, targetIds.length);
             if (!this.shouldAbortAfterInviteError(result, room)) { // handles setting error message too
                 this.props.onFinished();
@@ -1365,7 +1365,7 @@ export default class InviteDialog extends React.PureComponent<IInviteDialogProps
                         <div />
                     </AccessibleTooltipButton>
                 </div>
-            </div>
+            </div>;
         } else if (this.props.kind === KIND_INVITE) {
             const room = MatrixClientPeg.get()?.getRoom(this.props.roomId);
             const isSpace = SettingsStore.getValue("feature_spaces") && room?.isSpaceRoom();

src/components/views/dialogs/ModalWidgetDialog.tsx

@@ -102,7 +102,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
 
     private onWidgetClose = (ev: CustomEvent<IModalWidgetCloseRequest>) => {
         this.props.onFinished(true, ev.detail.data);
-    }
+    };
 
     private onButtonEnableToggle = (ev: CustomEvent<ISetModalButtonEnabledActionRequest>) => {
         ev.preventDefault();
@@ -160,7 +160,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
                         break;
                     case ModalButtonKind.Secondary:
                         kind = "primary_outline";
-                        break
+                        break;
                     case ModalButtonKind.Danger:
                         kind = "danger";
                         break;

src/components/views/dialogs/ReportEventDialog.tsx

@@ -40,7 +40,6 @@ interface IState {
     nature?: EXTENDED_NATURE;
 }
 
-
 const MODERATED_BY_STATE_EVENT_TYPE = [
     "org.matrix.msc3215.room.moderation.moderated_by",
     /**
@@ -75,7 +74,7 @@ type Moderation = {
     moderationRoomId: string;
     // The id of the bot in charge of forwarding abuse reports to the moderation room.
     moderationBotUserId: string;
-}
+};
 /*
  * A dialog for reporting an event.
  *

src/components/views/dialogs/ServerOfflineDialog.tsx

@@ -85,7 +85,7 @@ export default class ServerOfflineDialog extends React.PureComponent<IProps> {
                         {entries}
                     </div>
                 </div>
-            )
+            );
         });
     }
 

src/components/views/dialogs/SetEmailDialog.js

@@ -24,7 +24,6 @@ import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
-
 /*
  * Prompt the user to set an email address.
  *

src/components/views/dialogs/TabbedIntegrationManagerDialog.js

@@ -63,11 +63,11 @@ export default class TabbedIntegrationManagerDialog extends React.Component {
         };
     }
 
-    componentDidMount(): void {
+    componentDidMount() {
         this.openManager(0, true);
     }
 
-    openManager = async (i: number, force = false) => {
+    openManager = async (i, force = false) => {
         if (i === this.state.currentIndex && !force) return;
 
         const manager = this.state.managers[i];

src/components/views/dialogs/TermsDialog.tsx

@@ -31,7 +31,7 @@ interface ITermsCheckboxProps {
 class TermsCheckbox extends React.PureComponent<ITermsCheckboxProps> {
     private onChange = (ev: React.FormEvent<HTMLInputElement>): void => {
         this.props.onChange(this.props.url, ev.currentTarget.checked);
-    }
+    };
 
     render() {
         return <input type="checkbox"
@@ -80,11 +80,11 @@ export default class TermsDialog extends React.PureComponent<ITermsDialogProps,
 
     private onCancelClick = (): void => {
         this.props.onFinished(false);
-    }
+    };
 
     private onNextClick = (): void => {
         this.props.onFinished(true, Object.keys(this.state.agreedUrls).filter((url) => this.state.agreedUrls[url]));
-    }
+    };
 
     private nameForServiceType(serviceType: SERVICE_TYPES, host: string): JSX.Element {
         switch (serviceType) {
@@ -114,7 +114,7 @@ export default class TermsDialog extends React.PureComponent<ITermsDialogProps,
         this.setState({
             agreedUrls: Object.assign({}, this.state.agreedUrls, { [url]: checked }),
         });
-    }
+    };
 
     public render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');

src/components/views/dialogs/UploadConfirmDialog.tsx

@@ -36,7 +36,7 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
 
     static defaultProps = {
         totalFiles: 1,
-    }
+    };
 
     constructor(props) {
         super(props);
@@ -56,15 +56,15 @@ export default class UploadConfirmDialog extends React.Component<IProps> {
 
     private onCancelClick = () => {
         this.props.onFinished(false);
-    }
+    };
 
     private onUploadClick = () => {
         this.props.onFinished(true);
-    }
+    };
 
     private onUploadAllClick = () => {
         this.props.onFinished(true, true);
-    }
+    };
 
     render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');

src/components/views/dialogs/UserSettingsDialog.tsx

@@ -79,7 +79,7 @@ export default class UserSettingsDialog extends React.Component<IProps, IState>
     private mjolnirChanged: CallbackFn = (settingName, roomId, atLevel, newValue) => {
         // We can cheat because we know what levels a feature is tracked at, and how it is tracked
         this.setState({ mjolnirEnabled: newValue });
-    }
+    };
 
     _getTabs() {
         const tabs = [];

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

@@ -169,7 +169,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
 
     private onRecoveryKeyFileUploadClick = () => {
         this.fileUpload.current.click();
-    }
+    };
 
     private onPassPhraseNext = async (ev: FormEvent<HTMLFormElement>) => {
         ev.preventDefault();

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

@@ -139,7 +139,7 @@ export default class CreateCrossSigningDialog extends React.PureComponent<IProps
                 throw new Error("Cross-signing key upload auth canceled");
             }
         }
-    }
+    };
 
     private bootstrapCrossSigning = async (): Promise<void> => {
         this.setState({
@@ -163,11 +163,11 @@ export default class CreateCrossSigningDialog extends React.PureComponent<IProps
             this.setState({ error: e });
             console.error("Error bootstrapping cross-signing", e);
         }
-    }
+    };
 
     private onCancel = (): void => {
         this.props.onFinished(false);
-    }
+    };
 
     render() {
         let content;

src/components/views/directory/NetworkDropdown.tsx

@@ -216,7 +216,9 @@ const NetworkDropdown = ({ onOptionChange, protocols = {}, selectedServerName, s
             if (removableServers.has(server)) {
                 const onClick = async () => {
                     closeMenu();
-                    const {finished} = Modal.createTrackedDialog("Network Dropdown", "Remove server", QuestionDialog, {
+                    const { finished } = Modal.createTrackedDialog(
+                        "Network Dropdown", "Remove server", QuestionDialog,
+                        {
                             title: _t("Are you sure?"),
                             description: _t("Are you sure you want to remove <b>%(serverName)s</b>", {
                                 serverName: server,
@@ -225,7 +227,9 @@ const NetworkDropdown = ({ onOptionChange, protocols = {}, selectedServerName, s
                             }),
                             button: _t("Remove"),
                             fixedWidth: false,
-                    }, "mx_NetworkDropdown_dialog");
+                        },
+                        "mx_NetworkDropdown_dialog",
+                    );
 
                     const [ok] = await finished;
                     if (!ok) return;

src/components/views/elements/DesktopBuildsNotice.tsx

@@ -22,7 +22,6 @@ import dis from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
 import { UserTab } from "../dialogs/UserSettingsDialog";
 
-
 export enum WarningKind {
     Files,
     Search,

src/components/views/elements/DesktopCapturerSourcePicker.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import { _t } from '../../../languageHandler';
-import BaseDialog from "..//dialogs/BaseDialog"
+import BaseDialog from "..//dialogs/BaseDialog";
 import AccessibleButton from './AccessibleButton';
 import { getDesktopCapturerSources } from "matrix-js-sdk/src/webrtc/call";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
@@ -44,7 +44,7 @@ export class ExistingSource extends React.Component<DesktopCapturerSourceIProps>
 
     onClick = (ev) => {
         this.props.onSelect(this.props.source);
-    }
+    };
 
     render() {
         return (
@@ -108,19 +108,19 @@ export default class DesktopCapturerSourcePicker extends React.Component<
 
     onSelect = (source) => {
         this.props.onFinished(source);
-    }
+    };
 
     onScreensClick = (ev) => {
         this.setState({ selectedTab: Tabs.Screens });
-    }
+    };
 
     onWindowsClick = (ev) => {
         this.setState({ selectedTab: Tabs.Windows });
-    }
+    };
 
     onCloseClick = (ev) => {
         this.props.onFinished(null);
-    }
+    };
 
     render() {
         let sources;

src/components/views/elements/EditableTextContainer.js

@@ -144,7 +144,6 @@ EditableTextContainer.propTypes = {
     blurToSubmit: PropTypes.bool,
 };
 
-
 EditableTextContainer.defaultProps = {
     initialValue: "",
     placeholder: "",

src/components/views/elements/EffectsOverlay.tsx

@@ -17,7 +17,7 @@
 import React, { FunctionComponent, useEffect, useRef } from 'react';
 import dis from '../../../dispatcher/dispatcher';
 import ICanvasEffect from '../../../effects/ICanvasEffect';
-import { CHAT_EFFECTS } from '../../../effects'
+import { CHAT_EFFECTS } from '../../../effects';
 import UIStore, { UI_EVENTS } from "../../../stores/UIStore";
 
 interface IProps {
@@ -32,7 +32,7 @@ const EffectsOverlay: FunctionComponent<IProps> = ({ roomWidth }) => {
         if (!name) return null;
         let effect: ICanvasEffect | null = effectsRef.current[name] || null;
         if (effect === null) {
-            const options = CHAT_EFFECTS.find((e) => e.command === name)?.options
+            const options = CHAT_EFFECTS.find((e) => e.command === name)?.options;
             try {
                 const { default: Effect } = await import(`../../../effects/${name}`);
                 effect = new Effect(options);
@@ -56,7 +56,7 @@ const EffectsOverlay: FunctionComponent<IProps> = ({ roomWidth }) => {
                 const effect = payload.action.substr(actionPrefix.length);
                 lazyLoadEffectModule(effect).then((module) => module?.start(canvasRef.current));
             }
-        }
+        };
         const dispatcherRef = dis.register(onAction);
         const canvas = canvasRef.current;
         canvas.height = UIStore.instance.windowHeight;
@@ -89,7 +89,7 @@ const EffectsOverlay: FunctionComponent<IProps> = ({ roomWidth }) => {
                 right: 0,
             }}
         />
-    )
+    );
-}
+};
 
 export default EffectsOverlay;

src/components/views/elements/Flair.js

@@ -22,7 +22,6 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromMxc } from "../../../customisations/Media";
 
-
 class FlairAvatar extends React.Component {
     constructor() {
         super();

src/components/views/elements/ImageView.tsx

@@ -30,7 +30,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import { formatFullDate } from "../../../DateUtils";
 import dis from '../../../dispatcher/dispatcher';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
-import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"
+import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { normalizeWheelEvent } from "../../../utils/Mouse";
 
@@ -116,7 +116,7 @@ export default class ImageView extends React.Component<IProps, IState> {
 
     private recalculateZoom = () => {
         this.setZoomAndRotation();
-    }
+    };
 
     private setZoomAndRotation = (inputRotation?: number) => {
         const image = this.image.current;
@@ -158,7 +158,7 @@ export default class ImageView extends React.Component<IProps, IState> {
             rotation: rotation,
             zoom: zoom,
         });
-    }
+    };
 
     private zoom(delta: number) {
         const newZoom = this.state.zoom + delta;

src/components/views/elements/InlineSpinner.tsx

@@ -29,7 +29,7 @@ export default class InlineSpinner extends React.PureComponent<IProps> {
     static defaultProps = {
         w: 16,
         h: 16,
-    }
+    };
 
     render() {
         return (

src/components/views/elements/InviteReason.tsx

@@ -42,7 +42,7 @@ export default class InviteReason extends React.PureComponent<IProps, IState> {
         this.setState({
             hidden: false,
         });
-    }
+    };
 
     render() {
         const classes = classNames({

src/components/views/elements/PersistedElement.js

@@ -187,4 +187,4 @@ export default class PersistedElement extends React.Component {
     }
 }
 
-export const getPersistKey = (appId: string) => 'widget_' + appId;
+export const getPersistKey = (appId) => 'widget_' + appId;

src/components/views/elements/SSOButtons.tsx

@@ -48,7 +48,7 @@ const getIcon = (brand: IdentityProviderBrand | string) => {
         default:
             return null;
     }
-}
+};
 
 const SSOButton: React.FC<ISSOButtonProps> = ({
     matrixClient,

src/components/views/elements/ServerPicker.tsx

@@ -87,7 +87,7 @@ const ServerPicker = ({ title, dialogTitle, serverConfig, onServerConfigChange }
         <span className="mx_ServerPicker_server">{serverName}</span>
         { editBtn }
         { desc }
-    </div>
+    </div>;
-}
+};
 
 export default ServerPicker;

src/components/views/elements/SpellCheckLanguagesDropdown.tsx

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from 'react';
 
-import Dropdown from "../../views/elements/Dropdown"
+import Dropdown from "../../views/elements/Dropdown";
 import * as sdk from '../../../index';
 import PlatformPeg from "../../../PlatformPeg";
 import SettingsStore from "../../../settings/SettingsStore";
@@ -67,8 +67,8 @@ export default class SpellCheckLanguagesDropdown extends React.Component<SpellCh
                     langs.push({
                         label: language,
                         value: language,
-                    })
+                    });
-                })
+                });
                 this.setState({ languages: langs });
             }).catch((e) => {
                 this.setState({ languages: ['en'] });

src/components/views/elements/Tooltip.tsx

@@ -17,7 +17,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-
 import React, { Component, CSSProperties } from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';

src/components/views/elements/Validation.tsx

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-/* eslint-disable babel/no-invalid-this */
+/* eslint-disable @typescript-eslint/no-invalid-this */
 import React from "react";
 import classNames from "classnames";
 

src/components/views/emojipicker/EmojiPicker.tsx

@@ -234,7 +234,7 @@ class EmojiPicker extends React.Component<IProps, IState> {
                     className="mx_EmojiPicker_body"
                     wrappedRef={ref => {
                         // @ts-ignore - AutoHideScrollbar should accept a RefObject or fall back to its own instead
-                        this.bodyRef.current = ref
+                        this.bodyRef.current = ref;
                     }}
                     onScroll={this.onScroll}
                 >

src/components/views/groups/GroupInviteTile.js

@@ -32,7 +32,7 @@ import {mediaFromMxc} from "../../../customisations/Media";
 // XXX this class copies a lot from RoomTile.js
 @replaceableComponent("views.groups.GroupInviteTile")
 export default class GroupInviteTile extends React.Component {
-    static propTypes: {
+    static propTypes = {
         group: PropTypes.object.isRequired,
     };
 

src/components/views/host_signup/HostSignupContainer.tsx

@@ -33,4 +33,4 @@ const HostSignupContainer = () => {
     </div>;
 };
 
-export default HostSignupContainer
+export default HostSignupContainer;

src/components/views/messages/MVideoBody.tsx

@@ -51,7 +51,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
             decryptedThumbnailUrl: null,
             decryptedBlob: null,
             error: null,
-        }
+        };
     }
 
     thumbScale(fullWidth: number, fullHeight: number, thumbWidth: number, thumbHeight: number) {
@@ -182,7 +182,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
             this.videoRef.current.play();
         });
         this.props.onHeightChanged();
-    }
+    };
 
     render() {
         const content = this.props.mxEvent.getContent();

src/components/views/messages/MVoiceMessageBody.tsx

@@ -106,6 +106,6 @@ export default class MVoiceMessageBody extends React.PureComponent<IProps, IStat
                 <RecordingPlayback playback={this.state.playback} />
                 <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />
             </span>
-        )
+        );
     }
 }

src/components/views/messages/ReactionsRow.tsx

@@ -125,7 +125,7 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
     private onDecrypted = () => {
         // Decryption changes whether the event is actionable
         this.forceUpdate();
-    }
+    };
 
     private onReactionsChange = () => {
         // TODO: Call `onHeightChanged` as needed
@@ -136,7 +136,7 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
         // has changed (this is triggered by events for that purpose only) and
         // `PureComponent`s shallow state / props compare would otherwise filter this out.
         this.forceUpdate();
-    }
+    };
 
     private getMyReactions() {
         const reactions = this.props.reactions;
@@ -155,7 +155,7 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
         this.setState({
             showAll: true,
         });
-    }
+    };
 
     render() {
         const { mxEvent, reactions } = this.props;

src/components/views/messages/ReactionsRowButton.tsx

@@ -79,13 +79,13 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
             tooltipRendered: true,
             tooltipVisible: true,
         });
-    }
+    };
 
     onMouseLeave = () => {
         this.setState({
             tooltipVisible: false,
         });
-    }
+    };
 
     render() {
         const { mxEvent, content, count, reactionEvents, myReactionEvent } = this.props;

src/components/views/messages/SenderProfile.tsx

@@ -39,7 +39,7 @@ export default class SenderProfile extends React.Component<IProps, IState> {
     private unmounted: boolean;
 
     constructor(props: IProps) {
-        super(props)
+        super(props);
         const senderId = this.props.mxEvent.getSender();
 
         this.state = {
@@ -56,7 +56,6 @@ export default class SenderProfile extends React.Component<IProps, IState> {
             this.getPublicisedGroups();
         }
 
-
         this.context.on('RoomState.events', this.onRoomStateEvents);
     }
 

src/components/views/right_panel/UserInfo.tsx

@@ -202,7 +202,6 @@ function DeviceItem({userId, device}: {userId: string, device: IDevice}) {
     let trustedLabel = null;
     if (userTrust.isVerified()) trustedLabel = isVerified ? _t("Trusted") : _t("Not trusted");
 
-
     if (isVerified) {
         return (
             <div className={classes} title={device.deviceId} >
@@ -1382,7 +1381,7 @@ const BasicUserInfo: React.FC<{
             }}>
                 { _t("Edit devices") }
             </AccessibleButton>
-        </p>)
+        </p>);
     }
 
     const securitySection = (
@@ -1580,7 +1579,7 @@ const UserInfo: React.FC<IProps> = ({
             phase: previousPhase,
             refireParams: refireParams,
         });
-    }
+    };
 
     let content;
     switch (phase) {

src/components/views/room_settings/AliasSettings.tsx

@@ -293,7 +293,7 @@ export default class AliasSettings extends React.Component<IProps, IState> {
 
     private onNewAltAliasChanged = (value: string) => {
         this.setState({ newAltAlias: value });
-    }
+    };
 
     private onAltAliasAdded = (alias: string) => {
         const altAliases = this.state.altAliases.slice();
@@ -302,13 +302,13 @@ export default class AliasSettings extends React.Component<IProps, IState> {
             this.changeAltAliases(altAliases);
             this.setState({ newAltAlias: "" });
         }
-    }
+    };
 
     private onAltAliasDeleted = (index: number) => {
         const altAliases = this.state.altAliases.slice();
         altAliases.splice(index, 1);
         this.changeAltAliases(altAliases);
-    }
+    };
 
     private getAliases() {
         return this.state.altAliases.concat(this.getLocalNonAltAliases());

src/components/views/rooms/Autocomplete.tsx

@@ -291,7 +291,6 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
                 });
             });
 
-
             return completions.length > 0 ? (
                 <div key={i} className="mx_Autocomplete_ProviderSection">
                     <div className="mx_Autocomplete_provider_name">{ completionResult.provider.getName() }</div>

src/components/views/rooms/AuxPanel.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import classNames from 'classnames';
 import { lexicographicCompare } from 'matrix-js-sdk/src/utils';
-import { Room } from 'matrix-js-sdk/src/models/room'
+import { Room } from 'matrix-js-sdk/src/models/room';
 
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import AppsDrawer from './AppsDrawer';
@@ -126,7 +126,7 @@ export default class AuxPanel extends React.Component<IProps, IState> {
                         link,
                         severity,
                         stateKey,
-                    })
+                    });
                 }
             }
         }

src/components/views/rooms/EntityTile.tsx

@@ -33,7 +33,7 @@ export enum PowerStatus {
 const PowerLabel: Record<PowerStatus, string> = {
     [PowerStatus.Admin]: _td("Admin"),
     [PowerStatus.Moderator]: _td("Mod"),
-}
+};
 
 const PRESENCE_CLASS = {
     "offline": "mx_EntityTile_offline",

src/components/views/rooms/EventTile.tsx

@@ -723,7 +723,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                     { avatars }
                 </span>
             </div>
-        )
+        );
     }
 
     onSenderProfileClick = event => {
@@ -1207,7 +1207,7 @@ export default class EventTile extends React.Component<IProps, IState> {
                         avatar,
 
                     ])
-                )
+                );
             }
         }
     }

src/components/views/rooms/MemberList.tsx

@@ -242,7 +242,7 @@ export default class MemberList extends React.Component<IProps, IState> {
     }, 500);
 
     private updateListNow(): void {
-        const members = this.roomMembers()
+        const members = this.roomMembers();
 
         this.setState({
             loading: false,
@@ -471,7 +471,7 @@ export default class MemberList extends React.Component<IProps, IState> {
     }
 
     private getChildrenJoined = (start: number, end: number): Array<JSX.Element> => {
-        return this.makeMemberTiles(this.state.filteredJoinedMembers.slice(start, end))
+        return this.makeMemberTiles(this.state.filteredJoinedMembers.slice(start, end));
     };
 
     private getChildCountJoined = (): number => this.state.filteredJoinedMembers.length;
@@ -487,7 +487,7 @@ export default class MemberList extends React.Component<IProps, IState> {
 
     private getChildCountInvited = (): number => {
         return this.state.filteredInvitedMembers.length + (this.getPending3PidInvites() || []).length;
-    }
+    };
 
     render() {
         if (this.state.loading) {

src/components/views/rooms/MessageComposer.tsx

@@ -136,7 +136,7 @@ class UploadButton extends React.Component<IUploadButtonProps> {
             return;
         }
         this.uploadInput.current.click();
-    }
+    };
 
     private onUploadFileInputChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
         if (ev.target.files.length === 0) return;
@@ -157,7 +157,7 @@ class UploadButton extends React.Component<IUploadButtonProps> {
         // to empty.
         // NB. we need to set 'value': the 'files' property is immutable.
         ev.target.value = '';
-    }
+    };
 
     render() {
         const uploadInputStyle = { display: 'none' };
@@ -266,7 +266,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
         if (ev.getType() === 'm.room.power_levels') {
             this.setState({ canSendMessages: this.props.room.maySendMessage() });
         }
-    }
+    };
 
     private getRoomTombstone() {
         return this.props.room.currentState.getStateEvents('m.room.tombstone', '');
@@ -300,7 +300,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                 viaServers: viaServers,
             },
         });
-    }
+    };
 
     private renderPlaceholderText = () => {
         if (this.props.replyToEvent) {
@@ -316,7 +316,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
                 return _t('Send a message…');
             }
         }
-    }
+    };
 
     addEmoji(emoji: string) {
         dis.dispatch<ComposerInsertPayload>({
@@ -335,13 +335,13 @@ export default class MessageComposer extends React.Component<IProps, IState> {
 
         // XXX: Private function access
         this.messageComposerInput._sendMessage();
-    }
+    };
 
     onChange = (model) => {
         this.setState({
             isComposerEmpty: model.isEmpty,
         });
-    }
+    };
 
     private onVoiceStoreUpdate = () => {
         const recording = VoiceRecordingStore.instance.activeRecording;

src/components/views/rooms/RoomHeader.js

@@ -74,7 +74,7 @@ export default class RoomHeader extends React.Component {
     };
 
     _rateLimitedUpdate = new RateLimitedFunc(function() {
-        /* eslint-disable babel/no-invalid-this */
+        /* eslint-disable @babel/no-invalid-this */
         this.forceUpdate();
     }, 500);
 

src/components/views/rooms/RoomList.tsx

@@ -495,7 +495,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                     resizeNotifier={this.props.resizeNotifier}
                     alwaysVisible={ALWAYS_VISIBLE_TAGS.includes(orderedTagId)}
                     onListCollapse={this.props.onListCollapse}
-                />
+                />;
             });
     }
 
@@ -542,7 +542,7 @@ export default class RoomList extends React.PureComponent<IProps, IState> {
                     </AccessibleButton> }
                 </div>;
             } else if (Object.values(this.state.sublists).some(list => list.length > 0)) {
-                const unfilteredLists = RoomListStore.instance.unfilteredLists
+                const unfilteredLists = RoomListStore.instance.unfilteredLists;
                 const unfilteredRooms = unfilteredLists[DefaultTagID.Untagged] || [];
                 const unfilteredHistorical = unfilteredLists[DefaultTagID.Archived] || [];
                 const unfilteredFavourite = unfilteredLists[DefaultTagID.Favourite] || [];

src/components/views/rooms/RoomSublist.tsx

@@ -480,7 +480,7 @@ export default class RoomSublist extends React.Component<IProps, IState> {
         this.layout.isCollapsed = this.state.isExpanded;
         this.setState({ isExpanded: !this.layout.isCollapsed });
         if (this.props.onListCollapse) {
-            this.props.onListCollapse(!this.layout.isCollapsed)
+            this.props.onListCollapse(!this.layout.isCollapsed);
         }
     };
 

src/components/views/rooms/RoomTile.tsx

@@ -112,7 +112,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
 
     private onRoomNameUpdate = (room) => {
         this.forceUpdate();
-    }
+    };
 
     private onNotificationUpdate = () => {
         this.forceUpdate(); // notification state changed - update

src/components/views/rooms/VoiceRecordComposerTile.tsx

@@ -105,7 +105,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
             });
             this.scheduledAnimationFrame = false;
         });
-    }
+    };
 
     // called by composer
     public async send() {

src/components/views/settings/BridgeTile.tsx

@@ -69,7 +69,7 @@ export default class BridgeTile extends React.PureComponent<IProps> {
     static propTypes = {
         ev: PropTypes.object.isRequired,
         room: PropTypes.object.isRequired,
-    }
+    };
 
     render() {
         const content: IBridgeStateEvent = this.props.ev.getContent();
@@ -131,7 +131,9 @@ export default class BridgeTile extends React.PureComponent<IProps> {
             const networkName = network.displayname || network.id;
             let networkLink = <span>{networkName}</span>;
             if (typeof network.external_url === "string" && isUrlPermitted(network.external_url)) {
-                networkLink = <a href={network.external_url} target="_blank" rel="noreferrer noopener">{networkName}</a>
+                networkLink = (
+                    <a href={network.external_url} target="_blank" rel="noreferrer noopener">{networkName}</a>
+                );
             }
             networkItem = _t("Workspace: <networkLink/>", {}, {
                 networkLink: () => networkLink,
@@ -140,7 +142,7 @@ export default class BridgeTile extends React.PureComponent<IProps> {
 
         let channelLink = <span>{channelName}</span>;
         if (typeof channel.external_url === "string" && isUrlPermitted(channel.external_url)) {
-            channelLink = <a href={channel.external_url} target="_blank" rel="noreferrer noopener">{channelName}</a>
+            channelLink = <a href={channel.external_url} target="_blank" rel="noreferrer noopener">{channelName}</a>;
         }
 
         const id = this.props.ev.getId();

src/components/views/settings/DevicesPanel.js

@@ -75,7 +75,6 @@ export default class DevicesPanel extends React.Component {
         );
     }
 
-
     /*
      * compare two devices, sorting from most-recently-seen to least-recently-seen
      * (and then, for stability, by device id)

src/components/views/settings/EventIndexPanel.tsx

@@ -118,7 +118,7 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
                 onFinished: () => {},
             }, null, /* priority = */ false, /* static = */ true,
         );
-    }
+    };
 
     private onEnable = async () => {
         this.setState({
@@ -130,7 +130,7 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
         await EventIndexPeg.get().startCrawler();
         await SettingsStore.setValue('enableEventIndexing', null, SettingLevel.DEVICE, true);
         await this.updateState();
-    }
+    };
 
     private confirmEventStoreReset = () => {
         const { close } = Modal.createDialog(SeshatResetDialog, {
@@ -143,7 +143,7 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
                 }
             },
         });
-    }
+    };
 
     render() {
         let eventIndexingSettings = null;

src/components/views/settings/Notifications.js

@@ -40,7 +40,6 @@ import {replaceableComponent} from "../../../utils/replaceableComponent";
 // TODO: this component also does a lot of direct poking into this.state, which
 // is VERY NAUGHTY.
 
-
 /**
  * Rules that Vector used to set in order to override the actions of default rules.
  * These are used to port peoples existing overrides to match the current API.