refactored class components to functional components

package.json

@@ -26,6 +26,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^5.0.0",
     "react-router-dom": "^6.18.0",
     "recoil": "^0.7.7",
     "styled-components": "^6.1.1",

src/ErrorBoundary.tsx

@@ -1,59 +1,72 @@
-import type { ErrorInfo, ReactNode } from 'react'
-import React, { Component } from 'react'
-import { styled } from 'styled-components'
+import React, { useState } from 'react';
+import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
+import { styled } from 'styled-components';
 
 interface Props {
-  children?: ReactNode
+  children?: React.ReactNode;
 }
 
 interface State {
-  error: Error | null
-  info: ErrorInfo | null
-}
-class ErrorBoundary extends Component<Props, State> {
-  state = {
-    error: null,
-    info: null,
-  }
-
-  componentDidCatch(error: Error, info: ErrorInfo): void {
-    this.setState({ error, info })
-  }
-
-  render(): ReactNode {
-    const { error } = this.state
-    if (error) {
-      return <ErrorBoundaryFallbackComponent />
-    }
-    return this.props.children
-  }
+  error: Error | null;
+  info: { componentStack: string } | null;
 }
 
-export default ErrorBoundary
+// Fallback UI Component
+const ErrorBoundaryFallbackComponent: React.FC<State> = ({ error, info }) => (
+  <Layout>
+    <Message>
+      <p>Something went wrong:</p>
+      <pre>{error?.message}</pre>
+      <pre>{info?.componentStack || 'No component stack available.'}</pre>
+      <span role="img" aria-label="face-emoji">
+        😞
+      </span>
+    </Message>
+  </Layout>
+);
+
+// Error Boundary Component using react-error-boundary
+const ErrorBoundary: React.FC<Props> = ({ children }) => {
+  const [errorInfo, setErrorInfo] = useState<React.ErrorInfo | null>(null);
+
+  const handleError = (error: Error, info: React.ErrorInfo) => {
+    console.error('Logging error:', error);
+    console.error('Error info:', info);
+    setErrorInfo(info);
+  };
 
+  return (
+    <ReactErrorBoundary
+      FallbackComponent={({ error }) => (
+        <ErrorBoundaryFallbackComponent
+          error={error}
+          info={{
+            componentStack: errorInfo?.componentStack || 'No component stack available.',
+          }}
+        />
+      )}
+      onError={handleError}
+    >
+      {children}
+    </ReactErrorBoundary>
+  );
+};
+
+export default ErrorBoundary;
+
+// Styled components
 const Layout = styled.div`
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
-`
+`;
 
 const Message = styled.div`
   padding: 40px;
   border: 2px #78909c solid;
   border-radius: 5px;
   font-size: 24px;
   color: #78909c;
-`
-
-const ErrorBoundaryFallbackComponent = () => (
-  <Layout>
-    <Message>
-      Something Error Ooccurring
-      <span role="img" aria-label="face-emoji">
-        😞
-      </span>
-    </Message>
-  </Layout>
-)
+`;