From 1e8cd2bd1c61f18296f7eeed7596e54a5094a8b9 Mon Sep 17 00:00:00 2001
From: Kent Beck <kent@threeriversinstitute.org>
Date: Sat, 21 Mar 2020 02:26:01 -0700
Subject: [PATCH] Separated specification and implementation in
 TopErrorBoundary (#1031)

* Encapsulate SceneHistory. A little.

* Clean up TopErrorBoundary
---
 src/components/TopErrorBoundary.tsx | 124 ++++++++++++++--------------
 1 file changed, 62 insertions(+), 62 deletions(-)

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