remove code bloat from preferences, add preferences to user schema

client/constants.js

@@ -6,12 +6,13 @@ export const STOP_SKETCH = 'STOP_SKETCH';
 
 export const OPEN_PREFERENCES = 'OPEN_PREFERENCES';
 export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES';
-export const INCREASE_FONTSIZE = 'INCREASE_FONTSIZE';
+export const SET_FONT_SIZE = 'SET_FONT_SIZE';
-export const DECREASE_FONTSIZE = 'DECREASE_FONTSIZE';
+
-export const UPDATE_FONTSIZE = 'UPDATE_FONTSIZE';
 export const INCREASE_INDENTATION = 'INCREASE_INDENTATION';
 export const DECREASE_INDENTATION = 'DECREASE_INDENTATION';
 export const UPDATE_INDENTATION = 'UPDATE_INDENTATION';
+export const SET_INDENTATION = 'SET_INDENTATION';
+
 export const INDENT_WITH_SPACE = 'INDENT_WITH_SPACE';
 export const INDENT_WITH_TAB = 'INDENT_WITH_TAB';
 

client/modules/IDE/actions/preferences.js

@@ -1,41 +1,18 @@
 import * as ActionTypes from '../../../constants';
+// import axios from 'axios';
 
-export function increaseFont() {
+// const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
-  return {
-    type: ActionTypes.INCREASE_FONTSIZE
-  };
-}
 
-export function decreaseFont() {
+export function setFontSize(value) {
   return {
-    type: ActionTypes.DECREASE_FONTSIZE
+    type: ActionTypes.SET_FONT_SIZE,
-  };
-}
-
-export function updateFont(event) {
-  const value = event.target.value;
-  return {
-    type: ActionTypes.UPDATE_FONTSIZE,
     value
   };
 }
 
-export function increaseIndentation() {
+export function setIndentation(value) {
   return {
-    type: ActionTypes.INCREASE_INDENTATION
+    type: ActionTypes.SET_INDENTATION,
-  };
-}
-
-export function decreaseIndentation() {
-  return {
-    type: ActionTypes.DECREASE_INDENTATION
-  };
-}
-
-export function updateIndentation(event) {
-  const value = event.target.value;
-  return {
-    type: ActionTypes.UPDATE_INDENTATION,
     value
   };
 }

client/modules/IDE/components/Preferences.js

@@ -9,18 +9,27 @@ const exitUrl = require('../../../images/exit.svg');
 const plusUrl = require('../../../images/plus.svg');
 const minusUrl = require('../../../images/minus.svg');
 
-function Preferences(props) {
+class Preferences extends React.Component {
+  handleUpdateFont(event) {
+    this.props.setFontSize(parseInt(event.target.value, 10));
+  }
+
+  handleUpdateIndentation(event) {
+    this.props.setIndentation(parseInt(event.target.value, 10));
+  }
+
+  render() {
     const preferencesContainerClass = classNames({
       preferences: true,
-    'preferences--selected': props.isVisible
+      'preferences--selected': this.props.isVisible
     });
     let preferencesTabOptionClass = classNames({
       preference__option: true,
-    'preference__option--selected': props.isTabIndent
+      'preference__option--selected': this.props.isTabIndent
     });
     let preferencesSpaceOptionClass = classNames({
       preference__option: true,
-    'preference__option--selected': !props.isTabIndent
+      'preference__option--selected': !this.props.isTabIndent
     });
     return (
       <section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
@@ -28,7 +37,7 @@ function Preferences(props) {
           <h2 className="preferences__title">Preferences</h2>
           <button
             className="preferences__exit-button"
-          onClick={props.closePreferences}
+            onClick={this.props.closePreferences}
             title="exit"
             aria-label="exit preferences"
           >
@@ -39,8 +48,8 @@ function Preferences(props) {
         <div className="preference">
           <h4 className="preference__title">Text Size</h4>
           <button
-          className="preference__plus-button"
+            className="preference__minus-button"
-          onClick={props.decreaseFont}
+            onClick={() => this.props.setFontSize(this.props.fontSize - 2)}
             aria-label="decrease font size"
           >
             <InlineSVG src={minusUrl} alt="Decrease Font Size" />
@@ -51,13 +60,13 @@ function Preferences(props) {
             aria-live="status"
             aria-live="polite"
             role="status"
-          value={props.fontSize}
+            value={this.props.fontSize}
-          onChange={props.updateFont}
+            onChange={this.handleUpdateFont}
           >
           </input>
           <button
-          className="preference__minus-button"
+            className="preference__plus-button"
-          onClick={props.increaseFont}
+            onClick={() => this.props.setFontSize(this.props.fontSize + 2)}
             aria-label="increase font size"
           >
             <InlineSVG src={plusUrl} alt="Increase Font Size" />
@@ -68,8 +77,8 @@ function Preferences(props) {
         <div className="preference">
           <h4 className="preference__title">Indentation Amount</h4>
           <button
-          className="preference__plus-button"
+            className="preference__minus-button"
-          onClick={props.decreaseIndentation}
+            onClick={() => this.props.setIndentation(this.props.indentationAmount - 2)}
             aria-label="decrease indentation amount"
           >
             <InlineSVG src={minusUrl} alt="DecreaseIndentation Amount" />
@@ -80,25 +89,26 @@ function Preferences(props) {
             aria-live="status"
             aria-live="polite"
             role="status"
-          value={props.indentationAmount}
+            value={this.props.indentationAmount}
-          onChange={props.updateIndentation}
+            onChange={this.handleUpdateIndentation}
           >
           </input>
           <button
-          className="preference__minus-button"
+            className="preference__plus-button"
-          onClick={props.increaseIndentation}
+            onClick={() => this.props.setIndentation(this.props.indentationAmount + 2)}
             aria-label="increase indentation amount"
           >
             <InlineSVG src={plusUrl} alt="IncreaseIndentation Amount" />
             <h6 className="preference__label">Increase</h6>
           </button>
           <div className="preference__vertical-list">
-          <button className={preferencesSpaceOptionClass} onClick={props.indentWithSpace} aria-label="indentation with space">Spaces</button>
+            <button className={preferencesSpaceOptionClass} onClick={this.props.indentWithSpace} aria-label="indentation with space">Spaces</button>
-          <button className={preferencesTabOptionClass} onClick={props.indentWithTab} aria-label="indentation with tab">Tabs</button>
+            <button className={preferencesTabOptionClass} onClick={this.props.indentWithTab} aria-label="indentation with tab">Tabs</button>
           </div>
         </div>
       </section>
     );
+  }
 }
 
 function mapStateToProps(state) {
@@ -114,17 +124,13 @@ function mapDispatchToProps(dispatch) {
 Preferences.propTypes = {
   isVisible: PropTypes.bool.isRequired,
   closePreferences: PropTypes.func.isRequired,
-  decreaseFont: PropTypes.func.isRequired,
-  updateFont: PropTypes.func.isRequired,
   fontSize: PropTypes.number.isRequired,
-  increaseFont: PropTypes.func.isRequired,
   indentationAmount: PropTypes.number.isRequired,
-  decreaseIndentation: PropTypes.func.isRequired,
+  setIndentation: PropTypes.func.isRequired,
-  increaseIndentation: PropTypes.func.isRequired,
-  updateIndentation: PropTypes.func.isRequired,
   indentWithSpace: PropTypes.func.isRequired,
   indentWithTab: PropTypes.func.isRequired,
-  isTabIndent: PropTypes.bool.isRequired
+  isTabIndent: PropTypes.bool.isRequired,
+  setFontSize: PropTypes.func.isRequired
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Preferences);

client/modules/IDE/reducers/preferences.js

@@ -8,30 +8,10 @@ const initialState = {
 
 const preferences = (state = initialState, action) => {
   switch (action.type) {
-    case ActionTypes.INCREASE_FONTSIZE:
+    case ActionTypes.SET_FONT_SIZE:
-      return Object.assign({}, state, {
+      return Object.assign({}, state, { fontSize: action.value });
-        fontSize: state.fontSize + 2
+    case ActionTypes.SET_INDENTATION:
-      });
+      return Object.assign({}, state, { indentationAmount: action.value });
-    case ActionTypes.DECREASE_FONTSIZE:
-      return Object.assign({}, state, {
-        fontSize: state.fontSize - 2
-      });
-    case ActionTypes.UPDATE_FONTSIZE:
-      return Object.assign({}, state, {
-        fontSize: parseInt(action.value, 10)
-      });
-    case ActionTypes.INCREASE_INDENTATION:
-      return Object.assign({}, state, {
-        indentationAmount: state.indentationAmount + 2
-      });
-    case ActionTypes.DECREASE_INDENTATION:
-      return Object.assign({}, state, {
-        indentationAmount: state.indentationAmount - 2
-      });
-    case ActionTypes.UPDATE_INDENTATION:
-      return Object.assign({}, state, {
-        indentationAmount: parseInt(action.value, 10)
-      });
     case ActionTypes.INDENT_WITH_TAB:
       return Object.assign({}, state, {
         isTabIndent: true

server/models/user.js

@@ -9,7 +9,12 @@ const userSchema = new Schema({
   github: { type: String },
   email: { type: String, unique: true },
   tokens: Array,
-  admin: { type: Boolean, default: false }
+  preferences: {
+    textSize: { type: Number, default: 18 },
+    indentationAmount: { type: Number, default: 2 },
+    isTabIndent: { type: Boolean, default: false },
+    autosave: { type: Boolean, default: true }
+  }
 }, { timestamps: true });
 
 /**