Created an HOC to wrap components with ThemeProvider

zoltantothcom · zoltantothcom · commit 1e807afa5db6 · 2019-02-08T22:49:15.000-05:00
diff --git a/src/components/Title.jsx b/src/components/Title.jsx
@@ -1,9 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import styled, { ThemeProvider } from 'styled-components';
-import { connect } from 'react-redux';
-import { themeLight } from '../styles/themes/theme.light';
-import { themeDark } from '../styles/themes/theme.dark';
+import styled from 'styled-components';
+import withThemeProvider from '../hoc/withThemeProvider';
 
 const StyledTitle = styled.h1`
   font-family: 'Karla', sans-serif;
@@ -15,26 +12,6 @@ const StyledTitle = styled.h1`
   margin: 0;
 `;
 
-export const Title = props => {
-  const { text, mode } = props;
+export const Title = () => <StyledTitle>JavaScript Design Patterns</StyledTitle>;
 
-  return (
-    <ThemeProvider theme={mode === 'dark' ? themeDark : themeLight}>
-      <StyledTitle>{text}</StyledTitle>
-    </ThemeProvider>
-  );
-};
-
-Title.propTypes = {
-  text: PropTypes.string.isRequired,
-  mode: PropTypes.string.isRequired
-};
-
-Title.defaultProps = {
-  text: 'JavaScript Design Patterns',
-  mode: 'dark'
-};
-
-const mapStateToProps = ({ mode }) => ({ mode });
-
-export default connect(mapStateToProps)(Title);
+export default withThemeProvider(Title);
diff --git a/src/hoc/withThemeProvider.jsx b/src/hoc/withThemeProvider.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { ThemeProvider } from 'styled-components';
+import { themeLight } from '../styles/themes/theme.light';
+import { themeDark } from '../styles/themes/theme.dark';
+
+const withThemeProvider = Component => {
+  const Sub = ({ mode }) => (
+    <ThemeProvider theme={mode === 'dark' ? themeDark : themeLight}>
+      <Component />
+    </ThemeProvider>
+  );
+
+  Sub.propTypes = {
+    mode: PropTypes.string.isRequired
+  };
+
+  return Sub;
+};
+
+const mapStateToProps = ({ mode }) => ({ mode });
+
+const composedWrapper = compose(
+  connect(
+    mapStateToProps,
+    null
+  ),
+  withThemeProvider
+);
+
+export default composedWrapper;
