From 9bc13b53ed539c9edbcb79fb58f6ccf58038d9e1 Mon Sep 17 00:00:00 2001 From: Hassan Sufi Date: Wed, 10 Apr 2024 15:14:47 -0700 Subject: [PATCH] Update the immersive reader token (#9952) * Update the immersive reader token * Change launchImmersiveReader to async/await * Change missed promise to async/await * Remove the token if there is a problem using it * Await calls to `launchImmersiveReaderAsync`. --- .../components/tutorial/TutorialContainer.tsx | 4 +- webapp/src/immersivereader.tsx | 39 ++++++++++--------- webapp/src/tutorial.tsx | 2 +- 3 files changed, 23 insertions(+), 22 deletions(-) diff --git a/webapp/src/components/tutorial/TutorialContainer.tsx b/webapp/src/components/tutorial/TutorialContainer.tsx index cb70fd00515f..7e1e99f653d2 100644 --- a/webapp/src/components/tutorial/TutorialContainer.tsx +++ b/webapp/src/components/tutorial/TutorialContainer.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { MarkedContent } from "../../marked"; import { Button, Modal, ModalButton } from "../../sui"; -import { ImmersiveReaderButton, launchImmersiveReader } from "../../immersivereader"; +import { ImmersiveReaderButton, launchImmersiveReaderAsync } from "../../immersivereader"; import { TutorialStepCounter } from "./TutorialStepCounter"; import { TutorialHint } from "./TutorialHint"; import { TutorialResetCode } from "./TutorialResetCode"; @@ -220,7 +220,7 @@ export function TutorialContainer(props: TutorialContainerProps) { if (showImmersiveReader) { modalActions.push({ className: "immersive-reader-button", - onclick: () => { launchImmersiveReader(currentStepInfo.contentMd, tutorialOptions) }, + onclick: async () => { await launchImmersiveReaderAsync(currentStepInfo.contentMd, tutorialOptions) }, ariaLabel: lf("Launch Immersive Reader"), title: lf("Launch Immersive Reader") }) diff --git a/webapp/src/immersivereader.tsx b/webapp/src/immersivereader.tsx index 54e1cb54b4fa..27857dbb7426 100644 --- a/webapp/src/immersivereader.tsx +++ b/webapp/src/immersivereader.tsx @@ -185,8 +185,8 @@ function beautifyText(content: string): string { } } +const IMMERSIVE_READER_ID = "immReaderToken"; function getTokenAsync(): Promise { - const IMMERSIVE_READER_ID = "immReader"; const storedTokenString = pxt.storage.getLocal(IMMERSIVE_READER_ID); const cachedToken: ImmersiveReaderToken = pxt.Util.jsonTryParse(storedTokenString); @@ -212,7 +212,7 @@ function getTokenAsync(): Promise { } } -export function launchImmersiveReader(content: string, tutorialOptions: pxt.tutorial.TutorialOptions) { +export async function launchImmersiveReaderAsync(content: string, tutorialOptions: pxt.tutorial.TutorialOptions) { pxt.tickEvent("immersiveReader.launch", {tutorial: tutorialOptions.tutorial, tutorialStep: tutorialOptions.tutorialStep}); const userReaderPref = data.getData(auth.READER) || "" @@ -235,19 +235,17 @@ export function launchImmersiveReader(content: string, tutorialOptions: pxt.tuto preferences: userReaderPref } - getTokenAsync().then(res =>{ - return testConnectionAsync(res); - }).then(res => { - if (Cloud.isOnline()) { - const launchStart = pxt.Util.now(); - return ImmersiveReader.launchAsync(res.token, res.subdomain, tutorialData, options).then(res => { - const elapsed = pxt.Util.now() - launchStart; - pxt.tickEvent("immersiveReader.launch.finished", {elapsed: elapsed}) - }) - } else { - return Promise.reject(new Error("offline")); + try { + let res = await getTokenAsync(); + await testConnectionAsync(); + if (!Cloud.isOnline()) { + throw new Error("offline"); } - }).catch(e => { + const launchStart = pxt.Util.now(); + await ImmersiveReader.launchAsync(res.token, res.subdomain, tutorialData, options) + const elapsed = pxt.Util.now() - launchStart; + pxt.tickEvent("immersiveReader.launch.finished", {elapsed: elapsed}) + } catch (e) { if (e.isOffline) { core.warningNotification(lf("Immersive Reader cannot be used offline")); } else { @@ -258,6 +256,8 @@ export function launchImmersiveReader(content: string, tutorialOptions: pxt.tuto } case "token": default: { + // If the token is invalid, remove it from storage + pxt.storage.removeLocal(IMMERSIVE_READER_ID); core.warningNotification(lf("Immersive Reader could not be launched")); if (typeof e == "string") { pxt.tickEvent("immersiveReader.error", {message: e}); @@ -270,10 +270,11 @@ export function launchImmersiveReader(content: string, tutorialOptions: pxt.tuto } pxt.reportException(e); ImmersiveReader.close(); - }); + }; - function testConnectionAsync(token: ImmersiveReaderToken): Promise { - return pxt.Cloud.privateGetAsync("ping", true).then(() => {return token}); + async function testConnectionAsync() { + // Will throw an exception here if there is an error we are not expecting + return pxt.Cloud.privateGetAsync("ping", true); } } @@ -284,8 +285,8 @@ interface ImmersiveReaderProps { } export class ImmersiveReaderButton extends data.Component { - private buttonClickHandler = () => { - launchImmersiveReader(this.props.content, this.props.tutorialOptions); + private buttonClickHandler = async () => { + await launchImmersiveReaderAsync(this.props.content, this.props.tutorialOptions); } render() { diff --git a/webapp/src/tutorial.tsx b/webapp/src/tutorial.tsx index 90bd442f6dfe..6bcaa5b4a134 100644 --- a/webapp/src/tutorial.tsx +++ b/webapp/src/tutorial.tsx @@ -353,7 +353,7 @@ export class TutorialHint extends data.Component { ImmersiveReader.launchImmersiveReader(fullText, options) }, + onclick: async () => { await ImmersiveReader.launchImmersiveReaderAsync(fullText, options) }, ariaLabel: lf("Launch Immersive Reader"), title: lf("Launch Immersive Reader") })