imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Step 3.2: Stop using getComponent in code

Browse source
This commit is contained in:
Travis Ralston 2022-03-02 16:33:40 -07:00
parent d977865b8e
commit b667ef9f18
18 changed files with 54 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/structures/HomePage.tsx
View file

@ -21,7 +21,6 @@ import AutoHideScrollbar from './AutoHideScrollbar';
import { getHomePageUrl } from "../../utils/pages";
import { _tDom } from "../../languageHandler";
import SdkConfig from "../../SdkConfig";
import * as sdk from "../../index";
import dis from "../../dispatcher/dispatcher";
import { Action } from "../../dispatcher/actions";
import BaseAvatar from "../views/avatars/BaseAvatar";
@ -33,6 +32,7 @@ import MatrixClientContext from "../../contexts/MatrixClientContext";
import MiniAvatarUploader, { AVATAR_SIZE } from "../views/elements/MiniAvatarUploader";
import Analytics from "../../Analytics";
import PosthogTrackers from "../../PosthogTrackers";
import EmbeddedPage from "./EmbeddedPage";
const onClickSendDm = () => {
Analytics.trackEvent('home_page', 'button', 'dm');
@ -94,8 +94,6 @@ const HomePage: React.FC<IProps> = ({ justRegistered = false }) => {
const pageUrl = getHomePageUrl(config);
if (pageUrl) {
// FIXME: Using an import will result in wrench-element-tests failures
const EmbeddedPage = sdk.getComponent('structures.EmbeddedPage');
return <EmbeddedPage className="mx_HomePage" url={pageUrl} scrollbar={true} />;
}

5
src/components/views/auth/Welcome.tsx
View file

@ -17,13 +17,13 @@ limitations under the License.
import React from 'react';
import classNames from "classnames";
import * as sdk from "../../../index";
import SdkConfig from '../../../SdkConfig';
import AuthPage from "./AuthPage";
import { _td } from "../../../languageHandler";
import SettingsStore from "../../../settings/SettingsStore";
import { UIFeature } from "../../../settings/UIFeature";
import LanguageSelector from "./LanguageSelector";
import EmbeddedPage from "../../structures/EmbeddedPage";
// translatable strings for Welcome pages
_td("Sign in with SSO");
@ -34,9 +34,6 @@ interface IProps {
export default class Welcome extends React.PureComponent<IProps> {
public render(): React.ReactNode {
// FIXME: Using an import will result in wrench-element-tests failures
const EmbeddedPage = sdk.getComponent("structures.EmbeddedPage");
const pagesConfig = SdkConfig.getObject("embedded_pages");
let pageUrl = null;
if (pagesConfig) {

6
src/components/views/dialogs/InfoDialog.tsx
View file

@ -19,8 +19,9 @@ import React, { ReactNode, KeyboardEvent } from 'react';
import classNames from "classnames";
import { _t } from '../../../languageHandler';
import * as sdk from '../../../index';
import { IDialogProps } from "./IDialogProps";
import BaseDialog from "./BaseDialog";
import DialogButtons from "../elements/DialogButtons";
interface IProps extends IDialogProps {
title?: string;
@ -44,9 +45,6 @@ export default class InfoDialog extends React.Component<IProps> {
};
render() {
// FIXME: Using a regular import will break the app
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
return (
<BaseDialog
className="mx_InfoDialog"

7
src/components/views/dialogs/QuestionDialog.tsx
View file

@ -18,9 +18,10 @@ limitations under the License.
import React from 'react';
import classNames from "classnames";
import * as sdk from '../../../index';
import { _t } from '../../../languageHandler';
import { IDialogProps } from "./IDialogProps";
import BaseDialog from "./BaseDialog";
import DialogButtons from "../elements/DialogButtons";
interface IProps extends IDialogProps {
title?: string;
@ -58,10 +59,6 @@ export default class QuestionDialog extends React.Component<IProps> {
};
public render(): JSX.Element {
// Converting these to imports breaks wrench tests
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
let primaryButtonClass = "";
if (this.props.danger) {
primaryButtonClass = "danger";

11
src/components/views/dialogs/security/AccessSecretStorageDialog.tsx
View file

@ -20,7 +20,6 @@ import React, { ChangeEvent, FormEvent } from 'react';
import { ISecretStorageKeyInfo } from "matrix-js-sdk/src/crypto/api";
import { logger } from "matrix-js-sdk/src/logger";
import * as sdk from '../../../../index';
import { MatrixClientPeg } from '../../../../MatrixClientPeg';
import Field from '../../elements/Field';
import AccessibleButton from '../../elements/AccessibleButton';
@ -28,6 +27,9 @@ import { _t } from '../../../../languageHandler';
import { IDialogProps } from "../IDialogProps";
import { accessSecretStorage } from "../../../../SecurityManager";
import Modal from "../../../../Modal";
import InteractiveAuthDialog from "../InteractiveAuthDialog";
import DialogButtons from "../../elements/DialogButtons";
import BaseDialog from "../BaseDialog";
// Maximum acceptable size of a key file. It's 59 characters including the spaces we encode,
// so this should be plenty and allow for people putting extra whitespace in the file because
@ -230,8 +232,6 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
const cli = MatrixClientPeg.get();
await cli.bootstrapCrossSigning({
authUploadDeviceSigningKeys: async (makeRequest) => {
// XXX: Making this an import breaks the app.
const InteractiveAuthDialog = sdk.getComponent("views.dialogs.InteractiveAuthDialog");
const { finished } = Modal.createTrackedDialog(
'Cross-signing keys dialog', '', InteractiveAuthDialog,
{
@ -273,10 +273,6 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
}
render() {
// Caution: Making these an import will break tests.
const BaseDialog = sdk.getComponent("views.dialogs.BaseDialog");
const DialogButtons = sdk.getComponent("views.elements.DialogButtons");
const hasPassphrase = (
this.props.keyInfo &&
this.props.keyInfo.passphrase &&
@ -315,7 +311,6 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
/>
</div>;
} else if (hasPassphrase && !this.state.forceRecoveryKey) {
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
title = _t("Security Phrase");
titleClass = ['mx_AccessSecretStorageDialog_titleWithIcon mx_AccessSecretStorageDialog_securePhraseTitle'];

11
src/components/views/dialogs/security/RestoreKeyBackupDialog.tsx
View file

@ -24,8 +24,11 @@ import { logger } from "matrix-js-sdk/src/logger";
import { MatrixClientPeg } from '../../../../MatrixClientPeg';
import { _t } from '../../../../languageHandler';
import { accessSecretStorage } from '../../../../SecurityManager';
import * as sdk from '../../../../index';
import { IDialogProps } from "../IDialogProps";
import Spinner from '../../elements/Spinner';
import DialogButtons from "../../elements/DialogButtons";
import AccessibleButton from "../../elements/AccessibleButton";
import BaseDialog from "../BaseDialog";
enum RestoreType {
Passphrase = "passphrase",
@ -298,12 +301,6 @@ export default class RestoreKeyBackupDialog extends React.PureComponent<IProps,
}
public render(): JSX.Element {
// FIXME: Making these into imports will break tests
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
const Spinner = sdk.getComponent("elements.Spinner");
const backupHasPassphrase = (
this.state.backupInfo &&
this.state.backupInfo.auth_data &&

4
src/components/views/elements/Field.tsx
View file

@ -18,9 +18,9 @@ import React, { InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttribute
import classNames from 'classnames';
import { debounce } from "lodash";
import * as sdk from '../../../index';
import { IFieldState, IValidationResult } from "./Validation";
import { ComponentClass } from "../../../@types/common";
import Tooltip from "./Tooltip";
// Invoke validation from user input (when typing, etc.) at most once every N ms.
const VALIDATION_THROTTLE_MS = 200;
@ -295,8 +295,6 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
);
// Handle displaying feedback on validity
// FIXME: Using an import will result in test failures
const Tooltip = sdk.getComponent("elements.Tooltip");
let fieldTooltip;
if (tooltipContent || this.state.feedback) {
fieldTooltip = <Tooltip

6
src/components/views/elements/Pill.js
View file

@ -20,13 +20,14 @@ import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
import PropTypes from 'prop-types';
import { logger } from "matrix-js-sdk/src/logger";
import * as sdk from '../../../index';
import dis from '../../../dispatcher/dispatcher';
import { MatrixClientPeg } from '../../../MatrixClientPeg';
import { getPrimaryPermalinkEntity, parsePermalink } from "../../../utils/permalinks/Permalinks";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { Action } from "../../../dispatcher/actions";
import Tooltip from './Tooltip';
import RoomAvatar from "../avatars/RoomAvatar";
import MemberAvatar from "../avatars/MemberAvatar";
class Pill extends React.Component {
static roomNotifPos(text) {
@ -181,9 +182,6 @@ class Pill extends React.Component {
};
render() {
const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
const resource = this.state.resourceId;
let avatar = null;

43
src/components/views/messages/MessageEvent.tsx
View file

@ -20,7 +20,6 @@ import { Relations } from 'matrix-js-sdk/src/models/relations';
import { M_LOCATION } from 'matrix-js-sdk/src/@types/location';
import { M_POLL_START } from "matrix-events-sdk";
import * as sdk from '../../../index';
import SettingsStore from "../../../settings/SettingsStore";
import { Mjolnir } from "../../../mjolnir/Mjolnir";
import RedactedBody from "./RedactedBody";
@ -31,6 +30,15 @@ import { MediaEventHelper } from "../../../utils/MediaEventHelper";
import { ReactAnyComponent } from "../../../@types/common";
import { IBodyProps } from "./IBodyProps";
import MatrixClientContext from '../../../contexts/MatrixClientContext';
import TextualBody from "./TextualBody";
import MImageBody from "./MImageBody";
import MFileBody from "./MFileBody";
import MVoiceOrAudioBody from "./MVoiceOrAudioBody";
import MVideoBody from "./MVideoBody";
import MStickerBody from "./MStickerBody";
import MPollBody from "./MPollBody";
import MLocationBody from "./MLocationBody";
import MjolnirBody from "./MjolnirBody";
// onMessageAllowed is handled internally
interface IProps extends Omit<IBodyProps, "onMessageAllowed"> {
@ -70,23 +78,25 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
}
}
private get bodyTypes(): Record<string, React.Component> {
private get bodyTypes(): Record<string, typeof React.Component> {
return {
[MsgType.Text]: sdk.getComponent('messages.TextualBody'),
[MsgType.Notice]: sdk.getComponent('messages.TextualBody'),
[MsgType.Emote]: sdk.getComponent('messages.TextualBody'),
[MsgType.Image]: sdk.getComponent('messages.MImageBody'),
[MsgType.File]: sdk.getComponent('messages.MFileBody'),
[MsgType.Audio]: sdk.getComponent('messages.MVoiceOrAudioBody'),
[MsgType.Video]: sdk.getComponent('messages.MVideoBody'),
[MsgType.Text]: TextualBody,
[MsgType.Notice]: TextualBody,
[MsgType.Emote]: TextualBody,
[MsgType.Image]: MImageBody,
[MsgType.File]: MFileBody,
[MsgType.Audio]: MVoiceOrAudioBody,
[MsgType.Video]: MVideoBody,
...(this.props.overrideBodyTypes || {}),
};
}
private get evTypes(): Record<string, React.Component> {
private get evTypes(): Record<string, typeof React.Component> {
return {
[EventType.Sticker]: sdk.getComponent('messages.MStickerBody'),
[EventType.Sticker]: MStickerBody,
[M_POLL_START.name]: MPollBody,
[M_POLL_START.altName]: MPollBody,
...(this.props.overrideEventTypes || {}),
};
@ -108,7 +118,7 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
const content = this.props.mxEvent.getContent();
const type = this.props.mxEvent.getType();
const msgtype = content.msgtype;
let BodyType: ReactAnyComponent = RedactedBody;
let BodyType: typeof React.Component | ReactAnyComponent = RedactedBody;
if (!this.props.mxEvent.isRedacted()) {
// only resolve BodyType if event is not redacted
if (type && this.evTypes[type]) {
@ -123,17 +133,12 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
BodyType = UnknownBody;
}
// TODO: move to eventTypes when Polls spec stabilises
if (M_POLL_START.matches(type)) {
BodyType = sdk.getComponent('messages.MPollBody');
}
// TODO: move to eventTypes when location sharing spec stabilises
if (
M_LOCATION.matches(type) ||
(type === EventType.RoomMessage && msgtype === MsgType.Location)
) {
BodyType = sdk.getComponent('messages.MLocationBody');
BodyType = MLocationBody;
}
}
@ -147,7 +152,7 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
const serverBanned = Mjolnir.sharedInstance().isServerBanned(userDomain);
if (userBanned || serverBanned) {
BodyType = sdk.getComponent('messages.MjolnirBody');
BodyType = MjolnirBody;
}
}
}

4
src/components/views/right_panel/EncryptionPanel.tsx
View file

@ -30,10 +30,10 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
import { ensureDMExists } from "../../../createRoom";
import { useTypedEventEmitter } from "../../../hooks/useEventEmitter";
import Modal from "../../../Modal";
import * as sdk from "../../../index";
import { _t } from "../../../languageHandler";
import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases';
import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
import ErrorDialog from "../dialogs/ErrorDialog";
// cancellation codes which constitute a key mismatch
const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"];
@ -84,8 +84,6 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
const changeHandler = useCallback(() => {
// handle transitions -> cancelled for mismatches which fire a modal instead of showing a card
if (request && request.cancelled && MISMATCHES.includes(request.cancellationCode)) {
// FIXME: Using an import will result in test failures
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createTrackedDialog("Verification failed", "insecure", ErrorDialog, {
headerImage: require("../../../../res/img/e2e/warning.svg").default,
title: _t("Your messages are not secure"),

4
src/components/views/rooms/RoomDetailRow.js
View file

@ -17,11 +17,11 @@ limitations under the License.
import React, { createRef } from 'react';
import PropTypes from 'prop-types';
import * as sdk from '../../../index';
import { _t } from '../../../languageHandler';
import { linkifyElement } from '../../../HtmlUtils';
import { mediaFromMxc } from "../../../customisations/Media";
import { getDisplayAliasForAliasSet } from '../../../Rooms';
import BaseAvatar from "../avatars/BaseAvatar";
export function getDisplayAliasForRoom(room) {
return getDisplayAliasForAliasSet(room.canonicalAlias, room.aliases);
@ -82,8 +82,6 @@ export default class RoomDetailRow extends React.Component {
};
render() {
const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
const room = this.props.room;
const name = room.name || getDisplayAliasForRoom(room) || _t('Unnamed room');