From 6fbcc8c30abc593a5384a5d90e910ed20e2fb9bb Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Thu, 28 Dec 2017 16:34:42 +0100
Subject: [PATCH] CSV Response viewer

---
 .../viewers/response-cookies-viewer.js        |  2 +-
 .../components/viewers/response-csv-viewer.js | 69 +++++++++++++++++++
 .../viewers/response-headers-viewer.js        |  2 +-
 .../response-pdf-viewer.js}                   |  4 +-
 .../ui/components/viewers/response-viewer.js  |  9 ++-
 .../insomnia-app/app/ui/css/layout/base.less  |  4 ++
 packages/insomnia-app/flow-typed/papaparse.js |  5 ++
 packages/insomnia-app/package-lock.json       |  5 ++
 packages/insomnia-app/package.json            |  1 +
 9 files changed, 96 insertions(+), 5 deletions(-)
 create mode 100644 packages/insomnia-app/app/ui/components/viewers/response-csv-viewer.js
 rename packages/insomnia-app/app/ui/components/{pdf-viewer.js => viewers/response-pdf-viewer.js} (96%)
 create mode 100644 packages/insomnia-app/flow-typed/papaparse.js

diff --git a/packages/insomnia-app/app/ui/components/viewers/response-cookies-viewer.js b/packages/insomnia-app/app/ui/components/viewers/response-cookies-viewer.js
index 75323e002f..741418614a 100644
--- a/packages/insomnia-app/app/ui/components/viewers/response-cookies-viewer.js
+++ b/packages/insomnia-app/app/ui/components/viewers/response-cookies-viewer.js
@@ -51,7 +51,7 @@ class ResponseCookiesViewer extends PureComponent {
           </div>
         )}
 
-        <table className="table--fancy table--striped">
+        <table className="table--fancy table--striped table--compact">
           <thead>
           <tr>
             <th>Name</th>
diff --git a/packages/insomnia-app/app/ui/components/viewers/response-csv-viewer.js b/packages/insomnia-app/app/ui/components/viewers/response-csv-viewer.js
new file mode 100644
index 0000000000..b57c5cb2c4
--- /dev/null
+++ b/packages/insomnia-app/app/ui/components/viewers/response-csv-viewer.js
@@ -0,0 +1,69 @@
+// @flow
+import * as React from 'react';
+import Papa from 'papaparse';
+import autobind from 'autobind-decorator';
+
+type Props = {
+  body: Buffer
+};
+
+type State = {
+  result: null | {data: Array<Array<string>>}
+};
+
+@autobind
+class ResponseCSVViewer extends React.PureComponent<Props, State> {
+  currentHash: string;
+
+  constructor (props: Props) {
+    super(props);
+    this.state = {
+      result: null
+    };
+    this.currentHash = '';
+  }
+
+  update (body: Buffer) {
+    const csv = body.toString('utf8');
+
+    Papa.parse(csv, {
+      skipEmptyLines: true,
+      complete: result => {
+        this.setState({result});
+      }
+    });
+  }
+
+  componentDidMount () {
+    this.update(this.props.body);
+  }
+
+  componentWillUpdate (nextProps: Props, nextState: State) {
+    if (this.props.body === nextProps.body) {
+      return;
+    }
+
+    this.update(nextProps.body);
+  }
+
+  render () {
+    const {result} = this.state;
+    if (!result) {
+      return 'Parsing CSV...';
+    }
+
+    return (
+      <div className="pad-sm">
+        <table className="table--fancy table--striped table--compact selectable">
+          <tbody>
+          {result.data.map(row => (
+            <tr>{row.map(c => <td>{c}</td>)}</tr>
+          ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}
+
+export default ResponseCSVViewer;
diff --git a/packages/insomnia-app/app/ui/components/viewers/response-headers-viewer.js b/packages/insomnia-app/app/ui/components/viewers/response-headers-viewer.js
index 22fdb79e37..0bad1cfffd 100644
--- a/packages/insomnia-app/app/ui/components/viewers/response-headers-viewer.js
+++ b/packages/insomnia-app/app/ui/components/viewers/response-headers-viewer.js
@@ -14,7 +14,7 @@ class ResponseHeadersViewer extends React.PureComponent<Props> {
     const headersString = headers.map(h => `${h.name}: ${h.value}`).join('\n');
 
     return [
-      <table key='table' className="table--fancy table--striped">
+      <table key='table' className="table--fancy table--striped table--compact">
         <thead>
         <tr>
           <th>Name</th>
diff --git a/packages/insomnia-app/app/ui/components/pdf-viewer.js b/packages/insomnia-app/app/ui/components/viewers/response-pdf-viewer.js
similarity index 96%
rename from packages/insomnia-app/app/ui/components/pdf-viewer.js
rename to packages/insomnia-app/app/ui/components/viewers/response-pdf-viewer.js
index 817856fa2a..a1bc434d50 100644
--- a/packages/insomnia-app/app/ui/components/pdf-viewer.js
+++ b/packages/insomnia-app/app/ui/components/viewers/response-pdf-viewer.js
@@ -13,7 +13,7 @@ type State = {
 };
 
 @autobind
-class PDFViewer extends React.PureComponent<Props, State> {
+class ResponsePDFViewer extends React.PureComponent<Props, State> {
   container: ?HTMLDivElement;
   debounceTimeout: any;
 
@@ -109,4 +109,4 @@ class PDFViewer extends React.PureComponent<Props, State> {
   }
 }
 
-export default PDFViewer;
+export default ResponsePDFViewer;
diff --git a/packages/insomnia-app/app/ui/components/viewers/response-viewer.js b/packages/insomnia-app/app/ui/components/viewers/response-viewer.js
index 341b26a07d..99fe5e1aac 100644
--- a/packages/insomnia-app/app/ui/components/viewers/response-viewer.js
+++ b/packages/insomnia-app/app/ui/components/viewers/response-viewer.js
@@ -3,7 +3,8 @@ import * as React from 'react';
 import iconv from 'iconv-lite';
 import autobind from 'autobind-decorator';
 import {shell} from 'electron';
-import PDFViewer from '../pdf-viewer';
+import PDFViewer from './response-pdf-viewer';
+import CSVViewer from './response-csv-viewer';
 import CodeEditor from '../codemirror/code-editor';
 import ResponseWebView from './response-webview';
 import MultipartViewer from './response-multipart';
@@ -279,6 +280,12 @@ class ResponseViewer extends React.Component<Props, State> {
           <PDFViewer body={bodyBuffer} uniqueKey={responseId}/>
         </div>
       );
+    } else if (previewMode === PREVIEW_MODE_FRIENDLY && ct.indexOf('text/csv') === 0) {
+      return (
+        <div className="tall wide scrollable">
+          <CSVViewer body={bodyBuffer}/>
+        </div>
+      );
     } else if (previewMode === PREVIEW_MODE_FRIENDLY && ct.indexOf('multipart/') === 0) {
       return (
         <MultipartViewer
diff --git a/packages/insomnia-app/app/ui/css/layout/base.less b/packages/insomnia-app/app/ui/css/layout/base.less
index 222155b4e3..f1495e1a8b 100644
--- a/packages/insomnia-app/app/ui/css/layout/base.less
+++ b/packages/insomnia-app/app/ui/css/layout/base.less
@@ -96,6 +96,10 @@ table.table--fancy {
     padding: @padding-sm;
   }
 
+  &.table--compact td, th {
+    padding: @padding-xs;
+  }
+
   th {
     text-align: left;
     padding-bottom: @padding-sm;
diff --git a/packages/insomnia-app/flow-typed/papaparse.js b/packages/insomnia-app/flow-typed/papaparse.js
new file mode 100644
index 0000000000..391545ce11
--- /dev/null
+++ b/packages/insomnia-app/flow-typed/papaparse.js
@@ -0,0 +1,5 @@
+declare module 'papaparse' {
+  declare module.exports: {
+    parse: Function
+  }
+}
diff --git a/packages/insomnia-app/package-lock.json b/packages/insomnia-app/package-lock.json
index 1b567eb54e..39f5e4c089 100644
--- a/packages/insomnia-app/package-lock.json
+++ b/packages/insomnia-app/package-lock.json
@@ -11211,6 +11211,11 @@
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.6.tgz",
       "integrity": "sha512-lQe48YPsMJAig+yngZ87Lus+NF+3mtu7DVOBu6b/gHO1YpKwIj5AWjZ/TOS7i46HD/UixzWb1zeWDZfGZ3iYcg=="
     },
+    "papaparse": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-4.3.6.tgz",
+      "integrity": "sha1-lWbtoOyrE6/LdApiOBxpn0hssUU="
+    },
     "parse-asn1": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.0.tgz",
diff --git a/packages/insomnia-app/package.json b/packages/insomnia-app/package.json
index 159437ab3b..b69717f28c 100644
--- a/packages/insomnia-app/package.json
+++ b/packages/insomnia-app/package.json
@@ -127,6 +127,7 @@
     "node-forge": "^0.7.0",
     "nunjucks": "^3.0.0",
     "oauth-1.0a": "^2.2.2",
+    "papaparse": "^4.3.6",
     "pdfjs-dist": "^1.9.640",
     "prop-types": "^15.5.10",
     "react": "^16.0.0",