ts changes to react components and util files

Author: tolgamizrakci

src/actions/components.ts

@@ -0,0 +1,280 @@
+import {
+  ComponentInt,
+  ChildInt,
+  ApplicationStateInt,
+  ComponentsInt,
+  PropInt
+} from "../utils/interfaces";
+
+import {
+  LOAD_INIT_DATA,
+  ADD_COMPONENT,
+  ADD_CHILD,
+  DELETE_CHILD,
+  DELETE_COMPONENT,
+  CHANGE_FOCUS_COMPONENT,
+  CHANGE_FOCUS_CHILD,
+  CHANGE_COMPONENT_FOCUS_CHILD,
+  EXPORT_FILES,
+  EXPORT_FILES_SUCCESS,
+  EXPORT_FILES_ERROR,
+  HANDLE_CLOSE,
+  HANDLE_TRANSFORM,
+  CREATE_APPLICATION,
+  CREATE_APPLICATION_SUCCESS,
+  CREATE_APPLICATION_ERROR,
+  OPEN_EXPANSION_PANEL,
+  DELETE_PROP,
+  ADD_PROP,
+  DELETE_ALL_DATA,
+  UPDATE_HTML_ATTR,
+  UPDATE_CHILDREN_SORT
+} from "../actionTypes/index";
+
+import { loadState } from "../localStorage";
+import createFiles from "../utils/createFiles.util";
+import createApplicationUtil from "../utils/createApplication.util";
+
+export const loadInitData = () => (dispatch: any) => {
+  loadState().then((data: any) =>
+    dispatch({
+      type: LOAD_INIT_DATA,
+      payload: {
+        data: data ? data.workspace : {}
+      }
+    })
+  );
+};
+
+export const addComponent = ({ title }: { title: string }) => (
+  dispatch: any
+) => {
+  dispatch({ type: ADD_COMPONENT, payload: { title } });
+};
+
+export const addChild = ({
+  title,
+  childType,
+  HTMLInfo
+}: {
+  title: string;
+  childType: string;
+  HTMLInfo: object;
+}) => (dispatch: any) => {
+  dispatch({ type: ADD_CHILD, payload: { title, childType, HTMLInfo } });
+};
+
+export const deleteChild = ({}) => (dispatch: any) => {
+  // with no payload, it will delete focusd child
+  dispatch({ type: DELETE_CHILD, payload: {} });
+};
+
+export const deleteComponent = ({
+  componentId,
+  stateComponents
+}: {
+  componentId: number;
+  stateComponents: ComponentsInt;
+}) => (dispatch: any) => {
+  // find all places where the "to be delted" is a child and do what u gotta do
+  stateComponents.forEach(parent => {
+    parent.childrenArray
+      .filter(child => child.childComponentId === componentId)
+      .forEach(child => {
+        dispatch({
+          type: DELETE_CHILD,
+          payload: {
+            parentId: parent.id,
+            childId: child.childId,
+            calledFromDeleteComponent: true
+          }
+        });
+      });
+  });
+
+  // change focus to APp
+  dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: "App" } });
+  // after taking care of the children delete the component
+  dispatch({ type: DELETE_COMPONENT, payload: { componentId } });
+};
+
+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
+) => {
+  dispatch({ type: CHANGE_FOCUS_CHILD, payload: { childId } });
+};
+
+export const changeComponentFocusChild = ({
+  componentId,
+  childId
+}: {
+  componentId: number;
+  childId: number;
+}) => (dispatch: any) => {
+  dispatch({
+    type: CHANGE_COMPONENT_FOCUS_CHILD,
+    payload: { componentId, childId }
+  });
+};
+
+export const exportFiles = ({
+  components,
+  path,
+  appName,
+  exportAppBool
+}: {
+  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
+  });
+
+  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 }
+      })
+    );
+};
+
+export const handleClose = () => ({
+  type: HANDLE_CLOSE,
+  payload: false
+});
+
+export const handleTransform = (
+  componentId: number,
+  childId: number,
+  {
+    x,
+    y,
+    width,
+    height
+  }: { x: number; y: number; width: number; height: number }
+) => ({
+  type: HANDLE_TRANSFORM,
+  payload: {
+    componentId,
+    childId,
+    x,
+    y,
+    width,
+    height
+  }
+});
+
+export const createApplication = ({
+  path,
+  components = [],
+  genOption,
+  appName = "reactype_app",
+  exportAppBool
+}: {
+  path: string;
+  components: ComponentsInt;
+  genOption: number;
+  appName: string;
+  exportAppBool: boolean;
+}) => (dispatch: any) => {
+  if (genOption === 0) {
+    exportAppBool = false;
+    dispatch(
+      exportFiles({
+        appName,
+        path,
+        components,
+        exportAppBool
+      })
+    );
+  } else if (genOption) {
+    exportAppBool = true;
+    dispatch({
+      type: CREATE_APPLICATION
+    });
+    createApplicationUtil({
+      path,
+      appName,
+      genOption
+      // exportAppBool
+    })
+      .then(() => {
+        dispatch({
+          type: CREATE_APPLICATION_SUCCESS
+        });
+        dispatch(
+          exportFiles({
+            appName,
+            path,
+            components,
+            exportAppBool
+          })
+        );
+      })
+      .catch(err =>
+        dispatch({
+          type: CREATE_APPLICATION_ERROR,
+          payload: { status: true, err }
+        })
+      );
+  }
+};
+
+export const openExpansionPanel = (component: ComponentInt) => ({
+  type: OPEN_EXPANSION_PANEL,
+  payload: { component }
+});
+
+export const deleteAllData = () => ({
+  type: DELETE_ALL_DATA
+});
+
+export const deleteProp = (propId: number) => (dispatch: any) => {
+  dispatch({ type: DELETE_PROP, payload: propId });
+};
+
+export const addProp = (prop: PropInt) => ({
+  type: ADD_PROP,
+  payload: { ...prop }
+});
+
+export const updateHtmlAttr = ({
+  attr,
+  value
+}: {
+  attr: string;
+  value: string;
+}) => (dispatch: any) => {
+  dispatch({
+    type: UPDATE_HTML_ATTR,
+    payload: { attr, value }
+  });
+};
+
+export const updateChildrenSort = ({
+  newSortValues
+}: {
+  newSortValues: any;
+}) => (dispatch: any) => {
+  dispatch({
+    type: UPDATE_CHILDREN_SORT,
+    payload: { newSortValues }
+  });
+};

src/components/xxxSortableComponent.jsx

@@ -5,7 +5,7 @@ import LinearProgress from '@material-ui/core/LinearProgress';
 import LeftContainer from './LeftContainer';
 import MainContainer from './MainContainer';
 import theme from '../components/theme';
-import { loadInitData } from '../actions/components.js';
+import { loadInitData } from '../actions/components';
 import { ComponentInt, ComponentsInt, ChildInt } from '../utils/interfaces';
 
 type Props = {
@@ -33,20 +33,6 @@ class AppContainer extends Component<Props> {
     rightColumnOpen: true,
   };
 
-  // collapseColumn = () => {
-  //   if (this.state.width === 25) {
-  //     this.setState({
-  //       width: 0,
-  //       rightColumnOpen: false,
-  //     });
-  //   } else {
-  //     this.setState({
-  //       width: 25,
-  //       rightColumnOpen: true,
-  //     });
-  //   }
-  // };
-
   componentDidMount() {
     this.props.loadInitData();
   }
@@ -68,9 +54,8 @@ class AppContainer extends Component<Props> {
           />
           <MainContainer
             components={components}
-            // collapseColumn={this.collapseColumn}
-            width={width}
-            rightColumnOpen={rightColumnOpen}
+            // width={width}
+            // rightColumnOpen={rightColumnOpen}
           />
           {loading ? (
             <div
@@ -93,11 +78,3 @@ export default connect(
   mapStateToProps,
   mapDispatchToProps,
 )(AppContainer);
-
-// AppContainer.propTypes = {
-//   components: PropTypes.array.isRequired,
-//   totalComponents: PropTypes.number.isRequired,
-//   focusComponent: PropTypes.object.isRequired,
-//   loadInitData: PropTypes.func.isRequired,
-//   loading: PropTypes.bool,
-// };