From e1340518a51366204bd1732e1c421d1239e87094 Mon Sep 17 00:00:00 2001
From: Andrew Nicolaou <me@andrewnicolaou.co.uk>
Date: Sun, 19 Apr 2020 22:41:44 +0200
Subject: [PATCH] Extract ThemeProvider and connect to redux store

---
 client/index.jsx                              | 13 ++++------
 .../modules/App/components/ThemeProvider.jsx  | 26 +++++++++++++++++++
 2 files changed, 31 insertions(+), 8 deletions(-)
 create mode 100644 client/modules/App/components/ThemeProvider.jsx

diff --git a/client/index.jsx b/client/index.jsx
index a1a880bb..09ab654b 100644
--- a/client/index.jsx
+++ b/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);
diff --git a/client/modules/App/components/ThemeProvider.jsx b/client/modules/App/components/ThemeProvider.jsx
new file mode 100644
index 00000000..eb6dcc9b
--- /dev/null
+++ b/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);