initial state object is working for addChild react component. addChil…

src/actionTypes/index.js

@@ -1,5 +1,6 @@
 export const LOAD_INIT_DATA = 'LOAD_INIT_DATA';
 export const ADD_COMPONENT = 'ADD_COMPONENT';
+export const ADD_CHILD = 'ADD_CHILD';
 export const UPDATE_COMPONENT = 'UPDATE_COMPONENT';
 export const DELETE_COMPONENT = 'DELETE_COMPONENT';
 export const UPDATE_CHILDREN = 'UPDATE_CHILDREN';

src/actions/components.js

@@ -1,6 +1,7 @@
 import {
   LOAD_INIT_DATA,
   ADD_COMPONENT,
+  ADD_CHILD,
   UPDATE_COMPONENT,
   DELETE_COMPONENT,
   UPDATE_CHILDREN,
@@ -62,6 +63,11 @@ export const addComponent = ({ title }) => (dispatch) => {
   dispatch({ type: SET_SELECTABLE_PARENTS });
 };
 
+export const addChild = ({ title }) => (dispatch) => {
+  dispatch({ type: ADD_CHILD, payload: { title } });
+  // dispatch({ type: SET_SELECTABLE_PARENTS });
+};
+
 export const deleteComponent = ({ index, id, parentIds = [] }) => (dispatch) => {
   if (parentIds.length) {
     // Delete Component  from its parent if it has a parent.
@@ -91,21 +97,21 @@ export const updateComponent = ({
   dispatch({ type: SET_SELECTABLE_PARENTS });
 };
 
-export const exportFiles = ({ components, path }) => (dispatch) => {
-  dispatch({
-    type: EXPORT_FILES,
-  });
-
-  createFiles(components, path)
-    .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 exportFiles = ({ components, path }) => (dispatch) => {
+//   dispatch({
+//     type: EXPORT_FILES,
+//   });
+
+//   createFiles(components, path)
+//     .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,
@@ -121,71 +127,66 @@ export const handleTransform = (id, {
   },
 });
 
-// Application generation options
-// cosnt genOptions = [
-//   'Export into existing project.', 'Export with starter repo.', 'Export with create-react-app.'
-// ];
-
-export const createApplication = ({
-  path, components = [], genOption, appName = 'proto_app', repoUrl,
-}) => (dispatch) => {
-  if (genOption === 0) {
-    dispatch(exportFiles({ path, components }));
-  } else if (genOption) {
-    dispatch({
-      type: CREATE_APPLICATION,
-    });
-    createApplicationUtil({
-      path, appName, genOption, repoUrl,
-    })
-      .then(() => {
-        dispatch({
-          type: CREATE_APPLICATION_SUCCESS,
-        });
-        dispatch(exportFiles({ path: `${path}/${appName}`, components }));
-      })
-      .catch(err => dispatch({
-        type: CREATE_APPLICATION_ERROR,
-        payload: { status: true, err },
-      }));
-  }
-};
+// export const createApplication = ({
+//   path, components = [], genOption, appName = 'proto_app', repoUrl,
+// }) => (dispatch) => {
+//   if (genOption === 0) {
+//     dispatch(exportFiles({ path, components }));
+//   } else if (genOption) {
+//     dispatch({
+//       type: CREATE_APPLICATION,
+//     });
+//     createApplicationUtil({
+//       path, appName, genOption, repoUrl,
+//     })
+//       .then(() => {
+//         dispatch({
+//           type: CREATE_APPLICATION_SUCCESS,
+//         });
+//         dispatch(exportFiles({ path: `${path}/${appName}`, components }));
+//       })
+//       .catch(err => dispatch({
+//         type: CREATE_APPLICATION_ERROR,
+//         payload: { status: true, err },
+//       }));
+//   }
+// };
 
 export const toggleDragging = status => ({
   type: TOGGLE_DRAGGING,
   payload: status,
 });
 
-export const moveToBottom = componentId => ({
-  type: MOVE_TO_BOTTOM,
-  payload: componentId,
-});
-
-export const moveToTop = componentId => ({
-  type: MOVE_TO_TOP,
-  payload: componentId,
-});
-
-export const openExpansionPanel = component => ({
-  type: OPEN_EXPANSION_PANEL,
-  payload: { component },
-});
-
-export const deleteAllData = () => ({
-  type: DELETE_ALL_DATA,
-});
-
-export const changeImagePath = path => ({
-  type: CHANGE_IMAGE_PATH,
-  payload: path,
-});
-
-export const deleteCompProp = ({ id, index }) => ({
-  type: DELETE_PROP,
-  payload: { id, index },
-});
-
-export const addCompProp = prop => ({
-  type: ADD_PROP,
-  payload: { ...prop },
-});
+// export const moveToBottom = componentId => ({
+//   type: MOVE_TO_BOTTOM,
+//   payload: componentId,
+// });
+
+// export const moveToTop = componentId => ({
+//   type: MOVE_TO_TOP,
+//   payload: componentId,
+// });
+
+// export const openExpansionPanel = component => ({
+//   type: OPEN_EXPANSION_PANEL,
+//   payload: { component },
+// });
+
+// export const deleteAllData = () => ({
+//   type: DELETE_ALL_DATA,
+// });
+
+// export const changeImagePath = path => ({
+//   type: CHANGE_IMAGE_PATH,
+//   payload: path,
+// });
+
+// export const deleteCompProp = ({ id, index }) => ({
+//   type: DELETE_PROP,
+//   payload: { id, index },
+// });
+
+// export const addCompProp = prop => ({
+//   type: ADD_PROP,
+//   payload: { ...prop },
+// });

src/reducers/componentReducer.js → src/reducers/componentReducer.ts

@@ -1,6 +1,7 @@
 import {
   LOAD_INIT_DATA,
   ADD_COMPONENT,
+  ADD_CHILD,
   UPDATE_COMPONENT,
   DELETE_COMPONENT,
   UPDATE_CHILDREN,
@@ -25,6 +26,7 @@ import {
 
 import {
   addComponent,
+  addChild,
   updateComponent,
   deleteComponent,
   updateChildren,
@@ -43,14 +45,52 @@ import {
   deleteProp,
 } from '../utils/componentReducer.util';
 
+interface Child {
+  childId: number;
+  componentRef: number; // references the component this child instance belongs to
+  position: object;
+}
+
+interface Component {
+  componentId: number;
+  title: string;
+  childrenArray: Child[];
+  nextChildId: number;
+  focusChild: Component;
+}
+
+const appComponent = {
+  id: '1',
+  stateful: false,
+  title: 'App',
+  parentIds: [],
+  color: '#FF6D00',
+  draggable: true,
+  childrenIds: [],
+  selectableParents: [],
+  expanded: true,
+  props: [],
+  nextPropId: 0,
+  position: {
+    x: 110,
+    y: 120,
+    width: 50,
+    height: 50,
+  },
+
+  childrenArray: [],
+  nextChildId: 1,
+  focusChild: null,
+}
+
 const initialApplicationState = {
-  totalComponents: 0,
-  nextId: 1,
-  imagePath: '',
+  totalComponents: 1,
+  nextId: 2,
+  // imagePath: '',
   successOpen: false,
   errorOpen: false,
   focusComponent: {},
-  components: [],
+  components: [appComponent],
   appDir: '',
   loading: false,
 };
@@ -68,6 +108,8 @@ const componentReducer = (state = initialApplicationState, action) => {
       };
     case ADD_COMPONENT:
       return addComponent(state, action.payload);
+    case ADD_CHILD:
+      return addChild(state, action.payload);
     case UPDATE_COMPONENT:
       return updateComponent(state, action.payload);
     case DELETE_COMPONENT:

src/reducers/index.js

@@ -1,6 +1,6 @@
 import { combineReducers } from 'redux';
 
-import componentReducer from './componentReducer';
+import componentReducer from './componentReducer.ts';
 
 const reducers = combineReducers({
   workspace: componentReducer,

src/utils/componentReducer.util.js

@@ -50,6 +50,35 @@ export const addComponent = (state, { title }) => {
   };
 };
 
+export const addChild = (state, { title }) => {
+  const strippedTitle = title
+    .replace(/[a-z]+/gi,
+      word => word[0].toUpperCase() + word.slice(1))
+    .replace(/[-_\s0-9\W]+/gi, '');
+  const newComponent = {
+    ...initialComponentState,
+    title: strippedTitle,
+    id: state.nextId.toString(),
+    color: getColor(),
+  };
+
+  const components = [
+    ...state.components,
+    newComponent,
+  ];
+
+  const totalComponents = state.totalComponents + 1;
+  const nextId = state.nextId + 1;
+
+  return {
+    ...state,
+    totalComponents,
+    nextId,
+    components,
+    focusComponent: newComponent,
+  };
+};
+
 export const updateComponent = ((state, {
   id, newParentId = null, color = null, stateful = null, props = null,
 }) => {

webpack.config.development.js

@@ -22,6 +22,7 @@ module.exports = {
   module: {
     rules: [
       { test: /\.tsx?$/, exclude: /node-modules/, loader: 'babel-loader' },
+      { test: /\.ts?$/, exclude: /node-modules/, loader: 'babel-loader' },
       {
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,