mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 11:47:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

Migrate MKeyVerificationRequest to TypeScript

Browse source
This commit is contained in:
Germain Souquet 2021-06-21 14:05:56 +01:00
parent b6e0068822
commit ca123d3c4d
1 changed files with 29 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
src/components/views/messages/MKeyVerificationRequest.js → src/components/views/messages/MKeyVerificationRequest.tsx
View file

@ -15,41 +15,40 @@ limitations under the License.
*/ */
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import { MatrixEvent } from 'matrix-js-sdk/src';
import {MatrixClientPeg} from '../../../MatrixClientPeg'; import { MatrixClientPeg } from '../../../MatrixClientPeg';
import * as sdk from '../../../index'; import * as sdk from '../../../index';
import { _t } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
import {getNameForEventRoom, userLabelForEventRoom} import { getNameForEventRoom, userLabelForEventRoom }
from '../../../utils/KeyVerificationStateObserver'; from '../../../utils/KeyVerificationStateObserver';
import dis from "../../../dispatcher/dispatcher"; import dis from "../../../dispatcher/dispatcher";
import {RightPanelPhases} from "../../../stores/RightPanelStorePhases"; import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
import {Action} from "../../../dispatcher/actions"; import { Action } from "../../../dispatcher/actions";
import EventTileBubble from "./EventTileBubble"; import EventTileBubble from "./EventTileBubble";
import {replaceableComponent} from "../../../utils/replaceableComponent"; import { replaceableComponent } from "../../../utils/replaceableComponent";
interface IProps {
mxEvent: MatrixEvent
}
@replaceableComponent("views.messages.MKeyVerificationRequest") @replaceableComponent("views.messages.MKeyVerificationRequest")
export default class MKeyVerificationRequest extends React.Component { export default class MKeyVerificationRequest extends React.Component<IProps> {
constructor(props) { public componentDidMount() {
super(props);
this.state = {};
}
componentDidMount() {
const request = this.props.mxEvent.verificationRequest; const request = this.props.mxEvent.verificationRequest;
if (request) { if (request) {
request.on("change", this._onRequestChanged); request.on("change", this.onRequestChanged);
} }
} }
componentWillUnmount() { public componentWillUnmount() {
const request = this.props.mxEvent.verificationRequest; const request = this.props.mxEvent.verificationRequest;
if (request) { if (request) {
request.off("change", this._onRequestChanged); request.off("change", this.onRequestChanged);
} }
} }
_openRequest = () => { private openRequest = () => {
const {verificationRequest} = this.props.mxEvent; const { verificationRequest } = this.props.mxEvent;
const member = MatrixClientPeg.get().getUser(verificationRequest.otherUserId); const member = MatrixClientPeg.get().getUser(verificationRequest.otherUserId);
dis.dispatch({ dis.dispatch({
action: Action.SetRightPanelPhase, action: Action.SetRightPanelPhase,
@ -58,15 +57,15 @@ export default class MKeyVerificationRequest extends React.Component {
}); });
}; };
_onRequestChanged = () => { private onRequestChanged = () => {
this.forceUpdate(); this.forceUpdate();
}; };
_onAcceptClicked = async () => { private onAcceptClicked = async () => {
const request = this.props.mxEvent.verificationRequest; const request = this.props.mxEvent.verificationRequest;
if (request) { if (request) {
try { try {
this._openRequest(); this.openRequest();
await request.accept(); await request.accept();
} catch (err) { } catch (err) {
console.error(err.message); console.error(err.message);
@ -74,7 +73,7 @@ export default class MKeyVerificationRequest extends React.Component {
} }
}; };
_onRejectClicked = async () => { private onRejectClicked = async () => {
const request = this.props.mxEvent.verificationRequest; const request = this.props.mxEvent.verificationRequest;
if (request) { if (request) {
try { try {
@ -85,7 +84,7 @@ export default class MKeyVerificationRequest extends React.Component {
} }
}; };
_acceptedLabel(userId) { private acceptedLabel(userId: string) {
const client = MatrixClientPeg.get(); const client = MatrixClientPeg.get();
const myUserId = client.getUserId(); const myUserId = client.getUserId();
if (userId === myUserId) { if (userId === myUserId) {
@ -95,7 +94,7 @@ export default class MKeyVerificationRequest extends React.Component {
} }
} }
_cancelledLabel(userId) { private cancelledLabel(userId: string) {
const client = MatrixClientPeg.get(); const client = MatrixClientPeg.get();
const myUserId = client.getUserId(); const myUserId = client.getUserId();
const {cancellationCode} = this.props.mxEvent.verificationRequest; const {cancellationCode} = this.props.mxEvent.verificationRequest;
@ -115,7 +114,7 @@ export default class MKeyVerificationRequest extends React.Component {
} }
} }
render() { public render() {
const AccessibleButton = sdk.getComponent("elements.AccessibleButton"); const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
const FormButton = sdk.getComponent("elements.FormButton"); const FormButton = sdk.getComponent("elements.FormButton");
@ -134,11 +133,11 @@ export default class MKeyVerificationRequest extends React.Component {
let stateLabel; let stateLabel;
const accepted = request.ready || request.started || request.done; const accepted = request.ready || request.started || request.done;
if (accepted) { if (accepted) {
stateLabel = (<AccessibleButton onClick={this._openRequest}> stateLabel = (<AccessibleButton onClick={this.openRequest}>
{this._acceptedLabel(request.receivingUserId)} {this.acceptedLabel(request.receivingUserId)}
</AccessibleButton>); </AccessibleButton>);
} else if (request.cancelled) { } else if (request.cancelled) {
stateLabel = this._cancelledLabel(request.cancellingUserId); stateLabel = this.cancelledLabel(request.cancellingUserId);
} else if (request.accepting) { } else if (request.accepting) {
stateLabel = _t("Accepting …"); stateLabel = _t("Accepting …");
} else if (request.declining) { } else if (request.declining) {
@ -153,8 +152,8 @@ export default class MKeyVerificationRequest extends React.Component {
subtitle = userLabelForEventRoom(request.requestingUserId, mxEvent.getRoomId()); subtitle = userLabelForEventRoom(request.requestingUserId, mxEvent.getRoomId());
if (request.canAccept) { if (request.canAccept) {
stateNode = (<div className="mx_cryptoEvent_buttons"> stateNode = (<div className="mx_cryptoEvent_buttons">
<FormButton kind="danger" onClick={this._onRejectClicked} label={_t("Decline")} /> <FormButton kind="danger" onClick={this.onRejectClicked} label={_t("Decline")} />
<FormButton onClick={this._onAcceptClicked} label={_t("Accept")} /> <FormButton onClick={this.onAcceptClicked} label={_t("Accept")} />
</div>); </div>);
} }
} else { // request sent by us } else { // request sent by us
@ -174,8 +173,3 @@ export default class MKeyVerificationRequest extends React.Component {
return null; return null;
} }
} }
MKeyVerificationRequest.propTypes = {
/* the MatrixEvent to show */
mxEvent: PropTypes.object.isRequired,
};