From c122bfd310c21491fddcf3ebfd33ce2fabaa5610 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Fri, 10 Jan 2025 22:09:24 +0000
Subject: [PATCH] fixup demo wrt React.StrictMode

---
 .../react/dockview/demo-dockview/src/app.tsx  | 149 ++++++++++--------
 .../demo-dockview/src/groupActions.tsx        |   2 -
 packages/docs/src/theme/Root.tsx              |   6 +-
 3 files changed, 88 insertions(+), 69 deletions(-)

diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
index a9f4ea97c..896e3968d 100644
--- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
@@ -176,75 +176,92 @@ const DockviewDemo = (props: { theme?: string }) => {
         setPending([]);
     }, [pending]);
 
-    const onReady = (event: DockviewReadyEvent) => {
-        setApi(event.api);
-
-        event.api.onDidAddPanel((event) => {
-            setPanels((_) => [..._, event.id]);
-            addLogLine(`Panel Added ${event.id}`);
-        });
-        event.api.onDidActivePanelChange((event) => {
-            setActivePanel(event?.id);
-            addLogLine(`Panel Activated ${event?.id}`);
-        });
-        event.api.onDidRemovePanel((event) => {
-            setPanels((_) => {
-                const next = [..._];
-                next.splice(
-                    next.findIndex((x) => x === event.id),
-                    1
-                );
-
-                return next;
-            });
-            addLogLine(`Panel Removed ${event.id}`);
-        });
-
-        event.api.onDidAddGroup((event) => {
-            setGroups((_) => [..._, event.id]);
-            addLogLine(`Group Added ${event.id}`);
-        });
-
-        event.api.onDidMovePanel((event) => {
-            addLogLine(`Panel Moved ${event.panel.id}`);
-        });
-
-        event.api.onDidMaximizedGroupChange((event) => {
-            addLogLine(
-                `Group Maximized Changed ${event.group.api.id} [${event.isMaximized}]`
-            );
-        });
-
-        event.api.onDidRemoveGroup((event) => {
-            setGroups((_) => {
-                const next = [..._];
-                next.splice(
-                    next.findIndex((x) => x === event.id),
-                    1
-                );
-
-                return next;
-            });
-            addLogLine(`Group Removed ${event.id}`);
-        });
-
-        event.api.onDidActiveGroupChange((event) => {
-            setActiveGroup(event?.id);
-            addLogLine(`Group Activated ${event?.id}`);
-        });
-
-        const state = localStorage.getItem('dv-demo-state');
-        if (state) {
-            try {
-                event.api.fromJSON(JSON.parse(state));
-                return;
-            } catch {
-                localStorage.removeItem('dv-demo-state');
-            }
+    React.useEffect(() => {
+        if (!api) {
             return;
         }
 
-        defaultConfig(event.api);
+        const disposables = [
+            api.onDidAddPanel((event) => {
+                setPanels((_) => [..._, event.id]);
+                addLogLine(`Panel Added ${event.id}`);
+            }),
+            api.onDidActivePanelChange((event) => {
+                setActivePanel(event?.id);
+                addLogLine(`Panel Activated ${event?.id}`);
+            }),
+            api.onDidRemovePanel((event) => {
+                setPanels((_) => {
+                    const next = [..._];
+                    next.splice(
+                        next.findIndex((x) => x === event.id),
+                        1
+                    );
+
+                    return next;
+                });
+                addLogLine(`Panel Removed ${event.id}`);
+            }),
+
+            api.onDidAddGroup((event) => {
+                setGroups((_) => [..._, event.id]);
+                addLogLine(`Group Added ${event.id}`);
+            }),
+
+            api.onDidMovePanel((event) => {
+                addLogLine(`Panel Moved ${event.panel.id}`);
+            }),
+
+            api.onDidMaximizedGroupChange((event) => {
+                addLogLine(
+                    `Group Maximized Changed ${event.group.api.id} [${event.isMaximized}]`
+                );
+            }),
+
+            api.onDidRemoveGroup((event) => {
+                setGroups((_) => {
+                    const next = [..._];
+                    next.splice(
+                        next.findIndex((x) => x === event.id),
+                        1
+                    );
+
+                    return next;
+                });
+                addLogLine(`Group Removed ${event.id}`);
+            }),
+
+            api.onDidActiveGroupChange((event) => {
+                setActiveGroup(event?.id);
+                addLogLine(`Group Activated ${event?.id}`);
+            }),
+        ];
+
+        const loadLayout = () => {
+            const state = localStorage.getItem('dv-demo-state');
+
+            if (state) {
+                try {
+                    api.fromJSON(JSON.parse(state));
+                    return;
+                } catch {
+                    localStorage.removeItem('dv-demo-state');
+                }
+                return;
+            }
+
+            defaultConfig(api);
+        };
+
+        loadLayout();
+
+        return () => {
+            disposables.forEach((disposable) => disposable.dispose());
+        };
+    }, [api]);
+
+    const onReady = (event: DockviewReadyEvent) => {
+        setApi(event.api);
     };
 
     const [watermark, setWatermark] = React.useState<boolean>(false);
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/groupActions.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/groupActions.tsx
index 815621b72..0af2a66cc 100644
--- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/groupActions.tsx
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/groupActions.tsx
@@ -88,7 +88,6 @@ const GroupAction = (props: {
                     }
                     onClick={() => {
                         if (group) {
-
                             props.api.addFloatingGroup(group, {
                                 width: 400,
                                 height: 300,
@@ -99,7 +98,6 @@ const GroupAction = (props: {
                                     right: 50,
                                 },
                             });
-
                         }
                     }}
                 >
diff --git a/packages/docs/src/theme/Root.tsx b/packages/docs/src/theme/Root.tsx
index 516775b04..eb8c4705e 100644
--- a/packages/docs/src/theme/Root.tsx
+++ b/packages/docs/src/theme/Root.tsx
@@ -3,5 +3,9 @@ import { RecoilRoot } from 'recoil';
 
 // Default implementation, that you can customize
 export default function Root({ children }) {
-    return <RecoilRoot>{children}</RecoilRoot>;
+    return (
+        <React.StrictMode>
+            <RecoilRoot>{children}</RecoilRoot>
+        </React.StrictMode>
+    );
 }