big update

src/App.tsx

@@ -1,8 +1,10 @@
 import Tree from './components/Tree';
-import { getTreeData } from './utils/getTreeData';
+import { useNodeStore } from './store';
 
 function App() {
-  return <Tree treeData={getTreeData()} />;
+  const { state } = useNodeStore();
+
+  return <Tree treeData={state.nodeList} />;
 }
 
 export default App;

src/components/Node.tsx

@@ -18,14 +18,12 @@ import {
 } from 'react-icons/md';
 
 import { TNodeProps } from '../types';
-import { addNode, useNodeStore } from '../store';
+import { addNode, toggleHasChildren, useNodeStore } from '../store';
 
 function Node({ item, level, children }: TNodeProps) {
   const [isCollapsed, setIsCollapsed] = useState(true);
 
-  const { state, dispatch } = useNodeStore();
-
-  // console.log({ state, dispatch });
+  const { dispatch } = useNodeStore();
 
   const entityIcon = item.hasChildren ? (
     isCollapsed ? (
@@ -38,18 +36,17 @@ function Node({ item, level, children }: TNodeProps) {
   );
 
   const handleAddNode = () => {
+    console.log(item.id);
     dispatch(
       addNode({
         id: new Date().getTime() + Math.random(),
-        title: 'hello',
+        title: 'dev-test',
         parentId: item.id,
         hasChildren: false,
       })
     );
   };
 
-  console.log('add', item);
-
   return (
     <Flex
       key={`section-${item.id}`}
@@ -88,7 +85,6 @@ function Node({ item, level, children }: TNodeProps) {
             icon={<MdOutlineRemoveCircle />}
             background='none'
             color='red.500'
-            onClick={handleAddNode}
           />
         </ButtonGroup>
       </Flex>

src/store/action.store.ts

@@ -8,6 +8,13 @@ export const addNode = (payload: TNodeItem) => {
   } as const;
 };
 
+export const toggleHasChildren = (payload: TNodeItem) => {
+  return {
+    type: nodeActionVariant.toggleHasChildren,
+    payload,
+  } as const;
+};
+
 export const removeNode = (payload: number) => {
   return {
     type: nodeActionVariant.removeNode,

src/store/config.store.ts

@@ -1,7 +1,5 @@
 export const nodeActionVariant = {
   addNode: 'addNode',
-  getNode: 'getNode',
-  getNodeList: 'getNodeList',
-  updateNode: 'updateNode',
+  toggleHasChildren: 'toggleHasChildren',
   removeNode: 'removeNode',
 } as const;

src/store/provider.store.tsx

@@ -1,17 +1,18 @@
-import { useEffect, useReducer } from 'react';
+import { useMemo, useReducer } from 'react';
 
 import NodeContext from './context.store';
 import nodeReducer, { initialNodeState } from './reducer.store';
 import { TNodeProviderProps } from './type.store';
 
 function NodeProvider({ children }: TNodeProviderProps) {
-  const [state, dispatch] = useReducer(nodeReducer, initialNodeState);
+  const [state, dispatch] = useReducer(nodeReducer, initialNodeState());
 
-  return (
-    <NodeContext.Provider value={{ state, dispatch }}>
-      {children}
-    </NodeContext.Provider>
-  );
+  const value = useMemo(() => {
+    console.log(state);
+    return { state, dispatch };
+  }, [state]);
+
+  return <NodeContext.Provider value={value}>{children}</NodeContext.Provider>;
 }
 
 export default NodeProvider;

src/store/reducer.store.ts

@@ -1,28 +1,44 @@
+import { getTreeData } from '../utils/getTreeData';
 import { nodeActionVariant } from './config.store';
 import { TNodeAction, TNodeState } from './type.store';
 
-export const initialNodeState: TNodeState = {
-  node: {
-    id: 0,
-    title: '',
-    parentId: 0,
-    hasChildren: false,
-  },
-  nodeList: [],
+export const initialNodeState = (): TNodeState => {
+  if (localStorage.getItem('tree-data')) {
+    return JSON.parse(localStorage.getItem('tree-data') as string);
+  }
+
+  return {
+    node: {
+      id: 0,
+      title: '',
+      parentId: 0,
+      hasChildren: false,
+    },
+    nodeList: getTreeData(),
+  };
 };
 
 function nodeReducer(state: TNodeState, action: TNodeAction) {
   switch (action.type) {
-    case nodeActionVariant.addNode:
-      return {
-        ...state,
-        nodeList: [...state.nodeList, action.payload],
-      };
-    case nodeActionVariant.removeNode:
-      return {
+    case nodeActionVariant.addNode: {
+      const currentNode = {
         ...state,
         nodeList: [...state.nodeList, action.payload],
       };
+
+      state.nodeList.map((node) => {
+        if (node.id === action.payload.parentId) {
+          console.log('in', node.hasChildren);
+          console.log('in', node.id);
+          node.hasChildren = true;
+        }
+      });
+
+      localStorage.setItem('tree-data', JSON.stringify(currentNode));
+
+      return currentNode;
+    }
+
     default:
       throw new Error('invalid action');
   }

src/utils/getTreeData.ts

@@ -1,7 +1,7 @@
 import treeData from '../assets/treeData.json';
-import { TTreeDataItem } from '../types';
+import { TNodeItem } from '../types';
 
-export function getTreeData(): TTreeDataItem[] {
+export function getTreeData(): TNodeItem[] {
   return treeData.map((item) => ({
     ...item,
     hasChildren: treeData.filter((i) => i.parentId === item.id).length > 0,