From ae631f9fce392987d6e5dfaa37ee9e39b24a4968 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 5 Sep 2021 17:15:33 +0200 Subject: [PATCH] Convert IncomingSasDialog to TS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- ...mingSasDialog.js => IncomingSasDialog.tsx} | 133 ++++++++++-------- 1 file changed, 73 insertions(+), 60 deletions(-) rename src/components/views/dialogs/{IncomingSasDialog.js => IncomingSasDialog.tsx} (69%) diff --git a/src/components/views/dialogs/IncomingSasDialog.js b/src/components/views/dialogs/IncomingSasDialog.tsx similarity index 69% rename from src/components/views/dialogs/IncomingSasDialog.js rename to src/components/views/dialogs/IncomingSasDialog.tsx index a5c9f2107f..8903b00221 100644 --- a/src/components/views/dialogs/IncomingSasDialog.js +++ b/src/components/views/dialogs/IncomingSasDialog.tsx @@ -15,12 +15,17 @@ limitations under the License. */ import React from 'react'; -import PropTypes from 'prop-types'; import { MatrixClientPeg } from '../../../MatrixClientPeg'; -import * as sdk from '../../../index'; import { _t } from '../../../languageHandler'; import { replaceableComponent } from "../../../utils/replaceableComponent"; import { mediaFromMxc } from "../../../customisations/Media"; +import VerificationComplete from "../verification/VerificationComplete"; +import VerificationCancelled from "../verification/VerificationCancelled"; +import BaseAvatar from "../avatars/BaseAvatar"; +import Spinner from "../elements/Spinner"; +import VerificationShowSas from "../verification/VerificationShowSas"; +import BaseDialog from "./BaseDialog"; +import DialogButtons from "../elements/DialogButtons"; const PHASE_START = 0; const PHASE_SHOW_SAS = 1; @@ -28,13 +33,28 @@ const PHASE_WAIT_FOR_PARTNER_TO_CONFIRM = 2; const PHASE_VERIFIED = 3; const PHASE_CANCELLED = 4; -@replaceableComponent("views.dialogs.IncomingSasDialog") -export default class IncomingSasDialog extends React.Component { - static propTypes = { - verifier: PropTypes.object.isRequired, - }; +interface IProps { + verifier: any; // TODO types + onFinished: (confirmed: boolean) => void; +} - constructor(props) { +interface IState { + phase: number; + sasVerified: boolean; + opponentProfile: { + // eslint-disable-next-line camelcase + avatar_url?: string; + displayname?: string; + }; + opponentProfileError: Error; + sas: any; // TODO types +} + +@replaceableComponent("views.dialogs.IncomingSasDialog") +export default class IncomingSasDialog extends React.Component { + private showSasEvent: any; // TODO: Types + + constructor(props: IProps) { super(props); let phase = PHASE_START; @@ -43,26 +63,27 @@ export default class IncomingSasDialog extends React.Component { phase = PHASE_CANCELLED; } - this._showSasEvent = null; + this.showSasEvent = null; this.state = { phase: phase, sasVerified: false, opponentProfile: null, opponentProfileError: null, + sas: null, }; - this.props.verifier.on('show_sas', this._onVerifierShowSas); - this.props.verifier.on('cancel', this._onVerifierCancel); - this._fetchOpponentProfile(); + this.props.verifier.on('show_sas', this.onVerifierShowSas); + this.props.verifier.on('cancel', this.onVerifierCancel); + this.fetchOpponentProfile(); } - componentWillUnmount() { + public componentWillUnmount(): void { if (this.state.phase !== PHASE_CANCELLED && this.state.phase !== PHASE_VERIFIED) { this.props.verifier.cancel('User cancel'); } - this.props.verifier.removeListener('show_sas', this._onVerifierShowSas); + this.props.verifier.removeListener('show_sas', this.onVerifierShowSas); } - async _fetchOpponentProfile() { + private async fetchOpponentProfile(): Promise { try { const prof = await MatrixClientPeg.get().getProfileInfo( this.props.verifier.userId, @@ -77,53 +98,51 @@ export default class IncomingSasDialog extends React.Component { } } - _onFinished = () => { + private onFinished = (): void => { this.props.onFinished(this.state.phase === PHASE_VERIFIED); - } + }; - _onCancelClick = () => { + private onCancelClick = (): void => { this.props.onFinished(this.state.phase === PHASE_VERIFIED); - } + }; - _onContinueClick = () => { + private onContinueClick = (): void => { this.setState({ phase: PHASE_WAIT_FOR_PARTNER_TO_CONFIRM }); this.props.verifier.verify().then(() => { this.setState({ phase: PHASE_VERIFIED }); }).catch((e) => { console.log("Verification failed", e); }); - } + }; - _onVerifierShowSas = (e) => { - this._showSasEvent = e; + // TODO: Types + private onVerifierShowSas = (e): void => { + this.showSasEvent = e; this.setState({ phase: PHASE_SHOW_SAS, sas: e.sas, }); - } + }; - _onVerifierCancel = (e) => { + // TODO: Types + private onVerifierCancel = (e): void => { this.setState({ phase: PHASE_CANCELLED, }); - } + }; - _onSasMatchesClick = () => { - this._showSasEvent.confirm(); + private onSasMatchesClick = (): void => { + this.showSasEvent.confirm(); this.setState({ phase: PHASE_WAIT_FOR_PARTNER_TO_CONFIRM, }); - } + }; - _onVerifiedDoneClick = () => { + private onVerifiedDoneClick = (): void => { this.props.onFinished(true); - } - - _renderPhaseStart() { - const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); - const Spinner = sdk.getComponent("views.elements.Spinner"); - const BaseAvatar = sdk.getComponent("avatars.BaseAvatar"); + }; + private renderPhaseStart(): JSX.Element { const isSelf = this.props.verifier.userId === MatrixClientPeg.get().getUserId(); let profile; @@ -190,27 +209,24 @@ export default class IncomingSasDialog extends React.Component { ); } - _renderPhaseShowSas() { - const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas'); + private renderPhaseShowSas(): JSX.Element { return ; } - _renderPhaseWaitForPartnerToConfirm() { - const Spinner = sdk.getComponent("views.elements.Spinner"); - + private renderPhaseWaitForPartnerToConfirm(): JSX.Element { return (
@@ -219,41 +235,38 @@ export default class IncomingSasDialog extends React.Component { ); } - _renderPhaseVerified() { - const VerificationComplete = sdk.getComponent('views.verification.VerificationComplete'); - return ; + private renderPhaseVerified(): JSX.Element { + return ; } - _renderPhaseCancelled() { - const VerificationCancelled = sdk.getComponent('views.verification.VerificationCancelled'); - return ; + private renderPhaseCancelled(): JSX.Element { + return ; } - render() { + public render(): JSX.Element { let body; switch (this.state.phase) { case PHASE_START: - body = this._renderPhaseStart(); + body = this.renderPhaseStart(); break; case PHASE_SHOW_SAS: - body = this._renderPhaseShowSas(); + body = this.renderPhaseShowSas(); break; case PHASE_WAIT_FOR_PARTNER_TO_CONFIRM: - body = this._renderPhaseWaitForPartnerToConfirm(); + body = this.renderPhaseWaitForPartnerToConfirm(); break; case PHASE_VERIFIED: - body = this._renderPhaseVerified(); + body = this.renderPhaseVerified(); break; case PHASE_CANCELLED: - body = this._renderPhaseCancelled(); + body = this.renderPhaseCancelled(); break; } - const BaseDialog = sdk.getComponent("dialogs.BaseDialog"); return ( { body }