auto autorefresh to preferences, save autorefresh server side

client/constants.js

@@ -84,6 +84,7 @@ export const SET_TOAST_TEXT = 'SET_TOAST_TEXT';
 export const SET_THEME = 'SET_THEME';
 
 export const SET_UNSAVED_CHANGES = 'SET_UNSAVED_CHANGES';
+export const SET_AUTOREFRESH = 'SET_AUTOREFRESH';
 
 export const DETECT_INFINITE_LOOPS = 'DETECT_INFINITE_LOOPS';
 export const RESET_INFINITE_LOOPS = 'RESET_INFINITE_LOOPS';

client/modules/IDE/actions/preferences.js

@@ -138,9 +138,46 @@ export function setTextOutput(value) {
 }
 
 export function setTheme(value) {
-  return {
+  // return {
+  //   type: ActionTypes.SET_THEME,
+  //   value
+  // };
+  return (dispatch, getState) => {
+    dispatch({
       type: ActionTypes.SET_THEME,
       value
+    });
+    const state = getState();
+    if (state.user.authenticated) {
+      const formParams = {
+        preferences: {
+          theme: value
+        }
+      };
+      updatePreferences(formParams, dispatch);
+    }
+  };
+}
+
+export function setAutorefresh(value) {
+  // return {
+  //   type: ActionTypes.SET_AUTOREFRESH,
+  //   value
+  // };
+  return (dispatch, getState) => {
+    dispatch({
+      type: ActionTypes.SET_AUTOREFRESH,
+      value
+    });
+    const state = getState();
+    if (state.user.authenticated) {
+      const formParams = {
+        preferences: {
+          autorefresh: value
+        }
+      };
+      updatePreferences(formParams, dispatch);
+    }
   };
 }
 

client/modules/IDE/components/Toolbar.js

@@ -73,6 +73,10 @@ class Toolbar extends React.Component {
           <input
             id="autorefresh"
             type="checkbox"
+            checked={this.props.autorefresh}
+            onChange={(event) => {
+              this.props.setAutorefresh(event.target.checked);
+            }}
           />
           <label htmlFor="autorefresh" className="toolbar__autorefresh-label">
             Auto-refresh
@@ -139,7 +143,9 @@ Toolbar.propTypes = {
   }).isRequired,
   showEditProjectName: PropTypes.func.isRequired,
   hideEditProjectName: PropTypes.func.isRequired,
-  infiniteLoop: PropTypes.bool.isRequired
+  infiniteLoop: PropTypes.bool.isRequired,
+  autorefresh: PropTypes.bool.isRequired,
+  setAutorefresh: PropTypes.func.isRequired
 };
 
 export default Toolbar;

client/modules/IDE/pages/IDEView.js

@@ -193,6 +193,8 @@ class IDEView extends React.Component {
           owner={this.props.project.owner}
           project={this.props.project}
           infiniteLoop={this.props.ide.infiniteLoop}
+          autorefresh={this.props.preferences.autorefresh}
+          setAutorefresh={this.props.setAutorefresh}
         />
         <Preferences
           isVisible={this.props.ide.preferencesIsVisible}
@@ -454,7 +456,8 @@ IDEView.propTypes = {
     autosave: PropTypes.bool.isRequired,
     lintWarning: PropTypes.bool.isRequired,
     textOutput: PropTypes.bool.isRequired,
-    theme: PropTypes.string.isRequired
+    theme: PropTypes.string.isRequired,
+    autorefresh: PropTypes.bool.isRequired
   }).isRequired,
   closePreferences: PropTypes.func.isRequired,
   setFontSize: PropTypes.func.isRequired,
@@ -516,6 +519,7 @@ IDEView.propTypes = {
   route: PropTypes.object.isRequired,
   setUnsavedChanges: PropTypes.func.isRequired,
   setTheme: PropTypes.func.isRequired,
+  setAutorefresh: PropTypes.func.isRequired
 };
 
 function mapStateToProps(state) {

client/modules/IDE/reducers/preferences.js

@@ -7,7 +7,8 @@ const initialState = {
   autosave: true,
   lintWarning: false,
   textOutput: false,
-  theme: 'light'
+  theme: 'light',
+  autorefresh: true
 };
 
 const preferences = (state = initialState, action) => {
@@ -34,6 +35,8 @@ const preferences = (state = initialState, action) => {
       return action.preferences;
     case ActionTypes.SET_THEME:
       return Object.assign({}, state, { theme: action.value });
+    case ActionTypes.SET_AUTOREFRESH:
+      return Object.assign({}, state, { autorefresh: action.value });
     default:
       return state;
   }

server/models/user.js

@@ -16,7 +16,8 @@ const userSchema = new Schema({
     autosave: { type: Boolean, default: true },
     lintWarning: { type: Boolean, default: false },
     textOutput: { type: Boolean, default: false },
-    theme: { type: String, default: 'light' }
+    theme: { type: String, default: 'light' },
+    autorefresh: { type: Boolean, default: true }
   }
 }, { timestamps: true });