reducer cleanup, working version

Author: ChristianEdwardPadilla

src/actions/components.js

@@ -131,8 +131,8 @@ export const changeFocusComponent = ({ title }) => (dispatch) => {
 };
 
 // make sure childId is being sent in
-export const changeFocusChild = ({ title, childId }) => (dispatch) => {
-  dispatch({ type: CHANGE_FOCUS_CHILD, payload: { title, childId } });
+export const changeFocusChild = ({ childId }) => (dispatch) => {
+  dispatch({ type: CHANGE_FOCUS_CHILD, payload: { childId } });
 };
 
 export const changeComponentFocusChild = ({ componentId, childId }) => (dispatch) => {

src/containers/LeftContainer.jsx

@@ -1,59 +1,50 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
-import { compose } from "redux";
-import FormControl from "@material-ui/core/FormControl";
-import TextField from "@material-ui/core/TextField";
-import Button from "@material-ui/core/Button";
-import AddIcon from "@material-ui/icons/Add";
-import Grid from "@material-ui/core/Grid";
-import { withStyles } from "@material-ui/core/styles";
-import LeftColExpansionPanel from "../components/LeftColExpansionPanel.jsx";
-import HTMLComponentPanel from "../components/HTMLComponentPanel.jsx";
-import * as actions from "../actions/components";
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import FormControl from '@material-ui/core/FormControl';
+import TextField from '@material-ui/core/TextField';
+import Button from '@material-ui/core/Button';
+import AddIcon from '@material-ui/icons/Add';
+import Grid from '@material-ui/core/Grid';
+import { withStyles } from '@material-ui/core/styles';
+import LeftColExpansionPanel from '../components/LeftColExpansionPanel.jsx';
+import HTMLComponentPanel from '../components/HTMLComponentPanel.jsx';
+import * as actions from '../actions/components';
 
 const mapDispatchToProps = dispatch => ({
   addComponent: ({ title }) => dispatch(actions.addComponent({ title })),
   updateComponent: ({
-    id,
-    index,
-    newParentId = null,
-    color = null,
-    stateful = null
-  }) =>
-    dispatch(
-      actions.updateComponent({
-        id,
-        index,
-        newParentId,
-        color,
-        stateful
-      })
-    ),
-  addChild: ({ title, childType, HTMLInfo }) =>
-    dispatch(actions.addChild({ title, childType, HTMLInfo })),
-  changeFocusComponent: ({ title }) =>
-    dispatch(actions.changeFocusComponent({ title })),
-  changeFocusChild: ({ title, childId }) =>
-    dispatch(actions.changeFocusChild({ title, childId })),
-  deleteComponent: ({ componentId, stateComponents }) =>
-    dispatch(actions.deleteComponent({ componentId, stateComponents }))
+    id, index, newParentId = null, color = null, stateful = null,
+  }) => dispatch(
+    actions.updateComponent({
+      id,
+      index,
+      newParentId,
+      color,
+      stateful,
+    }),
+  ),
+  addChild: ({ title, childType, HTMLInfo }) => dispatch(actions.addChild({ title, childType, HTMLInfo })),
+  changeFocusComponent: ({ title }) => dispatch(actions.changeFocusComponent({ title })),
+  changeFocusChild: ({ childId }) => dispatch(actions.changeFocusChild({ childId })),
+  deleteComponent: ({ componentId, stateComponents }) => dispatch(actions.deleteComponent({ componentId, stateComponents })),
 });
 
 class LeftContainer extends Component {
   state = {
-    componentName: ""
+    componentName: '',
   };
 
-  handleChange = event => {
+  handleChange = (event) => {
     this.setState({
-      [event.target.name]: event.target.value
+      [event.target.name]: event.target.value,
     });
   };
 
   handleAddComponent = () => {
     this.props.addComponent({ title: this.state.componentName });
     this.setState({
-      componentName: ""
+      componentName: '',
     });
   };
 
@@ -68,7 +59,7 @@ class LeftContainer extends Component {
       addChild,
       changeFocusComponent,
       changeFocusChild,
-      selectableChildren
+      selectableChildren,
     } = this.props;
     const { componentName } = this.state;
 
@@ -101,8 +92,8 @@ class LeftContainer extends Component {
               margin="normal"
               autoFocus
               onChange={this.handleChange}
-              onKeyPress={ev => {
-                if (ev.key === "Enter") {
+              onKeyPress={(ev) => {
+                if (ev.key === 'Enter') {
                   // Do code here
                   this.handleAddComponent();
                   ev.preventDefault();
@@ -112,10 +103,10 @@ class LeftContainer extends Component {
               name="componentName"
               className={classes.light}
               InputProps={{
-                className: classes.input
+                className: classes.input,
               }}
               InputLabelProps={{
-                className: classes.input
+                className: classes.input,
               }}
             />
           </Grid>
@@ -151,48 +142,48 @@ function styles() {
     //   height: "200px"
     // },
     cssLabel: {
-      color: "white",
+      color: 'white',
 
-      "&$cssFocused": {
-        color: "green"
-      }
+      '&$cssFocused': {
+        color: 'green',
+      },
     },
     cssFocused: {},
     input: {
-      color: "#fff",
-      opacity: "0.7",
-      marginBottom: "10px"
+      color: '#fff',
+      opacity: '0.7',
+      marginBottom: '10px',
     },
     underline: {
-      color: "white",
-      "&::before": {
-        color: "white"
-      }
+      color: 'white',
+      '&::before': {
+        color: 'white',
+      },
     },
     button: {
-      color: "#fff",
+      color: '#fff',
 
-      "&:disabled": {
-        color: "grey"
-      }
+      '&:disabled': {
+        color: 'grey',
+      },
     },
     clearButton: {
-      top: "96%",
-      position: "sticky!important",
-      zIndex: "1",
+      top: '96%',
+      position: 'sticky!important',
+      zIndex: '1',
 
-      "&:disabled": {
-        color: "grey",
-        backgroundColor: "#424242"
-      }
-    }
+      '&:disabled': {
+        color: 'grey',
+        backgroundColor: '#424242',
+      },
+    },
   };
 }
 
 export default compose(
   withStyles(styles),
   connect(
     null,
-    mapDispatchToProps
-  )
+    mapDispatchToProps,
+  ),
 )(LeftContainer);

src/containers/MainContainer.jsx

@@ -34,7 +34,7 @@ const mapDispatchToProps = dispatch => ({
     }),
   ),
   openPanel: component => dispatch(openExpansionPanel(component)),
-  changeFocusChild: ({ title, childId }) => dispatch(changeFocusChild({ title, childId })),
+  changeFocusChild: ({ childId }) => dispatch(changeFocusChild({ childId })),
   changeComponentFocusChild: ({ componentId, childId }) => dispatch(changeComponentFocusChild({ componentId, childId })),
   deleteChild: ({}) => dispatch(deleteChild({})), // if u send no prms, function will delete focus child.
   deleteComponent: ({ componentId, stateComponents }) => dispatch(deleteComponent({ componentId, stateComponents })),

src/utils/componentReducer.util.js

@@ -398,7 +398,7 @@ export const changeFocusComponent = (state, { title = state.focusComponent.title
   };
 };
 
-export const changeFocusChild = (state, { title, childId }) => {
+export const changeFocusChild = (state, { childId }) => {
   const focComp = state.components.find(comp => comp.title === state.focusComponent.title);
   let newFocusChild = focComp.childrenArray.find(child => child.childId === childId);