move preference action creators to preferences component

client/modules/IDE/actions/ide.js

@@ -57,7 +57,6 @@ export function collapseSidebar() {
 }
 
 export function expandConsole() {
-  console.log('expand console!');
   return {
     type: ActionTypes.EXPAND_CONSOLE
   };
@@ -69,3 +68,15 @@ export function collapseConsole() {
   };
 }
 
+export function openPreferences() {
+  return {
+    type: ActionTypes.OPEN_PREFERENCES
+  };
+}
+
+export function closePreferences() {
+  return {
+    type: ActionTypes.CLOSE_PREFERENCES
+  };
+}
+

client/modules/IDE/actions/preferences.js

@@ -1,17 +1,5 @@
 import * as ActionTypes from '../../../constants';
 
-export function openPreferences() {
-  return {
-    type: ActionTypes.OPEN_PREFERENCES
-  };
-}
-
-export function closePreferences() {
-  return {
-    type: ActionTypes.CLOSE_PREFERENCES
-  };
-}
-
 export function increaseFont() {
   return {
     type: ActionTypes.INCREASE_FONTSIZE

client/modules/IDE/components/Preferences.js

@@ -1,10 +1,13 @@
 import React, { PropTypes } from 'react';
+import InlineSVG from 'react-inlinesvg';
+import classNames from 'classnames';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import * as PreferencesActions from '../actions/preferences';
 
-const Isvg = require('react-inlinesvg');
 const exitUrl = require('../../../images/exit.svg');
 const plusUrl = require('../../../images/plus.svg');
 const minusUrl = require('../../../images/minus.svg');
-const classNames = require('classnames');
 
 function Preferences(props) {
   const preferencesContainerClass = classNames({
@@ -28,7 +31,7 @@ function Preferences(props) {
           onClick={props.closePreferences}
           title="exit"
         >
-          <Isvg src={exitUrl} alt="Exit Preferences" />
+          <InlineSVG src={exitUrl} alt="Exit Preferences" />
         </button>
       </div>
 
@@ -39,7 +42,7 @@ function Preferences(props) {
           onClick={props.decreaseFont}
           id="preference-decrease-font-size"
         >
-          <Isvg src={minusUrl} alt="Decrease Font Size" />
+          <InlineSVG src={minusUrl} alt="Decrease Font Size" />
           <h6 className="preference__label">Decrease</h6>
         </button>
         <label htmlFor="preference-decrease-font-size" className="preference__button-label">
@@ -59,7 +62,7 @@ function Preferences(props) {
           onClick={props.increaseFont}
           id="preference-increase-font-size"
         >
-          <Isvg src={plusUrl} alt="Increase Font Size" />
+          <InlineSVG src={plusUrl} alt="Increase Font Size" />
           <h6 className="preference__label">Increase</h6>
         </button>
         <label htmlFor="preference-increase-font-size" className="preference__button-label">
@@ -74,7 +77,7 @@ function Preferences(props) {
           onClick={props.decreaseIndentation}
           id="preference-decrease-indentation"
         >
-          <Isvg src={minusUrl} alt="DecreaseIndentation Amount" />
+          <InlineSVG src={minusUrl} alt="DecreaseIndentation Amount" />
           <h6 className="preference__label">Decrease</h6>
         </button>
         <label htmlFor="preference-decrease-indentation" className="preference__button-label">
@@ -94,7 +97,7 @@ function Preferences(props) {
           onClick={props.increaseIndentation}
           id="preference-increase-indentation"
         >
-          <Isvg src={plusUrl} alt="IncreaseIndentation Amount" />
+          <InlineSVG src={plusUrl} alt="IncreaseIndentation Amount" />
           <h6 className="preference__label">Increase</h6>
         </button>
         <label htmlFor="preference-increase-indentation" className="preference__button-label">
@@ -109,6 +112,16 @@ function Preferences(props) {
   );
 }
 
+function mapStateToProps(state) {
+  return {
+    ...state.preferences
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(PreferencesActions, dispatch);
+}
+
 Preferences.propTypes = {
   isVisible: PropTypes.bool.isRequired,
   closePreferences: PropTypes.func.isRequired,
@@ -125,4 +138,4 @@ Preferences.propTypes = {
   isTabIndent: PropTypes.bool.isRequired
 };
 
-export default Preferences;
+export default connect(mapStateToProps, mapDispatchToProps)(Preferences);

client/modules/IDE/components/Toolbar.js

@@ -17,7 +17,7 @@ function Toolbar(props) {
   });
   let preferencesButtonClass = classNames({
     'toolbar__preferences-button': true,
-    'toolbar__preferences-button--selected': props.isPreferencesVisible
+    'toolbar__preferences-button--selected': props.preferencesIsVisible
   });
 
   return (
@@ -69,7 +69,7 @@ function Toolbar(props) {
 
 Toolbar.propTypes = {
   isPlaying: PropTypes.bool.isRequired,
-  isPreferencesVisible: PropTypes.bool.isRequired,
+  preferencesIsVisible: PropTypes.bool.isRequired,
   startSketch: PropTypes.func.isRequired,
   stopSketch: PropTypes.func.isRequired,
   setProjectName: PropTypes.func.isRequired,

client/modules/IDE/pages/IDEView.js

@@ -11,7 +11,6 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import * as FileActions from '../actions/files';
 import * as IDEActions from '../actions/ide';
-import * as PreferencesActions from '../actions/preferences';
 import * as ProjectActions from '../actions/project';
 import { getFile, getHTMLFile, getJSFiles, getCSSFiles } from '../reducers/files';
 
@@ -41,23 +40,12 @@ class IDEView extends React.Component {
           projectName={this.props.project.name}
           setProjectName={this.props.setProjectName}
           openPreferences={this.props.openPreferences}
-          isPreferencesVisible={this.props.preferences.isVisible}
+          preferencesIsVisible={this.props.ide.preferencesIsVisible}
           owner={this.props.project.owner}
         />
         <Preferences
-          isVisible={this.props.preferences.isVisible}
+          isVisible={this.props.ide.preferencesIsVisible}
           closePreferences={this.props.closePreferences}
-          increaseFont={this.props.increaseFont}
-          decreaseFont={this.props.decreaseFont}
-          updateFont={this.props.updateFont}
-          fontSize={this.props.preferences.fontSize}
-          increaseIndentation={this.props.increaseIndentation}
-          decreaseIndentation={this.props.decreaseIndentation}
-          updateIndentation={this.props.updateIndentation}
-          indentationAmount={this.props.preferences.indentationAmount}
-          isTabIndent={this.props.preferences.isTabIndent}
-          indentWithSpace={this.props.indentWithSpace}
-          indentWithTab={this.props.indentWithTab}
         />
         <div className="editor-preview-container">
           <Sidebar
@@ -131,7 +119,8 @@ IDEView.propTypes = {
     consoleEvent: PropTypes.object,
     modalIsVisible: PropTypes.bool.isRequired,
     sidebarIsExpanded: PropTypes.bool.isRequired,
-    consoleIsExpanded: PropTypes.bool.isRequired
+    consoleIsExpanded: PropTypes.bool.isRequired,
+    preferencesIsVisible: PropTypes.bool.isRequired
   }).isRequired,
   startSketch: PropTypes.func.isRequired,
   stopSketch: PropTypes.func.isRequired,
@@ -144,20 +133,11 @@ IDEView.propTypes = {
   setProjectName: PropTypes.func.isRequired,
   openPreferences: PropTypes.func.isRequired,
   preferences: PropTypes.shape({
-    isVisible: PropTypes.bool.isRequired,
     fontSize: PropTypes.number.isRequired,
     indentationAmount: PropTypes.number.isRequired,
     isTabIndent: PropTypes.bool.isRequired
   }).isRequired,
   closePreferences: PropTypes.func.isRequired,
-  increaseFont: PropTypes.func.isRequired,
-  decreaseFont: PropTypes.func.isRequired,
-  updateFont: PropTypes.func.isRequired,
-  increaseIndentation: PropTypes.func.isRequired,
-  decreaseIndentation: PropTypes.func.isRequired,
-  updateIndentation: PropTypes.func.isRequired,
-  indentWithSpace: PropTypes.func.isRequired,
-  indentWithTab: PropTypes.func.isRequired,
   files: PropTypes.array.isRequired,
   updateFileContent: PropTypes.func.isRequired,
   selectedFile: PropTypes.shape({
@@ -197,8 +177,7 @@ function mapDispatchToProps(dispatch) {
   return bindActionCreators(Object.assign({},
     FileActions,
     ProjectActions,
-    IDEActions,
+    IDEActions),
-    PreferencesActions),
   dispatch);
 }
 

client/modules/IDE/reducers/ide.js

@@ -9,7 +9,8 @@ const initialState = {
   },
   modalIsVisible: false,
   sidebarIsExpanded: true,
-  consoleIsExpanded: false
+  consoleIsExpanded: false,
+  preferencesIsVisible: false
 };
 
 const ide = (state = initialState, action) => {
@@ -38,6 +39,10 @@ const ide = (state = initialState, action) => {
       return Object.assign({}, state, { consoleIsExpanded: false });
     case ActionTypes.EXPAND_CONSOLE:
       return Object.assign({}, state, { consoleIsExpanded: true });
+    case ActionTypes.OPEN_PREFERENCES:
+      return Object.assign({}, state, { preferencesIsVisible: true });
+    case ActionTypes.CLOSE_PREFERENCES:
+      return Object.assign({}, state, { preferencesIsVisible: false });
     default:
       return state;
   }

client/modules/IDE/reducers/preferences.js

@@ -1,7 +1,6 @@
 import * as ActionTypes from '../../../constants';
 
 const initialState = {
-  isVisible: false,
   fontSize: 18,
   indentationAmount: 2,
   isTabIndent: true
@@ -9,14 +8,6 @@ const initialState = {
 
 const preferences = (state = initialState, action) => {
   switch (action.type) {
-    case ActionTypes.OPEN_PREFERENCES:
-      return Object.assign({}, state, {
-        isVisible: true
-      });
-    case ActionTypes.CLOSE_PREFERENCES:
-      return Object.assign({}, state, {
-        isVisible: false
-      });
     case ActionTypes.INCREASE_FONTSIZE:
       return Object.assign({}, state, {
         fontSize: state.fontSize + 2