From c8bd37513026590d08c156104323bb1c80a88552 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 15 Jul 2021 15:11:45 +0200 Subject: [PATCH 01/16] Migrate DisableEventIndexDialog to TypeScript --- ...xDialog.js => DisableEventIndexDialog.tsx} | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) rename src/async-components/views/dialogs/eventindex/{DisableEventIndexDialog.js => DisableEventIndexDialog.tsx} (86%) diff --git a/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.js b/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.tsx similarity index 86% rename from src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.js rename to src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.tsx index a19494c753..2be5ddaa43 100644 --- a/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.js +++ b/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.tsx @@ -16,7 +16,6 @@ limitations under the License. import React from 'react'; import * as sdk from '../../../../index'; -import PropTypes from 'prop-types'; import dis from "../../../../dispatcher/dispatcher"; import { _t } from '../../../../languageHandler'; @@ -25,34 +24,37 @@ import EventIndexPeg from "../../../../indexing/EventIndexPeg"; import { Action } from "../../../../dispatcher/actions"; import { SettingLevel } from "../../../../settings/SettingLevel"; +interface IProps { + onFinished: (success: boolean) => void; +} + +interface IState { + disabling: boolean; +} + /* * Allows the user to disable the Event Index. */ -export default class DisableEventIndexDialog extends React.Component { - static propTypes = { - onFinished: PropTypes.func.isRequired, - } - - constructor(props) { +export default class DisableEventIndexDialog extends React.Component { + constructor(props: IProps) { super(props); - this.state = { disabling: false, }; } - _onDisable = async () => { + private onDisable = async (): Promise => { this.setState({ disabling: true, }); await SettingsStore.setValue('enableEventIndexing', null, SettingLevel.DEVICE, false); await EventIndexPeg.deleteEventIndex(); - this.props.onFinished(); + this.props.onFinished(true); dis.fire(Action.ViewUserSettings); - } + }; - render() { + public render(): React.ReactNode { const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); const Spinner = sdk.getComponent('elements.Spinner'); const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); @@ -63,7 +65,7 @@ export default class DisableEventIndexDialog extends React.Component { {this.state.disabling ? :
} Date: Thu, 15 Jul 2021 15:19:48 +0200 Subject: [PATCH 02/16] Migrate AuthBody to TypeScript --- src/components/views/auth/{AuthBody.js => AuthBody.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/components/views/auth/{AuthBody.js => AuthBody.tsx} (100%) diff --git a/src/components/views/auth/AuthBody.js b/src/components/views/auth/AuthBody.tsx similarity index 100% rename from src/components/views/auth/AuthBody.js rename to src/components/views/auth/AuthBody.tsx From 59316e4820961667813ad5dff9aee69c56010bdd Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 15 Jul 2021 15:20:43 +0200 Subject: [PATCH 03/16] Migrate AuthFooter to TypeScript --- src/components/views/auth/AuthBody.tsx | 2 +- src/components/views/auth/{AuthFooter.js => AuthFooter.tsx} | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename src/components/views/auth/{AuthFooter.js => AuthFooter.tsx} (96%) diff --git a/src/components/views/auth/AuthBody.tsx b/src/components/views/auth/AuthBody.tsx index abe7fd2fd3..3543a573d7 100644 --- a/src/components/views/auth/AuthBody.tsx +++ b/src/components/views/auth/AuthBody.tsx @@ -19,7 +19,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent"; @replaceableComponent("views.auth.AuthBody") export default class AuthBody extends React.PureComponent { - render() { + public render(): React.ReactNode { return
{ this.props.children }
; diff --git a/src/components/views/auth/AuthFooter.js b/src/components/views/auth/AuthFooter.tsx similarity index 96% rename from src/components/views/auth/AuthFooter.js rename to src/components/views/auth/AuthFooter.tsx index e81d2cd969..00bced8c39 100644 --- a/src/components/views/auth/AuthFooter.js +++ b/src/components/views/auth/AuthFooter.tsx @@ -22,7 +22,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent"; @replaceableComponent("views.auth.AuthFooter") export default class AuthFooter extends React.Component { - render() { + public render(): React.ReactNode { return (
{ _t("powered by Matrix") } From 5783a382070ea568fd1107f06be1d0a077f9b2cd Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 15 Jul 2021 15:21:33 +0200 Subject: [PATCH 04/16] Migrate AuthHeader to TypeScript --- .../views/auth/{AuthHeader.js => AuthHeader.tsx} | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) rename src/components/views/auth/{AuthHeader.js => AuthHeader.tsx} (85%) diff --git a/src/components/views/auth/AuthHeader.js b/src/components/views/auth/AuthHeader.tsx similarity index 85% rename from src/components/views/auth/AuthHeader.js rename to src/components/views/auth/AuthHeader.tsx index d9bd81adcb..6f071c8f61 100644 --- a/src/components/views/auth/AuthHeader.js +++ b/src/components/views/auth/AuthHeader.tsx @@ -16,17 +16,16 @@ limitations under the License. */ import React from 'react'; -import PropTypes from 'prop-types'; import * as sdk from '../../../index'; import { replaceableComponent } from "../../../utils/replaceableComponent"; -@replaceableComponent("views.auth.AuthHeader") -export default class AuthHeader extends React.Component { - static propTypes = { - disableLanguageSelector: PropTypes.bool, - }; +interface IProps { + disableLanguageSelector?: boolean; +} - render() { +@replaceableComponent("views.auth.AuthHeader") +export default class AuthHeader extends React.Component { + public render(): React.ReactNode { const AuthHeaderLogo = sdk.getComponent('auth.AuthHeaderLogo'); const LanguageSelector = sdk.getComponent('views.auth.LanguageSelector'); From 13c5adbb6ca050a3130996646fe10e09885665f9 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 15 Jul 2021 15:22:02 +0200 Subject: [PATCH 05/16] Migrate AuthHeaderLogo to TypeScript --- .../views/auth/{AuthHeaderLogo.js => AuthHeaderLogo.tsx} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename src/components/views/auth/{AuthHeaderLogo.js => AuthHeaderLogo.tsx} (95%) diff --git a/src/components/views/auth/AuthHeaderLogo.js b/src/components/views/auth/AuthHeaderLogo.tsx similarity index 95% rename from src/components/views/auth/AuthHeaderLogo.js rename to src/components/views/auth/AuthHeaderLogo.tsx index 0adf18dc1c..b6724793a5 100644 --- a/src/components/views/auth/AuthHeaderLogo.js +++ b/src/components/views/auth/AuthHeaderLogo.tsx @@ -19,7 +19,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent"; @replaceableComponent("views.auth.AuthHeaderLogo") export default class AuthHeaderLogo extends React.PureComponent { - render() { + public render(): React.ReactNode { return
Matrix
; From e495cbce373b6f2f55e89ea300d598c37945c372 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 15 Jul 2021 15:22:34 +0200 Subject: [PATCH 06/16] Migrate AuthPage to TypeScript --- src/components/views/auth/{AuthPage.js => AuthPage.tsx} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename src/components/views/auth/{AuthPage.js => AuthPage.tsx} (96%) diff --git a/src/components/views/auth/AuthPage.js b/src/components/views/auth/AuthPage.tsx similarity index 96% rename from src/components/views/auth/AuthPage.js rename to src/components/views/auth/AuthPage.tsx index 6ba47e5288..9957c1d6d0 100644 --- a/src/components/views/auth/AuthPage.js +++ b/src/components/views/auth/AuthPage.tsx @@ -22,7 +22,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent"; @replaceableComponent("views.auth.AuthPage") export default class AuthPage extends React.PureComponent { - render() { + public render(): React.ReactNode { const AuthFooter = sdk.getComponent('auth.AuthFooter'); return ( From 1f9b423baceed95dd59d56db7c5779f8986917f1 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 15 Jul 2021 15:30:39 +0200 Subject: [PATCH 07/16] Migrate CaptchaForm to TypeScript --- src/@types/global.d.ts | 2 + .../auth/{CaptchaForm.js => CaptchaForm.tsx} | 59 +++++++++---------- 2 files changed, 31 insertions(+), 30 deletions(-) rename src/components/views/auth/{CaptchaForm.js => CaptchaForm.tsx} (74%) diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index 7192eb81cc..7f78d96642 100644 --- a/src/@types/global.d.ts +++ b/src/@types/global.d.ts @@ -90,6 +90,8 @@ declare global { mxUIStore: UIStore; mxSetupEncryptionStore?: SetupEncryptionStore; mxRoomScrollStateStore?: RoomScrollStateStore; + grecaptcha: any; + mx_on_recaptcha_loaded: () => void; } interface Document { diff --git a/src/components/views/auth/CaptchaForm.js b/src/components/views/auth/CaptchaForm.tsx similarity index 74% rename from src/components/views/auth/CaptchaForm.js rename to src/components/views/auth/CaptchaForm.tsx index bea4f89f53..f7386be5b0 100644 --- a/src/components/views/auth/CaptchaForm.js +++ b/src/components/views/auth/CaptchaForm.tsx @@ -15,25 +15,28 @@ limitations under the License. */ import React, { createRef } from 'react'; -import PropTypes from 'prop-types'; import { _t } from '../../../languageHandler'; import CountlyAnalytics from "../../../CountlyAnalytics"; import { replaceableComponent } from "../../../utils/replaceableComponent"; const DIV_ID = 'mx_recaptcha'; +interface IProps { + sitePublicKey?: string; + onCaptchaResponse: () => void; +} + +interface IState { + errorText: string; +} + /** * A pure UI component which displays a captcha form. */ @replaceableComponent("views.auth.CaptchaForm") -export default class CaptchaForm extends React.Component { - static propTypes = { - sitePublicKey: PropTypes.string, - - // called with the captcha response - onCaptchaResponse: PropTypes.func, - }; - +export default class CaptchaForm extends React.Component { + private captchaWidgetId: string; + private recaptchaContainer = createRef(); static defaultProps = { onCaptchaResponse: () => {}, }; @@ -45,36 +48,32 @@ export default class CaptchaForm extends React.Component { errorText: null, }; - this._captchaWidgetId = null; - - this._recaptchaContainer = createRef(); - CountlyAnalytics.instance.track("onboarding_grecaptcha_begin"); } - componentDidMount() { + public componentDidMount(): void { // Just putting a script tag into the returned jsx doesn't work, annoyingly, // so we do this instead. - if (global.grecaptcha) { + if (window.grecaptcha) { // TODO: Properly find the type of `grecaptcha` // already loaded - this._onCaptchaLoaded(); + this.onCaptchaLoaded(); } else { console.log("Loading recaptcha script..."); - window.mx_on_recaptcha_loaded = () => {this._onCaptchaLoaded();}; + window.mx_on_recaptcha_loaded = () => {this.onCaptchaLoaded();}; const scriptTag = document.createElement('script'); scriptTag.setAttribute( 'src', `https://www.recaptcha.net/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit`, ); - this._recaptchaContainer.current.appendChild(scriptTag); + this.recaptchaContainer.current.appendChild(scriptTag); } } - componentWillUnmount() { - this._resetRecaptcha(); + public componentWillUnmount(): void { + this.resetRecaptcha(); } - _renderRecaptcha(divId) { - if (!global.grecaptcha) { + private renderRecaptcha(divId): void { + if (!window.grecaptcha) { console.error("grecaptcha not loaded!"); throw new Error("Recaptcha did not load successfully"); } @@ -88,22 +87,22 @@ export default class CaptchaForm extends React.Component { } console.info("Rendering to %s", divId); - this._captchaWidgetId = global.grecaptcha.render(divId, { + this.captchaWidgetId = window.grecaptcha.render(divId, { sitekey: publicKey, callback: this.props.onCaptchaResponse, }); } - _resetRecaptcha() { - if (this._captchaWidgetId !== null) { - global.grecaptcha.reset(this._captchaWidgetId); + private resetRecaptcha(): void { + if (this.captchaWidgetId !== null) { + window.grecaptcha.reset(this.captchaWidgetId); } } - _onCaptchaLoaded() { + private onCaptchaLoaded(): void { console.log("Loaded recaptcha script."); try { - this._renderRecaptcha(DIV_ID); + this.renderRecaptcha(DIV_ID); // clear error if re-rendered this.setState({ errorText: null, @@ -117,7 +116,7 @@ export default class CaptchaForm extends React.Component { } } - render() { + public render(): React.ReactNode { let error = null; if (this.state.errorText) { error = ( @@ -128,7 +127,7 @@ export default class CaptchaForm extends React.Component { } return ( -
+

{_t( "This homeserver would like to make sure you are not a robot.", )}

From c6dd9bc5261f35563c2a8c493a1042e26ad85c20 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 15 Jul 2021 15:32:24 +0200 Subject: [PATCH 08/16] Migrate CompleteSecurityBody to TypeScript --- .../auth/{CompleteSecurityBody.js => CompleteSecurityBody.tsx} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename src/components/views/auth/{CompleteSecurityBody.js => CompleteSecurityBody.tsx} (95%) diff --git a/src/components/views/auth/CompleteSecurityBody.js b/src/components/views/auth/CompleteSecurityBody.tsx similarity index 95% rename from src/components/views/auth/CompleteSecurityBody.js rename to src/components/views/auth/CompleteSecurityBody.tsx index 745d7abbf2..8f6affb64e 100644 --- a/src/components/views/auth/CompleteSecurityBody.js +++ b/src/components/views/auth/CompleteSecurityBody.tsx @@ -19,7 +19,7 @@ import { replaceableComponent } from "../../../utils/replaceableComponent"; @replaceableComponent("views.auth.CompleteSecurityBody") export default class CompleteSecurityBody extends React.PureComponent { - render() { + public render(): React.ReactNode { return
{ this.props.children }
; From 8ef9c3dfebc1b9c79d2a543e167d77568b34a75e Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 15 Jul 2021 15:42:11 +0200 Subject: [PATCH 09/16] Migrate CountryDropdown to TypeScript --- ...CountryDropdown.js => CountryDropdown.tsx} | 59 +++++++++++-------- src/phonenumber.ts | 8 ++- 2 files changed, 42 insertions(+), 25 deletions(-) rename src/components/views/auth/{CountryDropdown.js => CountryDropdown.tsx} (78%) diff --git a/src/components/views/auth/CountryDropdown.js b/src/components/views/auth/CountryDropdown.tsx similarity index 78% rename from src/components/views/auth/CountryDropdown.js rename to src/components/views/auth/CountryDropdown.tsx index cbc19e0f8d..2e85356e38 100644 --- a/src/components/views/auth/CountryDropdown.js +++ b/src/components/views/auth/CountryDropdown.tsx @@ -19,7 +19,7 @@ import PropTypes from 'prop-types'; import * as sdk from '../../../index'; -import { COUNTRIES, getEmojiFlag } from '../../../phonenumber'; +import { COUNTRIES, getEmojiFlag, PhoneNumberCountryDefinition } from '../../../phonenumber'; import SdkConfig from "../../../SdkConfig"; import { _t } from "../../../languageHandler"; import { replaceableComponent } from "../../../utils/replaceableComponent"; @@ -29,7 +29,7 @@ for (const c of COUNTRIES) { COUNTRIES_BY_ISO2[c.iso2] = c; } -function countryMatchesSearchQuery(query, country) { +function countryMatchesSearchQuery(query: string, country: PhoneNumberCountryDefinition): boolean { // Remove '+' if present (when searching for a prefix) if (query[0] === '+') { query = query.slice(1); @@ -41,15 +41,26 @@ function countryMatchesSearchQuery(query, country) { return false; } -@replaceableComponent("views.auth.CountryDropdown") -export default class CountryDropdown extends React.Component { - constructor(props) { - super(props); - this._onSearchChange = this._onSearchChange.bind(this); - this._onOptionChange = this._onOptionChange.bind(this); - this._getShortOption = this._getShortOption.bind(this); +interface IProps { + value?: string; + onOptionChange: (country: PhoneNumberCountryDefinition) => void; + isSmall: boolean; + showPrefix: boolean; + className?: string; + disabled?: boolean; +} - let defaultCountry = COUNTRIES[0]; +interface IState { + searchQuery: string; + defaultCountry: PhoneNumberCountryDefinition; +} + +@replaceableComponent("views.auth.CountryDropdown") +export default class CountryDropdown extends React.Component { + constructor(props: IProps) { + super(props); + + let defaultCountry: PhoneNumberCountryDefinition = COUNTRIES[0]; const defaultCountryCode = SdkConfig.get()["defaultCountryCode"]; if (defaultCountryCode) { const country = COUNTRIES.find(c => c.iso2 === defaultCountryCode.toUpperCase()); @@ -62,7 +73,7 @@ export default class CountryDropdown extends React.Component { }; } - componentDidMount() { + public componentDidMount(): void { if (!this.props.value) { // If no value is given, we start with the default // country selected, but our parent component @@ -71,21 +82,21 @@ export default class CountryDropdown extends React.Component { } } - _onSearchChange(search) { + private onSearchChange = (search: string): void => { this.setState({ searchQuery: search, }); - } + }; - _onOptionChange(iso2) { + private onOptionChange = (iso2: string): void => { this.props.onOptionChange(COUNTRIES_BY_ISO2[iso2]); - } + }; - _flagImgForIso2(iso2) { + private flagImgForIso2(iso2: string): React.ReactNode { return
{ getEmojiFlag(iso2) }
; } - _getShortOption(iso2) { + private getShortOption = (iso2: string): React.ReactNode => { if (!this.props.isSmall) { return undefined; } @@ -94,12 +105,12 @@ export default class CountryDropdown extends React.Component { countryPrefix = '+' + COUNTRIES_BY_ISO2[iso2].prefix; } return - { this._flagImgForIso2(iso2) } + { this.flagImgForIso2(iso2) } { countryPrefix } ; - } + }; - render() { + public render(): React.ReactNode { const Dropdown = sdk.getComponent('elements.Dropdown'); let displayedCountries; @@ -124,7 +135,7 @@ export default class CountryDropdown extends React.Component { const options = displayedCountries.map((country) => { return
- { this._flagImgForIso2(country.iso2) } + { this.flagImgForIso2(country.iso2) } { _t(country.name) } (+{ country.prefix })
; }); @@ -136,10 +147,10 @@ export default class CountryDropdown extends React.Component { return { return String.fromCodePoint(...countryCode.split('').map(l => UNICODE_BASE + l.charCodeAt(0))); }; -export const COUNTRIES = [ +export interface PhoneNumberCountryDefinition { + iso2: string; + name: string; + prefix: string; +} + +export const COUNTRIES: PhoneNumberCountryDefinition[] = [ { "iso2": "GB", "name": _td("United Kingdom"), From 3b5266071e5fbdba252610a0588e8b04de4fa21b Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 15 Jul 2021 15:44:44 +0200 Subject: [PATCH 10/16] Migrate LanguageSelector to TypeScript --- .../auth/{LanguageSelector.js => LanguageSelector.tsx} | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) rename src/components/views/auth/{LanguageSelector.js => LanguageSelector.tsx} (89%) diff --git a/src/components/views/auth/LanguageSelector.js b/src/components/views/auth/LanguageSelector.tsx similarity index 89% rename from src/components/views/auth/LanguageSelector.js rename to src/components/views/auth/LanguageSelector.tsx index 88293310e7..fc4f4ba5ca 100644 --- a/src/components/views/auth/LanguageSelector.js +++ b/src/components/views/auth/LanguageSelector.tsx @@ -22,14 +22,18 @@ import * as sdk from '../../../index'; import React from 'react'; import { SettingLevel } from "../../../settings/SettingLevel"; -function onChange(newLang) { +function onChange(newLang: string): void { if (getCurrentLanguage() !== newLang) { SettingsStore.setValue("language", null, SettingLevel.DEVICE, newLang); PlatformPeg.get().reload(); } } -export default function LanguageSelector({ disabled }) { +interface IProps { + disabled?: boolean; +} + +export default function LanguageSelector({ disabled }: IProps): React.ReactNode { if (SdkConfig.get()['disable_login_language_selector']) return
; const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown'); From 54bfe8ec1ed6fdeb14c6ef872f8ab4ffe1a4e544 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 15 Jul 2021 15:45:36 +0200 Subject: [PATCH 11/16] Migrate Welcome to TypeScript --- src/components/views/auth/CaptchaForm.tsx | 2 +- src/components/views/auth/CountryDropdown.tsx | 10 ---------- src/components/views/auth/{Welcome.js => Welcome.tsx} | 10 +++++++--- 3 files changed, 8 insertions(+), 14 deletions(-) rename src/components/views/auth/{Welcome.js => Welcome.tsx} (93%) diff --git a/src/components/views/auth/CaptchaForm.tsx b/src/components/views/auth/CaptchaForm.tsx index f7386be5b0..d71d8a6b15 100644 --- a/src/components/views/auth/CaptchaForm.tsx +++ b/src/components/views/auth/CaptchaForm.tsx @@ -23,7 +23,7 @@ const DIV_ID = 'mx_recaptcha'; interface IProps { sitePublicKey?: string; - onCaptchaResponse: () => void; + onCaptchaResponse: (response: string) => void; } interface IState { diff --git a/src/components/views/auth/CountryDropdown.tsx b/src/components/views/auth/CountryDropdown.tsx index 2e85356e38..e0eed5b430 100644 --- a/src/components/views/auth/CountryDropdown.tsx +++ b/src/components/views/auth/CountryDropdown.tsx @@ -160,13 +160,3 @@ export default class CountryDropdown extends React.Component { ; } } - -CountryDropdown.propTypes = { - className: PropTypes.string, - isSmall: PropTypes.bool, - // if isSmall, show +44 in the selected value - showPrefix: PropTypes.bool, - onOptionChange: PropTypes.func.isRequired, - value: PropTypes.string, - disabled: PropTypes.bool, -}; diff --git a/src/components/views/auth/Welcome.js b/src/components/views/auth/Welcome.tsx similarity index 93% rename from src/components/views/auth/Welcome.js rename to src/components/views/auth/Welcome.tsx index e3f7a601f2..1b02d0d2b5 100644 --- a/src/components/views/auth/Welcome.js +++ b/src/components/views/auth/Welcome.tsx @@ -29,15 +29,19 @@ import { replaceableComponent } from "../../../utils/replaceableComponent"; // translatable strings for Welcome pages _td("Sign in with SSO"); +interface IProps { + +} + @replaceableComponent("views.auth.Welcome") -export default class Welcome extends React.PureComponent { - constructor(props) { +export default class Welcome extends React.PureComponent { + constructor(props: IProps) { super(props); CountlyAnalytics.instance.track("onboarding_welcome"); } - render() { + public render(): React.ReactNode { const EmbeddedPage = sdk.getComponent('structures.EmbeddedPage'); const LanguageSelector = sdk.getComponent('auth.LanguageSelector'); From fdd98bbf3f2a13f7959fac3060e752a40c9c3df5 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 20 Jul 2021 09:36:33 +0200 Subject: [PATCH 12/16] linter fix --- src/@types/global.d.ts | 1 + .../dialogs/eventindex/DisableEventIndexDialog.tsx | 10 ++++------ .../dialogs/eventindex/ManageEventIndexDialog.tsx | 5 +++-- src/components/views/auth/CountryDropdown.tsx | 1 - 4 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index 7f78d96642..50cfa745a4 100644 --- a/src/@types/global.d.ts +++ b/src/@types/global.d.ts @@ -91,6 +91,7 @@ declare global { mxSetupEncryptionStore?: SetupEncryptionStore; mxRoomScrollStateStore?: RoomScrollStateStore; grecaptcha: any; + // eslint-disable-next-line mx_on_recaptcha_loaded: () => void; } diff --git a/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.tsx b/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.tsx index 2be5ddaa43..3088cbfdf4 100644 --- a/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.tsx +++ b/src/async-components/views/dialogs/eventindex/DisableEventIndexDialog.tsx @@ -15,7 +15,10 @@ limitations under the License. */ import React from 'react'; -import * as sdk from '../../../../index'; + +import BaseDialog from "../../../../components/views/dialogs/BaseDialog"; +import Spinner from "../../../../components/views/elements/Spinner"; +import DialogButtons from "../../../../components/views/elements/DialogButtons"; import dis from "../../../../dispatcher/dispatcher"; import { _t } from '../../../../languageHandler'; @@ -23,7 +26,6 @@ import SettingsStore from "../../../../settings/SettingsStore"; import EventIndexPeg from "../../../../indexing/EventIndexPeg"; import { Action } from "../../../../dispatcher/actions"; import { SettingLevel } from "../../../../settings/SettingLevel"; - interface IProps { onFinished: (success: boolean) => void; } @@ -55,10 +57,6 @@ export default class DisableEventIndexDialog extends React.Component {_t("If disabled, messages from encrypted rooms won't appear in search results.")} diff --git a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx index c5c8022346..8a11ff4b1b 100644 --- a/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx +++ b/src/async-components/views/dialogs/eventindex/ManageEventIndexDialog.tsx @@ -134,8 +134,9 @@ export default class ManageEventIndexDialog extends React.Component { - Modal.createTrackedDialogAsync("Disable message search", "Disable message search", - import("./DisableEventIndexDialog"), + const DisableEventIndexDialog = (await import("./DisableEventIndexDialog")).default; + Modal.createTrackedDialog("Disable message search", "Disable message search", + DisableEventIndexDialog, null, null, /* priority = */ false, /* static = */ true, ); }; diff --git a/src/components/views/auth/CountryDropdown.tsx b/src/components/views/auth/CountryDropdown.tsx index e0eed5b430..a97222b5e4 100644 --- a/src/components/views/auth/CountryDropdown.tsx +++ b/src/components/views/auth/CountryDropdown.tsx @@ -15,7 +15,6 @@ limitations under the License. */ import React from 'react'; -import PropTypes from 'prop-types'; import * as sdk from '../../../index'; From 596fb774e33ac0adda0eb0ca26feaa04fd2269f6 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 20 Jul 2021 12:22:32 +0200 Subject: [PATCH 13/16] Remove sdk.getComponent instructions --- src/components/views/auth/AuthHeader.tsx | 6 ++---- src/components/views/auth/AuthPage.tsx | 4 +--- src/components/views/auth/CountryDropdown.tsx | 5 +---- src/components/views/auth/LanguageSelector.tsx | 6 ++---- src/components/views/auth/Welcome.tsx | 6 ++---- 5 files changed, 8 insertions(+), 19 deletions(-) diff --git a/src/components/views/auth/AuthHeader.tsx b/src/components/views/auth/AuthHeader.tsx index 6f071c8f61..cab7da1468 100644 --- a/src/components/views/auth/AuthHeader.tsx +++ b/src/components/views/auth/AuthHeader.tsx @@ -16,8 +16,9 @@ limitations under the License. */ import React from 'react'; -import * as sdk from '../../../index'; import { replaceableComponent } from "../../../utils/replaceableComponent"; +import AuthHeaderLogo from "./AuthHeaderLogo"; +import LanguageSelector from "./LanguageSelector"; interface IProps { disableLanguageSelector?: boolean; @@ -26,9 +27,6 @@ interface IProps { @replaceableComponent("views.auth.AuthHeader") export default class AuthHeader extends React.Component { public render(): React.ReactNode { - const AuthHeaderLogo = sdk.getComponent('auth.AuthHeaderLogo'); - const LanguageSelector = sdk.getComponent('views.auth.LanguageSelector'); - return (
diff --git a/src/components/views/auth/AuthPage.tsx b/src/components/views/auth/AuthPage.tsx index 9957c1d6d0..68f3255c2c 100644 --- a/src/components/views/auth/AuthPage.tsx +++ b/src/components/views/auth/AuthPage.tsx @@ -17,14 +17,12 @@ limitations under the License. */ import React from 'react'; -import * as sdk from '../../../index'; import { replaceableComponent } from "../../../utils/replaceableComponent"; +import AuthFooter from "./AuthFooter"; @replaceableComponent("views.auth.AuthPage") export default class AuthPage extends React.PureComponent { public render(): React.ReactNode { - const AuthFooter = sdk.getComponent('auth.AuthFooter'); - return (
diff --git a/src/components/views/auth/CountryDropdown.tsx b/src/components/views/auth/CountryDropdown.tsx index a97222b5e4..bc97956653 100644 --- a/src/components/views/auth/CountryDropdown.tsx +++ b/src/components/views/auth/CountryDropdown.tsx @@ -16,12 +16,11 @@ limitations under the License. import React from 'react'; -import * as sdk from '../../../index'; - import { COUNTRIES, getEmojiFlag, PhoneNumberCountryDefinition } from '../../../phonenumber'; import SdkConfig from "../../../SdkConfig"; import { _t } from "../../../languageHandler"; import { replaceableComponent } from "../../../utils/replaceableComponent"; +import Dropdown from "../elements/Dropdown"; const COUNTRIES_BY_ISO2 = {}; for (const c of COUNTRIES) { @@ -110,8 +109,6 @@ export default class CountryDropdown extends React.Component { }; public render(): React.ReactNode { - const Dropdown = sdk.getComponent('elements.Dropdown'); - let displayedCountries; if (this.state.searchQuery) { displayedCountries = COUNTRIES.filter( diff --git a/src/components/views/auth/LanguageSelector.tsx b/src/components/views/auth/LanguageSelector.tsx index fc4f4ba5ca..c26b4797f3 100644 --- a/src/components/views/auth/LanguageSelector.tsx +++ b/src/components/views/auth/LanguageSelector.tsx @@ -18,9 +18,9 @@ import SdkConfig from "../../../SdkConfig"; import { getCurrentLanguage } from "../../../languageHandler"; import SettingsStore from "../../../settings/SettingsStore"; import PlatformPeg from "../../../PlatformPeg"; -import * as sdk from '../../../index'; import React from 'react'; import { SettingLevel } from "../../../settings/SettingLevel"; +import LanguageDropdown from "../elements/LanguageDropdown"; function onChange(newLang: string): void { if (getCurrentLanguage() !== newLang) { @@ -33,10 +33,8 @@ interface IProps { disabled?: boolean; } -export default function LanguageSelector({ disabled }: IProps): React.ReactNode { +export default function LanguageSelector({ disabled }: IProps): JSX.Element { if (SdkConfig.get()['disable_login_language_selector']) return
; - - const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown'); return { } public render(): React.ReactNode { - const EmbeddedPage = sdk.getComponent('structures.EmbeddedPage'); - const LanguageSelector = sdk.getComponent('auth.LanguageSelector'); - const pagesConfig = SdkConfig.get().embeddedPages; let pageUrl = null; if (pagesConfig) { From 745a8d38604026f8f06b489ecdb6d1af1e46051b Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 20 Jul 2021 17:18:33 +0100 Subject: [PATCH 14/16] Explain isSmall proper for CountryDropdown Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/auth/CountryDropdown.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/auth/CountryDropdown.tsx b/src/components/views/auth/CountryDropdown.tsx index bc97956653..eb5b27be9d 100644 --- a/src/components/views/auth/CountryDropdown.tsx +++ b/src/components/views/auth/CountryDropdown.tsx @@ -42,7 +42,7 @@ function countryMatchesSearchQuery(query: string, country: PhoneNumberCountryDef interface IProps { value?: string; onOptionChange: (country: PhoneNumberCountryDefinition) => void; - isSmall: boolean; + isSmall: boolean; // if isSmall, show +44 in the selected value showPrefix: boolean; className?: string; disabled?: boolean; From 3372a772481ad0ff790a2fad41d50d27aac484cf Mon Sep 17 00:00:00 2001 From: Germain Date: Tue, 20 Jul 2021 17:45:47 +0100 Subject: [PATCH 15/16] Remove grecaptcha from globals thanks to #6412 Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> --- src/@types/global.d.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index 7f2ae91933..9d6bc2c6fb 100644 --- a/src/@types/global.d.ts +++ b/src/@types/global.d.ts @@ -92,7 +92,6 @@ declare global { mxUIStore: UIStore; mxSetupEncryptionStore?: SetupEncryptionStore; mxRoomScrollStateStore?: RoomScrollStateStore; - grecaptcha: any; mxOnRecaptchaLoaded?: () => void; } From 54841d63dca6f8fd4b16c0ad7c7c33fcb2794aeb Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Wed, 21 Jul 2021 09:29:33 +0200 Subject: [PATCH 16/16] Fix wrench-tests by importing EmbeddedPage through sdk.getComponent --- src/components/views/auth/Welcome.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/views/auth/Welcome.tsx b/src/components/views/auth/Welcome.tsx index 4621625422..0e12025fbd 100644 --- a/src/components/views/auth/Welcome.tsx +++ b/src/components/views/auth/Welcome.tsx @@ -17,6 +17,7 @@ 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"; @@ -24,7 +25,6 @@ import SettingsStore from "../../../settings/SettingsStore"; import { UIFeature } from "../../../settings/UIFeature"; import CountlyAnalytics from "../../../CountlyAnalytics"; import { replaceableComponent } from "../../../utils/replaceableComponent"; -import EmbeddedPage from "../../structures/EmbeddedPage"; import LanguageSelector from "./LanguageSelector"; // translatable strings for Welcome pages @@ -43,6 +43,9 @@ export default class Welcome extends React.PureComponent { } public render(): React.ReactNode { + // FIXME: Using an import will result in wrench-element-tests failures + const EmbeddedPage = sdk.getComponent("structures.EmbeddedPage"); + const pagesConfig = SdkConfig.get().embeddedPages; let pageUrl = null; if (pagesConfig) {