From d0776032b62ef03757aaf52d0fbd55945986816f Mon Sep 17 00:00:00 2001
From: lukasmartinelli <me@lukasmartinelli.ch>
Date: Thu, 8 Sep 2016 20:35:21 +0200
Subject: [PATCH] Enable style file upload

---
 package.json    |  1 +
 src/app.jsx     |  1 -
 src/map.jsx     | 16 +++++++++-------
 src/toolbar.jsx | 30 +++++++++++++++++++++++++-----
 4 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index f45da392..e0fd0120 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "node-sass": "^3.9.2",
     "react": "15.3.0",
     "react-dom": "15.3.0",
+    "react-file-reader-input": "^1.1.0",
     "react-geomicons": "^2.0.5",
     "react-icons": "^2.2.1",
     "react-map-gl": "^1.4.2",
diff --git a/src/app.jsx b/src/app.jsx
index f0800d78..560bd9f9 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -1,4 +1,3 @@
-import 'bootstrap/dist/css/bootstrap.min.css';
 import {Workspace} from './workspace.jsx';
 import {Map} from './map.jsx';
 import {Toolbar} from './toolbar.jsx';
diff --git a/src/map.jsx b/src/map.jsx
index be8118d9..47ccfd4f 100644
--- a/src/map.jsx
+++ b/src/map.jsx
@@ -2,16 +2,18 @@ import React from 'react';
 import ReactMapboxGl from 'react-mapbox-gl';
 import {ZoomControl} from 'react-mapbox-gl';
 
-
 export class Map extends React.Component {
-    constructor(props) {
-			super(props);
-    }
+	constructor(props) {
+		super(props);
+	}
+
 	render() {
 		return <ReactMapboxGl
-      style="mapbox://styles/morgenkaffee/ciqo4gtwo0037c0m7tpcosu63"
-      accessToken="pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6IjIzcmN0NlkifQ.0LRTNgCc-envt9d5MzR75w"
-		 ><ZoomControl /></ReactMapboxGl>
+			style="mapbox://styles/morgenkaffee/ciqo4gtwo0037c0m7tpcosu63"
+			accessToken="pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6IjIzcmN0NlkifQ.0LRTNgCc-envt9d5MzR75w"
+		 >
+			<ZoomControl />
+		</ReactMapboxGl>;
 	}
 }
 
diff --git a/src/toolbar.jsx b/src/toolbar.jsx
index cc38d4f6..b483aef0 100644
--- a/src/toolbar.jsx
+++ b/src/toolbar.jsx
@@ -4,8 +4,26 @@ import { Menu, NavItem, Tooltip, Container, Block, Fixed } from 'rebass'
 import theme from './theme.jsx';
 import {MdSettings, MdPalette, MdLayers, MdSave, MdFolderOpen} from 'react-icons/lib/md';
 import { Button, Text } from 'rebass';
+import FileReaderInput from 'react-file-reader-input';
 
 export class Toolbar extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			styleFile: null
+		};
+	}
+
+	onUpload(_, files) {
+		const [e, file] = files[0];
+		const reader = new FileReader();
+    reader.readAsText(file, "UTF-8");
+    reader.onload = e => {
+			const style = JSON.parse(e.target.result);
+			console.log(style);
+		}
+    reader.onerror = e => console.log(e.target);
+	}
 	render() {
 		return <Container style={{
 			zIndex: 100,
@@ -17,11 +35,13 @@ export class Toolbar extends React.Component {
 			backgroundColor: theme.colors.black }
 		}>
 			<Block>
-				<Button big={true}>
-					<Tooltip inverted rounded title="Save">
-						<MdSave />
-          </Tooltip>
-				</Button>
+				  <FileReaderInput onChange={this.onUpload}>
+					<Button big={true}>
+						<Tooltip inverted rounded title="Save">
+							<MdSave />
+						</Tooltip>
+					</Button>
+					</FileReaderInput>
 			</Block>
 			<Block>
 				<Button big={true}><MdFolderOpen /></Button>