Fix "user not able to modify code" bug (#3)

Author: Youssef1313

DotNetSyntaxTreeVisualizer/ClientApp/src/components/Home.js

@@ -1,29 +1,6 @@
 import React, { Component } from 'react';
 import Tree from 'react-d3-tree';
 
-const myTreeData =
-{
-    name: 'Top Level Root',
-    attributes: {
-        keyA: 'val A',
-        keyB: 'val B',
-        keyC: 'val C',
-    },
-    children: [
-        {
-            name: 'Level 2: A',
-            attributes: {
-                keyA: 'val A',
-                keyB: 'val B',
-                keyC: 'val C',
-            },
-        },
-        {
-            name: 'Level 2: B',
-        },
-    ],
-}
-
 const svgSquare = {
     shape: 'rect',
     shapeProps: {
@@ -39,13 +16,14 @@ const containerStyles = {
     height: '100vh',
 }
 
+const helloWorldCode = 'using System;\r\n\r\npublic class Program\r\n{\r\n    public static void Main(string[] args)\r\n    {\r\n        Console.WriteLine("Hello, world");\r\n    }\r\n}'
 
 export class Home extends Component {
     static displayName = Home.name;
 
     state = {
         treeJson: {},
-        sourceCodeText: 'using System;\r\n\r\npublic class Program\r\n{\r\n    public static void Main(string[] args)\r\n    {\r\n        Console.WriteLine("Hello, world");\r\n    }\r\n}'
+        sourceCodeText: helloWorldCode
     };
 
     componentDidMount() {
@@ -56,13 +34,18 @@ export class Home extends Component {
                 y: dimensions.height / 2
             }
         });
+        this.handleChanged({
+            target: {
+                value: helloWorldCode
+            }
+        });
     }
 
-    handleChanged = () => {
+    handleChanged = (event) => {
         const requestOptions = {
             method: 'POST',
             headers: { 'Content-Type': 'text/plain;charset=UTF-8' },
-            body: this.state.sourceCodeText
+            body: event.target.value
         };
         fetch('SyntaxTree', requestOptions)
             .then(response => response.json())
@@ -72,7 +55,7 @@ export class Home extends Component {
     render() {
         return (
             <React.Fragment>
-                <textarea value={this.state.sourceCodeText} onChange={this.handleChanged} style={{ width: '100%' }} />
+                <textarea defaultValue={helloWorldCode} onChange={this.handleChanged} style={{ height: '230px', width: '100%' }} />
                 <div id="treeWrapper" style={containerStyles} ref={tc => (this.treeContainer = tc)}>
                     <Tree data={this.state.treeJson} nodeSvgShape={svgSquare} orientation="vertical" translate={this.state.translate} />
                 </div>