From 093f2b483ca74ea6f6e51484c1273536fc2a462b Mon Sep 17 00:00:00 2001
From: slice <ryaneft@gmail.com>
Date: Fri, 13 Jul 2018 12:16:21 -0700
Subject: [PATCH] let's insert data the right way this time

---
 priv/frontend/src/App.js | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/priv/frontend/src/App.js b/priv/frontend/src/App.js
index a69ad86..c0b32dd 100644
--- a/priv/frontend/src/App.js
+++ b/priv/frontend/src/App.js
@@ -26,11 +26,12 @@ export default class App extends Component {
     metrics: null,
   };
 
-  _send(payload) {
-    this.websocket.send(JSON.stringify(payload));
+  async componentDidMount() {
+    await this.loadMetrics();
+    this.connect();
   }
 
-  _subscribe() {
+  subscribeToChannels() {
     const channels = Object.keys(this.state.metrics.graph).map((channel) => `latency:${channel}`);
     log('subscribing to channels:', channels);
 
@@ -40,7 +41,7 @@ export default class App extends Component {
     });
   }
 
-  _handleMessage(packet) {
+  handlePacket(packet) {
     const { op, c: channel, d: data } = packet;
 
     if (op !== OP.DATA) {
@@ -52,22 +53,21 @@ export default class App extends Component {
 
     const { metrics } = this.state;
     const graph = metrics.graph[name].slice(1);
-    const newGraph = [...graph, data];
+    const newGraph = [data, ...graph];
 
     log('adding data:', data);
 
-    const clone = Object.assign({}, this.state.metrics);
-    clone.graph[name] = newGraph;
+    this.setState((prevState, _props) => {
+      const clone = Object.assign({}, prevState.metrics);
+      clone.graph[name] = newGraph;
 
-    log('current graph:', graph, 'new graph:', newGraph);
-    log('current state', this.state, 'new state:', { metrics: clone });
-
-    this.setState({
-      metrics: clone,
+      return {
+        metrics: clone,
+      };
     });
   }
 
-  _connectWs() {
+  connect() {
     log('connecting to ws');
 
     const endpoint = (`${DOMAIN}/api/streaming`).replace('https', 'wss');
@@ -75,7 +75,7 @@ export default class App extends Component {
 
     this.websocket.onopen = () => {
       log('ws opened');
-      this._subscribe();
+      this.subscribeToChannels();
     };
 
     this.websocket.onmessage = (message) => {
@@ -83,7 +83,7 @@ export default class App extends Component {
       const parsed = JSON.parse(data);
       log('ws recv:', parsed);
 
-      this._handleMessage(parsed);
+      this.handlePacket(parsed);
     };
 
     this.websocket.onerror = (error) => {
@@ -91,12 +91,12 @@ export default class App extends Component {
     };
   }
 
-  async componentDidMount() {
-    await this._loadMetrics();
-    this._connectWs();
+
+  _send(payload) {
+    this.websocket.send(JSON.stringify(payload));
   }
 
-  async _loadMetrics() {
+  async loadMetrics() {
     log('loading metrics');
 
     try {