improved js

dashboard/src/App.js

@@ -12,12 +12,23 @@ class App extends React.Component {
       asts: [],
       contexts: {}
     };
+  }
+
+  componentDidMount() {
+    fetch('http://localhost:7070/asts/')
+      .then(res => res.json())
+      .then((asts) => {
+        this.setState({
+          asts: asts.reverse(),
+          contexts: {}
+        })
+      })
+      .catch(console.log)
 
     const ws = new WebSocket("ws://localhost:7070/ast-events");
 
     ws.onopen = (event) => {
-
-      ws.send("Hi");
+      ws.send("Web client connected!");
     };
 
     ws.onmessage = (event) => {
@@ -30,57 +41,30 @@ class App extends React.Component {
             asts: [event.data, ...asts],
             contexts: contexts
           });
-
-        console.log(event.data)
         }
       } catch (err) {
         console.log(err);
       }
-      ws.send("Got Something, thx");
     };
   }
 
-  componentDidMount() {
-    fetch('http://localhost:7070/asts/')
-      .then(res => res.json())
-      .then((asts) => {
-        this.setState({
-          asts: asts.reverse(),
-          contexts: {}
-        })
-      })
-      .catch(console.log)
-  }
-
   render() {
 
-    const astlist = this.state.asts.map(v => {
-      const image = v.diagram;
-      return (
-        <li key={v.timestamp}>
-          <p>{v.parseRule}</p>
-          <p><img src={`data:image/svg+xml;utf8,${encodeURIComponent(image)}`} alt='{v.parseRule}' /></p>
-        </li>
-      )
-    })
-
     const astTimeline = this.state.asts.map(v => {
-      const image = v.diagram;
-      const timestamp = new Date(v.timestamp);
       return (
         <VerticalTimelineElement
           className="ast-timeline-event"
           contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
           contentArrowStyle={{ borderRight: '7px solid  rgb(33, 150, 243)' }}
-          date={timestamp.toLocaleTimeString('en-us', { hour12: false })}
-          iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
-          icon={<GiFamilyTree className='ASTIcon' />}
+          date={new Date(v.timestamp).toLocaleTimeString('en-us', { hour12: false })}
+          iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff', rotate: '180deg' }}
+          icon={<GiFamilyTree />}
           key={v.timestamp}
           position={'right'}
         >
           <h3 className="vertical-timeline-element-title">{v.parseRule}()</h3>
           <p>
-            <img className="AstInTimeline" src={`data:image/svg+xml;utf8,${encodeURIComponent(image)}`} alt='{v.parseRule}' />
+            <img className="AstInTimeline" src={`data:image/svg+xml;utf8,${encodeURIComponent(v.diagram)}`} alt={v.parseRule} />
           </p>
         </VerticalTimelineElement>
 
@@ -95,12 +79,10 @@ class App extends React.Component {
           <ControlPanel />
         </header>
         <main>
-          <div className="curent-state">
-            <img className="CurrentAst" src={`data:image/svg+xml;utf8,${encodeURIComponent(lastImage.diagram)}`} alt='lastImage.parseRule' />
-          </div>
-          {/* <div className="ast-history">
-            <ol>{astlist}</ol>
-          </div> */}
+          <CurrentState
+            diagram={lastImage.diagram}
+            label={lastImage.parseRule}
+          />
           <VerticalTimeline
             className='MG-Timeline'>
             {astTimeline}
@@ -111,19 +93,19 @@ class App extends React.Component {
   }
 }
 
-class ControlPanel extends React.Component {
-  constructor(props) {
-    super(props);
-  };
-
-  sayHello = () => {
-    alert('You clicked me!');
+function CurrentState(props) {
+  return (
+    <div className="curent-state">
+      <img className="CurrentAst" src={`data:image/svg+xml;utf8,${encodeURIComponent(props.diagram)}`} alt={props.label} />
+    </div>
+  )
 }
 
+class ControlPanel extends React.Component {
   render() {
     return (
       <div className='ControlPanel'>
-        <button onClick={this.sayHello}>connect</button>
+        <button onClick={() => { alert('You clicked me!'); }}>connect</button>
       </div>
     );
   }