add autosave to preferences

client/constants.js

@@ -51,7 +51,7 @@ export const DELETE_FILE = 'DELETE_FILE';
 export const SHOW_EDIT_FILE_NAME = 'SHOW_EDIT_FILE_NAME';
 export const HIDE_EDIT_FILE_NAME = 'HIDE_EDIT_FILE_NAME';
 
-export const TOGGLE_AUTOSAVE = 'SET_AUTOSAVE';
+export const SET_AUTOSAVE = 'SET_AUTOSAVE';
 
 // eventually, handle errors more specifically and better
 export const ERROR = 'ERROR';

client/modules/IDE/actions/preferences.js

@@ -84,8 +84,19 @@ export function indentWithSpace() {
 }
 
 export function setAutosave(value) {
-  return {
+  return (dispatch, getState) => {
+    dispatch({
       type: ActionTypes.SET_AUTOSAVE,
       value
+    });
+    const state = getState();
+    if (state.user.authenticated) {
+      const formParams = {
+        preferences: {
+          autosave: value
+        }
+      };
+      updatePreferences(formParams, dispatch);
+    }
   };
 }

client/modules/IDE/components/Preferences.js

@@ -10,6 +10,11 @@ const plusUrl = require('../../../images/plus.svg');
 const minusUrl = require('../../../images/minus.svg');
 
 class Preferences extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleUpdateAutosave = this.handleUpdateAutosave.bind(this);
+  }
+
   handleUpdateFont(event) {
     this.props.setFontSize(parseInt(event.target.value, 10));
   }
@@ -18,6 +23,11 @@ class Preferences extends React.Component {
     this.props.setIndentation(parseInt(event.target.value, 10));
   }
 
+  handleUpdateAutosave(event) {
+    const value = event.target.value === 'true';
+    this.props.setAutosave(value);
+  }
+
   render() {
     const preferencesContainerClass = classNames({
       preferences: true,
@@ -106,6 +116,13 @@ class Preferences extends React.Component {
             <button className={preferencesTabOptionClass} onClick={this.props.indentWithTab} aria-label="indentation with tab">Tabs</button>
           </div>
         </div>
+        <div className="preference">
+          <h4 className="preference__title">Autosave</h4>
+          <label htmlFor="autosave-on">On</label>
+          <input type="radio" id="autosave-on" name="autosave" value="true" checked={this.props.autosave} onChange={this.handleUpdateAutosave} />
+          <label htmlFor="autosave-off">Off</label>
+          <input type="radio" id="autosave-off" name="autosave" value="false" checked={!this.props.autosave} onChange={this.handleUpdateAutosave} />
+        </div>
       </section>
     );
   }
@@ -120,7 +137,9 @@ Preferences.propTypes = {
   indentWithSpace: PropTypes.func.isRequired,
   indentWithTab: PropTypes.func.isRequired,
   isTabIndent: PropTypes.bool.isRequired,
-  setFontSize: PropTypes.func.isRequired
+  setFontSize: PropTypes.func.isRequired,
+  autosave: PropTypes.bool.isRequired,
+  setAutosave: PropTypes.func.isRequired
 };
 
 export default Preferences;

client/modules/IDE/pages/IDEView.js

@@ -68,6 +68,8 @@ class IDEView extends React.Component {
           indentWithTab={this.props.indentWithTab}
           isTabIndent={this.props.preferences.isTabIndent}
           setFontSize={this.props.setFontSize}
+          autosave={this.props.preferences.autosave}
+          setAutosave={this.props.setAutosave}
         />
         <div className="editor-preview-container">
           <Sidebar
@@ -163,13 +165,15 @@ IDEView.propTypes = {
   preferences: PropTypes.shape({
     fontSize: PropTypes.number.isRequired,
     indentationAmount: PropTypes.number.isRequired,
-    isTabIndent: PropTypes.bool.isRequired
+    isTabIndent: PropTypes.bool.isRequired,
+    autosave: PropTypes.bool.isRequired
   }).isRequired,
   closePreferences: PropTypes.func.isRequired,
   setFontSize: PropTypes.func.isRequired,
   setIndentation: PropTypes.func.isRequired,
   indentWithTab: PropTypes.func.isRequired,
   indentWithSpace: PropTypes.func.isRequired,
+  setAutosave: PropTypes.func.isRequired,
   files: PropTypes.array.isRequired,
   updateFileContent: PropTypes.func.isRequired,
   selectedFile: PropTypes.shape({

client/modules/IDE/reducers/preferences.js

@@ -21,6 +21,8 @@ const preferences = (state = initialState, action) => {
       return Object.assign({}, state, {
         isTabIndent: false
       });
+    case ActionTypes.SET_AUTOSAVE:
+      return Object.assign({}, state, { autosave: action.value });
     default:
       return state;
   }