Merge pull request #9 from jzuniga206/feature

Added stateful toggle for all components
open-source-labs · Mar 11, 2020 · 1a40a57 · 1a40a57
2 parents e51db57 + 76d4bcd
commit 1a40a57
Show file tree

Hide file tree

Showing 10 changed files with 410 additions and 220 deletions.
diff --git a/src/actionTypes/index.js b/src/actionTypes/index.js
@@ -4,6 +4,7 @@ export const ADD_CHILD = 'ADD_CHILD';
 export const DELETE_CHILD = 'DELETE_CHILD';
 export const UPDATE_COMPONENT = 'UPDATE_COMPONENT';
 export const DELETE_COMPONENT = 'DELETE_COMPONENT';
+export const TOGGLE_STATE = 'TOGGLE_STATE';
 export const CHANGE_FOCUS_COMPONENT = 'CHANGE_FOCUS_COMPONENT';
 export const CHANGE_COMPONENT_FOCUS_CHILD = 'CHANGE_COMPONENT_FOCUS_CHILD';
 export const CHANGE_FOCUS_CHILD = 'CHANGE_FOCUS_CHILD';
@@ -28,4 +29,5 @@ export const CHANGE_IMAGE_PATH = 'CHANGE_IMAGE_PATH';
 export const UPDATE_HTML_ATTR = 'UPDATE_HTML_ATTR';
 export const UPDATE_CHILDREN_SORT = 'UPDATE_CHILDREN_SORT';
 export const CHANGE_IMAGE_SOURCE = 'CHANGE_IMAGE_SOURCE';
-export const DELETE_IMAGE = 'DELETE_IMAGE';
+export const DELETE_IMAGE = 'DELETE_IMAGE';
+
diff --git a/src/actions/components.ts b/src/actions/components.ts
@@ -1,5 +1,8 @@
 import {
-  ComponentInt, ComponentsInt, PropInt, ChildInt,
+  ComponentInt,
+  ComponentsInt,
+  PropInt,
+  ChildInt
 } from '../utils/Interfaces.ts';
 
 import {
@@ -8,6 +11,7 @@ import {
   ADD_CHILD,
   DELETE_CHILD,
   DELETE_COMPONENT,
+  TOGGLE_STATE,
   CHANGE_FOCUS_COMPONENT,
   CHANGE_FOCUS_CHILD,
   CHANGE_COMPONENT_FOCUS_CHILD,
@@ -24,9 +28,11 @@ import {
   ADD_PROP,
   DELETE_ALL_DATA,
   UPDATE_HTML_ATTR,
+
   UPDATE_CHILDREN_SORT,
   CHANGE_IMAGE_SOURCE,
   DELETE_IMAGE
+
 } from '../actionTypes/index.js';
 
 import { loadState } from '../localStorage';
@@ -39,26 +45,30 @@ export const changeImagePath = (imageSource: string) => ({
 })
 
 export const loadInitData = () => (dispatch: any) => {
-  loadState().then((data: any) => dispatch({
-    type: LOAD_INIT_DATA,
-    payload: {
-      data: data ? data.workspace : {},
-    },
-  }));
+  loadState().then((data: any) =>
+    dispatch({
+      type: LOAD_INIT_DATA,
+      payload: {
+        data: data ? data.workspace : {}
+      }
+    })
+  );
 };
 
-export const addComponent = ({ title }: { title: string }) => (dispatch: any) => {
+export const addComponent = ({ title }: { title: string }) => (
+  dispatch: any
+) => {
   dispatch({ type: ADD_COMPONENT, payload: { title } });
 };
 
 export const addChild = ({
   title,
   childType,
-  HTMLInfo,
+  HTMLInfo
 }: {
-title: string;
-childType: string;
-HTMLInfo: object;
+  title: string;
+  childType: string;
+  HTMLInfo: object;
 }) => (dispatch: any) => {
   dispatch({ type: ADD_CHILD, payload: { title, childType, HTMLInfo } });
 };
@@ -70,10 +80,10 @@ export const deleteChild = ({}) => (dispatch: any) => {
 
 export const deleteComponent = ({
   componentId,
-  stateComponents,
+  stateComponents
 }: {
-componentId: number;
-stateComponents: ComponentsInt;
+  componentId: number;
+  stateComponents: ComponentsInt;
 }) => (dispatch: any) => {
   // find all places where the "to be deleted" is a child and do what u gotta do
   stateComponents.forEach((parent: ComponentInt) => {
@@ -85,8 +95,8 @@ stateComponents: ComponentsInt;
           payload: {
             parentId: parent.id,
             childId: child.childId,
-            calledFromDeleteComponent: true,
-          },
+            calledFromDeleteComponent: true
+          }
         });
       });
   });
@@ -97,25 +107,29 @@ stateComponents: ComponentsInt;
   dispatch({ type: DELETE_COMPONENT, payload: { componentId } });
 };
 
-export const changeFocusComponent = ({ title }: { title: string }) => (dispatch: any) => {
+export const changeFocusComponent = ({ title }: { title: string }) => (
+  dispatch: any
+) => {
   dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title } });
 };
 
 // make sure childId is being sent in
-export const changeFocusChild = ({ childId }: { childId: number }) => (dispatch: any) => {
+export const changeFocusChild = ({ childId }: { childId: number }) => (
+  dispatch: any
+) => {
   dispatch({ type: CHANGE_FOCUS_CHILD, payload: { childId } });
 };
 
 export const changeComponentFocusChild = ({
   componentId,
-  childId,
+  childId
 }: {
-componentId: number;
-childId: number;
+  componentId: number;
+  childId: number;
 }) => (dispatch: any) => {
   dispatch({
     type: CHANGE_COMPONENT_FOCUS_CHILD,
-    payload: { componentId, childId },
+    payload: { componentId, childId }
   });
 };
 
@@ -129,40 +143,47 @@ export const exportFiles = ({
   components,
   path,
   appName,
-  exportAppBool,
+  exportAppBool
 }: {
-components: ComponentsInt;
-path: string;
-appName: string;
-exportAppBool: boolean;
+  components: ComponentsInt;
+  path: string;
+  appName: string;
+  exportAppBool: boolean;
 }) => (dispatch: any) => {
   // this dispatch sets the global state property 'loading' to true until the createFiles call resolves below
   dispatch({
-    type: EXPORT_FILES,
+    type: EXPORT_FILES
   });
 
   createFiles(components, path, appName, exportAppBool)
-    .then(dir => dispatch({
-      type: EXPORT_FILES_SUCCESS,
-      payload: { status: true, dir: dir[0] },
-    }))
-    .catch(err => dispatch({
-      type: EXPORT_FILES_ERROR,
-      payload: { status: true, err },
-    }));
+    .then(dir =>
+      dispatch({
+        type: EXPORT_FILES_SUCCESS,
+        payload: { status: true, dir: dir[0] }
+      })
+    )
+    .catch(err =>
+      dispatch({
+        type: EXPORT_FILES_ERROR,
+        payload: { status: true, err }
+      })
+    );
 };
 
 export const handleClose = () => ({
   type: HANDLE_CLOSE,
-  payload: false,
+  payload: false
 });
 
 export const handleTransform = (
   componentId: number,
   childId: number,
   {
-    x, y, width, height,
-  }: { x: number; y: number; width: number; height: number },
+    x,
+    y,
+    width,
+    height
+  }: { x: number; y: number; width: number; height: number }
 ) => ({
   type: HANDLE_TRANSFORM,
   payload: {
@@ -171,22 +192,22 @@ export const handleTransform = (
     x,
     y,
     width,
-    height,
-  },
+    height
+  }
 });
 
 export const createApplication = ({
   path,
   components = [],
   genOption,
   appName = 'reactype_app',
-  exportAppBool,
+  exportAppBool
 }: {
-path: string;
-components: ComponentsInt;
-genOption: number;
-appName: string;
-exportAppBool: boolean;
+  path: string;
+  components: ComponentsInt;
+  genOption: number;
+  appName: string;
+  exportAppBool: boolean;
 }) => (dispatch: any) => {
   if (genOption === 0) {
     exportAppBool = false;
@@ -195,72 +216,84 @@ exportAppBool: boolean;
         appName,
         path,
         components,
-        exportAppBool,
-      }),
+        exportAppBool
+      })
     );
   } else if (genOption) {
     exportAppBool = true;
     dispatch({
-      type: CREATE_APPLICATION,
+      type: CREATE_APPLICATION
     });
     createApplicationUtil({
       path,
       appName,
-      genOption,
+      genOption
       // exportAppBool
     })
       .then(() => {
         dispatch({
-          type: CREATE_APPLICATION_SUCCESS,
+          type: CREATE_APPLICATION_SUCCESS
         });
         dispatch(
           exportFiles({
             appName,
             path,
             components,
-            exportAppBool,
-          }),
+            exportAppBool
+          })
         );
       })
-      .catch(err => dispatch({
-        type: CREATE_APPLICATION_ERROR,
-        payload: { status: true, err },
-      }));
+      .catch(err =>
+        dispatch({
+          type: CREATE_APPLICATION_ERROR,
+          payload: { status: true, err }
+        })
+      );
   }
 };
 
 export const openExpansionPanel = (component: ComponentInt) => ({
   type: OPEN_EXPANSION_PANEL,
-  payload: { component },
+  payload: { component }
 });
 
 export const deleteAllData = () => ({
-  type: DELETE_ALL_DATA,
+  type: DELETE_ALL_DATA
 });
 
 export const deleteProp = (propId: number) => (dispatch: any) => {
   dispatch({ type: DELETE_PROP, payload: propId });
 };
 
+export const toggleComponentState = (index: string) => (dispatch: any) => {
+  dispatch({ type: TOGGLE_STATE, payload: index });
+};
+
 export const addProp = (prop: PropInt) => ({
   type: ADD_PROP,
-  payload: { ...prop },
+  payload: { ...prop }
 });
 
-export const updateHtmlAttr = ({ attr, value }: { attr: string; value: string }) => (
-  dispatch: any,
-) => {
+export const updateHtmlAttr = ({
+  attr,
+  value
+}: {
+  attr: string;
+  value: string;
+}) => (dispatch: any) => {
   dispatch({
     type: UPDATE_HTML_ATTR,
-    payload: { attr, value },
+    payload: { attr, value }
   });
 };
 
-export const updateChildrenSort = ({ newSortValues }: { newSortValues: any }) => (
-  dispatch: any,
-) => {
+export const updateChildrenSort = ({
+  newSortValues
+}: {
+  newSortValues: any;
+}) => (dispatch: any) => {
   dispatch({
     type: UPDATE_CHILDREN_SORT,
-    payload: { newSortValues },
+    payload: { newSortValues }
   });
 };