From 90e73b83a1c63ad4b29c3c2c36dca6515b99ce0d Mon Sep 17 00:00:00 2001
From: hunteraraujo <hunter_araujo@msn.com>
Date: Sun, 10 Sep 2023 14:33:42 -0700
Subject: [PATCH] Implement TreeNodeView with selection functionality

This commit adds the TreeNodeView class, a StatelessWidget responsible for rendering individual nodes in the skill tree.

Features:
- Displays the node ID in the view.
- Uses the Provider package to interact with the SkillTreeViewModel.
- Includes an onTap method to toggle node selection state.
- Updates the UI to reflect the selected state by changing the background color.

The TreeNodeView is designed to work in conjunction with SkillTreeViewModel to manage node selection states.
---
 .../lib/views/skill_tree/tree_node_view.dart  | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 frontend/lib/views/skill_tree/tree_node_view.dart

diff --git a/frontend/lib/views/skill_tree/tree_node_view.dart b/frontend/lib/views/skill_tree/tree_node_view.dart
new file mode 100644
index 00000000..9f32582d
--- /dev/null
+++ b/frontend/lib/views/skill_tree/tree_node_view.dart
@@ -0,0 +1,32 @@
+import 'package:auto_gpt_flutter_client/viewmodels/skill_tree_viewmodel.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+class TreeNodeView extends StatelessWidget {
+  final int nodeId;
+  final bool selected;
+
+  TreeNodeView({required this.nodeId, this.selected = false});
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: () {
+        print('Node $nodeId clicked');
+        Provider.of<SkillTreeViewModel>(context, listen: false)
+            .toggleNodeSelection(nodeId);
+      },
+      child: Container(
+        padding: EdgeInsets.all(16),
+        decoration: BoxDecoration(
+          color: selected ? Colors.red : Colors.white,
+          borderRadius: BorderRadius.circular(4),
+          boxShadow: [
+            BoxShadow(color: Colors.red, spreadRadius: 1),
+          ],
+        ),
+        child: Text('Node $nodeId'),
+      ),
+    );
+  }
+}