Tree Management Application

This is a React-based Tree Management Application that allows users to:

• Add new nodes to the tree.
• Delete existing nodes.
• Edit the names of nodes.
• Reset the tree to its initial state.

The application is built using React and follows a modular structure for better maintainability and scalability.

---

Table of Contents

1. Features

2. Project Structure

3. Setup Instructions

4. Usage

5. Diagrams

• Class Diagram

• Use Case Diagram

6. Testing

---

Features

• Add Node: Add a new node as a child of the selected node.

• Delete Node: Delete a node (except the root node).

• Edit Node: Edit the name of a node.

• Reset Tree: Reset the tree to its initial state.

• Interactive UI: Intuitive buttons for adding, deleting, editing, and resetting nodes.

---

Project Structure

src/
├── components/
│   ├── TreeNode.js
│   └── TreeView.js
├── hooks/
│   └── useTree.js
├── tests/
│   ├── App.test.js
│   └── TreeNode.test.js
├── utils/
│   ├── treeData.js
│   ├── addNode.js
│   ├── deleteNode.js
|   ├── resetTree.js
│   └── editNode.js
├── App.js
├── index.js
└── styles.css

---

Setup Instructions

Clone the Repository

git clone https://github.com/shadyashraf174/tree_app.git

cd tree-management-app

Install Dependencies

npm install

Run the Application

npm start

The application will open at http://localhost:3000.

---

Usage

• Add a Node: Select a node by clicking on it, then click the "Add" button to add a new child node.

• Delete a Node: Select a node by clicking on it, then click the "Remove" button to delete the node.

• Edit a Node: Select a node by clicking on it, then click the "Edit" button, update the name, and click "Save".

• Reset the Tree: Click the "Reset" button to reset the tree to its initial state.

---

Diagrams

Class Diagram

The class diagram represents the structure of the application, including components, hooks, and utility functions.

---

Use Case Diagram

The use case diagram represents the interactions between the user and the system.

---

Testing

The application is tested using React Testing Library and Jest. To run the tests:

npm test

Test Cases

• App Component:

• Renders the tree with initial nodes.

• Adds a new node when the "Add" button is clicked.

• Deletes a node when the "Remove" button is clicked.

• Edits a node when the "Edit" button is clicked.

• Resets the tree to its initial state when the "Reset" button is clicked.

• TreeNode Component:

• Renders the node name.

• Calls onSelect when a node is clicked.

• Enters edit mode when editingNodeId matches the node ID.

• Calls onSaveEdit when the "Save" button is clicked.

• Cancels editing when the "Cancel" button is clicked.

---

---

---