Development

src/actions/components.js

@@ -27,8 +27,8 @@ import {
 
 import { loadState } from '../localStorage';
 
-import createFiles from '../utils/createFiles.util';
-import createApplicationUtil from '../utils/createApplication.util';
+// import createFiles from '../utils/createFiles.util';
+// import createApplicationUtil from '../utils/createApplication.util';
 
 export const loadInitData = () => (dispatch) => {
   loadState()
@@ -60,7 +60,7 @@ export const parentReassignment = (({ index, id, parentIds }) => ({
 
 export const addComponent = ({ title }) => (dispatch) => {
   dispatch({ type: ADD_COMPONENT, payload: { title } });
-  dispatch({ type: SET_SELECTABLE_PARENTS });
+  // dispatch({ type: SET_SELECTABLE_PARENTS });
 };
 
 export const addChild = ({ title }) => (dispatch) => {
@@ -167,10 +167,10 @@ export const toggleDragging = status => ({
 //   payload: componentId,
 // });
 
-// export const openExpansionPanel = component => ({
-//   type: OPEN_EXPANSION_PANEL,
-//   payload: { component },
-// });
+export const openExpansionPanel = component => ({
+  type: OPEN_EXPANSION_PANEL,
+  payload: { component },
+});
 
 // export const deleteAllData = () => ({
 //   type: DELETE_ALL_DATA,

src/components/App.tsx → src/components/App.jsx

@@ -2,20 +2,19 @@ import React, { Component } from 'react';
 import '../public/styles/style.css';
 import { MuiThemeProvider } from '@material-ui/core/styles';
 import theme from './theme';
-import AppContainer from '../containers/AppContainer.tsx';
+import AppContainer from '../containers/AppContainer.jsx';
 
-interface Adam {
-  goodguy: boolean;
-  haswine: boolean;
-}
+// interface Adam {
+//   goodguy: boolean;
+//   haswine: boolean;
+// }
 
 class App extends Component {
   render() {
-    const adamInstance: Adam = {
-      goodguy: true,
-      haswine: false,
-    };
-    console.log(adamInstance);
+    // const adamInstance: Adam = {
+    //   goodguy: true,
+    //   haswine: false,
+    // };
     return (
       <MuiThemeProvider theme={theme}>
         <div className="app">

src/components/KonvaStage.jsx

@@ -3,8 +3,8 @@ import React, { Component, createRef } from 'react';
 import {
   Stage, Layer, Image, Group,
 } from 'react-konva';
-import TransformerComponent from './TransformerComponent.tsx';
-import Rectangle from './Rectangle.tsx';
+import TransformerComponent from './TransformerComponent.jsx';
+import Rectangle from './Rectangle.jsx';
 
 
 class KonvaStage extends Component {

src/components/LeftColExpansionPanel.jsx

@@ -43,7 +43,7 @@ const LeftColExpansionPanel = (props) => {
                   style={{ color, float: 'right' }}
                   onClick={() => {
                     console.log(title);
-                    addChild(title);
+                    addChild( { title } );
                   }}
                 />
               </IconButton>

src/components/Rectangle.tsx → src/components/Rectangle.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Rect } from 'react-konva';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 
 class Rectangle extends Component {
   extractPositionInfo(componentId, target) {
@@ -40,16 +40,16 @@ class Rectangle extends Component {
   }
 }
 
-Rectangle.propTypes = {
-  // title: PropTypes.string.isRequired,
-  color: PropTypes.string.isRequired,
-  handleTransform: PropTypes.func.isRequired,
-  x: PropTypes.number,
-  y: PropTypes.number,
-  height: PropTypes.number,
-  width: PropTypes.number,
-  componentId: PropTypes.string.isRequired,
-  draggable: PropTypes.bool.isRequired,
-};
+// Rectangle.propTypes = {
+//   // title: PropTypes.string.isRequired,
+//   color: PropTypes.string.isRequired,
+//   handleTransform: PropTypes.func.isRequired,
+//   x: PropTypes.number,
+//   y: PropTypes.number,
+//   height: PropTypes.number,
+//   width: PropTypes.number,
+//   componentId: PropTypes.string.isRequired,
+//   draggable: PropTypes.bool.isRequired,
+// };
 
 export default Rectangle;

src/components/TransformerComponent.tsx → src/components/TransformerComponent.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Transformer } from 'react-konva';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 
 export default class TransformerComponent extends Component {
   componentDidMount() {
@@ -40,6 +40,6 @@ export default class TransformerComponent extends Component {
   }
 }
 
-TransformerComponent.propTypes = {
-  focusComponent: PropTypes.object,
-};
+// TransformerComponent.propTypes = {
+//   focusComponent: PropTypes.object,
+// };

src/components/__tests__/App.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 // import '../../setupTests';
 import { shallow } from 'enzyme';
-import App from '../App.tsx';
+import App from '../App.jsx';
 import AppContainer from '../../containers/AppContainer.jsx';
 
 it('contains a AppContainer', () => {

src/containers/AppContainer.tsx → src/containers/AppContainer.jsx

@@ -4,8 +4,8 @@ import { connect } from 'react-redux';
 import { MuiThemeProvider } from '@material-ui/core/styles';
 import LinearProgress from '@material-ui/core/LinearProgress';
 import LeftContainer from './LeftContainer.jsx';
-import MainContainer from './MainContainer.tsx';
-import RightContainer from './RightContainer.tsx';
+import MainContainer from './MainContainer.jsx';
+import RightContainer from './RightContainer.jsx';
 import convertIdsToObjs from '../utils/convertIdsToObjs.util';
 import theme from '../components/theme';
 import { loadInitData } from '../actions/components';

src/index.js

@@ -2,7 +2,7 @@ import 'babel-polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import App from './components/App.tsx';
+import App from './components/App.jsx';
 import store from './store';
 
 ReactDOM.render(

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

@@ -45,19 +45,19 @@ import {
   deleteProp,
 } from '../utils/componentReducer.util';
 
-interface Child {
-  childId: number;
-  componentRef: number; // references the component this child instance belongs to
-  position: object;
-}
+// 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;
-}
+// interface Component {
+//   componentId: number;
+//   title: string;
+//   childrenArray: Child[];
+//   nextChildId: number;
+//   focusChild: Component;
+// }
 
 const appComponent = {
   id: '1',

src/reducers/index.js

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

src/utils/componentReducer.util.js

@@ -19,8 +19,23 @@ const initialComponentState = {
     width: 50,
     height: 50,
   },
+
+  childrenArray: [],
+  nextChildId: 1,
+  focusChild: null,
 };
 
+const initialChildState = {
+  childId: 0,
+  componentName: null,
+  position: {
+    x: 110,
+    y: 120,
+    width: 50,
+    height: 50,
+  }
+}
+
 export const addComponent = (state, { title }) => {
   const strippedTitle = title
     .replace(/[a-z]+/gi,
@@ -50,32 +65,49 @@ export const addComponent = (state, { title }) => {
   };
 };
 
+// get title (aka the class associated with the new child)
+// get the focus component (aka the component were adding the child to)
+
 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(),
+
+  let view = state.components.filter((comp) => {if (comp.title === state.focusComponent.title) return comp})[0];
+
+  console.log(view)
+
+  const newChild = {
+    childId: view.nextChildId.toString(),
+    componentName: strippedTitle,
+    position: {
+      x: 110,
+      y: 120,
+      width: 50,
+      height: 50,
+    }
+  };
+
+  const compsChildrenArr = [
+    ...view.childrenArray,
+    newChild
+  ]
+
+  const component = {
+    ...view,
+    childrenArray: compsChildrenArr,
+    nextChildId: view.nextChildId + 1,
   };
 
   const components = [
-    ...state.components,
-    newComponent,
+    ...state.components.filter((comp) => {if (comp.title !== view.title) return comp}),
+    component,
   ];
 
-  const totalComponents = state.totalComponents + 1;
-  const nextId = state.nextId + 1;
-
   return {
     ...state,
-    totalComponents,
-    nextId,
     components,
-    focusComponent: newComponent,
   };
 };