From 120da1f8a5a4c4a26fdf76cd85e2aa4f3f67b0ad Mon Sep 17 00:00:00 2001
From: jerryseigle <mr.jerryseigle@gmail.com>
Date: Tue, 1 Aug 2023 00:23:17 -0400
Subject: [PATCH 1/2] Added export for dynamic tree

---
 packages/react-arborist/src/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-arborist/src/index.ts b/packages/react-arborist/src/index.ts
index 854860fb..c3cf822f 100644
--- a/packages/react-arborist/src/index.ts
+++ b/packages/react-arborist/src/index.ts
@@ -7,3 +7,4 @@ export * from "./interfaces/node-api";
 export * from "./interfaces/tree-api";
 export * from "./data/simple-tree";
 export * from "./hooks/use-simple-tree";
+export * from "./hooks/use-dynamic-tree";

From 67c0234dd655b0774f9ecbd026680a3594271d51 Mon Sep 17 00:00:00 2001
From: jerryseigle <mr.jerryseigle@gmail.com>
Date: Tue, 1 Aug 2023 00:43:14 -0400
Subject: [PATCH 2/2] Added hook that supports dynamic data

The useSimpleTree hook only allows initial data and there is no method to allow changing that data.
With this new hook useDynamicTree we can change the tree data dynamics for example: In a ReactJs or NextJS project we can make an api call then set the data to be use for the tree and there is no need to write the controller functions. Basically this hooks works just like the useSimpleTree hook except you change change or load the data when needed.  ```const { data, setData, controllers } = useDynamicTree()``` There is no need to pass in initialData and you can set the data using the setData function.
---
 .../src/hooks/use-dynamic-tree.ts             | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 packages/react-arborist/src/hooks/use-dynamic-tree.ts

diff --git a/packages/react-arborist/src/hooks/use-dynamic-tree.ts b/packages/react-arborist/src/hooks/use-dynamic-tree.ts
new file mode 100644
index 00000000..3461ca16
--- /dev/null
+++ b/packages/react-arborist/src/hooks/use-dynamic-tree.ts
@@ -0,0 +1,54 @@
+import { useMemo, useState } from "react";
+import { SimpleTree } from "../data/simple-tree";
+import {
+  CreateHandler,
+  DeleteHandler,
+  MoveHandler,
+  RenameHandler,
+} from "../types/handlers";
+import { IdObj } from "../types/utils";
+
+let nextId = 0;
+
+export function useDynamicTree<T>() {
+  const [data, setData] = useState<T[]>([]);
+  const tree = useMemo(
+    () =>
+      new SimpleTree<// @ts-ignore
+      T>(data),
+    [data]
+  );
+
+  const onMove: MoveHandler<T> = (args: {
+    dragIds: string[];
+    parentId: null | string;
+    index: number;
+  }) => {
+    for (const id of args.dragIds) {
+      tree.move({ id, parentId: args.parentId, index: args.index });
+    }
+    setData(tree.data);
+  };
+
+  const onRename: RenameHandler<T> = ({ name, id }) => {
+    tree.update({ id, changes: { name } as any });
+    setData(tree.data);
+  };
+
+  const onCreate: CreateHandler<T> = ({ parentId, index, type }) => {
+    const data = { id: `simple-tree-id-${nextId++}`, name: "" } as any;
+    if (type === "internal") data.children = [];
+    tree.create({ parentId, index, data });
+    setData(tree.data);
+    return data;
+  };
+
+  const onDelete: DeleteHandler<T> = (args: { ids: string[] }) => {
+    args.ids.forEach((id) => tree.drop({ id }));
+    setData(tree.data);
+  };
+
+  const controllers = { onMove, onRename, onCreate, onDelete };
+
+  return { data, setData, controllers } as const;
+}