Introduce style available prop

src/app.jsx

@@ -66,6 +66,7 @@ export default class App extends React.Component {
   render() {
     return <div style={{ fontFamily: theme.fontFamily, color: theme.color, fontWeight: 300 }}>
 			<Toolbar
+					styleAvailable={this.state.currentStyle.get('layers').size > 0}
 					onStyleSave={this.onStyleSave.bind(this)}
 					onStyleUpload={this.onStyleUpload.bind(this)}
 					onStyleDownload={this.onStyleDownload.bind(this)}

src/stylestore.js

@@ -11,7 +11,7 @@ const storage = {
 const emptyStyle = {
 		version: 8,
 		sources: {},
-		layers: []
+		layers: [],
 }
 
 	// Return style ids and dates of all styles stored in local storage

src/toolbar.jsx

@@ -19,15 +19,11 @@ export class Toolbar extends React.Component {
     onStyleSave: React.PropTypes.func,
     onOpenSettings: React.PropTypes.func,
     onOpenLayers: React.PropTypes.func,
+		// Whether a style is available for download or saving
+		// A style with no layers should not be available
+    styleAvailable: React.PropTypes.bool,
   }
 
-	constructor(props) {
-		super(props);
-		this.state = {
-			styleUploaded: false
-		}
-	}
-
 	onUpload(_, files) {
 		const [e, file] = files[0];
 		const reader = new FileReader();
@@ -35,17 +31,26 @@ export class Toolbar extends React.Component {
     reader.onload = e => {
 			const style = JSON.parse(e.target.result);
 			this.props.onStyleUpload(style);
-			this.setState({
-				styleUploaded: true
-			})
 		}
     reader.onerror = e => console.log(e.target);
 	}
 
-	render() {
-		let downloadButton = null
-		if(this.props.styleUploaded) {
-			downloadButton = <Block>
+	saveButton() {
+		if(this.props.styleAvailable) {
+			return <Block>
+				<Button onClick={this.props.onStyleSave} big={true}>
+					<Tooltip inverted rounded title="Save style">
+						<MdSave />
+					</Tooltip>
+				</Button>
+			</Block>
+		}
+		return null
+	}
+
+	downloadButton() {
+		if(this.props.styleAvailable) {
+			return <Block>
 				<Button onClick={this.props.onStyleDownload} big={true}>
 					<Tooltip inverted rounded title="Download style">
 						<MdFileDownload />
@@ -53,7 +58,10 @@ export class Toolbar extends React.Component {
 				</Button>
 			</Block>
 		}
+		return null
+	}
 
+	render() {
 		return <Container style={{
 			zIndex: 100,
 			position: "fixed",
@@ -65,21 +73,15 @@ export class Toolbar extends React.Component {
 		}>
 			<Block>
 				  <FileReaderInput onChange={this.onUpload.bind(this)}>
-					<Button big={true} theme={this.state.styleUploaded ? "default" : "success"}>
+					<Button big={true} theme={this.props.styleAvailable ? "default" : "success"}>
 						<Tooltip inverted rounded title="Upload style">
 						  <MdFileUpload />
 						</Tooltip>
 					</Button>
 					</FileReaderInput>
 			</Block>
-			{downloadButton}
-			<Block>
-				<Button onClick={this.props.onStyleSave} big={true}>
-					<Tooltip inverted rounded title="Save style">
-						<MdSave />
-					</Tooltip>
-				</Button>
-			</Block>
+			{this.downloadButton()}
+			{this.saveButton()}
 			<Block>
 				<Button big={true} onClick={this.props.onOpenLayers}>
 					<Tooltip inverted rounded title="Layers">