Merge pull request #539 from Dygmalab/fixErrorBoundary

fix: solved ErrorBoundary screen starting condition and style
Dygmalab · Oct 20, 2023 · aac0ed3 · aac0ed3
2 parents 716b1be + f850d92
commit aac0ed3
Showing 1 changed file with 67 additions and 9 deletions.
diff --git a/src/renderer/ErrorBoundary.jsx b/src/renderer/ErrorBoundary.jsx
@@ -1,28 +1,86 @@
-/* eslint-disable */
 import React from "react";
+import { ipcRenderer } from "electron";
+import Styled, { ThemeProvider } from "styled-components";
+
+import GlobalStyles from "@Renderer/theme/GlobalStyles";
+import Light from "@Renderer/theme/LightTheme";
+import Dark from "@Renderer/theme/DarkTheme";
+import Store from "@Renderer/utils/Store";
+
+const store = Store.getStore();
+
+const Styles = Styled.div`
+.alert {
+  display: block;
+  width: 100vw;
+  text-align: center;
+  margin-top: 30vh;
+}
+.errormsg {
+  display: inline-block;
+  width: 80%;
+  margin: 64px;
+  margin-left: auto;
+  margin-right: auto;
+  border: solid 2px #ff6b72;
+  border-radius: 30px;
+  padding: 32px;
+  h3 {
+    margin: 0px;
+    display: inline-block;
+    background-color: #ff6b72;
+    border-radius: 8px;
+    padding-left: 16px;
+    padding-right: 16px;
+    float: left;
+  }
+  p {
+    display: inline-block;
+    padding-top: 16px;
+  }
+}
+`;
 
 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { hasError: true, errorMessage: "" };
+
+    let isDark;
+    const mode = store.get("settings.darkMode");
+    isDark = mode === "dark";
+    if (mode === "system") {
+      isDark = ipcRenderer.invoke("get-NativeTheme");
+    }
+
+    this.state = { hasError: false, errorMessage: "", isDark };
   }
 
   static getDerivedStateFromError(error) {
     return { hasError: true, errorMessage: error.message };
   }
 
   render() {
-    if (this.state.hasError) {
+    const { hasError, errorMessage, isDark } = this.state;
+    const { children } = this.props;
+    if (hasError) {
       return (
-        <div>
-          <h1>Uh oh!</h1>
-          <p>This wasn't supposed to happen. If you continue to see this message, please reach out to support.</p>
-          <p>{this.state.errorMessage}</p>
-        </div>
+        <ThemeProvider theme={isDark ? Dark : Light}>
+          <GlobalStyles />
+          <Styles>
+            <div className="alert">
+              <h1>Uh oh!</h1>
+              <p>This wasn&apos;t supposed to happen. If you continue to see this message, please reach out to support.</p>
+              <div className="errormsg">
+                <h3>Error:</h3>
+                <p>{errorMessage}</p>
+              </div>
+            </div>
+          </Styles>
+        </ThemeProvider>
       );
     }
 
-    return this.props.children;
+    return children;
   }
 }