add basic button functionality to linting

client/constants.js

@@ -42,5 +42,7 @@ export const CONSOLE_EVENT = 'CONSOLE_EVENT';
 export const EXPAND_CONSOLE = 'EXPAND_CONSOLE';
 export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE';
 
+export const TOGGLE_BEEP = 'TOGGLE_BEEP';
+
 // eventually, handle errors more specifically and better
 export const ERROR = 'ERROR';

client/modules/IDE/actions/editorHidden.js

@@ -0,0 +1,7 @@
+import * as ActionTypes from '../../../constants';
+
+export function toggleBeep() {
+  return {
+    type: ActionTypes.TOGGLE_BEEP
+  };
+}

client/modules/IDE/actions/ide.js

@@ -79,4 +79,3 @@ export function closePreferences() {
     type: ActionTypes.CLOSE_PREFERENCES
   };
 }
-

client/modules/IDE/components/Editor.js

@@ -44,7 +44,7 @@ class Editor extends React.Component {
               isVisible = true;
             }
           });
-          if (isVisible) {
+          if (isVisible && this.props.enableBeep) {
             this.beep.play();
           }
         })
@@ -109,6 +109,7 @@ class Editor extends React.Component {
 }
 
 Editor.propTypes = {
+  enableBeep: PropTypes.bool.isRequired,
   indentationAmount: PropTypes.number.isRequired,
   isTabIndent: PropTypes.bool.isRequired,
   updateFileContent: PropTypes.func.isRequired,

client/modules/IDE/pages/IDEView.js

@@ -12,6 +12,7 @@ import { connect } from 'react-redux';
 import * as FileActions from '../actions/files';
 import * as IDEActions from '../actions/ide';
 import * as ProjectActions from '../actions/project';
+import * as EditorHiddenActions from '../actions/editorHidden';
 import { getFile, getHTMLFile, getJSFiles, getCSSFiles } from '../reducers/files';
 
 class IDEView extends React.Component {
@@ -60,7 +61,9 @@ class IDEView extends React.Component {
           <div className="editor-console-container">
             <div className="editor-linenumber" aria-live="assertive" id="editor-linenumber"></div>
             <div className="editor-lintmessages" id="editor-lintmessages"></div>
+            <button className="editor-lintbutton" onClick={this.props.toggleBeep}>Beep</button>
             <Editor
+              enableBeep={this.props.editorHidden.enableBeep}
               file={this.props.selectedFile}
               updateFileContent={this.props.updateFileContent}
               fontSize={this.props.preferences.fontSize}
@@ -134,6 +137,10 @@ IDEView.propTypes = {
   }).isRequired,
   setProjectName: PropTypes.func.isRequired,
   openPreferences: PropTypes.func.isRequired,
+  editorHidden: PropTypes.shape({
+    enableBeep: PropTypes.bool.isRequired
+  }).isRequired,
+  toggleBeep: PropTypes.func.isRequired,
   preferences: PropTypes.shape({
     fontSize: PropTypes.number.isRequired,
     indentationAmount: PropTypes.number.isRequired,
@@ -170,6 +177,7 @@ function mapStateToProps(state) {
     cssFiles: getCSSFiles(state.files),
     ide: state.ide,
     preferences: state.preferences,
+    editorHidden: state.editorHidden,
     user: state.user,
     project: state.project
   };
@@ -177,6 +185,7 @@ function mapStateToProps(state) {
 
 function mapDispatchToProps(dispatch) {
   return bindActionCreators(Object.assign({},
+    EditorHiddenActions,
     FileActions,
     ProjectActions,
     IDEActions),

client/modules/IDE/reducers/editorHidden.js

@@ -0,0 +1,16 @@
+import * as ActionTypes from '../../../constants';
+
+const initialState = {
+  enableBeep: false
+};
+
+const editorHidden = (state = initialState, action) => {
+  switch (action.type) {
+    case ActionTypes.TOGGLE_BEEP:
+      return Object.assign({}, state, { enableBeep: !state.enableBeep }); 
+    default:
+      return state;
+  }
+};
+
+export default editorHidden;

client/reducers.js

@@ -3,6 +3,7 @@ import files from './modules/IDE/reducers/files';
 import ide from './modules/IDE/reducers/ide';
 import preferences from './modules/IDE/reducers/preferences';
 import project from './modules/IDE/reducers/project';
+import editorHidden from './modules/IDE/reducers/editorHidden';
 import user from './modules/User/reducers';
 import sketches from './modules/Sketch/reducers';
 import { reducer as form } from 'redux-form';
@@ -14,7 +15,8 @@ const rootReducer = combineReducers({
   preferences,
   user,
   project,
-  sketches
+  sketches,
+  editorHidden
 });
 
 export default rootReducer;