Separated specification and implementation in TopErrorBoundary (#1031)

* Encapsulate SceneHistory. A little.

* Clean up TopErrorBoundary
This commit is contained in:
Kent Beck 2020-03-21 02:26:01 -07:00 committed by GitHub
parent f6b36519f1
commit 1e8cd2bd1c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -20,6 +20,10 @@ export class TopErrorBoundary extends React.Component<
localStorage: "", localStorage: "",
}; };
render() {
return this.state.hasError ? this.errorSplash() : this.props.children;
}
componentDidCatch(error: Error) { componentDidCatch(error: Error) {
resetCursor(); resetCursor();
const _localStorage: any = {}; const _localStorage: any = {};
@ -88,74 +92,70 @@ export class TopErrorBoundary extends React.Component<
); );
} }
render() { private errorSplash() {
if (this.state.hasError) { return (
return ( <div className="ErrorSplash">
<div className="ErrorSplash"> <div className="ErrorSplash-messageContainer">
<div className="ErrorSplash-messageContainer"> <div className="ErrorSplash-paragraph bigger align-center">
<div className="ErrorSplash-paragraph bigger align-center"> {t("errorSplash.headingMain_pre")}
{t("errorSplash.headingMain_pre")} <button onClick={() => window.location.reload()}>
<button onClick={() => window.location.reload()}> {t("errorSplash.headingMain_button")}
{t("errorSplash.headingMain_button")} </button>
</button> </div>
<div className="ErrorSplash-paragraph align-center">
{t("errorSplash.clearCanvasMessage")}
<button
onClick={() => {
localStorage.clear();
window.location.reload();
}}
>
{t("errorSplash.clearCanvasMessage_button")}
</button>
<br />
<div className="smaller">
<span role="img" aria-label="warning">
</span>
{t("errorSplash.clearCanvasCaveat")}
<span role="img" aria-hidden="true">
</span>
</div> </div>
<div className="ErrorSplash-paragraph align-center"> </div>
{t("errorSplash.clearCanvasMessage")} <div>
<button <div className="ErrorSplash-paragraph">
onClick={() => { {t("errorSplash.openIssueMessage_pre")}
localStorage.clear(); <button onClick={this.createGithubIssue}>
window.location.reload(); {t("errorSplash.openIssueMessage_button")}
}}
>
{t("errorSplash.clearCanvasMessage_button")}
</button> </button>
<br /> {t("errorSplash.openIssueMessage_post")}
<div className="smaller">
<span role="img" aria-label="warning">
</span>
{t("errorSplash.clearCanvasCaveat")}
<span role="img" aria-hidden="true">
</span>
</div>
</div> </div>
<div> <div className="ErrorSplash-paragraph">
<div className="ErrorSplash-paragraph"> <div className="ErrorSplash-details">
{t("errorSplash.openIssueMessage_pre")} <label>{t("errorSplash.errorStack")}</label>
<button onClick={this.createGithubIssue}> <textarea
{t("errorSplash.openIssueMessage_button")} rows={10}
</button> onPointerDown={this.selectTextArea}
{t("errorSplash.openIssueMessage_post")} readOnly={true}
</div> value={
<div className="ErrorSplash-paragraph"> this.state.unresolvedError
<div className="ErrorSplash-details"> ? t("errorSplash.errorStack_loading")
<label>{t("errorSplash.errorStack")}</label> : this.state.stack
<textarea }
rows={10} />
onPointerDown={this.selectTextArea} <label>{t("errorSplash.sceneContent")}</label>
readOnly={true} <textarea
value={ rows={5}
this.state.unresolvedError onPointerDown={this.selectTextArea}
? t("errorSplash.errorStack_loading") readOnly={true}
: this.state.stack value={this.state.localStorage}
} />
/>
<label>{t("errorSplash.sceneContent")}</label>
<textarea
rows={5}
onPointerDown={this.selectTextArea}
readOnly={true}
value={this.state.localStorage}
/>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
); </div>
} );
return this.props.children;
} }
} }