Added redux for use of a global state

package.json

@@ -6,16 +6,18 @@
     "@ckeditor/ckeditor5-build-inline": "^15.0.0",
     "@ckeditor/ckeditor5-react": "^2.0.0",
     "babel-preset-react": "^6.24.1",
-    "font-picker-react": "^3.4.1",
     "dragula": "^3.7.2",
+    "font-picker-react": "^3.4.1",
     "react": "^16.10.2",
     "react-color": "^2.17.3",
     "react-dom": "^16.10.2",
     "react-dragula": "^1.1.17",
+    "react-redux": "^7.1.3",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.2.0",
     "react-select": "^3.0.8",
+    "redux": "^4.0.5",
     "styled-components": "^4.4.1"
   },
   "scripts": {

src/Components/BuildChild/index.js

@@ -64,9 +64,9 @@ class BuildChild extends React.Component {
                 </SettingsButton>
 
                 <SettingsPopup className={active && 'active-popup'}>
-                    <Edit>
+                    {/*<Edit>
                         <p>Edit</p>
-                    </Edit>
+                    </Edit> */}
                     <Delete
                         onClick={() => {
                             this.setState({ active: false });

src/Components/ControlBar/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import Select from 'react-select';
+import { connect } from 'react-redux';
+import { changeAllColors } from '../../actions/colors';
 import Accordion from '../Accordion';
 import { premadeList, premadeSchemes } from '../../store/premadeSchemes';
 import {
@@ -16,22 +18,19 @@ import {
     Export
 } from './styles';
 
-export default class ControlBar extends React.Component {
+class ControlBar extends React.Component {
     constructor(props) {
         super(props);
-
-        this.state = {
-            colorScheme: premadeSchemes.default
-        };
     }
 
     handleChangeScheme = theme => {
-        this.setState({ colorScheme: premadeSchemes[theme.value] });
+        const { dispatch } = this.props;
+        // this.setState({ colorScheme: premadeSchemes[theme.value] });
+        dispatch(changeAllColors(premadeSchemes[theme.value]));
     };
 
     render() {
-        const { colorScheme } = this.state;
-        const { handleModal, handleCodeModal, addBuilderElem } = this.props;
+        const { handleModal, handleCodeModal, addBuilderElem, colors } = this.props;
 
         return (
             <ControlSideBar>
@@ -52,8 +51,8 @@ export default class ControlBar extends React.Component {
                             />
                         </Dropdown>
                         <ColorScheme>
-                            {Object.keys(colorScheme).map((color, index) => (
-                                <Color color={colorScheme[color]} key={index} />
+                            {Object.keys(colors).map((color, index) => (
+                                <Color color={colors[color]} key={index} />
                             ))}
                         </ColorScheme>
                     </Padded>
@@ -315,3 +314,11 @@ export default class ControlBar extends React.Component {
         );
     }
 }
+
+const mapStateToProps = state => {
+    return {
+        colors: state
+    };
+};
+
+export default connect(mapStateToProps)(ControlBar);

src/actions/colors.js

@@ -0,0 +1,10 @@
+export const changeColor = (color, hex) => ({
+    type: 'CHANGE_COLOR',
+    color,
+    hex
+});
+
+export const changeAllColors = (colors) => ({
+    type: 'CHANGE_ALL_COLORS',
+    colors
+});

src/index.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Switch, Route, BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import configureStore from './store/configureStore';
 import ChooseTheme from './views/ChooseTheme';
 import ChooseColors from './views/ChooseColors';
 import Builder from './views/Builder';
@@ -10,8 +12,11 @@ import * as serviceWorker from './serviceWorker';
 // eslint-disable-next-line import/extensions
 import GlobalStyles from './reset.css.js';
 
+const store = configureStore();
+
 const routing = (
-    <BrowserRouter>
+    <Provider store={store}>
+        <BrowserRouter>
         <div>
             <GlobalStyles />
             <Switch>
@@ -22,7 +27,8 @@ const routing = (
                 <Route component={ErrorPage} />
             </Switch>
         </div>
-    </BrowserRouter>
+        </BrowserRouter>
+    </Provider>
 );
 
 ReactDOM.render(routing, document.getElementById('root'));

src/reducers/colors.js

@@ -0,0 +1,36 @@
+const colorsReducerDefaultState = {
+    colorOne: '#4ECDC4',
+    colorTwo: '#A7EEE9',
+    colorThree: '#FF6B6B',
+    colorFour: '#FFAAAA',
+    colorFive: '#FFEB8C',
+    colorSix: '#FFF4C1',
+    colorSeven: '#D4D4D4',
+    colorEight: '#EFF3EF'
+};
+
+const colorsReducer = (state = colorsReducerDefaultState, action) => {
+    switch (action.type) {
+        case 'CHANGE_COLOR':
+            return {
+                ...state,
+                [action.color]: action.hex
+            };
+        case 'CHANGE_ALL_COLORS':
+            return {
+                // Had to individually set them because object was being sent with prototype inside it
+                colorOne: action.colors.colorOne,
+                colorTwo: action.colors.colorTwo,
+                colorThree: action.colors.colorThree,
+                colorFour: action.colors.colorFour,
+                colorFive: action.colors.colorFive,
+                colorSix: action.colors.colorSix,
+                colorSeven: action.colors.colorSeven,
+                colorEight: action.colors.colorEight,
+            }
+        default:
+            return state;
+    }
+};
+
+export default colorsReducer;

src/store/configureStore.js

@@ -0,0 +1,9 @@
+import { createStore } from 'redux';
+import colorsReducer from '../reducers/colors';
+
+export default () => {
+    // Create global store
+    const store = createStore(colorsReducer);
+
+    return store;
+};