await request promise inside encryption panel to show spinner

This commit is contained in:
Bruno Windels 2020-03-05 17:44:35 +01:00
parent 3c2f4a5c42
commit 7d051d6a1d
3 changed files with 18 additions and 3 deletions

View file

@ -182,6 +182,7 @@ export default class RightPanel extends React.Component {
member: payload.member,
event: payload.event,
verificationRequest: payload.verificationRequest,
verificationRequestPromise: payload.verificationRequestPromise,
});
}
}
@ -231,6 +232,7 @@ export default class RightPanel extends React.Component {
onClose={onClose}
phase={this.state.phase}
verificationRequest={this.state.verificationRequest}
verificationRequestPromise={this.state.verificationRequestPromise}
/>;
} else {
panel = <MemberInfo

View file

@ -30,7 +30,7 @@ import {_t} from "../../../languageHandler";
// cancellation codes which constitute a key mismatch
const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"];
const EncryptionPanel = ({verificationRequest, member, onClose, layout}) => {
const EncryptionPanel = ({verificationRequest, verificationRequestPromise, member, onClose, layout}) => {
const [request, setRequest] = useState(verificationRequest);
// state to show a spinner immediately after clicking "start verification",
// before we have a request
@ -43,6 +43,19 @@ const EncryptionPanel = ({verificationRequest, member, onClose, layout}) => {
setPhase(verificationRequest.phase);
}
}, [verificationRequest]);
useEffect(() => {
async function awaitPromise() {
setRequesting(true);
const request = await verificationRequestPromise;
setRequesting(false);
setRequest(request);
setPhase(request.phase);
}
if (verificationRequestPromise) {
awaitPromise();
}
}, [verificationRequestPromise]);
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)) {

View file

@ -171,14 +171,14 @@ async function verifyDevice(userId, device) {
return;
}
const cli = MatrixClientPeg.get();
const verificationRequest = await cli.requestVerification(
const verificationRequestPromise = cli.requestVerification(
userId,
[device.deviceId],
);
dis.dispatch({
action: "set_right_panel_phase",
phase: RIGHT_PANEL_PHASES.EncryptionPanel,
refireParams: {member, verificationRequest},
refireParams: {member, verificationRequestPromise},
});
},
primaryButton: _t("Done"),