Merge pull request #12 from sean1292/staging

Added class toggle functionality

Author: tonyito

src/actionTypes/index.ts

@@ -30,3 +30,4 @@ export const UPDATE_CHILDREN_SORT: string = 'UPDATE_CHILDREN_SORT';
 export const CHANGE_IMAGE_SOURCE: string = 'CHANGE_IMAGE_SOURCE';
 export const DELETE_IMAGE: string = 'DELETE_IMAGE';
 export const TOGGLE_STATE: string = 'TOGGLE_STATE';
+export const TOGGLE_CLASS: string = 'TOGGLE_CLASS';

src/actions/components.ts

@@ -1,5 +1,10 @@
 import {
-  ComponentInt, ComponentsInt, PropInt, ChildInt, Action, ApplicationStateInt
+  ComponentInt,
+  ComponentsInt,
+  PropInt,
+  ChildInt,
+  Action,
+  ApplicationStateInt
 } from '../utils/Interfaces.ts';
 
 import {
@@ -9,6 +14,7 @@ import {
   DELETE_CHILD,
   DELETE_COMPONENT,
   TOGGLE_STATE,
+  TOGGLE_CLASS,
   CHANGE_FOCUS_COMPONENT,
   CHANGE_FOCUS_CHILD,
   CHANGE_COMPONENT_FOCUS_CHILD,
@@ -36,18 +42,19 @@ import createApplicationUtil from '../utils/createApplication.util.ts';
 
 export const changeImagePath = (imageSource: string) => ({
   type: CHANGE_IMAGE_SOURCE,
-  payload: { imageSource },
-})
+  payload: { imageSource }
+});
 
 export const loadInitData = () => (dispatch: (arg: Action) => void) => {
   loadState().then((data: ApplicationStateInt) => {
+    console.log('data.workspace', data.workspace);
     dispatch({
-    type: LOAD_INIT_DATA,
-    payload: {
-      data: data ? data.workspace : {},
-    },
+      type: LOAD_INIT_DATA,
+      payload: {
+        data: data ? data.workspace : {}
+      }
+    });
   });
-});
 };
 
 export const addComponent = ({ title }: { title: string }) => (dispatch: (arg: Action) => void) => {
@@ -59,9 +66,9 @@ export const addChild = ({
   childType,
   HTMLInfo
 }: {
-title: string;
-childType: string;
-HTMLInfo: object;
+  title: string;
+  childType: string;
+  HTMLInfo: object;
 }) => (dispatch: (arg: Action) => void) => {
   dispatch({ type: ADD_CHILD, payload: { title, childType, HTMLInfo } });
 };
@@ -75,8 +82,8 @@ export const deleteComponent = ({
   componentId,
   stateComponents
 }: {
-componentId: number;
-stateComponents: ComponentsInt;
+  componentId: number;
+  stateComponents: ComponentsInt;
 }) => (dispatch: (arg: Action) => void) => {
   // find all places where the "to be deleted" is a child and do what u gotta do
   stateComponents.forEach((parent: ComponentInt) => {
@@ -100,21 +107,25 @@ stateComponents: ComponentsInt;
   dispatch({ type: DELETE_COMPONENT, payload: { componentId } });
 };
 
-export const changeFocusComponent = ({ title }: { title: string }) => (dispatch: (arg: Action) => void) => {
+export const changeFocusComponent = ({ title }: { title: string }) => (
+  dispatch: (arg: Action) => void
+) => {
   dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title } });
 };
 
 // make sure childId is being sent in
-export const changeFocusChild = ({ childId }: { childId: number }) => (dispatch: (arg: Action) => void) => {
+export const changeFocusChild = ({ childId }: { childId: number }) => (
+  dispatch: (arg: Action) => void
+) => {
   dispatch({ type: CHANGE_FOCUS_CHILD, payload: { childId } });
 };
 
 export const changeComponentFocusChild = ({
   componentId,
   childId
 }: {
-componentId: number;
-childId: number;
+  componentId: number;
+  childId: number;
 }) => (dispatch: (arg: Action) => void) => {
   dispatch({
     type: CHANGE_COMPONENT_FOCUS_CHILD,
@@ -124,18 +135,18 @@ childId: number;
 
 export const deleteImage = () => ({
   type: DELETE_IMAGE
-})
+});
 
 export const exportFiles = ({
   components,
   path,
   appName,
   exportAppBool
 }: {
-components: ComponentsInt;
-path: string;
-appName: string;
-exportAppBool: boolean;
+  components: ComponentsInt;
+  path: string;
+  appName: string;
+  exportAppBool: boolean;
 }) => (dispatch: (arg: Action) => void) => {
   // this dispatch sets the global state property 'loading' to true until the createFiles call resolves below
   dispatch({
@@ -185,11 +196,11 @@ export const createApplication = ({
   appName = 'reactype_app',
   exportAppBool
 }: {
-path: string;
-components: ComponentsInt;
-genOption: number;
-appName: string;
-exportAppBool: boolean;
+  path: string;
+  components: ComponentsInt;
+  genOption: number;
+  appName: string;
+  exportAppBool: boolean;
 }) => (dispatch: (arg: Action) => void) => {
   if (genOption === 0) {
     exportAppBool = false;
@@ -209,7 +220,7 @@ exportAppBool: boolean;
     createApplicationUtil({
       path,
       appName,
-      genOption,
+      genOption
     })
       .then(() => {
         dispatch({
@@ -246,8 +257,12 @@ export const deleteProp = (propId: number) => (dispatch: (arg: Action) => void)
   dispatch({ type: DELETE_PROP, payload: propId });
 };
 
-export const toggleComponentState = (index: string) => (dispatch: any) => {
-  dispatch({ type: TOGGLE_STATE, payload: index });
+export const toggleComponentState = (id: string) => (dispatch: any) => {
+  dispatch({ type: TOGGLE_STATE, payload: id });
+};
+
+export const toggleComponentClass = (id: string) => (dispatch: any) => {
+  dispatch({ type: TOGGLE_CLASS, payload: id });
 };
 
 export const addProp = (prop: PropInt) => ({
@@ -256,7 +271,7 @@ export const addProp = (prop: PropInt) => ({
 });
 
 export const updateHtmlAttr = ({ attr, value }: { attr: string; value: string }) => (
-  dispatch: (arg: Action) => void,
+  dispatch: (arg: Action) => void
 ) => {
   dispatch({
     type: UPDATE_HTML_ATTR,
@@ -272,4 +287,4 @@ export const updateHtmlAttr = ({ attr, value }: { attr: string; value: string })
 //     type: UPDATE_CHILDREN_SORT,
 //     payload: { newSortValues },
 //   });
-// };
+// };

src/components/LeftColExpansionPanel.tsx

@@ -26,10 +26,11 @@ const LeftColExpansionPanel = (props: any) => {
     selectableChildren,
     components,
     deleteComponent,
-    toggleComponentState
+    toggleComponentState,
+    toggleComponentClass
   } = props;
 
-  const { title, id, color } = component;
+  const { title, id, color, stateful, classBased } = component;
   useEffect(() => {
     console.log('title: ', title);
   });
@@ -81,8 +82,9 @@ const LeftColExpansionPanel = (props: any) => {
                           peview
                       */}
                       <Switch
+                        checked={stateful}
                         onChange={e => {
-                          toggleComponentState(props.id);
+                          toggleComponentState(id);
                           changeFocusComponent(title);
                         }}
                         value="stateful"
@@ -106,13 +108,13 @@ const LeftColExpansionPanel = (props: any) => {
                           Class?
                         </InputLabel>
                         <Switch
-                          // checked={classBased}
-                          // onChange={e => ONCHANGE FUNCTION PENDING ON CLASS REDUCER
-                          //   updateComponent(id, { classBased: e.target.checked })
-                          // }
+                          checked={classBased}
+                          onChange={e => {
+                            toggleComponentClass(id);
+                            changeFocusComponent(title);
+                          }}
                           value="classBased"
                           color="primary"
-                          id={props.index.toString()}
                         />
                       </div>
                     </div>

src/containers/LeftContainer.tsx

@@ -34,6 +34,7 @@ interface PropsInt {
   createApp: any;
   deleteAllData: any;
   toggleComponentState: any;
+  toggleComponentClass: any;
   deleteImage: any;
 }
 
@@ -72,6 +73,7 @@ const mapDispatchToProps = (dispatch: any) => ({
     stateComponents: ComponentsInt;
   }) => dispatch(actions.deleteComponent({ componentId, stateComponents })),
   toggleComponentState: (id: string) => dispatch(actions.toggleComponentState(id)),
+  toggleComponentClass: (id: string) => dispatch(actions.toggleComponentClass(id)),
   deleteAllData: () => dispatch(actions.deleteAllData()),
   deleteImage: () => dispatch(actions.deleteImage()),
   createApp: ({
@@ -214,6 +216,7 @@ class LeftContainer extends Component<PropsInt, StateInt> {
       changeFocusChild,
       selectableChildren,
       toggleComponentState,
+      toggleComponentClass,
       deleteImage
     } = this.props;
     const { componentName, modal } = this.state;
@@ -234,6 +237,7 @@ class LeftContainer extends Component<PropsInt, StateInt> {
           deleteComponent={deleteComponent}
           components={components}
           toggleComponentState={toggleComponentState}
+          toggleComponentClass={toggleComponentClass}
         />
       ));
     const { addImage, clearImage } = this;
@@ -408,4 +412,5 @@ function styles(): any {
 
 export default compose(
   withStyles(styles),
-  connect(mapStateToProps, mapDispatchToProps))(LeftContainer);
+  connect(mapStateToProps, mapDispatchToProps)
+)(LeftContainer);

src/reducers/componentReducer.ts

@@ -7,6 +7,7 @@ import {
   DELETE_CHILD,
   DELETE_COMPONENT,
   TOGGLE_STATE,
+  TOGGLE_CLASS,
   CHANGE_FOCUS_COMPONENT,
   CHANGE_FOCUS_CHILD,
   CHANGE_COMPONENT_FOCUS_CHILD,
@@ -47,7 +48,8 @@ import {
   deleteProp,
   updateHtmlAttr,
   updateChildrenSort,
-  toggleComponentState
+  toggleComponentState,
+  toggleComponentClass
 } from '../utils/componentReducer.util.ts';
 import cloneDeep from '../utils/cloneDeep.ts';
 
@@ -124,6 +126,8 @@ const componentReducer = (state = initialApplicationState, action: any) => {
       return deleteComponent(state, action.payload);
     case TOGGLE_STATE:
       return toggleComponentState(state, action.payload);
+    case TOGGLE_CLASS:
+      return toggleComponentClass(state, action.payload);
     case CHANGE_FOCUS_COMPONENT:
       return changeFocusComponent(state, action.payload);
     case CHANGE_FOCUS_CHILD: