From 1fafe90fc2b935716a8682774a5b7e2f8e3b78d3 Mon Sep 17 00:00:00 2001
From: w3bdesign <45217974+w3bdesign@users.noreply.github.com>
Date: Sat, 7 Dec 2024 07:01:16 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20move=20ErrorFa?=
 =?UTF-8?q?llback=20inside=20component=20and=20add=20compact=20prop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Improves component encapsulation by moving ErrorFallback inside ErrorBoundary
and adds support for compact error display through optional prop parameter
---
 src/components/ErrorBoundary/ErrorBoundary.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/ErrorBoundary/ErrorBoundary.tsx b/src/components/ErrorBoundary/ErrorBoundary.tsx
index bc741fb..9c7a6ad 100644
--- a/src/components/ErrorBoundary/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -6,11 +6,7 @@ import Fallback from "./Fallback.component";
 
 interface ErrorBoundaryProps {
   children: ReactNode;
-}
-
-// Define the fallback component outside of ErrorBoundary
-function ErrorFallback(props: FallbackProps) {
-  return <Fallback {...props} compact={false} />;
+  compact?: boolean;
 }
 
 /**
@@ -19,13 +15,18 @@ function ErrorFallback(props: FallbackProps) {
  *
  * @param {Object} props - The component props
  * @param {ReactNode} props.children - The child components to be wrapped by the ErrorBoundary
+ * @param {boolean} props.compact - Whether to show a compact error fallback (used in stories)
  * @returns {JSX.Element} A React component that catches errors in its child components
  */
-const ErrorBoundary: React.FC<ErrorBoundaryProps> = ({ children }) => {
+const ErrorBoundary: React.FC<ErrorBoundaryProps> = ({ children, compact = false }) => {
   const handleError = (error: Error, info: ErrorInfo) => {
     console.error("Uventet feil i Matrix:", error, info);
   };
 
+  const ErrorFallback = (props: FallbackProps) => {
+    return <Fallback {...props} compact={compact} />;
+  };
+
   return (
     <ReactErrorBoundary
       FallbackComponent={ErrorFallback}