adds csv viewer

package.json

@@ -44,7 +44,9 @@
     "webpack-dev-server": "^2.4.5"
   },
   "dependencies": {
+    "comma-separated-values": "^3.6.4",
     "react": "^15.5.4",
+    "react-data-grid": "^2.0.42",
     "react-dom": "^15.5.4"
   }
 }

scripts/start.js

@@ -3,7 +3,7 @@ process.on("unhandledRejection", err => {
   throw err;
 });
 
-const PORT = 8080;
+const PORT = 8081;
 
 const webpack = require("webpack");
 const WebpackDevServer = require("webpack-dev-server");

src/app.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import FileViewer from './components/file-viewer.jsx';
 
 ReactDOM.render(
-  <FileViewer />,
+  <FileViewer fileType="csv"
+              filePath="http://spatialkeydocs.s3.amazonaws.com/FL_insurance_sample.csv"/>,
   document.getElementById('app')
 );

src/components/drivers/csv-viewer.jsx

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+
+import ReactDataGrid from "react-data-grid";
+import CSV from "comma-separated-values";
+
+const rowGetter = data => i => data.rows[i];
+
+const parse = data => {
+  const rows = [];
+  const columns = [];
+
+  new CSV(data).forEach(array => {
+    if (columns.length < 1) {
+      array.forEach((cell, idx) => {
+        columns.push({
+          key: `key-${idx}`,
+          name: cell,
+          resizable: true,
+          sortable: true,
+          filterable: true,
+        });
+      });
+    } else {
+      const row = {};
+      array.forEach((cell, idx) => {
+        row[`key-${idx}`] = cell;
+      });
+      rows.push(row);
+    }
+  });
+
+  return { rows, columns };
+};
+
+
+const CsvViewer = props => {
+  const data = parse(props.data)
+
+  return (
+    <ReactDataGrid
+      columns={data.columns}
+      rowsCount={data.rows.length}
+      rowGetter={rowGetter(data)}
+      minHeight={650}
+    />
+  );
+};
+
+export default CsvViewer;

src/components/drivers/index.js

@@ -0,0 +1 @@
+export { default as CsvViewer } from "./csv-viewer.jsx";

src/components/fetch-wrapper.jsx

@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+
+function withFetching(WrappedComponent, props) {
+  return class extends Component {
+    constructor(props) {
+      super(props);
+      this.state = { data: {} };
+      this.xhr = this.createRequest()
+    }
+
+    componentDidMount() {
+      this.fetch(this.props.filePath);
+    }
+
+    componentWillUnmount() {
+      this.abort()
+    }
+
+    render() {
+      if (this.state.data.length > 0 || Object.keys(this.state.data).length > 0) {
+        return <WrappedComponent data={this.state.data} {...this.props} />;
+      } else {
+        return <h1>Loading..</h1>
+      }
+    }
+
+    createRequest() {
+      const xhr = new XMLHttpRequest();
+
+      xhr.onreadystatechange = () => {
+        if (this.xhr.readyState == 4 && this.xhr.status == 200) {
+          this.setState({ data: xhr.responseText })
+        }
+      }
+
+      return xhr;
+    }
+
+    fetch(path) {
+      this.xhr.open("GET", path, true);
+      this.xhr.send();
+    }
+
+    abort() {
+      this.xhr && this.xhr.abort();
+    }
+  }
+};
+
+export default withFetching;

src/components/file-viewer.jsx

@@ -1,11 +1,34 @@
 import React, { Component } from 'react';
 
-export default class FileViewer extends Component {
+import { default as withFetching } from "./fetch-wrapper.jsx";
+import { CsvViewer } from "./drivers";
+
+class FileViewer extends Component {
   render() {
+    let Driver = this.getDriver(this.props.fileType);
+
     return (
       <div className='file-viewer'>
-        Hello, file viewer!
+        <Driver {...this.props} />
       </div>
     );
   }
+
+  getDriver(fileTYpe) {
+    switch (fileTYpe) {
+      case "csv": {
+        return withFetching(CsvViewer)
+      }
+      default: {
+        return <h1>File type is not supported</h1>
+      }
+    }
+  }
+};
+
+FileViewer.propTypes = {
+  fileType: React.PropTypes.string.isRequired,
+  filePath: React.PropTypes.string.isRequired,
 }
+
+export default FileViewer;