Use updater function in DOM API updates

mui · Dec 16, 2022 · 1f7779e · 1f7779e
1 parent 8c10a84
commit 1f7779e
Show file tree

Hide file tree

Showing 13 changed files with 351 additions and 393 deletions.
diff --git a/packages/toolpad-app/src/toolpad/AppEditor/ConnectionEditor/index.tsx b/packages/toolpad-app/src/toolpad/AppEditor/ConnectionEditor/index.tsx
@@ -49,21 +49,21 @@ function ConnectionEditorContent<P>({
   className,
   connectionNode,
 }: ConnectionEditorContentProps<P>) {
-  const { dom } = useDom();
   const domApi = useDomApi();
 
   const handleConnectionChange = React.useCallback(
     (connectionParams: P | null) => {
-      const updatedDom = appDom.setNodeNamespacedProp(
-        dom,
-        connectionNode,
-        'attributes',
-        'params',
-        appDom.createSecret(connectionParams),
+      domApi.update((draft) =>
+        appDom.setNodeNamespacedProp(
+          draft,
+          connectionNode,
+          'attributes',
+          'params',
+          appDom.createSecret(connectionParams),
+        ),
       );
-      domApi.update(updatedDom);
     },
-    [connectionNode, dom, domApi],
+    [connectionNode, domApi],
   );
 
   const dataSourceId = connectionNode.attributes.dataSource.value;

diff --git a/...ges/toolpad-app/src/toolpad/AppEditor/HierarchyExplorer/CreateCodeComponentNodeDialog.tsx b/...ges/toolpad-app/src/toolpad/AppEditor/HierarchyExplorer/CreateCodeComponentNodeDialog.tsx
@@ -104,8 +104,7 @@ export default function CreateCodeComponentDialog({
           });
           const appNode = appDom.getApp(dom);
 
-          const updatedDom = appDom.addNode(dom, newNode, appNode, 'codeComponents');
-          domApi.update(updatedDom);
+          domApi.update((draft) => appDom.addNode(draft, newNode, appNode, 'codeComponents'));
 
           onClose();
           navigate(`/app/${appId}/codeComponents/${newNode.id}`);

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/HierarchyExplorer/CreateConnectionNodeDialog.tsx b/packages/toolpad-app/src/toolpad/AppEditor/HierarchyExplorer/CreateConnectionNodeDialog.tsx
@@ -82,8 +82,7 @@ export default function CreateConnectionDialog({
           });
           const appNode = appDom.getApp(dom);
 
-          const updatedDom = appDom.addNode(dom, newNode, appNode, 'connections');
-          domApi.update(updatedDom);
+          domApi.update((draft) => appDom.addNode(draft, newNode, appNode, 'connections'));
 
           onClose();
           navigate(`/app/${appId}/connections/${newNode.id}`);

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/HierarchyExplorer/CreatePageNodeDialog.tsx b/packages/toolpad-app/src/toolpad/AppEditor/HierarchyExplorer/CreatePageNodeDialog.tsx
@@ -70,8 +70,7 @@ export default function CreatePageDialog({
           });
           const appNode = appDom.getApp(dom);
 
-          const updatedDom = appDom.addNode(dom, newNode, appNode, 'pages');
-          domApi.update(updatedDom);
+          domApi.update((draft) => appDom.addNode(draft, newNode, appNode, 'pages'));
 
           onClose();
           navigate(`/app/${appId}/pages/${newNode.id}`);

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/HierarchyExplorer/index.tsx b/packages/toolpad-app/src/toolpad/AppEditor/HierarchyExplorer/index.tsx
@@ -237,8 +237,7 @@ export default function HierarchyExplorer({ appId, className }: HierarchyExplore
         }
       }
 
-      const updatedDom = appDom.removeNode(dom, nodeId);
-      domApi.update(updatedDom);
+      domApi.update((draft) => appDom.removeNode(draft, nodeId));
 
       if (redirectAfterDelete) {
         navigate(redirectAfterDelete);
@@ -250,15 +249,17 @@ export default function HierarchyExplorer({ appId, className }: HierarchyExplore
   const handleDuplicateNode = React.useCallback(
     (nodeId: NodeId) => {
       const node = appDom.getNode(dom, nodeId);
-      invariant(
-        node.parentId && node.parentProp,
-        'Duplication should never be called on nodes that are not placed in the dom',
-      );
 
       const fragment = appDom.cloneFragment(dom, nodeId);
 
-      const updatedDom = appDom.addFragment(dom, fragment, node.parentId, node.parentProp);
-      domApi.update(updatedDom);
+      domApi.update((draft) => {
+        invariant(
+          node.parentId && node.parentProp,
+          'Duplication should never be called on nodes that are not placed in the dom',
+        );
+
+        return appDom.addFragment(draft, fragment, node.parentId, node.parentProp);
+      });
 
       const newNode = appDom.getNode(fragment, fragment.root);
       const editorLink = getLinkToNodeEditor(appId, newNode);

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/NodeAttributeEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/NodeAttributeEditor.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ArgTypeDefinition, BindableAttrValue } from '@mui/toolpad-core';
 import { Alert } from '@mui/material';
 import * as appDom from '../../../appDom';
-import { useDom, useDomApi } from '../../DomLoader';
+import { useDomApi } from '../../DomLoader';
 import BindableEditor from './BindableEditor';
 import { usePageEditorState } from './PageEditorProvider';
 import { getDefaultControl } from '../../propertyControls';
@@ -22,15 +22,15 @@ export default function NodeAttributeEditor<P extends object>({
   argType,
   props,
 }: NodeAttributeEditorProps<P>) {
-  const { dom } = useDom();
   const domApi = useDomApi();
 
   const handlePropChange = React.useCallback(
     (newValue: BindableAttrValue<unknown> | null) => {
-      const updatedDom = appDom.setNodeNamespacedProp(dom, node, namespace as any, name, newValue);
-      domApi.update(updatedDom);
+      domApi.update((draft) =>
+        appDom.setNodeNamespacedProp(draft, node, namespace as any, name, newValue),
+      );
     },
-    [dom, node, namespace, name, domApi],
+    [node, namespace, name, domApi],
   );
 
   const propValue: BindableAttrValue<unknown> | null = (node as any)[namespace]?.[name] ?? null;

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/PageModuleEditor.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/PageModuleEditor.tsx
@@ -39,15 +39,10 @@ function PageModuleEditorDialog({ pageNodeId, open, onClose }: PageModuleEditorD
     const pretty = tryFormat(input);
     setInput(pretty);
 
-    const updatedDom = appDom.setNodeNamespacedProp(
-      dom,
-      page,
-      'attributes',
-      'module',
-      appDom.createConst(pretty),
+    domApi.update((draft) =>
+      appDom.setNodeNamespacedProp(draft, page, 'attributes', 'module', appDom.createConst(pretty)),
     );
-    domApi.update(updatedDom);
-  }, [dom, domApi, input, page]);
+  }, [domApi, input, page]);
 
   const handleSaveButton = React.useCallback(() => {
     handleSave();

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor/index.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor/index.tsx
@@ -132,8 +132,7 @@ export default function QueryEditor() {
       if (appDom.nodeExists(dom, node.id)) {
         domApi.saveNode(node);
       } else {
-        const updatedDom = appDom.addNode(dom, node, page, 'queries');
-        domApi.update(updatedDom);
+        domApi.update((draft) => appDom.addNode(draft, node, page, 'queries'));
       }
       setDialogState({ node, isDraft: false });
     },
@@ -142,12 +141,11 @@ export default function QueryEditor() {
 
   const handleDeleteNode = React.useCallback(
     (nodeId: NodeId) => {
-      const updatedDom = appDom.removeNode(dom, nodeId);
-      domApi.update(updatedDom);
+      domApi.update((draft) => appDom.removeNode(draft, nodeId));
 
       handleEditStateDialogClose();
     },
-    [dom, domApi, handleEditStateDialogClose],
+    [domApi, handleEditStateDialogClose],
   );
 
   const handleRemove = React.useCallback(