Merge pull request #30 from tolgamizrakci/development

Development

Author: tolgamizrakci

src/containers/LeftContainer.jsx

@@ -75,20 +75,24 @@ class LeftContainer extends Component {
     } = this.props;
     const { componentName } = this.state;
 
-    const componentsExpansionPanel = components.map((component, i) => (
-      <LeftColExpansionPanel
-        key={component.id}
-        index={i}
-        id={component.id}
-        updateComponent={updateComponent}
-        component={component}
-        focusComponent={focusComponent}
-        addChild={addChild}
-        changeFocusComponent={changeFocusComponent}
-        changeFocusChild={changeFocusChild}
-        selectableChildren={selectableChildren}
-      />
-    ));
+    console.log(components);
+
+    const componentsExpansionPanel = components
+      .sort((a, b) => parseInt(b.id) - parseInt(a.id)) // sort by id value of comp
+      .map((component, i) => (
+        <LeftColExpansionPanel
+          key={component.id}
+          index={i}
+          id={component.id}
+          updateComponent={updateComponent}
+          component={component}
+          focusComponent={focusComponent}
+          addChild={addChild}
+          changeFocusComponent={changeFocusComponent}
+          changeFocusChild={changeFocusChild}
+          selectableChildren={selectableChildren}
+        />
+      ));
 
     return (
       <div className="column left">

src/utils/componentReducer.util.js

@@ -49,12 +49,18 @@ export const addComponent = (state, { title }) => {
   const totalComponents = state.totalComponents + 1;
   const nextId = state.nextId + 1;
 
+  let selectableChildren = state.components
+    .map(comp => comp.id)
+    .filter(id => id !== newComponent.id);
+
   return {
     ...state,
     totalComponents,
     nextId,
     components,
-    focusComponent: newComponent
+    focusComponent: newComponent,
+    ancestors: [],
+    selectableChildren: selectableChildren // new component so you everyone except yourself is available
   };
 };
 

src/utils/getSelectable.util.js

@@ -1,12 +1,8 @@
 function getSelectable(newFocusComponent, components) {
   let focusComponentId = newFocusComponent.id;
-
   let componentsToCheck = components
     .map(comp => comp.id)
     .filter(id => id !== focusComponentId);
-
-  console.log(componentsToCheck);
-
   return findAncestors(components, [focusComponentId], componentsToCheck);
 }
 
@@ -30,13 +26,8 @@ function findAncestors(
         child => child.childComponentId
       );
 
-      console.log(components[i].id, components[i].title);
-      console.log("myChildren", myChilren);
-
       let found = currentCompArr.filter(comp => myChilren.includes(comp));
 
-      console.log("found", found);
-
       if (found.length) {
         ancestors.push(components[i].id);
         newAncestors.push(components[i].id);
@@ -49,10 +40,6 @@ function findAncestors(
       }
     }
   }
-  console.log("newancestors", newAncestors);
-  console.log("comptocheck", componentsToCheck);
-  console.log("cumulativeancestors", ancestors);
-
   return findAncestors(components, newAncestors, componentsToCheck, ancestors);
 }