Merge pull request #2994 from adityagarg06/refactor/themeprovider

Refactor ThemeProvider

Author: lindapaiste

client/modules/App/components/ThemeProvider.jsx

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

client/modules/IDE/components/Preferences/Preferences.unit.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { act, fireEvent, reduxRender, screen } from '../../../../test-utils';
+import { initialState } from '../../reducers/preferences';
 import Preferences from './index';
 import * as PreferencesActions from '../../actions/preferences';
 
@@ -15,7 +16,10 @@ describe('<Preferences />', () => {
   const subject = (initialPreferences = {}) =>
     reduxRender(<Preferences />, {
       initialState: {
-        preferences: initialPreferences
+        preferences: {
+          ...initialState,
+          ...initialPreferences
+        }
       }
     });
 

client/modules/IDE/reducers/preferences.js

@@ -1,6 +1,6 @@
 import * as ActionTypes from '../../../constants';
 
-const initialState = {
+export const initialState = {
   fontSize: 18,
   autosave: true,
   linewrap: true,

client/testData/testReduxStore.js

@@ -1,4 +1,5 @@
 import { initialState as initialFilesState } from '../modules/IDE/reducers/files';
+import { initialState as initialPrefState } from '../modules/IDE/reducers/preferences';
 
 const mockProjects = [
   {
@@ -46,20 +47,7 @@ const initialTestState = {
     parentId: undefined
   },
   files: initialFilesState(),
-  preferences: {
-    fontSize: 18,
-    autosave: true,
-    linewrap: true,
-    lineNumbers: true,
-    lintWarning: false,
-    textOutput: false,
-    gridOutput: false,
-    theme: 'light',
-    autorefresh: false,
-    language: 'en-US',
-    autocloseBracketsQuotes: true,
-    autocompleteHinter: false
-  },
+  preferences: initialPrefState,
   user: {
     email: 'happydog@example.com',
     username: 'happydog',