From edfe74ba6e3a74f2b47c0faeaf0a2dde50adc8ae Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Fri, 15 Oct 2021 17:40:06 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Allow=20users=20to=20ignore=20er?=
 =?UTF-8?q?rors?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/errors/ErrorCatcherBox.tsx | 23 +++++++++++++++--
 .../components/errors/IgnoreErrorButton.tsx   | 18 +++++++++++++
 .../src/components/errors/ReportBugButton.tsx | 25 +++++++++++++++++++
 3 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/errors/IgnoreErrorButton.tsx
 create mode 100644 frontend/src/components/errors/ReportBugButton.tsx

diff --git a/frontend/src/components/errors/ErrorCatcherBox.tsx b/frontend/src/components/errors/ErrorCatcherBox.tsx
index cadd821..afa63a1 100644
--- a/frontend/src/components/errors/ErrorCatcherBox.tsx
+++ b/frontend/src/components/errors/ErrorCatcherBox.tsx
@@ -1,11 +1,15 @@
+import {Box, Form} from "@steffo/bluelib-react"
 import * as React from "react"
 import {ErrorBox} from "./ErrorBox"
+import {IgnoreErrorButton} from "./IgnoreErrorButton"
+import {ReportBugButton} from "./ReportBugButton"
 
 
 interface ErrorCatcherBoxProps {
     children?: React.ReactNode,
 }
 
+
 interface ErrorCatcherBoxState {
     error?: Error,
 }
@@ -18,6 +22,7 @@ export class ErrorCatcherBox extends React.Component<ErrorCatcherBoxProps, Error
     constructor(props: ErrorCatcherBoxProps) {
         super(props)
         this.state = {error: undefined}
+        this.clearError = this.clearError.bind(this)
     }
 
     componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
@@ -27,10 +32,24 @@ export class ErrorCatcherBox extends React.Component<ErrorCatcherBoxProps, Error
         })
     }
 
+    clearError() {
+        this.setState(state => {
+            return {...state, error: undefined}
+        })
+    }
+
     render() {
-        if (this.state.error) {
+        if(this.state.error) {
             return (
-                <ErrorBox error={this.state.error}/>
+                <Box bluelibClassNames={"color-red"}>
+                    {this.state.error.toString()}
+                    <Form>
+                        <Form.Row>
+                            <IgnoreErrorButton onClick={this.clearError}/>
+                            <ReportBugButton/>
+                        </Form.Row>
+                    </Form>
+                </Box>
             )
         } else {
             return this.props.children
diff --git a/frontend/src/components/errors/IgnoreErrorButton.tsx b/frontend/src/components/errors/IgnoreErrorButton.tsx
new file mode 100644
index 0000000..7795f3c
--- /dev/null
+++ b/frontend/src/components/errors/IgnoreErrorButton.tsx
@@ -0,0 +1,18 @@
+import {faAngleDoubleRight} from "@fortawesome/free-solid-svg-icons"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+import {Button} from "@steffo/bluelib-react"
+import * as React from "react"
+
+
+export interface IgnoreErrorButtonProps {
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+
+export function IgnoreErrorButton({onClick}: IgnoreErrorButtonProps): JSX.Element {
+    return (
+        <Button onClick={onClick}>
+            <FontAwesomeIcon icon={faAngleDoubleRight}/>&nbsp;Try ignoring the error
+        </Button>
+    )
+}
diff --git a/frontend/src/components/errors/ReportBugButton.tsx b/frontend/src/components/errors/ReportBugButton.tsx
new file mode 100644
index 0000000..8705b09
--- /dev/null
+++ b/frontend/src/components/errors/ReportBugButton.tsx
@@ -0,0 +1,25 @@
+import {faBug} from "@fortawesome/free-solid-svg-icons"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+import {navigate} from "@reach/router"
+import {Button} from "@steffo/bluelib-react"
+import * as React from "react"
+
+
+export function ReportBugButton(): JSX.Element {
+    const onClick =
+        React.useCallback(
+            async () => {
+                await navigate("https://github.com/Steffo99/sophon/issues/new?assignees=&labels=bug&template=1_bug_report.md&title=")
+            },
+            [],
+        )
+
+    return React.useMemo(
+        () => (
+            <Button>
+                <FontAwesomeIcon onClick={onClick} icon={faBug}/>&nbsp;Report bug
+            </Button>
+        ),
+        [onClick],
+    )
+}