replace sdk.getComponent with import statements

src/components/views/rooms/ReadReceiptMarker.tsx

@@ -21,10 +21,11 @@ import { RoomMember } from 'matrix-js-sdk/src';
 import { _t } from '../../../languageHandler';
 import { formatDate } from '../../../DateUtils';
 import NodeAnimator from "../../../NodeAnimator";
-import * as sdk from "../../../index";
 import { toPx } from "../../../utils/units";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
+import MemberAvatar from '../avatars/MemberAvatar';
+
 interface IProps {
     // the RoomMember to show the RR for
     member?: RoomMember;
@@ -169,7 +170,6 @@ export default class ReadReceiptMarker extends React.PureComponent<IProps, IStat
     }
 
     public render(): JSX.Element {
-        const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
         if (this.state.suppressDisplay) {
             return <div ref={this.avatar} />;
         }

src/components/views/rooms/RoomDetailList.tsx

@@ -17,11 +17,11 @@ limitations under the License.
 import React from 'react';
 import { Room } from 'matrix-js-sdk/src';
 import classNames from 'classnames';
-import * as sdk from '../../../index';
 import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import RoomDetailRow from "./RoomDetailRow";
 
 interface IProps {
     rooms?: Room[];
@@ -31,9 +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 [];
-
-        const RoomDetailRow = sdk.getComponent('rooms.RoomDetailRow');
+        if (!this.props.rooms) return []; s;
         return this.props.rooms.map((room, index) => {
             return <RoomDetailRow key={index} room={room} onClick={this.onDetailsClick} />;
         });

src/components/views/rooms/RoomUpgradeWarningBar.tsx

@@ -16,12 +16,13 @@ limitations under the License.
 
 import React from 'react';
 import { MatrixEvent, Room, RoomState } from 'matrix-js-sdk/src';
-import * as sdk from '../../../index';
 import Modal from '../../../Modal';
 
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import RoomUpgradeDialog from '../dialogs/RoomUpgradeDialog';
+import AccessibleButton from '../elements/AccessibleButton';
 
 interface IProps {
     room: Room;
@@ -59,13 +60,10 @@ export default class RoomUpgradeWarningBar extends React.PureComponent<IProps, I
     };
 
     private onUpgradeClick = (): void => {
-        const RoomUpgradeDialog = sdk.getComponent('dialogs.RoomUpgradeDialog');
         Modal.createTrackedDialog('Upgrade Room Version', '', RoomUpgradeDialog, { room: this.props.room });
     };
 
     public render(): JSX.Element {
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-
         let doUpgradeWarnings = (
             <div>
                 <div className="mx_RoomUpgradeWarningBar_body">

src/components/views/settings/ChangeAvatar.tsx

@@ -18,11 +18,12 @@ limitations under the License.
 import React from 'react';
 import { MatrixEvent, Room } from 'matrix-js-sdk/src';
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import Spinner from '../elements/Spinner';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromMxc } from "../../../customisations/Media";
+import RoomAvatar from '../avatars/RoomAvatar';
+import BaseAvatar from '../avatars/BaseAvatar';
 
 interface IProps {
     initialAvatarUrl?: string;
@@ -155,7 +156,6 @@ export default class ChangeAvatar extends React.Component<IProps, IState> {
         // Having just set an avatar we just display that since it will take a little
         // time to propagate through to the RoomAvatar.
         if (this.props.room && !this.avatarSet) {
-            const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
             avatarImg = <RoomAvatar
                 room={this.props.room}
                 width={this.props.width}
@@ -163,7 +163,6 @@ export default class ChangeAvatar extends React.Component<IProps, IState> {
                 resizeMethod='crop'
             />;
         } else {
-            const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
             // XXX: FIXME: once we track in the JS what our own displayname is(!) then use it here rather than ?
             avatarImg = <BaseAvatar
                 width={this.props.width}

src/components/views/settings/ChangeDisplayName.tsx

@@ -17,10 +17,10 @@ limitations under the License.
 */
 
 import React from 'react';
-import * as sdk from '../../../index';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import EditableTextContainer from "../elements/EditableTextContainer";
 
 @replaceableComponent("views.settings.ChangeDisplayName")
 export default class ChangeDisplayName extends React.Component {
@@ -42,7 +42,6 @@ export default class ChangeDisplayName extends React.Component {
     };
 
     public render(): JSX.Element {
-        const EditableTextContainer = sdk.getComponent('elements.EditableTextContainer');
         return (
             <EditableTextContainer
                 getInitialValue={this.getDisplayName}

src/components/views/settings/DevicesPanel.tsx

@@ -20,12 +20,12 @@ import React from 'react';
 import classNames from 'classnames';
 import { IMyDevice } from "matrix-js-sdk/src/client";
 
-import * as sdk from '../../../index';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
 import { SSOAuthEntry } from "../auth/InteractiveAuthEntryComponents";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import InteractiveAuthDialog from "../dialogs/InteractiveAuthDialog";
 
 interface IProps {
     className?: string;
@@ -119,7 +119,6 @@ export default class DevicesPanel extends React.Component<IProps, IState> {
             }
 
             // pop up an interactive auth dialog
-            const InteractiveAuthDialog = sdk.getComponent("dialogs.InteractiveAuthDialog");
 
             const numDevices = this.state.selectedDevices.length;
             const dialogAesthetics = {

src/components/views/settings/DevicesPanelEntry.tsx

@@ -18,12 +18,12 @@ limitations under the License.
 import React from 'react';
 import { IMyDevice } from 'matrix-js-sdk/src';
 
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { formatDate } from '../../../DateUtils';
 import StyledCheckbox from '../elements/StyledCheckbox';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import EditableTextContainer from "../elements/EditableTextContainer";
 
 interface IProps {
     device?: IMyDevice;
@@ -52,8 +52,6 @@ export default class DevicesPanelEntry extends React.Component<IProps> {
     };
 
     public render(): JSX.Element {
-        const EditableTextContainer = sdk.getComponent('elements.EditableTextContainer');
-
         const device = this.props.device;
 
         let lastSeen = "";

src/components/views/settings/IntegrationManager.tsx

@@ -17,12 +17,12 @@ limitations under the License.
 */
 
 import React from 'react';
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import dis from '../../../dispatcher/dispatcher';
 import { Key } from "../../../Keyboard";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { ActionPayload } from '../../../dispatcher/payloads';
+import Spinner from "../elements/Spinner";
 
 interface IProps {
     // false to display an error saying that we couldn't connect to the integration manager
@@ -85,7 +85,6 @@ export default class IntegrationManager extends React.Component<IProps, IState>
 
     public render(): JSX.Element {
         if (this.props.loading) {
-            const Spinner = sdk.getComponent("elements.Spinner");
             return (
                 <div className='mx_IntegrationManager_loading'>
                     <h3>{ _t("Connecting to integration manager...") }</h3>

src/components/views/settings/ProfileSettings.tsx

@@ -19,12 +19,13 @@ import { _t } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import Field from "../elements/Field";
 import { getHostingLink } from '../../../utils/HostingLink';
-import * as sdk from "../../../index";
 import { OwnProfileStore } from "../../../stores/OwnProfileStore";
 import Modal from "../../../Modal";
 import ErrorDialog from "../dialogs/ErrorDialog";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import { mediaFromMxc } from "../../../customisations/Media";
+import AccessibleButton from '../elements/AccessibleButton';
+import AvatarSetting from './AvatarSetting';
 
 interface IProps {
 
@@ -174,8 +175,6 @@ export default class ProfileSettings extends React.Component<IProps, IState> {
             </span>;
         }
 
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        const AvatarSetting = sdk.getComponent('settings.AvatarSetting');
         return (
             <form
                 onSubmit={this.saveProfile}