component and children ids are all numbers now

Author: ChristianEdwardPadilla

src/components/GrandchildRectangle.jsx

@@ -26,7 +26,6 @@ class GrandchildRectangle extends Component {
       height,
       focusChild,
       components,
-      childType,
     } = this.props;
 
     // the Group is responsible for dragging of all children
@@ -54,7 +53,7 @@ class GrandchildRectangle extends Component {
         {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}

src/components/KonvaStage.tsx

@@ -19,12 +19,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: {
@@ -182,7 +182,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}

src/components/Rectangle.tsx

@@ -23,7 +23,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 = {
@@ -110,8 +110,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
         />
@@ -120,19 +120,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

src/reducers/componentReducer.ts

@@ -71,7 +71,7 @@ interface Component {
 }
 
 const appComponent = {
-  id: '1',
+  id: 1,
   stateful: false,
   title: 'App',
   parentIds: [],

src/utils/componentReducer.util.js

@@ -49,7 +49,7 @@ export const addComponent = (state, { title }) => {
   }
 
   const componentColor = getColor();
-  const componentId = state.nextId.toString();
+  const componentId = state.nextId;
 
   const newComponent = {
     ...initialComponentState,
@@ -76,7 +76,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
   };
 };
 
@@ -137,7 +137,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,
@@ -193,7 +193,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;
   }
@@ -227,7 +227,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 = {
@@ -396,7 +396,7 @@ export const changeFocusChild = (state, { title, childId }) => {
 
   if (!newFocusChild) {
     newFocusChild = {
-      childId: '-1',
+      childId: -1,
       childComponentId: focComp.id,
       componentName: focComp.title,
       position: {
@@ -587,7 +587,7 @@ export const addProp = (state, { key, value = null, required, type }) => {
   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,

src/utils/findComponentById.ts

@@ -0,0 +1,10 @@
+
+interface component{
+  id: string;
+}
+
+function findComponentById(id: number, components: ){
+
+}
+
+export default findComponentById