Fix linting issues

.eslintrc.js

@@ -63,6 +63,11 @@ module.exports = {
             "@typescript-eslint/ban-ts-comment": "off",
         },
     }],
+    settings: {
+        react: {
+            version: "detect",
+        }
+    }
 };
 
 function buildRestrictedPropertiesOptions(properties, message) {

src/components/structures/RoomDirectory.tsx

@@ -347,7 +347,7 @@ export default class RoomDirectory extends React.Component<IProps, IState> {
         });
     }
 
-    private onRoomClicked = (room: IPublicRoomsChunkRoom, ev: ButtonEvent) => {
+    private onRoomClicked = (room: IPublicRoomsChunkRoom, ev: React.MouseEvent) => {
         // If room was shift-clicked, remove it from the room directory
         if (ev.shiftKey && !this.state.selectedCommunityId) {
             ev.preventDefault();

src/components/views/avatars/MemberAvatar.tsx

@@ -36,6 +36,7 @@ interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" |
     // Whether the onClick of the avatar should be overriden to dispatch `Action.ViewUser`
     viewUserOnClick?: boolean;
     title?: string;
+    style?: any;
 }
 
 interface IState {

src/components/views/right_panel/UserInfo.tsx

@@ -428,7 +428,7 @@ const UserOptionsSection: React.FC<{
     let directMessageButton;
     if (!isMe) {
         directMessageButton = (
-            <AccessibleButton onClick={() => openDMForUser(cli, member.userId)} className="mx_UserInfo_field">
+            <AccessibleButton onClick={() => { openDMForUser(cli, member.userId); }} className="mx_UserInfo_field">
                 { _t('Direct message') }
             </AccessibleButton>
         );

src/components/views/rooms/ReadReceiptMarker.tsx

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { createRef } from 'react';
+import React, { createRef, RefObject } from 'react';
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 
 import { _t } from '../../../languageHandler';
@@ -75,7 +75,7 @@ interface IReadReceiptMarkerStyle {
 
 @replaceableComponent("views.rooms.ReadReceiptMarker")
 export default class ReadReceiptMarker extends React.PureComponent<IProps, IState> {
-    private avatar: React.RefObject<HTMLDivElement> = createRef();
+    private avatar: React.RefObject<HTMLDivElement | HTMLImageElement | HTMLSpanElement> = createRef();
 
     static defaultProps = {
         leftOffset: 0,
@@ -171,7 +171,7 @@ export default class ReadReceiptMarker extends React.PureComponent<IProps, IStat
 
     public render(): JSX.Element {
         if (this.state.suppressDisplay) {
-            return <div ref={this.avatar} />;
+            return <div ref={this.avatar as RefObject<HTMLDivElement>} />;
         }
 
         const style = {
@@ -210,7 +210,7 @@ export default class ReadReceiptMarker extends React.PureComponent<IProps, IStat
                     style={style}
                     title={title}
                     onClick={this.props.onClick}
-                    inputRef={this.avatar}
+                    inputRef={this.avatar as RefObject<HTMLImageElement>}
                 />
             </NodeAnimator>
         );

src/components/views/rooms/RoomDetailList.tsx

@@ -31,7 +31,7 @@ interface IProps {
 @replaceableComponent("views.rooms.RoomDetailList")
 export default class RoomDetailList extends React.Component<IProps> {
     public getRows(): JSX.Element[] {
-        if (!this.props.rooms) return []; s;
+        if (!this.props.rooms) return [];
         return this.props.rooms.map((room, index) => {
             return <RoomDetailRow key={index} room={room} onClick={this.onDetailsClick} />;
         });

src/components/views/rooms/RoomHeader.tsx

@@ -195,7 +195,7 @@ export default class RoomHeader extends React.Component<IProps> {
             videoCallButton =
                 <AccessibleTooltipButton
                     className="mx_RoomHeader_button mx_RoomHeader_videoCallButton"
-                    onClick={(ev) => ev.shiftKey ?
+                    onClick={(ev: React.MouseEvent<Element>) => ev.shiftKey ?
                         this.displayInfoDialogAboutScreensharing() : this.props.onCallPlaced(PlaceCallType.Video)}
                     title={_t("Video call")} />;
         }

src/components/views/settings/DevicesPanel.tsx

@@ -26,6 +26,9 @@ import Modal from '../../../Modal';
 import { SSOAuthEntry } from "../auth/InteractiveAuthEntryComponents";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import InteractiveAuthDialog from "../dialogs/InteractiveAuthDialog";
+import DevicesPanelEntry from "./DevicesPanelEntry";
+import Spinner from "../elements/Spinner";
+import AccessibleButton from "../elements/AccessibleButton";
 
 interface IProps {
     className?: string;
@@ -175,7 +178,6 @@ export default class DevicesPanel extends React.Component<IProps, IState> {
     }
 
     private renderDevice = (device: IMyDevice): JSX.Element => {
-        const DevicesPanelEntry = sdk.getComponent('settings.DevicesPanelEntry');
         return <DevicesPanelEntry
             key={device.device_id}
             device={device}
@@ -185,9 +187,6 @@ export default class DevicesPanel extends React.Component<IProps, IState> {
     };
 
     public render(): JSX.Element {
-        const Spinner = sdk.getComponent("elements.Spinner");
-        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
-
         if (this.state.deviceLoadError !== undefined) {
             const classes = classNames(this.props.className, "error");
             return (
@@ -200,8 +199,7 @@ export default class DevicesPanel extends React.Component<IProps, IState> {
         const devices = this.state.devices;
         if (devices === undefined) {
             // still loading
-            const classes = this.props.className;
-            return <Spinner className={classes} />;
+            return <Spinner />;
         }
 
         devices.sort(this.deviceCompare);