Merge pull request #1214 from andrewn/feature/theme-sync

Keep theme in sync with state across the app

Author: catarak

client/modules/App/App.jsx

@@ -14,7 +14,7 @@ class App extends React.Component {
 
   componentDidMount() {
     this.setState({ isMounted: true }); // eslint-disable-line react/no-did-mount-set-state
-    document.body.className = 'light';
+    document.body.className = this.props.theme;
   }
 
   componentWillReceiveProps(nextProps) {
@@ -23,6 +23,12 @@ class App extends React.Component {
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.props.theme !== prevProps.theme) {
+      document.body.className = this.props.theme;
+    }
+  }
+
   render() {
     return (
       <div className="app">
@@ -39,10 +45,18 @@ App.propTypes = {
     pathname: PropTypes.string
   }).isRequired,
   setPreviousPath: PropTypes.func.isRequired,
+  theme: PropTypes.string,
 };
 
 App.defaultProps = {
-  children: null
+  children: null,
+  theme: 'light'
 };
 
-export default connect(() => ({}), { setPreviousPath })(App);
+const mapStateToProps = state => ({
+  theme: state.preferences.theme,
+});
+
+const mapDispatchToProps = { setPreviousPath };
+
+export default connect(mapStateToProps, mapDispatchToProps)(App);

client/modules/IDE/pages/FullView.jsx

@@ -11,13 +11,6 @@ import * as ProjectActions from '../actions/project';
 class FullView extends React.Component {
   componentDidMount() {
     this.props.getProject(this.props.params.project_id);
-    document.body.className = this.props.theme;
-  }
-
-  componentWillUpdate(nextProps) {
-    if (nextProps.theme !== this.props.theme) {
-      document.body.className = nextProps.theme;
-    }
   }
 
   ident = () => {}
@@ -62,7 +55,6 @@ class FullView extends React.Component {
 }
 
 FullView.propTypes = {
-  theme: PropTypes.string.isRequired,
   params: PropTypes.shape({
     project_id: PropTypes.string
   }).isRequired,
@@ -98,7 +90,6 @@ FullView.propTypes = {
 function mapStateToProps(state) {
   return {
     user: state.user,
-    theme: state.preferences.theme,
     htmlFile: getHTMLFile(state.files),
     jsFiles: getJSFiles(state.files),
     cssFiles: getCSSFiles(state.files),

client/modules/IDE/pages/IDEView.jsx

@@ -66,7 +66,6 @@ class IDEView extends React.Component {
 
     window.onbeforeunload = () => this.warnIfUnsavedChanges();
 
-    document.body.className = this.props.preferences.theme;
     this.autosaveInterval = null;
   }
 
@@ -90,10 +89,6 @@ class IDEView extends React.Component {
         this.props.getProject(nextProps.params.project_id);
       }
     }
-
-    if (nextProps.preferences.theme !== this.props.preferences.theme) {
-      document.body.className = nextProps.preferences.theme;
-    }
   }
 
   componentDidUpdate(prevProps) {