From 352c5314ec9aed472d82e298efaba4682ac7f432 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Wed, 3 Oct 2018 17:07:23 +0100
Subject: [PATCH 1/7] add initial non-functional implementation of csv renderer

---
 extensions/oni-plugin-csv-reader/package.json | 29 +++++++++
 .../oni-plugin-csv-reader/src/index.tsx       | 59 +++++++++++++++++++
 extensions/oni-plugin-csv-reader/src/utils.ts | 13 ++++
 .../oni-plugin-csv-reader/tsconfig.json       | 16 +++++
 4 files changed, 117 insertions(+)
 create mode 100644 extensions/oni-plugin-csv-reader/package.json
 create mode 100644 extensions/oni-plugin-csv-reader/src/index.tsx
 create mode 100644 extensions/oni-plugin-csv-reader/src/utils.ts
 create mode 100644 extensions/oni-plugin-csv-reader/tsconfig.json

diff --git a/extensions/oni-plugin-csv-reader/package.json b/extensions/oni-plugin-csv-reader/package.json
new file mode 100644
index 0000000000..69cd1e5ac7
--- /dev/null
+++ b/extensions/oni-plugin-csv-reader/package.json
@@ -0,0 +1,29 @@
+{
+    "name": "oni-plugin-csv-reader",
+    "version": "1.0.0",
+    "description": "A CSV Reader plugin for Oni",
+    "main": "lib/index.js",
+    "author": "A. Sowemimo",
+    "license": "MIT",
+    "engines": {
+        "oni": "^0.2.6"
+    },
+    "scripts": {
+        "build": "rimraf lib && tsc",
+        "test": "jest"
+    },
+    "dependencies": {
+        "oni-api": "^0.0.46",
+        "oni-types": "^0.0.8",
+        "papaparse": "^4.6.0",
+        "react": "^16.4.2"
+    },
+    "devDependencies": {
+        "rimraf": "^2.6.2",
+        "typescript": "^2.9.2"
+    },
+    "peerDependencies": {
+        "jest": "^23.5.0",
+        "styled-components": "^3.2.6"
+    }
+}
diff --git a/extensions/oni-plugin-csv-reader/src/index.tsx b/extensions/oni-plugin-csv-reader/src/index.tsx
new file mode 100644
index 0000000000..c526308fe2
--- /dev/null
+++ b/extensions/oni-plugin-csv-reader/src/index.tsx
@@ -0,0 +1,59 @@
+import * as Oni from "oni-api"
+import * as React from "react"
+import * as path from "path"
+
+import { parseCsvToRowsAndColumn } from "./utils"
+
+const isCompatible = (buf: Oni.EditorBufferEventArgs) => {
+    const ext = path.extname(buf.filePath)
+    return ext === ".csv"
+}
+
+interface IProps {
+    context: Oni.BufferLayerRenderContext
+}
+
+interface IState {
+    csv: string[][]
+}
+
+class CSVReader extends React.Component<IProps, IState> {
+    state = {
+        csv: null,
+    }
+
+    componentDidMount() {
+        this.convertLines()
+    }
+
+    convertLines() {
+        const lines = this.props.context.visibleLines.join("\n")
+        const csv = parseCsvToRowsAndColumn(lines)
+        this.setState({ csv })
+    }
+    render() {
+        console.log("csv: ", this.state.csv)
+        return <div>Reader</div>
+    }
+}
+
+class CSVReaderLayer implements Oni.BufferLayer {
+    public get id() {
+        return "oni.csv.reader"
+    }
+
+    render(context: Oni.BufferLayerRenderContext) {
+        return <CSVReader context={context} />
+    }
+}
+
+export const activate = (oni: Oni.Plugin.Api) => {
+    oni.editors.activeEditor.onBufferEnter.subscribe(buf => {
+        const layer = new CSVReaderLayer()
+        if (isCompatible(buf)) {
+            oni.editors.activeEditor.activeBuffer.addLayer(layer)
+        } else {
+            oni.editors.activeEditor.activeBuffer.removeLayer(layer)
+        }
+    })
+}
diff --git a/extensions/oni-plugin-csv-reader/src/utils.ts b/extensions/oni-plugin-csv-reader/src/utils.ts
new file mode 100644
index 0000000000..0f50304c89
--- /dev/null
+++ b/extensions/oni-plugin-csv-reader/src/utils.ts
@@ -0,0 +1,13 @@
+/**
+ * Converts CSV to HTML Table
+ *
+ */
+
+export function parseCsvToRowsAndColumn(csvText: string, csvColumnDelimiter = "\t") {
+    const rows = csvText.split("\n")
+    const rowsWithColumns = rows.map(row => {
+        return row.split(csvColumnDelimiter)
+    })
+
+    return rowsWithColumns
+}
diff --git a/extensions/oni-plugin-csv-reader/tsconfig.json b/extensions/oni-plugin-csv-reader/tsconfig.json
new file mode 100644
index 0000000000..c71a5d2969
--- /dev/null
+++ b/extensions/oni-plugin-csv-reader/tsconfig.json
@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "moduleResolution": "node",
+        "preserveConstEnums": true,
+        "outDir": "./lib",
+        "jsx": "react",
+        "lib": ["dom", "es2017"],
+        "declaration": true,
+        "sourceMap": true,
+        "target": "es2015",
+        "skipLibCheck": true
+    },
+    "include": ["src/**/*.ts", "src/**/*.tsx"],
+    "exclude": ["node_modules"]
+}

From c0836d56c69f248cce678e4c0329731cb3c5c711 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Wed, 3 Oct 2018 18:21:13 +0100
Subject: [PATCH 2/7] add build to package json, use papaparse and react
 virtualised modules

---
 extensions/oni-plugin-csv-reader/package.json |   4 +-
 .../oni-plugin-csv-reader/src/index.tsx       |  56 ++-
 extensions/oni-plugin-csv-reader/src/utils.ts |  17 +
 package.json                                  | 380 +++++-------------
 4 files changed, 173 insertions(+), 284 deletions(-)

diff --git a/extensions/oni-plugin-csv-reader/package.json b/extensions/oni-plugin-csv-reader/package.json
index 69cd1e5ac7..9ca6288965 100644
--- a/extensions/oni-plugin-csv-reader/package.json
+++ b/extensions/oni-plugin-csv-reader/package.json
@@ -19,11 +19,13 @@
         "react": "^16.4.2"
     },
     "devDependencies": {
+        "@types/papaparse": "^4.5.4",
         "rimraf": "^2.6.2",
         "typescript": "^2.9.2"
     },
     "peerDependencies": {
         "jest": "^23.5.0",
-        "styled-components": "^3.2.6"
+        "styled-components": "^3.2.6",
+        "react-virtualized": "^9.19.1"
     }
 }
diff --git a/extensions/oni-plugin-csv-reader/src/index.tsx b/extensions/oni-plugin-csv-reader/src/index.tsx
index c526308fe2..ee45989ea6 100644
--- a/extensions/oni-plugin-csv-reader/src/index.tsx
+++ b/extensions/oni-plugin-csv-reader/src/index.tsx
@@ -1,8 +1,10 @@
 import * as Oni from "oni-api"
 import * as React from "react"
 import * as path from "path"
+import { ParseResult } from "papaparse"
+import { Table, Column } from "react-virtualized"
 
-import { parseCsvToRowsAndColumn } from "./utils"
+import { parseCsvString } from "./utils"
 
 const isCompatible = (buf: Oni.EditorBufferEventArgs) => {
     const ext = path.extname(buf.filePath)
@@ -14,26 +16,52 @@ interface IProps {
 }
 
 interface IState {
-    csv: string[][]
+    csv: ParseResult["data"]
 }
 
 class CSVReader extends React.Component<IProps, IState> {
     state = {
-        csv: null,
+        csv: [],
     }
 
-    componentDidMount() {
-        this.convertLines()
+    async componentDidMount() {
+        await this.convertLines()
     }
 
-    convertLines() {
+    async convertLines() {
         const lines = this.props.context.visibleLines.join("\n")
-        const csv = parseCsvToRowsAndColumn(lines)
-        this.setState({ csv })
+        try {
+            const { data, errors } = await parseCsvString(lines)
+            console.log("data: ", data)
+            this.setState({ csv: data })
+        } catch (e) {
+            console.log("[Oni-CSV-Reader Error]: ", e)
+        }
     }
     render() {
-        console.log("csv: ", this.state.csv)
-        return <div>Reader</div>
+        return (
+            <Table
+                width={300}
+                height={300}
+                rowHeight={30}
+                headerHeight={20}
+                rowCount={this.state.csv.length}
+                rowGetter={this._getDatum}
+            >
+                <Column dataKey="name" width={90} />
+                <Column
+                    width={210}
+                    disableSort
+                    dataKey="random"
+                    cellRenderer={({ cellData }) => console.log({ cellData }) || cellData}
+                    flexGrow={1}
+                />
+            </Table>
+        )
+    }
+    _getDatum = ({ index }) => {
+        console.log("this.state.csv[index]: ", this.state.csv[index])
+        return this.state.csv[index]
     }
 }
 
@@ -48,12 +76,14 @@ class CSVReaderLayer implements Oni.BufferLayer {
 }
 
 export const activate = (oni: Oni.Plugin.Api) => {
-    oni.editors.activeEditor.onBufferEnter.subscribe(buf => {
+    oni.editors.activeEditor.onBufferEnter.subscribe(async buf => {
         const layer = new CSVReaderLayer()
         if (isCompatible(buf)) {
+            // const ext = path.extname(buf.filePath)
+            // const bufferName = buf.filePath.replace("ext", "")
+            // const preview = await oni.editors.activeEditor.openFile(`CSV PREVIEW`)
+            // preview.addLayer(layer)
             oni.editors.activeEditor.activeBuffer.addLayer(layer)
-        } else {
-            oni.editors.activeEditor.activeBuffer.removeLayer(layer)
         }
     })
 }
diff --git a/extensions/oni-plugin-csv-reader/src/utils.ts b/extensions/oni-plugin-csv-reader/src/utils.ts
index 0f50304c89..98b73218ab 100644
--- a/extensions/oni-plugin-csv-reader/src/utils.ts
+++ b/extensions/oni-plugin-csv-reader/src/utils.ts
@@ -1,3 +1,5 @@
+import * as Papa from "papaparse"
+
 /**
  * Converts CSV to HTML Table
  *
@@ -11,3 +13,18 @@ export function parseCsvToRowsAndColumn(csvText: string, csvColumnDelimiter = "\
 
     return rowsWithColumns
 }
+
+export function parseCsvString(csvString: string) {
+    return new Promise<Papa.ParseResult>((resolve, reject) => {
+        const result = Papa.parse(csvString, {
+            header: true,
+            skipEmptyLines: true,
+            complete: results => {
+                resolve(results)
+            },
+            error(error) {
+                reject(error)
+            },
+        })
+    })
+}
diff --git a/package.json b/package.json
index 5526ff7554..dcc14a67ca 100644
--- a/package.json
+++ b/package.json
@@ -5,14 +5,7 @@
     "homepage": "https://www.onivim.io",
     "version": "0.3.7",
     "description": "Code editor with a modern twist on modal editing - powered by neovim.",
-    "keywords": [
-        "vim",
-        "neovim",
-        "text",
-        "editor",
-        "ide",
-        "vim"
-    ],
+    "keywords": ["vim", "neovim", "text", "editor", "ide", "vim"],
     "main": "./lib/main/src/main.js",
     "bin": {
         "oni": "./lib/cli/src/cli.js",
@@ -50,39 +43,23 @@
         "mac": {
             "artifactName": "${productName}-${version}-osx.${ext}",
             "category": "public.app-category.developer-tools",
-            "target": [
-                "dmg"
-            ],
-            "files": [
-                "bin/osx/**/*"
-            ]
+            "target": ["dmg"],
+            "files": ["bin/osx/**/*"]
         },
         "linux": {
             "artifactName": "${productName}-${version}-${arch}-linux.${ext}",
             "maintainer": "bryphe@outlook.com",
-            "target": [
-                "tar.gz",
-                "deb",
-                "rpm"
-            ]
+            "target": ["tar.gz", "deb", "rpm"]
         },
         "win": {
-            "target": [
-                "zip",
-                "dir"
-            ],
-            "files": [
-                "bin/x86/**/*"
-            ]
+            "target": ["zip", "dir"],
+            "files": ["bin/x86/**/*"]
         },
         "fileAssociations": [
             {
                 "name": "ADA source",
                 "role": "Editor",
-                "ext": [
-                    "adb",
-                    "ads"
-                ]
+                "ext": ["adb", "ads"]
             },
             {
                 "name": "Compiled AppleScript",
@@ -102,20 +79,12 @@
             {
                 "name": "ASP document",
                 "role": "Editor",
-                "ext": [
-                    "asp",
-                    "asa"
-                ]
+                "ext": ["asp", "asa"]
             },
             {
                 "name": "ASP.NET document",
                 "role": "Editor",
-                "ext": [
-                    "aspx",
-                    "ascx",
-                    "asmx",
-                    "ashx"
-                ]
+                "ext": ["aspx", "ascx", "asmx", "ashx"]
             },
             {
                 "name": "BibTeX bibliography",
@@ -130,13 +99,7 @@
             {
                 "name": "C++ source",
                 "role": "Editor",
-                "ext": [
-                    "cc",
-                    "cp",
-                    "cpp",
-                    "cxx",
-                    "c++"
-                ]
+                "ext": ["cc", "cp", "cpp", "cxx", "c++"]
             },
             {
                 "name": "C# source",
@@ -161,10 +124,7 @@
             {
                 "name": "Clojure source",
                 "role": "Editor",
-                "ext": [
-                    "clj",
-                    "cljs"
-                ]
+                "ext": ["clj", "cljs"]
             },
             {
                 "name": "Comma separated values",
@@ -179,20 +139,12 @@
             {
                 "name": "CGI script",
                 "role": "Editor",
-                "ext": [
-                    "cgi",
-                    "fcgi"
-                ]
+                "ext": ["cgi", "fcgi"]
             },
             {
                 "name": "Configuration file",
                 "role": "Editor",
-                "ext": [
-                    "cfg",
-                    "conf",
-                    "config",
-                    "htaccess"
-                ]
+                "ext": ["cfg", "conf", "config", "htaccess"]
             },
             {
                 "name": "Cascading style sheet",
@@ -217,10 +169,7 @@
             {
                 "name": "Erlang source",
                 "role": "Editor",
-                "ext": [
-                    "erl",
-                    "hrl"
-                ]
+                "ext": ["erl", "hrl"]
             },
             {
                 "name": "F-Script source",
@@ -230,32 +179,17 @@
             {
                 "name": "Fortran source",
                 "role": "Editor",
-                "ext": [
-                    "f",
-                    "for",
-                    "fpp",
-                    "f77",
-                    "f90",
-                    "f95"
-                ]
+                "ext": ["f", "for", "fpp", "f77", "f90", "f95"]
             },
             {
                 "name": "Header",
                 "role": "Editor",
-                "ext": [
-                    "h",
-                    "pch"
-                ]
+                "ext": ["h", "pch"]
             },
             {
                 "name": "C++ header",
                 "role": "Editor",
-                "ext": [
-                    "hh",
-                    "hpp",
-                    "hxx",
-                    "h++"
-                ]
+                "ext": ["hh", "hpp", "hxx", "h++"]
             },
             {
                 "name": "Go source",
@@ -265,28 +199,17 @@
             {
                 "name": "GTD document",
                 "role": "Editor",
-                "ext": [
-                    "gtd",
-                    "gtdlog"
-                ]
+                "ext": ["gtd", "gtdlog"]
             },
             {
                 "name": "Haskell source",
                 "role": "Editor",
-                "ext": [
-                    "hs",
-                    "lhs"
-                ]
+                "ext": ["hs", "lhs"]
             },
             {
                 "name": "HTML document",
                 "role": "Editor",
-                "ext": [
-                    "htm",
-                    "html",
-                    "phtml",
-                    "shtml"
-                ]
+                "ext": ["htm", "html", "phtml", "shtml"]
             },
             {
                 "name": "Include file",
@@ -326,10 +249,7 @@
             {
                 "name": "JavaScript source",
                 "role": "Editor",
-                "ext": [
-                    "js",
-                    "htc"
-                ]
+                "ext": ["js", "htc"]
             },
             {
                 "name": "Java Server Page",
@@ -354,14 +274,7 @@
             {
                 "name": "Lisp source",
                 "role": "Editor",
-                "ext": [
-                    "lisp",
-                    "cl",
-                    "l",
-                    "lsp",
-                    "mud",
-                    "el"
-                ]
+                "ext": ["lisp", "cl", "l", "lsp", "mud", "el"]
             },
             {
                 "name": "Log file",
@@ -381,12 +294,7 @@
             {
                 "name": "Markdown document",
                 "role": "Editor",
-                "ext": [
-                    "markdown",
-                    "mdown",
-                    "markdn",
-                    "md"
-                ]
+                "ext": ["markdown", "mdown", "markdn", "md"]
             },
             {
                 "name": "Makefile source",
@@ -396,29 +304,17 @@
             {
                 "name": "Mediawiki document",
                 "role": "Editor",
-                "ext": [
-                    "wiki",
-                    "wikipedia",
-                    "mediawiki"
-                ]
+                "ext": ["wiki", "wikipedia", "mediawiki"]
             },
             {
                 "name": "MIPS assembler source",
                 "role": "Editor",
-                "ext": [
-                    "s",
-                    "mips",
-                    "spim",
-                    "asm"
-                ]
+                "ext": ["s", "mips", "spim", "asm"]
             },
             {
                 "name": "Modula-3 source",
                 "role": "Editor",
-                "ext": [
-                    "m3",
-                    "cm3"
-                ]
+                "ext": ["m3", "cm3"]
             },
             {
                 "name": "MoinMoin document",
@@ -438,28 +334,17 @@
             {
                 "name": "OCaml source",
                 "role": "Editor",
-                "ext": [
-                    "ml",
-                    "mli",
-                    "mll",
-                    "mly"
-                ]
+                "ext": ["ml", "mli", "mll", "mly"]
             },
             {
                 "name": "Mustache document",
                 "role": "Editor",
-                "ext": [
-                    "mustache",
-                    "hbs"
-                ]
+                "ext": ["mustache", "hbs"]
             },
             {
                 "name": "Pascal source",
                 "role": "Editor",
-                "ext": [
-                    "pas",
-                    "p"
-                ]
+                "ext": ["pas", "p"]
             },
             {
                 "name": "Patch file",
@@ -469,11 +354,7 @@
             {
                 "name": "Perl source",
                 "role": "Editor",
-                "ext": [
-                    "pl",
-                    "pod",
-                    "perl"
-                ]
+                "ext": ["pl", "pod", "perl"]
             },
             {
                 "name": "Perl module",
@@ -483,80 +364,47 @@
             {
                 "name": "PHP source",
                 "role": "Editor",
-                "ext": [
-                    "php",
-                    "php3",
-                    "php4",
-                    "php5"
-                ]
+                "ext": ["php", "php3", "php4", "php5"]
             },
             {
                 "name": "PostScript source",
                 "role": "Editor",
-                "ext": [
-                    "ps",
-                    "eps"
-                ]
+                "ext": ["ps", "eps"]
             },
             {
                 "name": "Property list",
                 "role": "Editor",
-                "ext": [
-                    "dict",
-                    "plist",
-                    "scriptSuite",
-                    "scriptTerminology"
-                ]
+                "ext": ["dict", "plist", "scriptSuite", "scriptTerminology"]
             },
             {
                 "name": "Python source",
                 "role": "Editor",
-                "ext": [
-                    "py",
-                    "rpy",
-                    "cpy",
-                    "python"
-                ]
+                "ext": ["py", "rpy", "cpy", "python"]
             },
             {
                 "name": "R source",
                 "role": "Editor",
-                "ext": [
-                    "r",
-                    "s"
-                ]
+                "ext": ["r", "s"]
             },
             {
                 "name": "Ragel source",
                 "role": "Editor",
-                "ext": [
-                    "rl",
-                    "ragel"
-                ]
+                "ext": ["rl", "ragel"]
             },
             {
                 "name": "Remind document",
                 "role": "Editor",
-                "ext": [
-                    "rem",
-                    "remind"
-                ]
+                "ext": ["rem", "remind"]
             },
             {
                 "name": "reStructuredText document",
                 "role": "Editor",
-                "ext": [
-                    "rst",
-                    "rest"
-                ]
+                "ext": ["rst", "rest"]
             },
             {
                 "name": "HTML with embedded Ruby",
                 "role": "Editor",
-                "ext": [
-                    "rhtml",
-                    "erb"
-                ]
+                "ext": ["rhtml", "erb"]
             },
             {
                 "name": "SQL with embedded Ruby",
@@ -566,28 +414,17 @@
             {
                 "name": "Ruby source",
                 "role": "Editor",
-                "ext": [
-                    "rb",
-                    "rbx",
-                    "rjs",
-                    "rxml"
-                ]
+                "ext": ["rb", "rbx", "rjs", "rxml"]
             },
             {
                 "name": "Sass source",
                 "role": "Editor",
-                "ext": [
-                    "sass",
-                    "scss"
-                ]
+                "ext": ["sass", "scss"]
             },
             {
                 "name": "Scheme source",
                 "role": "Editor",
-                "ext": [
-                    "scm",
-                    "sch"
-                ]
+                "ext": ["scm", "sch"]
             },
             {
                 "name": "Setext document",
@@ -635,10 +472,7 @@
             {
                 "name": "SWIG source",
                 "role": "Editor",
-                "ext": [
-                    "i",
-                    "swg"
-                ]
+                "ext": ["i", "swg"]
             },
             {
                 "name": "Tcl source",
@@ -648,20 +482,12 @@
             {
                 "name": "TeX document",
                 "role": "Editor",
-                "ext": [
-                    "tex",
-                    "sty",
-                    "cls"
-                ]
+                "ext": ["tex", "sty", "cls"]
             },
             {
                 "name": "Plain text document",
                 "role": "Editor",
-                "ext": [
-                    "text",
-                    "txt",
-                    "utf8"
-                ]
+                "ext": ["text", "txt", "utf8"]
             },
             {
                 "name": "Textile document",
@@ -681,32 +507,17 @@
             {
                 "name": "XML document",
                 "role": "Editor",
-                "ext": [
-                    "xml",
-                    "xsd",
-                    "xib",
-                    "rss",
-                    "tld",
-                    "pt",
-                    "cpt",
-                    "dtml"
-                ]
+                "ext": ["xml", "xsd", "xib", "rss", "tld", "pt", "cpt", "dtml"]
             },
             {
                 "name": "XSL stylesheet",
                 "role": "Editor",
-                "ext": [
-                    "xsl",
-                    "xslt"
-                ]
+                "ext": ["xsl", "xslt"]
             },
             {
                 "name": "Electronic business card",
                 "role": "Editor",
-                "ext": [
-                    "vcf",
-                    "vcard"
-                ]
+                "ext": ["vcf", "vcard"]
             },
             {
                 "name": "Visual Basic source",
@@ -716,10 +527,7 @@
             {
                 "name": "YAML document",
                 "role": "Editor",
-                "ext": [
-                    "yaml",
-                    "yml"
-                ]
+                "ext": ["yaml", "yml"]
             },
             {
                 "name": "Text document",
@@ -781,8 +589,10 @@
     "scripts": {
         "precommit": "pretty-quick --staged",
         "prepush": "yarn run build && yarn run lint",
-        "build": "yarn run build:browser && yarn run build:webview_preload && yarn run build:main && yarn run build:plugins && yarn run build:cli",
-        "build-debug": "yarn run build:browser-debug && yarn run build:main  && yarn run build:plugins",
+        "build":
+            "yarn run build:browser && yarn run build:webview_preload && yarn run build:main && yarn run build:plugins && yarn run build:cli",
+        "build-debug":
+            "yarn run build:browser-debug && yarn run build:main  && yarn run build:plugins",
         "build:browser": "webpack --config browser/webpack.production.config.js",
         "build:browser-debug": "webpack --config browser/webpack.debug.config.js",
         "build:main": "cd main && tsc -p tsconfig.json",
@@ -790,66 +600,96 @@
         "build:cli": "cd cli && tsc -p tsconfig.json",
         "build:plugin:oni-plugin-typescript": "cd vim/core/oni-plugin-typescript && yarn run build",
         "build:plugin:oni-plugin-git": "cd vim/core/oni-plugin-git && yarn run build",
-        "build:plugin:oni-plugin-markdown-preview": "cd extensions/oni-plugin-markdown-preview && yarn run build",
+        "build:plugin:oni-plugin-markdown-preview":
+            "cd extensions/oni-plugin-markdown-preview && yarn run build",
         "build:plugin:oni-plugin-quickopen": "cd extensions/oni-plugin-quickopen && yarn run build",
+        "build:plugin:oni-plugin-csv-reader":
+            "cd extensions/oni-plugin-csv-reader && yarn run build",
         "build:test": "yarn run build:test:unit && yarn run build:test:integration",
         "build:test:integration": "cd test && tsc -p tsconfig.json",
         "build:test:unit": "run-s build:test:unit:*",
-        "build:test:unit:browser": "rimraf lib_test/browser && cd browser && tsc -p tsconfig.test.json",
+        "build:test:unit:browser":
+            "rimraf lib_test/browser && cd browser && tsc -p tsconfig.test.json",
         "build:test:unit:main": "rimraf lib_test/main && cd main && tsc -p tsconfig.test.json",
         "build:webview_preload": "cd webview_preload && tsc -p tsconfig.json",
         "check-cached-binaries": "node build/script/CheckBinariesForBuild.js",
         "copy-icons": "node build/CopyIcons.js",
-        "debug:test:unit:browser": "cd browser && tsc -p tsconfig.test.json && electron-mocha --interactive --debug --renderer --require testHelpers.js --recursive ../lib_test/browser/test",
-        "demo:screenshot": "yarn run build:test && cross-env DEMO_TEST=HeroScreenshot mocha -t 30000000 lib_test/test/Demo.js",
-        "demo:video": "yarn run build:test && cross-env DEMO_TEST=HeroDemo mocha -t 30000000 lib_test/test/Demo.js",
-        "dist:win:x86": "cross-env ELECTRON_BUILDER_ALLOW_UNRESOLVED_DEPENDENCIES=1 build --arch ia32 --publish never",
-        "dist:win:x64": "cross-env ELECTRON_BUILDER_ALLOW_UNRESOLVED_DEPENDENCIES=1 build --arch x64 --publish never",
-        "pack:win": "node build/BuildSetupTemplate.js && innosetup-compiler dist/setup.iss --verbose --O=dist",
+        "debug:test:unit:browser":
+            "cd browser && tsc -p tsconfig.test.json && electron-mocha --interactive --debug --renderer --require testHelpers.js --recursive ../lib_test/browser/test",
+        "demo:screenshot":
+            "yarn run build:test && cross-env DEMO_TEST=HeroScreenshot mocha -t 30000000 lib_test/test/Demo.js",
+        "demo:video":
+            "yarn run build:test && cross-env DEMO_TEST=HeroDemo mocha -t 30000000 lib_test/test/Demo.js",
+        "dist:win:x86":
+            "cross-env ELECTRON_BUILDER_ALLOW_UNRESOLVED_DEPENDENCIES=1 build --arch ia32 --publish never",
+        "dist:win:x64":
+            "cross-env ELECTRON_BUILDER_ALLOW_UNRESOLVED_DEPENDENCIES=1 build --arch x64 --publish never",
+        "pack:win":
+            "node build/BuildSetupTemplate.js && innosetup-compiler dist/setup.iss --verbose --O=dist",
         "test": "yarn run test:unit && yarn run test:integration",
-        "test:setup": "yarn run build:test:integration && mocha -t 120000 --recursive lib_test/test/setup",
-        "test:integration": "yarn run build:test:integration && mocha -t 120000 lib_test/test/CiTests.js --bail",
+        "test:setup":
+            "yarn run build:test:integration && mocha -t 120000 --recursive lib_test/test/setup",
+        "test:integration":
+            "yarn run build:test:integration && mocha -t 120000 lib_test/test/CiTests.js --bail",
         "test:unit:react": "jest --config ./jest.config.js ./ui-tests",
         "test:unit:react:watch": "jest --config ./jest.config.js ./ui-tests --watch",
         "test:unit:react:coverage": "jest --config ./jest.config.js ./ui-tests --coverage",
-        "test:unit:browser": "yarn run build:test:unit:browser && cd browser && electron-mocha --renderer --require testHelpers.js --recursive ../lib_test/browser/test",
-        "test:unit": "yarn run test:unit:browser && yarn run test:unit:main && yarn run test:unit:react",
-        "test:unit:main": "yarn run build:test:unit:main && cd main && electron-mocha --renderer --recursive ../lib_test/main/test",
+        "test:unit:browser":
+            "yarn run build:test:unit:browser && cd browser && electron-mocha --renderer --require testHelpers.js --recursive ../lib_test/browser/test",
+        "test:unit":
+            "yarn run test:unit:browser && yarn run test:unit:main && yarn run test:unit:react",
+        "test:unit:main":
+            "yarn run build:test:unit:main && cd main && electron-mocha --renderer --recursive ../lib_test/main/test",
         "upload:dist": "node build/script/UploadDistributionBuildsToAzure",
         "fix-lint": "run-p fix-lint:*",
-        "fix-lint:browser": "tslint --fix --project browser/tsconfig.json --exclude **/node_modules/**/* --config tslint.json && tslint --fix --project vim/core/oni-plugin-typescript/tsconfig.json --config tslint.json && tslint --fix --project extensions/oni-plugin-markdown-preview/tsconfig.json --config tslint.json",
+        "fix-lint:browser":
+            "tslint --fix --project browser/tsconfig.json --exclude **/node_modules/**/* --config tslint.json && tslint --fix --project vim/core/oni-plugin-typescript/tsconfig.json --config tslint.json && tslint --fix --project extensions/oni-plugin-markdown-preview/tsconfig.json --config tslint.json",
         "fix-lint:cli": "tslint --fix --project cli/tsconfig.json --config tslint.json",
         "fix-lint:main": "tslint --fix --project main/tsconfig.json --config tslint.json",
         "fix-lint:test": "tslint --fix --project test/tsconfig.json --config tslint.json",
         "lint": "yarn run lint:browser && yarn run lint:main && yarn run lint:test",
-        "lint:browser": "tslint --project browser/tsconfig.json --config tslint.json && tslint --project vim/core/oni-plugin-typescript/tsconfig.json --config tslint.json && tslint --project extensions/oni-plugin-markdown-preview/tsconfig.json --config tslint.json",
+        "lint:browser":
+            "tslint --project browser/tsconfig.json --config tslint.json && tslint --project vim/core/oni-plugin-typescript/tsconfig.json --config tslint.json && tslint --project extensions/oni-plugin-markdown-preview/tsconfig.json --config tslint.json",
         "lint:cli": "tslint --project cli/tsconfig.json --config tslint.json",
         "lint:main": "tslint --project main/tsconfig.json --config tslint.json",
-        "lint:test": "tslint --project test/tsconfig.json --config tslint.json && tslint vim/core/oni-plugin-typescript/src/**/*.ts && tslint extensions/oni-plugin-markdown-preview/src/**/*.ts",
+        "lint:test":
+            "tslint --project test/tsconfig.json --config tslint.json && tslint vim/core/oni-plugin-typescript/src/**/*.ts && tslint extensions/oni-plugin-markdown-preview/src/**/*.ts",
         "pack": "cross-env ELECTRON_BUILDER_ALLOW_UNRESOLVED_DEPENDENCIES=1 build --publish never",
-        "ccov:instrument": "nyc instrument --all true --sourceMap false lib_test/browser/src lib_test/browser/src_ccov",
-        "ccov:test:browser": "cross-env ONI_CCOV=1 electron-mocha --renderer --require browser/testHelpers.js -R browser/testCoverageReporter --recursive lib_test/browser/test",
-        "ccov:remap:browser:html": "cd lib_test/browser/src && remap-istanbul --input ../../../coverage/coverage-final.json --output html-report --type html",
-        "ccov:remap:browser:lcov": "cd lib_test/browser/src && remap-istanbul --input ../../../coverage/coverage-final.json --output lcov.info --type lcovonly",
+        "ccov:instrument":
+            "nyc instrument --all true --sourceMap false lib_test/browser/src lib_test/browser/src_ccov",
+        "ccov:test:browser":
+            "cross-env ONI_CCOV=1 electron-mocha --renderer --require browser/testHelpers.js -R browser/testCoverageReporter --recursive lib_test/browser/test",
+        "ccov:remap:browser:html":
+            "cd lib_test/browser/src && remap-istanbul --input ../../../coverage/coverage-final.json --output html-report --type html",
+        "ccov:remap:browser:lcov":
+            "cd lib_test/browser/src && remap-istanbul --input ../../../coverage/coverage-final.json --output lcov.info --type lcovonly",
         "ccov:clean": "rimraf coverage",
         "ccov:upload:jest": "cd ./coverage/jest && codecov",
         "ccov:upload": "codecov",
         "launch": "electron lib/main/src/main.js",
-        "start": "concurrently --kill-others \"yarn run start-hot\" \"yarn run watch:browser\" \"yarn run watch:plugins\"",
-        "start-hot": "cross-env ONI_WEBPACK_LOAD=1 NODE_ENV=development electron lib/main/src/main.js",
+        "start":
+            "concurrently --kill-others \"yarn run start-hot\" \"yarn run watch:browser\" \"yarn run watch:plugins\"",
+        "start-hot":
+            "cross-env ONI_WEBPACK_LOAD=1 NODE_ENV=development electron lib/main/src/main.js",
         "start-not-dev": "cross-env electron main.js",
-        "watch:browser": "webpack-dev-server --config browser/webpack.development.config.js --host localhost --port 8191",
+        "watch:browser":
+            "webpack-dev-server --config browser/webpack.development.config.js --host localhost --port 8191",
         "watch:plugins": "run-p --race watch:plugins:*",
         "watch:plugins:oni-plugin-typescript": "cd vim/core/oni-plugin-typescript && tsc --watch",
-        "watch:plugins:oni-plugin-markdown-preview": "cd extensions/oni-plugin-markdown-preview && tsc --watch",
+        "watch:plugins:oni-plugin-markdown-preview":
+            "cd extensions/oni-plugin-markdown-preview && tsc --watch",
         "watch:plugins:oni-plugin-git": "cd vim/core/oni-plugin-git && tsc --watch",
         "watch:plugins:oni-plugin-quickopen": "cd extensions/oni-plugin-quickopen && tsc --watch",
+        "watch:plugins:oni-plugin-csv-reader": "cd extensions/oni-plugin-csv-reader && tsc --watch",
         "install:plugins": "run-s install:plugins:*",
-        "install:plugins:oni-plugin-markdown-preview": "cd extensions/oni-plugin-markdown-preview && yarn install --prod",
-        "install:plugins:oni-plugin-prettier": "cd extensions/oni-plugin-prettier && yarn install --prod",
+        "install:plugins:oni-plugin-markdown-preview":
+            "cd extensions/oni-plugin-markdown-preview && yarn install --prod",
+        "install:plugins:oni-plugin-prettier":
+            "cd extensions/oni-plugin-prettier && yarn install --prod",
         "install:plugins:oni-plugin-git": "cd vim/core/oni-plugin-git && yarn install --prod",
         "postinstall": "yarn run install:plugins && electron-rebuild && opencollective postinstall",
-        "profile:webpack": "webpack --config browser/webpack.production.config.js --profile --json > stats.json && webpack-bundle-analyzer browser/stats.json"
+        "profile:webpack":
+            "webpack --config browser/webpack.production.config.js --profile --json > stats.json && webpack-bundle-analyzer browser/stats.json"
     },
     "repository": {
         "type": "git",

From db8ea82ad97ad31086a3ea0769661a440ac3720c Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Thu, 4 Oct 2018 18:54:50 +0100
Subject: [PATCH 3/7] remove virtualized due to +++ complexity

---
 .../oni-plugin-csv-reader/src/index.tsx       | 109 +++++++++++++-----
 1 file changed, 78 insertions(+), 31 deletions(-)

diff --git a/extensions/oni-plugin-csv-reader/src/index.tsx b/extensions/oni-plugin-csv-reader/src/index.tsx
index ee45989ea6..e34f11e60f 100644
--- a/extensions/oni-plugin-csv-reader/src/index.tsx
+++ b/extensions/oni-plugin-csv-reader/src/index.tsx
@@ -1,8 +1,8 @@
 import * as Oni from "oni-api"
 import * as React from "react"
 import * as path from "path"
+import styled from "styled-components"
 import { ParseResult } from "papaparse"
-import { Table, Column } from "react-virtualized"
 
 import { parseCsvString } from "./utils"
 
@@ -12,72 +12,119 @@ const isCompatible = (buf: Oni.EditorBufferEventArgs) => {
 }
 
 interface IProps {
+    log: (args: any) => void
     context: Oni.BufferLayerRenderContext
 }
 
 interface IState {
-    csv: ParseResult["data"]
+    rows: ParseResult["data"]
 }
 
+const Table = styled.table`
+    border-radius: 8px;
+    width: 90%;
+`
+
+const TableBody = styled.tbody``
+
+const TableHeader = styled.thead`
+    background-color: rgba(100, 100, 100, 0.5);
+`
+const TableRow = styled.tr``
+
+const TableCell = styled.td`
+    background-color: white;
+    text-align: center;
+`
+
+const Container = styled<{ csvPreviewBackground?: string }, "div">("div")`
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: ${p => p.csvPreviewBackground || "black"};
+`
+
 class CSVReader extends React.Component<IProps, IState> {
     state = {
-        csv: [],
+        rows: [],
     }
 
     async componentDidMount() {
-        await this.convertLines()
+        const rows = await this.convertLines()
+        this.setState({ rows })
     }
 
-    async convertLines() {
+    public convertLines = async () => {
         const lines = this.props.context.visibleLines.join("\n")
         try {
             const { data, errors } = await parseCsvString(lines)
-            console.log("data: ", data)
-            this.setState({ csv: data })
+            this.props.log(data)
+            return data
         } catch (e) {
-            console.log("[Oni-CSV-Reader Error]: ", e)
+            this.props.log(e)
+            return []
         }
     }
-    render() {
+
+    _renderHeader = () => {
+        const [firstObj] = this.state.rows
+        if (firstObj) {
+            const keys = Object.keys(firstObj)
+            return (
+                <TableHeader>
+                    <tr>{keys.map((key, idx) => <th key={idx}>{key}</th>)}</tr>
+                </TableHeader>
+            )
+        }
+        return null
+    }
+
+    _renderBody = () => {
         return (
-            <Table
-                width={300}
-                height={300}
-                rowHeight={30}
-                headerHeight={20}
-                rowCount={this.state.csv.length}
-                rowGetter={this._getDatum}
-            >
-                <Column dataKey="name" width={90} />
-                <Column
-                    width={210}
-                    disableSort
-                    dataKey="random"
-                    cellRenderer={({ cellData }) => console.log({ cellData }) || cellData}
-                    flexGrow={1}
-                />
-            </Table>
+            <TableBody>
+                {this.state.rows.map((row, rowIdx) => (
+                    <TableRow key={`row-${rowIdx}`}>
+                        {Object.values(row).map((item, idx) => (
+                            <TableCell key={`${item}-${idx}`}>{item}</TableCell>
+                        ))}
+                    </TableRow>
+                ))}
+            </TableBody>
         )
     }
-    _getDatum = ({ index }) => {
-        console.log("this.state.csv[index]: ", this.state.csv[index])
-        return this.state.csv[index]
+
+    render() {
+        return (
+            <Container>
+                <Table id="oni-csv-reader">
+                    {this._renderHeader()}
+                    {this._renderBody()}
+                </Table>
+            </Container>
+        )
     }
 }
 
 class CSVReaderLayer implements Oni.BufferLayer {
+    constructor(private _oni: Oni.Plugin.Api) {}
+    public log = (...args) => {
+        this._oni.log(...args)
+    }
     public get id() {
         return "oni.csv.reader"
     }
 
     render(context: Oni.BufferLayerRenderContext) {
-        return <CSVReader context={context} />
+        return <CSVReader context={context} log={this.log} />
     }
 }
 
 export const activate = (oni: Oni.Plugin.Api) => {
     oni.editors.activeEditor.onBufferEnter.subscribe(async buf => {
-        const layer = new CSVReaderLayer()
+        const layer = new CSVReaderLayer(oni)
         if (isCompatible(buf)) {
             // const ext = path.extname(buf.filePath)
             // const bufferName = buf.filePath.replace("ext", "")

From ea0b166da01ea9e34dfda71d86085a8a66537232 Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Thu, 4 Oct 2018 19:43:30 +0100
Subject: [PATCH 4/7] add title pass down config and command

---
 .../oni-plugin-csv-reader/src/index.tsx       | 138 +++++++++++++++---
 1 file changed, 114 insertions(+), 24 deletions(-)

diff --git a/extensions/oni-plugin-csv-reader/src/index.tsx b/extensions/oni-plugin-csv-reader/src/index.tsx
index e34f11e60f..a91e8050c1 100644
--- a/extensions/oni-plugin-csv-reader/src/index.tsx
+++ b/extensions/oni-plugin-csv-reader/src/index.tsx
@@ -11,15 +11,29 @@ const isCompatible = (buf: Oni.EditorBufferEventArgs) => {
     return ext === ".csv"
 }
 
+interface IPreviewConfig {
+    maxRowsToRender: number
+    previewBackgroundColor: string
+    hasHeader: boolean
+}
+
 interface IProps {
-    log: (args: any) => void
+    log: (...args: any[]) => void
+    setupCommand: (c: Oni.Commands.ICommand) => void
+    title: string
+    config: IPreviewConfig
     context: Oni.BufferLayerRenderContext
 }
 
 interface IState {
     rows: ParseResult["data"]
+    isShowing: boolean
 }
 
+const Title = styled<{ titleColor?: string }, "h4">("h4")`
+    color: ${p => p.titleColor || "white"};
+`
+
 const Table = styled.table`
     border-radius: 8px;
     width: 90%;
@@ -37,45 +51,89 @@ const TableCell = styled.td`
     text-align: center;
 `
 
-const Container = styled<{ csvPreviewBackground?: string }, "div">("div")`
+const Container = styled<{ previewBackgroundColor?: string }, "div">("div")`
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    background-color: ${p => p.csvPreviewBackground || "black"};
+    position: relative;
+    z-index: 3;
+    background-color: ${p => p.previewBackgroundColor || "black"};
+`
+
+interface IIndicator {
+    isShowing: boolean
+    togglePreview: () => void
+}
+
+const IndicatorCircle = styled<Partial<IIndicator>, "div">("div")`
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    background-color: whitesmoke;
+    position: absolute;
+    top: 2rem;
+    right: 2rem;
+    box-shadow: -1px 0 3px rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
 `
 
+const PreviewIndicator: React.SFC<IIndicator> = ({ togglePreview, isShowing }) => {
+    return (
+        isShowing && (
+            <IndicatorCircle onClick={togglePreview}>
+                <span>hide</span>
+            </IndicatorCircle>
+        )
+    )
+}
+
 class CSVReader extends React.Component<IProps, IState> {
     state = {
         rows: [],
+        isShowing: true,
     }
 
     async componentDidMount() {
+        this.props.setupCommand({
+            name: "",
+            detail: "",
+            command: "oni.csv.preview.toggle",
+            execute: this.togglePreview,
+        })
         const rows = await this.convertLines()
         this.setState({ rows })
     }
 
+    public togglePreview = () => this.setState({ isShowing: !this.state.isShowing })
+
     public convertLines = async () => {
         const lines = this.props.context.visibleLines.join("\n")
         try {
             const { data, errors } = await parseCsvString(lines)
-            this.props.log(data)
+            this.props.log("[Oni Plugin CSV Reader - Result]", data)
             return data
         } catch (e) {
-            this.props.log(e)
+            this.props.log("[Oni Plugin CSV Reader - Errror]", e)
             return []
         }
     }
 
+    _orNull<T, S>(el: T, comp: S) {
+        return el ? comp : null
+    }
+
     _renderHeader = () => {
         const [firstObj] = this.state.rows
         if (firstObj) {
             const keys = Object.keys(firstObj)
             return (
                 <TableHeader>
-                    <tr>{keys.map((key, idx) => <th key={idx}>{key}</th>)}</tr>
+                    <tr>{keys.map((key, idx) => this._orNull(key, <th key={idx}>{key}</th>))}</tr>
                 </TableHeader>
             )
         }
@@ -83,13 +141,17 @@ class CSVReader extends React.Component<IProps, IState> {
     }
 
     _renderBody = () => {
+        const section = this.state.rows.slice(0, this.props.config.maxRowsToRender)
         return (
             <TableBody>
-                {this.state.rows.map((row, rowIdx) => (
+                {section.map((row, rowIdx) => (
                     <TableRow key={`row-${rowIdx}`}>
-                        {Object.values(row).map((item, idx) => (
-                            <TableCell key={`${item}-${idx}`}>{item}</TableCell>
-                        ))}
+                        {Object.values(row).map((item, idx) =>
+                            this._orNull(
+                                item,
+                                <TableCell key={`${item}-${idx}`}>{item}</TableCell>,
+                            ),
+                        )}
                     </TableRow>
                 ))}
             </TableBody>
@@ -97,39 +159,67 @@ class CSVReader extends React.Component<IProps, IState> {
     }
 
     render() {
+        const { isShowing } = this.state
         return (
-            <Container>
-                <Table id="oni-csv-reader">
-                    {this._renderHeader()}
-                    {this._renderBody()}
-                </Table>
-            </Container>
+            isShowing && (
+                <Container>
+                    <PreviewIndicator togglePreview={this.togglePreview} isShowing={isShowing} />
+                    <Title>{this.props.title}</Title>
+                    <Table id="oni-csv-reader">
+                        {this._renderHeader()}
+                        {this._renderBody()}
+                    </Table>
+                    )}
+                </Container>
+            )
         )
     }
 }
 
 class CSVReaderLayer implements Oni.BufferLayer {
-    constructor(private _oni: Oni.Plugin.Api) {}
+    constructor(private _oni: Oni.Plugin.Api, private _title: string) {}
+
+    private _defaultConfig: IPreviewConfig = {
+        maxRowsToRender: 100,
+        previewBackgroundColor: "black",
+        hasHeader: true,
+    }
+
     public log = (...args) => {
-        this._oni.log(...args)
+        this._oni.log.info(...args)
     }
+
+    public getConfig = () => {
+        const config = this._oni.configuration.getValue<IPreviewConfig>("experimental.csv.preview")
+        return config || this._defaultConfig
+    }
+
+    public setupCommand = (command: Oni.Commands.ICommand) => {
+        this._oni.commands.registerCommand(command)
+    }
+
     public get id() {
         return "oni.csv.reader"
     }
 
     render(context: Oni.BufferLayerRenderContext) {
-        return <CSVReader context={context} log={this.log} />
+        return (
+            <CSVReader
+                context={context}
+                title={this._title}
+                log={this.log}
+                setupCommand={this.setupCommand}
+                config={this.getConfig()}
+            />
+        )
     }
 }
 
 export const activate = (oni: Oni.Plugin.Api) => {
     oni.editors.activeEditor.onBufferEnter.subscribe(async buf => {
-        const layer = new CSVReaderLayer(oni)
+        const title = `CSV PREVIEW - "${buf.filePath}"`
+        const layer = new CSVReaderLayer(oni, title)
         if (isCompatible(buf)) {
-            // const ext = path.extname(buf.filePath)
-            // const bufferName = buf.filePath.replace("ext", "")
-            // const preview = await oni.editors.activeEditor.openFile(`CSV PREVIEW`)
-            // preview.addLayer(layer)
             oni.editors.activeEditor.activeBuffer.addLayer(layer)
         }
     })

From c01672e6e969d7f575dcdf22b661de90b5bdd68d Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Thu, 4 Oct 2018 20:31:05 +0100
Subject: [PATCH 5/7] add pagination

---
 .../oni-plugin-csv-reader/src/index.tsx       | 89 +++++++++++++------
 1 file changed, 64 insertions(+), 25 deletions(-)

diff --git a/extensions/oni-plugin-csv-reader/src/index.tsx b/extensions/oni-plugin-csv-reader/src/index.tsx
index a91e8050c1..cc7573a57c 100644
--- a/extensions/oni-plugin-csv-reader/src/index.tsx
+++ b/extensions/oni-plugin-csv-reader/src/index.tsx
@@ -28,9 +28,14 @@ interface IProps {
 interface IState {
     rows: ParseResult["data"]
     isShowing: boolean
+    currentPage: number
+    pageSize: number
+    currentSection: ParseResult["data"]
 }
 
 const Title = styled<{ titleColor?: string }, "h4">("h4")`
+    width: 100%;
+    text-align: center;
     color: ${p => p.titleColor || "white"};
 `
 
@@ -60,21 +65,27 @@ const Container = styled<{ previewBackgroundColor?: string }, "div">("div")`
     justify-content: center;
     position: relative;
     z-index: 3;
+    overflow: hidden;
     background-color: ${p => p.previewBackgroundColor || "black"};
+    pointer-events: all;
+
+    &:hover {
+        overflow: overlay;
+    }
 `
 
 interface IIndicator {
-    isShowing: boolean
-    togglePreview: () => void
+    changePage: (evt: any) => void
+    page: number
 }
 
-const IndicatorCircle = styled<Partial<IIndicator>, "div">("div")`
+const IndicatorCircle = styled<{}, "div">("div")`
     width: 3rem;
     height: 3rem;
     border-radius: 50%;
     background-color: whitesmoke;
     position: absolute;
-    top: 2rem;
+    bottom: 2rem;
     right: 2rem;
     box-shadow: -1px 0 3px rgba(0, 0, 0, 0.5);
     display: flex;
@@ -82,35 +93,42 @@ const IndicatorCircle = styled<Partial<IIndicator>, "div">("div")`
     align-items: center;
 `
 
-const PreviewIndicator: React.SFC<IIndicator> = ({ togglePreview, isShowing }) => {
+const PageIndicator: React.SFC<IIndicator> = ({ changePage, page }) => {
     return (
-        isShowing && (
-            <IndicatorCircle onClick={togglePreview}>
-                <span>hide</span>
-            </IndicatorCircle>
-        )
+        <IndicatorCircle onClick={changePage}>
+            <span>{page}</span>
+        </IndicatorCircle>
     )
 }
 
 class CSVReader extends React.Component<IProps, IState> {
     state = {
         rows: [],
+        currentSection: [],
+        currentPage: 1,
+        pageSize: 30,
         isShowing: true,
     }
 
     async componentDidMount() {
-        this.props.setupCommand({
-            name: "",
-            detail: "",
-            command: "oni.csv.preview.toggle",
-            execute: this.togglePreview,
-        })
+        this._setupCommands()
         const rows = await this.convertLines()
-        this.setState({ rows })
+        this.setState({ rows }, this.changePage)
     }
 
     public togglePreview = () => this.setState({ isShowing: !this.state.isShowing })
 
+    public changePage = (step: number = 0) => {
+        const { currentPage, rows, pageSize } = this.state
+        const noOfPages = Math.ceil(rows.length / pageSize)
+        const nextPage = currentPage + step
+        const pageToUse = nextPage > noOfPages ? 1 : nextPage
+        const indexOfLastItem = pageToUse * pageSize
+        const indexOfFirstItem = indexOfLastItem - pageSize
+        const nextSection = this.state.rows.slice(indexOfFirstItem, indexOfLastItem)
+        this.setState({ currentSection: nextSection, currentPage: pageToUse })
+    }
+
     public convertLines = async () => {
         const lines = this.props.context.visibleLines.join("\n")
         try {
@@ -123,6 +141,29 @@ class CSVReader extends React.Component<IProps, IState> {
         }
     }
 
+    _setupCommands = () => {
+        this.props.setupCommand({
+            name: "",
+            detail: "",
+            command: "oni.csv.preview.toggle",
+            execute: this.togglePreview,
+        })
+
+        this.props.setupCommand({
+            name: "",
+            detail: "",
+            command: "oni.csv.preview.next",
+            execute: () => this.changePage(1),
+        })
+
+        this.props.setupCommand({
+            name: "",
+            detail: "",
+            command: "oni.csv.preview.previous",
+            execute: () => this.changePage(-1),
+        })
+    }
+
     _orNull<T, S>(el: T, comp: S) {
         return el ? comp : null
     }
@@ -141,10 +182,9 @@ class CSVReader extends React.Component<IProps, IState> {
     }
 
     _renderBody = () => {
-        const section = this.state.rows.slice(0, this.props.config.maxRowsToRender)
         return (
             <TableBody>
-                {section.map((row, rowIdx) => (
+                {this.state.currentSection.map((row, rowIdx) => (
                     <TableRow key={`row-${rowIdx}`}>
                         {Object.values(row).map((item, idx) =>
                             this._orNull(
@@ -159,17 +199,16 @@ class CSVReader extends React.Component<IProps, IState> {
     }
 
     render() {
-        const { isShowing } = this.state
+        const { isShowing, currentPage } = this.state
         return (
             isShowing && (
-                <Container>
-                    <PreviewIndicator togglePreview={this.togglePreview} isShowing={isShowing} />
+                <Container id="oni-csv-reader">
                     <Title>{this.props.title}</Title>
-                    <Table id="oni-csv-reader">
+                    <Table>
                         {this._renderHeader()}
                         {this._renderBody()}
                     </Table>
-                    )}
+                    <PageIndicator page={currentPage} changePage={() => this.changePage(1)} />
                 </Container>
             )
         )
@@ -185,7 +224,7 @@ class CSVReaderLayer implements Oni.BufferLayer {
         hasHeader: true,
     }
 
-    public log = (...args) => {
+    public log = (...args: any[]) => {
         this._oni.log.info(...args)
     }
 

From ac871a56f9244bf9f071c8eb6b1a7c72d95f70bd Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Thu, 4 Oct 2018 21:54:46 +0100
Subject: [PATCH 6/7] rename max rows var add some error handling for csv
 parsing

---
 .../oni-plugin-csv-reader/src/index.tsx       | 95 +++++++++++++------
 1 file changed, 64 insertions(+), 31 deletions(-)

diff --git a/extensions/oni-plugin-csv-reader/src/index.tsx b/extensions/oni-plugin-csv-reader/src/index.tsx
index cc7573a57c..2c5bbe2763 100644
--- a/extensions/oni-plugin-csv-reader/src/index.tsx
+++ b/extensions/oni-plugin-csv-reader/src/index.tsx
@@ -12,7 +12,7 @@ const isCompatible = (buf: Oni.EditorBufferEventArgs) => {
 }
 
 interface IPreviewConfig {
-    maxRowsToRender: number
+    rowsPerPage: number
     previewBackgroundColor: string
     hasHeader: boolean
 }
@@ -27,6 +27,7 @@ interface IProps {
 
 interface IState {
     rows: ParseResult["data"]
+    error: string
     isShowing: boolean
     currentPage: number
     pageSize: number
@@ -44,7 +45,14 @@ const Table = styled.table`
     width: 90%;
 `
 
-const TableBody = styled.tbody``
+const TableBody = styled.tbody`
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    &:hover {
+        overflow: overlay;
+    }
+`
 
 const TableHeader = styled.thead`
     background-color: rgba(100, 100, 100, 0.5);
@@ -65,13 +73,8 @@ const Container = styled<{ previewBackgroundColor?: string }, "div">("div")`
     justify-content: center;
     position: relative;
     z-index: 3;
-    overflow: hidden;
-    background-color: ${p => p.previewBackgroundColor || "black"};
+    background-color: ${p => p.previewBackgroundColor};
     pointer-events: all;
-
-    &:hover {
-        overflow: overlay;
-    }
 `
 
 interface IIndicator {
@@ -87,7 +90,7 @@ const IndicatorCircle = styled<{}, "div">("div")`
     position: absolute;
     bottom: 2rem;
     right: 2rem;
-    box-shadow: -1px 0 3px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.5);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -102,18 +105,24 @@ const PageIndicator: React.SFC<IIndicator> = ({ changePage, page }) => {
 }
 
 class CSVReader extends React.Component<IProps, IState> {
-    state = {
+    state: IState = {
         rows: [],
+        error: null,
         currentSection: [],
         currentPage: 1,
-        pageSize: 30,
         isShowing: true,
+        pageSize: this.props.config.rowsPerPage,
     }
 
     async componentDidMount() {
         this._setupCommands()
-        const rows = await this.convertLines()
-        this.setState({ rows }, this.changePage)
+        await this._loadCsv()
+    }
+
+    async componentDidUpdate(prevProps: IProps) {
+        if (prevProps.context.visibleLines !== this.props.context.visibleLines) {
+            await this._loadCsv()
+        }
     }
 
     public togglePreview = () => this.setState({ isShowing: !this.state.isShowing })
@@ -135,12 +144,18 @@ class CSVReader extends React.Component<IProps, IState> {
             const { data, errors } = await parseCsvString(lines)
             this.props.log("[Oni Plugin CSV Reader - Result]", data)
             return data
-        } catch (e) {
-            this.props.log("[Oni Plugin CSV Reader - Errror]", e)
+        } catch (error) {
+            this.props.log("[Oni Plugin CSV Reader - Error]", error)
+            this.setState({ error: error.message })
             return []
         }
     }
 
+    _loadCsv = async () => {
+        const rows = await this.convertLines()
+        this.setState({ rows }, this.changePage)
+    }
+
     _setupCommands = () => {
         this.props.setupCommand({
             name: "",
@@ -168,17 +183,22 @@ class CSVReader extends React.Component<IProps, IState> {
         return el ? comp : null
     }
 
-    _renderHeader = () => {
-        const [firstObj] = this.state.rows
-        if (firstObj) {
-            const keys = Object.keys(firstObj)
+    _renderHeader = (hasHeader: boolean) => {
+        const [firstItem] = this.state.currentSection
+        if (!hasHeader || !firstItem) {
+            return null
+        }
+        if (firstItem) {
             return (
                 <TableHeader>
-                    <tr>{keys.map((key, idx) => this._orNull(key, <th key={idx}>{key}</th>))}</tr>
+                    <tr>
+                        {Object.keys(firstItem).map((key, idx) =>
+                            this._orNull(key, <th key={idx}>{key}</th>),
+                        )}
+                    </tr>
                 </TableHeader>
             )
         }
-        return null
     }
 
     _renderBody = () => {
@@ -199,16 +219,29 @@ class CSVReader extends React.Component<IProps, IState> {
     }
 
     render() {
-        const { isShowing, currentPage } = this.state
+        const { config } = this.props
+        const { isShowing, currentPage, error } = this.state
         return (
             isShowing && (
-                <Container id="oni-csv-reader">
-                    <Title>{this.props.title}</Title>
-                    <Table>
-                        {this._renderHeader()}
-                        {this._renderBody()}
-                    </Table>
-                    <PageIndicator page={currentPage} changePage={() => this.changePage(1)} />
+                <Container
+                    id="oni-csv-reader"
+                    previewBackgroundColor={config.previewBackgroundColor}
+                >
+                    {!error ? (
+                        <>
+                            <Title>{this.props.title}</Title>
+                            <Table>
+                                {this._renderHeader(config.hasHeader)}
+                                {this._renderBody()}
+                            </Table>
+                            <PageIndicator
+                                page={currentPage}
+                                changePage={() => this.changePage(1)}
+                            />
+                        </>
+                    ) : (
+                        <Title>{error}</Title>
+                    )}
                 </Container>
             )
         )
@@ -219,8 +252,8 @@ class CSVReaderLayer implements Oni.BufferLayer {
     constructor(private _oni: Oni.Plugin.Api, private _title: string) {}
 
     private _defaultConfig: IPreviewConfig = {
-        maxRowsToRender: 100,
-        previewBackgroundColor: "black",
+        rowsPerPage: 30,
+        previewBackgroundColor: "rgba(0, 0, 0, 0.8)",
         hasHeader: true,
     }
 

From 6af3dd94687cfdd65ee4153a67ddf159b3e2042c Mon Sep 17 00:00:00 2001
From: Akin909 <akin.sowemimo@gmail.com>
Date: Fri, 5 Oct 2018 09:06:30 +0100
Subject: [PATCH 7/7] add install command for csv reader

---
 package.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/package.json b/package.json
index dcc14a67ca..0baecc499e 100644
--- a/package.json
+++ b/package.json
@@ -686,6 +686,8 @@
             "cd extensions/oni-plugin-markdown-preview && yarn install --prod",
         "install:plugins:oni-plugin-prettier":
             "cd extensions/oni-plugin-prettier && yarn install --prod",
+        "install:plugins:oni-plugin-csv-reader":
+            "cd extensions/oni-plugin-csv-reader && yarn install --prod",
         "install:plugins:oni-plugin-git": "cd vim/core/oni-plugin-git && yarn install --prod",
         "postinstall": "yarn run install:plugins && electron-rebuild && opencollective postinstall",
         "profile:webpack":