From 673df205148e26dfa8a5f719816b0d88ec27e52f Mon Sep 17 00:00:00 2001
From: Morten Olsen <fbtijfdq@void.black>
Date: Mon, 19 Jun 2023 16:40:30 +0200
Subject: [PATCH] fixes

---
 packages/ui/src/interface/board/index.tsx  |  2 +-
 packages/ui/src/interface/error/index.tsx  | 35 ++++++++++++++++++++++
 packages/ui/src/interface/index.ts         |  1 +
 packages/ui/src/interface/widget/index.tsx | 13 ++++++--
 4 files changed, 47 insertions(+), 4 deletions(-)
 create mode 100644 packages/ui/src/interface/error/index.tsx

diff --git a/packages/ui/src/interface/board/index.tsx b/packages/ui/src/interface/board/index.tsx
index a24742a..d181a91 100644
--- a/packages/ui/src/interface/board/index.tsx
+++ b/packages/ui/src/interface/board/index.tsx
@@ -65,7 +65,7 @@ const Board: React.FC<BoardProps> = ({ board, id }) => {
           ))}
         </Masonry>
       </View>
-    </View>
+    </Wrapper>
   );
 };
 
diff --git a/packages/ui/src/interface/error/index.tsx b/packages/ui/src/interface/error/index.tsx
new file mode 100644
index 0000000..2398454
--- /dev/null
+++ b/packages/ui/src/interface/error/index.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+type State = {
+  hasError: boolean;
+  error?: unknown;
+};
+
+type Props = {
+  children: React.ReactNode;
+};
+
+class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: unknown) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: any, errorInfo: any) {
+    console.error('componentDidCatch', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <h1>Something went wrong.</h1>;
+    }
+
+    return this.props.children;
+  }
+}
+
+export { ErrorBoundary };
diff --git a/packages/ui/src/interface/index.ts b/packages/ui/src/interface/index.ts
index 71a723c..5dcfe4f 100644
--- a/packages/ui/src/interface/index.ts
+++ b/packages/ui/src/interface/index.ts
@@ -4,3 +4,4 @@ export * from './notifications';
 export * from './widget';
 export * from './board';
 export * from './app';
+export * from './error';
diff --git a/packages/ui/src/interface/widget/index.tsx b/packages/ui/src/interface/widget/index.tsx
index 982fd25..76a2d25 100644
--- a/packages/ui/src/interface/widget/index.tsx
+++ b/packages/ui/src/interface/widget/index.tsx
@@ -19,6 +19,7 @@ import { DropdownMenu } from '../../base';
 import { useCallback, useMemo, useState } from 'react';
 import { Typography } from '../../typography';
 import { NotificationView } from './notification';
+import { ErrorBoundary } from '../error';
 
 type WidgetProps = {
   id: string;
@@ -129,7 +130,9 @@ const Widget: React.FC<WidgetProps> = ({
             <Dialog.Overlay />
             <Dialog.Content maxWidth="90vw" height="90vh">
               <Dialog.CloseButton />
-              <WidgetView />
+              <ErrorBoundary>
+                <WidgetView />
+              </ErrorBoundary>
             </Dialog.Content>
           </Dialog.Portal>
         </Dialog>
@@ -169,7 +172,9 @@ const Widget: React.FC<WidgetProps> = ({
       >
         <Wrapper className={className} $fr>
           <WidgetWrapper $f={1}>
-            <WidgetView />
+            <ErrorBoundary>
+              <WidgetView />
+            </ErrorBoundary>
           </WidgetWrapper>
         </Wrapper>
       </motion.div>
@@ -179,7 +184,9 @@ const Widget: React.FC<WidgetProps> = ({
           <Dialog.Content>
             <Dialog.Title>Edit Widget</Dialog.Title>
             <Dialog.Description>
-              <WidgetEditor onSave={onSave} />
+              <ErrorBoundary>
+                <WidgetEditor onSave={onSave} />
+              </ErrorBoundary>
             </Dialog.Description>
           </Dialog.Content>
         </Dialog.Portal>