add toggle sketch action

shared/components/Toolbar/Toolbar.jsx

@@ -8,7 +8,7 @@ class Toolbar extends React.Component {
 		return (
 			<div className="toolbar">
 				<img className="toolbar__logo" src={logoUrl}/>
-				<div className="toolbar__play-button">
+				<div className="toolbar__play-button" onClick={this.props.toggleSketch}>
 					<img src={playUrl}/>
 				</div>
 			</div>

shared/containers/App/App.jsx

@@ -12,7 +12,9 @@ class App extends React.Component {
 		return (
 			<div className="app">
 				<Toolbar 
-					className="toolbar" />
+					className="toolbar"
+					isPlaying={this.props.ide.isPlaying}
+					toggleSketch={this.props.toggleSketch} />
 				<Editor 
 					content={this.props.file.content}
 					updateFile={this.props.updateFile} />
@@ -20,7 +22,8 @@ class App extends React.Component {
 					content={this.props.file.content} 
 					head={
 			      <link type='text/css' rel='stylesheet' href='preview-styles.css' />
-			    }/>
+			    }
+			    isPlaying={this.props.ide.isPlaying}/>
 			</div>
 		);
 	}
@@ -28,7 +31,8 @@ class App extends React.Component {
 
 function mapStateToProps(state) {
 	return {
-		file: state.file
+		file: state.file,
+		ide: state.ide
 	}
 }
 

shared/redux/actions/index.js

@@ -7,3 +7,9 @@ export function updateFile(name, content) {
 		content: content
 	}
 }
+
+export function toggleSketch() {
+	return {
+		type: ActionTypes.TOGGLE_SKETCH
+	}
+}

shared/redux/reducers/ide.js

@@ -1 +1,18 @@
 import * as ActionTypes from '../constants/constants';
+
+const initialState = {
+	isPlaying: false	
+}
+
+const ide = (state = initialState, action) => {
+	switch (action.type) {
+		case ActionTypes.TOGGLE_SKETCH:
+			return {
+				isPlaying: !state.isPlaying
+			}
+		default:
+			return state
+	}
+}
+
+export default ide;

shared/redux/reducers/index.js

@@ -1,8 +1,10 @@
 import { combineReducers } from 'redux'
 import file from './files'
+import ide from './ide'
 
 const rootReducer = combineReducers({
-	file
+	file,
+	ide
 })
 
 export default rootReducer