Extract ThemeProvider and connect to redux store

Author: andrewn

client/index.jsx

@@ -3,11 +3,10 @@ import { render } from 'react-dom';
 import { hot } from 'react-hot-loader/root';
 import { Provider } from 'react-redux';
 import { Router, browserHistory } from 'react-router';
-import { ThemeProvider } from 'styled-components';
 
 import configureStore from './store';
 import routes from './routes';
-import theme, { Theme } from './theme';
+import ThemeProvider from './modules/App/components/ThemeProvider';
 
 require('./styles/main.scss');
 
@@ -19,14 +18,12 @@ const initialState = window.__INITIAL_STATE__;
 
 const store = configureStore(initialState);
 
-const currentTheme = Theme.light;
-
 const App = () => (
-  <ThemeProvider theme={{ ...theme[currentTheme] }}>
-    <Provider store={store}>
+  <Provider store={store}>
+    <ThemeProvider>
       <Router history={history} routes={routes(store)} />
-    </Provider>
-  </ThemeProvider>
+    </ThemeProvider>
+  </Provider>
 );
 
 const HotApp = hot(App);

client/modules/App/components/ThemeProvider.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { ThemeProvider } from 'styled-components';
+
+import theme, { Theme } from '../../../theme';
+
+const Provider = ({ children, currentTheme }) => (
+  <ThemeProvider theme={{ ...theme[currentTheme] }}>
+    {children}
+  </ThemeProvider>
+);
+
+Provider.propTypes = {
+  children: PropTypes.node.isRequired,
+  currentTheme: PropTypes.oneOf(Object.keys(Theme)).isRequired,
+};
+
+function mapStateToProps(state) {
+  return {
+    currentTheme: state.preferences.theme,
+  };
+}
+
+
+export default connect(mapStateToProps)(Provider);