Restore first version (#3205)

Author: AlinaGoaga

ui/components/ErrorBoundary.tsx

@@ -1,37 +1,64 @@
-import * as React from "react";
+import React, { useState, useEffect, FC } from "react";
+import { useLocation } from "react-router-dom";
 import Page from "./Page";
 
-export default class ErrorBoundary extends React.Component<
-  any,
-  { hasError: boolean; error: Error }
-> {
-  constructor(props) {
+interface Props {
+  hasError: boolean;
+  error: Error | null;
+}
+
+class ErrorBoundaryDetail extends React.Component<any, Props> {
+  constructor(props: any) {
     super(props);
     this.state = { hasError: false, error: null };
   }
 
-  static getDerivedStateFromError(error) {
-    // Update state so the next render will show the fallback UI.
+  static getDerivedStateFromError(error: Error) {
     return { hasError: true, error };
   }
 
-  componentDidCatch(error) {
-    // You can also log the error to an error reporting service
+  componentDidUpdate(prevProps: Props) {
+    if (!this.props.hasError && prevProps.hasError) {
+      this.setState({ hasError: false });
+    }
+  }
+
+  componentDidCatch(error: Error) {
     console.error(error);
+    this.props.setHasError(true);
   }
 
   render() {
     if (this.state.hasError) {
-      // You can render any custom fallback UI
       return (
         <Page>
           <h3>Something went wrong.</h3>
-          <pre>{this.state.error.message}</pre>
-          <pre>{this.state.error.stack}</pre>
+          <pre>{this.state.error?.message}</pre>
+          <pre>{this.state.error?.stack}</pre>
         </Page>
       );
     }
 
     return this.props.children;
   }
 }
+
+/** Function component wrapper as we need useEffect to set the state back to false on location changing **/
+const ErrorBoundary: FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [hasError, setHasError] = useState<boolean>(false);
+  const location = useLocation();
+
+  useEffect(() => {
+    if (hasError) {
+      setHasError(false);
+    }
+  }, [location.key]);
+
+  return (
+    <ErrorBoundaryDetail hasError={hasError} setHasError={setHasError}>
+      {children}
+    </ErrorBoundaryDetail>
+  );
+};
+
+export default ErrorBoundary;