Objective: Use Zustand to handle CRUD functionalities data, and Tree nodes and Edges Positions,
Send to backend when SAVE button is pressed to test feasibilities and load
Implement Zustand Store:
Create a Zustand store to manage the state of the tree, including nodes and their edges.
Store should support CRUD operations on tree nodes and track the positions of these nodes and edges.
CRUD Functionalities Through Zustand:
Add Nodes(State): Allow users to add new nodes to the tree structure. - 4 hours
Delete Nodes(State): Enable deletion of existing nodes, ensuring any connected edges are also handled. - 3 hours
Edit Node(State)s: Permit editing of node details like labels or custom data. - 4 hours
Update Positions(State): Track and update the positions of nodes and edges when they are moved within the UI. - 3 hours
Integration with Backend:
Save Mechanism: Implement a save button that triggers an API call to send the current state of the tree (nodes and their positions) to the backend. [Send the nodes.ts and edges.ts data with React Query to backend] - see Reference 2 above - 3 hours
AC1: Zustand Store Exist for Handling Tree Nodes+Edges Interactivity - 3 hours
AC2: Add Node State Management
Given a user interacts with the tree UI,
When they trigger the add node functionality,
Then a new node should be added to the Zustand store and visible in the UI.
AC3: Delete Node State Management
Given a user selects a node,
When they trigger the delete node functionality,
Then the node and its related edges should be removed from both the Zustand store and the UI.
AC4: Edit Node State Management
Given a user selects a node,
When they trigger the edit node functionality,
Then the user should be able to change the node details which should update the store and the UI immediately.
AC5: Save Button Exist
Send the updated nodes and edges to Backend API Endpoint
Objective: Use Zustand to handle CRUD functionalities data, and Tree nodes and Edges Positions, Send to backend when SAVE button is pressed to test feasibilities and load
PreReq: Exploration/Learning with React Flow, Zustand, React Query - 6 hours
Sample code provided for dragging, selecting or removing a node or edge with React Flow: https://reactflow.dev/learn/advanced-use/state-management#install-zustand https://codesandbox.io/p/sandbox/wizardly-hill-x48rv4?file=%2Fnodes.ts&utm_medium=sandpack
State Management
Implement Zustand Store: Create a Zustand store to manage the state of the tree, including nodes and their edges. Store should support CRUD operations on tree nodes and track the positions of these nodes and edges.
CRUD Functionalities Through Zustand: Add Nodes(State): Allow users to add new nodes to the tree structure. - 4 hours Delete Nodes(State): Enable deletion of existing nodes, ensuring any connected edges are also handled. - 3 hours Edit Node(State)s: Permit editing of node details like labels or custom data. - 4 hours Update Positions(State): Track and update the positions of nodes and edges when they are moved within the UI. - 3 hours Integration with Backend: Save Mechanism: Implement a save button that triggers an API call to send the current state of the tree (nodes and their positions) to the backend. [Send the nodes.ts and edges.ts data with React Query to backend] - see Reference 2 above - 3 hours
AC1: Zustand Store Exist for Handling Tree Nodes+Edges Interactivity - 3 hours
AC2: Add Node State Management
AC3: Delete Node State Management
AC4: Edit Node State Management
AC5: Save Button Exist