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 DECREASE_FONTSIZE = 'DECREASE_FONTSIZE';
-export const UPDATE_FONTSIZE = 'UPDATE_FONTSIZE';
+export const SET_FONT_SIZE = 'SET_FONT_SIZE';
+
 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() {
-  return {
-    type: ActionTypes.INCREASE_FONTSIZE
-  };
-}
+// const ROOT_URL = location.href.indexOf('localhost') > 0 ? 'http://localhost:8000/api' : '/api';
 
-export function decreaseFont() {
+export function setFontSize(value) {
   return {
-    type: ActionTypes.DECREASE_FONTSIZE
-  };
-}
-
-export function updateFont(event) {
-  const value = event.target.value;
-  return {
-    type: ActionTypes.UPDATE_FONTSIZE,
+    type: ActionTypes.SET_FONT_SIZE,
     value
   };
 }
 
-export function increaseIndentation() {
+export function setIndentation(value) {
   return {
-    type: ActionTypes.INCREASE_INDENTATION
-  };
-}
-
-export function decreaseIndentation() {
-  return {
-    type: ActionTypes.DECREASE_INDENTATION
-  };
-}
-
-export function updateIndentation(event) {
-  const value = event.target.value;
-  return {
-    type: ActionTypes.UPDATE_INDENTATION,
+    type: ActionTypes.SET_INDENTATION,
     value
   };
 }

client/modules/IDE/components/Preferences.js

@@ -9,96 +9,106 @@ const exitUrl = require('../../../images/exit.svg');
 const plusUrl = require('../../../images/plus.svg');
 const minusUrl = require('../../../images/minus.svg');
 
-function Preferences(props) {
-  const preferencesContainerClass = classNames({
-    preferences: true,
-    'preferences--selected': props.isVisible
-  });
-  let preferencesTabOptionClass = classNames({
-    preference__option: true,
-    'preference__option--selected': props.isTabIndent
-  });
-  let preferencesSpaceOptionClass = classNames({
-    preference__option: true,
-    'preference__option--selected': !props.isTabIndent
-  });
-  return (
-    <section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
-      <div className="preferences__heading">
-        <h2 className="preferences__title">Preferences</h2>
-        <button
-          className="preferences__exit-button"
-          onClick={props.closePreferences}
-          title="exit"
-          aria-label="exit preferences"
-        >
-          <InlineSVG src={exitUrl} alt="Exit Preferences" />
-        </button>
-      </div>
+class Preferences extends React.Component {
+  handleUpdateFont(event) {
+    this.props.setFontSize(parseInt(event.target.value, 10));
+  }
 
-      <div className="preference">
-        <h4 className="preference__title">Text Size</h4>
-        <button
-          className="preference__plus-button"
-          onClick={props.decreaseFont}
-          aria-label="decrease font size"
-        >
-          <InlineSVG src={minusUrl} alt="Decrease Font Size" />
-          <h6 className="preference__label">Decrease</h6>
-        </button>
-        <input
-          className="preference__value"
-          aria-live="status"
-          aria-live="polite"
-          role="status"
-          value={props.fontSize}
-          onChange={props.updateFont}
-        >
-        </input>
-        <button
-          className="preference__minus-button"
-          onClick={props.increaseFont}
-          aria-label="increase font size"
-        >
-          <InlineSVG src={plusUrl} alt="Increase Font Size" />
-          <h6 className="preference__label">Increase</h6>
-        </button>
-      </div>
+  handleUpdateIndentation(event) {
+    this.props.setIndentation(parseInt(event.target.value, 10));
+  }
 
-      <div className="preference">
-        <h4 className="preference__title">Indentation Amount</h4>
-        <button
-          className="preference__plus-button"
-          onClick={props.decreaseIndentation}
-          aria-label="decrease indentation amount"
-        >
-          <InlineSVG src={minusUrl} alt="DecreaseIndentation Amount" />
-          <h6 className="preference__label">Decrease</h6>
-        </button>
-        <input
-          className="preference__value"
-          aria-live="status"
-          aria-live="polite"
-          role="status"
-          value={props.indentationAmount}
-          onChange={props.updateIndentation}
-        >
-        </input>
-        <button
-          className="preference__minus-button"
-          onClick={props.increaseIndentation}
-          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={preferencesTabOptionClass} onClick={props.indentWithTab} aria-label="indentation with tab">Tabs</button>
+  render() {
+    const preferencesContainerClass = classNames({
+      preferences: true,
+      'preferences--selected': this.props.isVisible
+    });
+    let preferencesTabOptionClass = classNames({
+      preference__option: true,
+      'preference__option--selected': this.props.isTabIndent
+    });
+    let preferencesSpaceOptionClass = classNames({
+      preference__option: true,
+      'preference__option--selected': !this.props.isTabIndent
+    });
+    return (
+      <section className={preferencesContainerClass} tabIndex="0" title="preference-menu">
+        <div className="preferences__heading">
+          <h2 className="preferences__title">Preferences</h2>
+          <button
+            className="preferences__exit-button"
+            onClick={this.props.closePreferences}
+            title="exit"
+            aria-label="exit preferences"
+          >
+            <InlineSVG src={exitUrl} alt="Exit Preferences" />
+          </button>
         </div>
-      </div>
-    </section>
-  );
+
+        <div className="preference">
+          <h4 className="preference__title">Text Size</h4>
+          <button
+            className="preference__minus-button"
+            onClick={() => this.props.setFontSize(this.props.fontSize - 2)}
+            aria-label="decrease font size"
+          >
+            <InlineSVG src={minusUrl} alt="Decrease Font Size" />
+            <h6 className="preference__label">Decrease</h6>
+          </button>
+          <input
+            className="preference__value"
+            aria-live="status"
+            aria-live="polite"
+            role="status"
+            value={this.props.fontSize}
+            onChange={this.handleUpdateFont}
+          >
+          </input>
+          <button
+            className="preference__plus-button"
+            onClick={() => this.props.setFontSize(this.props.fontSize + 2)}
+            aria-label="increase font size"
+          >
+            <InlineSVG src={plusUrl} alt="Increase Font Size" />
+            <h6 className="preference__label">Increase</h6>
+          </button>
+        </div>
+
+        <div className="preference">
+          <h4 className="preference__title">Indentation Amount</h4>
+          <button
+            className="preference__minus-button"
+            onClick={() => this.props.setIndentation(this.props.indentationAmount - 2)}
+            aria-label="decrease indentation amount"
+          >
+            <InlineSVG src={minusUrl} alt="DecreaseIndentation Amount" />
+            <h6 className="preference__label">Decrease</h6>
+          </button>
+          <input
+            className="preference__value"
+            aria-live="status"
+            aria-live="polite"
+            role="status"
+            value={this.props.indentationAmount}
+            onChange={this.handleUpdateIndentation}
+          >
+          </input>
+          <button
+            className="preference__plus-button"
+            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={this.props.indentWithSpace} aria-label="indentation with space">Spaces</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,
-  increaseIndentation: PropTypes.func.isRequired,
-  updateIndentation: PropTypes.func.isRequired,
+  setIndentation: 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:
-      return Object.assign({}, state, {
-        fontSize: state.fontSize + 2
-      });
-    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.SET_FONT_SIZE:
+      return Object.assign({}, state, { fontSize: action.value });
+    case ActionTypes.SET_INDENTATION:
+      return Object.assign({}, state, { indentationAmount: action.value });
     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 });
 
 /**