From e45fb70b8bdd58552a1332d6708ce91adf13391c Mon Sep 17 00:00:00 2001
From: Malar Kannan <malarkannan.p@gmail.com>
Date: Sat, 23 Jun 2018 18:36:50 +0530
Subject: [PATCH] moved csv loading to a separate component where the state is
 to be maintained

---
 src/App.tsx             | 25 ++-----------------------
 src/ServerAnalytics.tsx | 28 ++++++++++++++++++++++++++++
 src/ServerTable.tsx     | 18 +++++++++++++-----
 3 files changed, 43 insertions(+), 28 deletions(-)
 create mode 100644 src/ServerAnalytics.tsx

diff --git a/src/App.tsx b/src/App.tsx
index c8bef9a..6390085 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,33 +1,12 @@
 import * as React from 'react';
 import './App.css';
-import 'react-tabs/style/react-tabs.css';
-import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
-import { ServerTable } from './ServerTable';
-import { Chart } from './Chart';
-
-// import logo from './logo.svg';
+import ServerAnalytics from './ServerAnalytics';
 
 class App extends React.Component {
   public render() {
     return (
       <div className="App">
-        <Tabs>
-          <TabList>
-            <Tab>
-              Server Table
-            </Tab>
-            <Tab>Charts</Tab>
-          </TabList>
-
-          <TabPanel>
-            <ServerTable />
-          </TabPanel>
-          <TabPanel>
-            <Chart />
-
-          </TabPanel>
-
-        </Tabs>
+        <ServerAnalytics/>
       </div>
     );
   }
diff --git a/src/ServerAnalytics.tsx b/src/ServerAnalytics.tsx
new file mode 100644
index 0000000..5d8d964
--- /dev/null
+++ b/src/ServerAnalytics.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import 'react-tabs/style/react-tabs.css';
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+import { ServerTable } from './ServerTable';
+import { Chart } from './Chart';
+
+export default class ServerAnalytics extends React.Component {
+  public render() {
+    return (
+      <div className="App">
+        <Tabs>
+          <TabList>
+            <Tab>
+              Server Table
+            </Tab>
+            <Tab>Charts</Tab>
+          </TabList>
+          <TabPanel>
+            <ServerTable csvPath='/data.csv'/>
+          </TabPanel>
+          <TabPanel>
+            <Chart />
+          </TabPanel>
+        </Tabs>
+      </div>
+    );
+  }
+}
diff --git a/src/ServerTable.tsx b/src/ServerTable.tsx
index afd2c15..30c7200 100644
--- a/src/ServerTable.tsx
+++ b/src/ServerTable.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Tips, Logo } from "./Utils";
+import { Tips } from "./Utils";
 import * as Papa from 'papaparse';
 const reactcsv = require('react-csv');
 const CSVLink = reactcsv.CSVLink;
@@ -15,12 +15,18 @@ export class ServerTable extends React.Component<any, any> {
       headers: [],
       data: []
     };
-    this.loaded = this.loaded.bind(this);
-    Papa.parse('/data.csv', {
+    const loaded = (results: any) => {
+      const localstate = this;
+      localstate.setState({
+        headers: results.meta.fields,
+        data: results.data
+      });
+    }
+    Papa.parse(this.props.csvPath, {
       header: true,
       download: true,
       skipEmptyLines: true,
-      complete: this.loaded
+      complete: loaded
     });
   }
 
@@ -46,11 +52,13 @@ export class ServerTable extends React.Component<any, any> {
           columns={headerCols}
           defaultPageSize={20}
           className="-striped -highlight"
+          style={{
+            height: "450px"
+          }}
         />
         <br />
         <CSVLink data={data} filename={"data.csv"}>Click here to download CSV file</CSVLink>
         <Tips />
-        <Logo />
       </div>
     );
   }