component and children ids are all numbers now

ChristianEdwardPadilla · ChristianEdwardPadilla · commit 27b00f73f601 · 2019-05-05T17:17:21.000-04:00
diff --git a/src/components/DataTable.jsx b/src/components/DataTable.jsx
@@ -1,25 +1,25 @@
-import React from "react";
+import React from 'react';
 // import PropTypes from 'prop-types';
-import { withStyles } from "@material-ui/core/styles";
-import Table from "@material-ui/core/Table";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
-import TableHead from "@material-ui/core/TableHead";
-import TableRow from "@material-ui/core/TableRow";
-import Paper from "@material-ui/core/Paper";
-import Button from "@material-ui/core/Button";
-import DeleteIcon from "@material-ui/icons/Delete";
-import { IconButton } from "@material-ui/core";
+import { withStyles } from '@material-ui/core/styles';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Paper from '@material-ui/core/Paper';
+import Button from '@material-ui/core/Button';
+import DeleteIcon from '@material-ui/icons/Delete';
+import { IconButton } from '@material-ui/core';
 
 const styles = theme => ({
   root: {
-    width: "80%",
-    marginTop: theme.spacing.unit * 3
+    width: '80%',
+    marginTop: theme.spacing.unit * 3,
     // overflowX: "auto"
   },
   table: {
-    minWidth: 500
-  }
+    minWidth: 500,
+  },
 });
 
 /** **************************
@@ -28,7 +28,9 @@ const styles = theme => ({
  * ****************************** */
 
 function dataTable(props) {
-  const { classes, rowData, rowHeader, deletePropHandler } = props;
+  const {
+    classes, rowData, rowHeader, deletePropHandler,
+  } = props;
 
   const renderHeader = rowHeader.map((col, idx) => (
     <TableCell key={`head_+${idx}`}>{col}</TableCell>
@@ -38,23 +40,19 @@ function dataTable(props) {
     if (!row) return;
     // for some reason we must put each value in a div.
     return rowHeader.map((header, idx) => (
-      <TableCell align={"center"} key={`td_${idx}`}>
+      <TableCell align={'center'} key={`td_${idx}`}>
         {/* <div  align={'center'} padding = {'none'} >{typeof row[header] === 'string' ? row[header] : row[header].toString()}</div> */}
         {/* {row[header]} */}
-        {typeof row[header] === "string" ? row[header] : row[header].toString()}
+        {typeof row[header] === 'string' ? row[header] : row[header].toString()}
       </TableCell>
     ));
   }
-  //style={{height: 30}}
+  // style={{height: 30}}
   const renderRows = rowData.map(row => (
     <TableRow key={`row-${row.id}`}>
       {renderRowCells(row)}
-      <TableCell align={"center"} padding={"none"}>
-        <IconButton
-          color="default"
-          fontSize="small"
-          onClick={() => deletePropHandler(row.id)}
-        >
+      <TableCell align={'center'} padding={'none'}>
+        <IconButton color="default" fontSize="small" onClick={() => deletePropHandler(row.id)}>
           <DeleteIcon />
         </IconButton>
         {/* <Button style={{height: 20}} onClick={() => deletePropHandler(row.id)}>Delete</Button> */}
@@ -64,7 +62,7 @@ function dataTable(props) {
 
   return (
     <Paper className={classes.root}>
-      <Table className={classes.table} selectable={"true"}>
+      <Table className={classes.table} selectable={'true'}>
         <TableHead>
           <TableRow>{renderHeader}</TableRow>
         </TableHead>
diff --git a/src/components/GrandchildRectangle.jsx b/src/components/GrandchildRectangle.jsx
@@ -1,17 +1,14 @@
-import React, { Component } from "react";
-import { Rect, Group } from "react-konva";
+import React, { Component } from 'react';
+import { Rect, Group } from 'react-konva';
 
 class GrandchildRectangle extends Component {
   getComponentColor(componentId) {
-    const color = this.props.components.find(comp => comp.id == componentId)
-      .color;
+    const color = this.props.components.find(comp => comp.id == componentId).color;
     return color;
   }
 
   getPseudoChild() {
-    return this.props.components.find(
-      comp => comp.id === this.props.childComponentId
-    );
+    return this.props.components.find(comp => comp.id === this.props.childComponentId);
   }
 
   render() {
@@ -28,7 +25,7 @@ class GrandchildRectangle extends Component {
       width,
       height,
       focusChild,
-      components
+      components,
     } = this.props;
 
     // the Group is responsible for dragging of all children
@@ -54,21 +51,17 @@ class GrandchildRectangle extends Component {
           scaleY={1}
           width={width}
           height={height}
-          stroke={
-            childType === "COMP"
-              ? this.getComponentColor(childComponentId)
-              : "#000000"
-          }
+          stroke={childType === 'COMP' ? this.getComponentColor(childComponentId) : '#000000'}
           // fill={color}
           // opacity={0.8}
           strokeWidth={4}
           strokeScaleEnabled={false}
           draggable={false}
         />
-        {childType === "COMP" &&
-          components
+        {childType === 'COMP'
+          && components
             .find(comp => comp.title === childComponentName)
-            .childrenArray.filter(child => child.childId !== "-1")
+            .childrenArray.filter(child => child.childId !== -1)
             .map((grandchild, i) => (
               <GrandchildRectangle
                 key={i}
@@ -79,21 +72,17 @@ class GrandchildRectangle extends Component {
                 childComponentId={grandchild.childComponentId}
                 focusChild={focusChild}
                 childId={childId}
-                width={
-                  grandchild.position.width *
-                  (width / this.getPseudoChild().position.width)
-                }
+                width={grandchild.position.width * (width / this.getPseudoChild().position.width)}
                 height={
-                  grandchild.position.height *
-                  (height / this.getPseudoChild().position.height)
+                  grandchild.position.height * (height / this.getPseudoChild().position.height)
                 }
                 x={
-                  (grandchild.position.x - this.getPseudoChild().position.x) *
-                  (width / this.getPseudoChild().position.width)
+                  (grandchild.position.x - this.getPseudoChild().position.x)
+                  * (width / this.getPseudoChild().position.width)
                 }
                 y={
-                  (grandchild.position.y - this.getPseudoChild().position.y) *
-                  (height / this.getPseudoChild().position.height)
+                  (grandchild.position.y - this.getPseudoChild().position.y)
+                  * (height / this.getPseudoChild().position.height)
                 }
               />
             ))}
diff --git a/src/components/KonvaStage.jsx b/src/components/KonvaStage.jsx
@@ -21,12 +21,12 @@ class KonvaStage extends Component {
   getDirectChildrenCopy(focusComponent) {
     const component = this.props.components.find(comp => comp.id === focusComponent.id);
 
-    const childrenArr = component.childrenArray.filter(child => child.childId !== '-1');
+    const childrenArr = component.childrenArray.filter(child => child.childId !== -1);
 
     let childrenArrCopy = cloneDeep(childrenArr);
 
     const pseudoChild = {
-      childId: '-1',
+      childId: -1,
       childComponentId: component.id,
       componentName: component.title,
       position: {
@@ -186,7 +186,7 @@ class KonvaStage extends Component {
                   childComponentId={child.childComponentId}
                   childComponentName={child.componentName}
                   focusChild={focusChild}
-                  childId={child.childId} // '-1' for pseudoChild
+                  childId={child.childId} // -1 for pseudoChild
                   x={child.position.x}
                   y={child.position.y}
                   scaleX={1}
diff --git a/src/components/Rectangle.jsx b/src/components/Rectangle.jsx
@@ -25,7 +25,7 @@ class Rectangle extends Component {
       .find(comp => comp.id === this.props.componentId)
       .childrenArray.find(child => child.childId === childId);
 
-    if (childId == '-1') {
+    if (childId == -1) {
       focChild = this.props.components.find(comp => comp.id === this.props.componentId);
     }
     const transformation = {
@@ -108,8 +108,8 @@ class Rectangle extends Component {
           strokeWidth={4}
           strokeScaleEnabled={false}
           draggable={false}
-          fill={childId === '-1' ? 'white' : null}
-          shadowBlur={childId === '-1' ? 6 : null}
+          fill={childId === -1 ? 'white' : null}
+          shadowBlur={childId === -1 ? 6 : null}
           // dashEnabled={childId === "-1"} // dash line only enabled for pseudochild
           // dash={[10, 3]} // 10px dashes with 3px gaps
         />
@@ -118,19 +118,19 @@ class Rectangle extends Component {
             fontStyle={'bold'}
             fontVariant={'small-caps'}
             // pseudochild's label should look different than normal children:
-            text={childId === '-1' ? title.slice(0, title.length - 2) : title}
-            fill={childId === '-1' ? this.getComponentColor(childComponentId) : '#000000'}
-            fontSize={childId === '-1' ? 15 : 10}
+            text={childId === -1 ? title.slice(0, title.length - 2) : title}
+            fill={childId === -1 ? this.getComponentColor(childComponentId) : '#000000'}
+            fontSize={childId === -1 ? 15 : 10}
             x={4}
-            y={childId === '-1' ? -20 : -12}
+            y={childId === -1 ? -20 : -12}
           />
         </Label>
         {// for all children other than the pseudoChild, find their component's children array and recursively render the children found there
-        childId !== '-1'
+        childId !== -1
           && childType == 'COMP'
           && components
             .find(comp => comp.title === childComponentName)
-            .childrenArray.filter(child => child.childId !== '-1')
+            .childrenArray.filter(child => child.childId !== -1)
             // .sort((a, b) => parseInt(a.childId) - parseInt(b.childId)) // using i within map below, sorting by childId might be necessary
             .map((grandchild, i) => (
               <GrandchildRectangle
diff --git a/src/reducers/componentReducer.js b/src/reducers/componentReducer.js
@@ -71,7 +71,7 @@ import cloneDeep from '../utils/cloneDeep.ts';
 // }
 
 const appComponent = {
-  id: '1',
+  id: 1,
   stateful: false,
   title: 'App',
   parentIds: [],
diff --git a/src/utils/componentReducer.util.js b/src/utils/componentReducer.util.js
@@ -51,7 +51,7 @@ export const addComponent = (state, { title }) => {
   }
 
   const componentColor = getColor();
-  const componentId = state.nextId.toString();
+  const componentId = state.nextId;
 
   const newComponent = {
     ...initialComponentState,
@@ -80,7 +80,7 @@ export const addComponent = (state, { title }) => {
     focusComponent: newComponent,
     focusChild: newFocusChild,
     ancestors: [],
-    selectableChildren, // new component so you everyone except yourself is available
+    selectableChildren, // new component so everyone except yourself is available
   };
 };
 
@@ -142,7 +142,7 @@ export const addChild = (state, { title, childType = '', HTMLInfo = {} }) => {
     };
 
   const newChild = {
-    childId: view.nextChildId.toString(),
+    childId: view.nextChildId,
     childType,
     childComponentId: childType == 'COMP' ? parentComponent.id : null, // only relevant fot children of type COMPONENT
     componentName: strippedTitle,
@@ -202,7 +202,7 @@ export const deleteChild = (
     window.alert('No child selected');
     return state;
   }
-  if (!calledFromDeleteComponent && childId === '-1') {
+  if (!calledFromDeleteComponent && childId === -1) {
     window.alert('Cannot delete root child of a component');
     return state;
   }
@@ -240,7 +240,7 @@ export const deleteChild = (
 export const handleTransform = (state, {
   componentId, childId, x, y, width, height,
 }) => {
-  if (childId === '-1') {
+  if (childId === -1) {
     // the pseudochild has been transformed, its position is stored in the component
     const component = state.components.find(comp => comp.id === componentId);
     const transformedComponent = {
@@ -409,7 +409,7 @@ export const changeFocusChild = (state, { title, childId }) => {
 
   if (!newFocusChild) {
     newFocusChild = {
-      childId: '-1',
+      childId: -1,
       childComponentId: focComp.id,
       componentName: focComp.title,
       position: {
@@ -602,7 +602,7 @@ export const addProp = (state, {
   const selectedComponent = state.components.find(comp => comp.id == state.focusComponent.id);
 
   const newProp = {
-    id: selectedComponent.nextPropId.toString(),
+    id: selectedComponent.nextPropId,
     key,
     value: value || key,
     required,
diff --git a/src/utils/findComponentById.ts b/src/utils/findComponentById.ts
@@ -0,0 +1,10 @@
+
+interface component{
+  id: string;
+}
+
+function findComponentById(id: number, components: ){
+
+}
+
+export default findComponentById
