API calls and adding Positioning

src/App.js

@@ -22,9 +22,8 @@ class App extends Component {
 
  componentWillMount() {
  this.fetchEntity()
- .then(root => this.hydrateEntities(root))
- .then(root => this.hydrateObjectives(root))
- .then(root => Positioning.tree(root));
+ .then(root => Positioning.tree(root))
+ .then(root => this.hydrateObjectives(root));
  }
 
  fetchEntity() {
@@ -35,27 +34,18 @@ class App extends Component {
  return fetch("https://okr.r3connect.me/api/entities/the-iconic/objectives").then(res => res.json()).then(res => res.data);
  }
 
- hydrateEntities(root) {
- root.children = root.child_entities || [];
-
- if (! root.child_entities) return root;
-
- root.child_entities.forEach(this.hydrateEntities);
-
- return root;
- }
-
  hydrateObjectives(root) {
  return this.fetchEntityObjectives()
  .then(objectives => objectives.map(objective => root.objective = objective))
- .then(objectives => this.setState({ root: root }));
+ .then(objectives => this.setState({ root: root }))
+ .then(e => root);
  }
 
  render() {
  const { root } = this.state;
 
  if (!root) {
- return <div />
+ return null;
  }
 
  return (

src/components/Container.js

@@ -59,9 +59,11 @@ class Container extends Component {
  label: root.name,
  type: root.name,
  depth: depth,
+ position: root.position
  });
 
- root.children.forEach(child => this.hydrateNodes(child, nodeId, depth + 1));
+ if (! root.child_entities) root.child_entities = [];
+ root.child_entities.forEach(child => this.hydrateNodes(child, nodeId, depth + 1));
  }
 
  getEdges(depthMap = null) {

src/components/Viewport.js

@@ -15,7 +15,7 @@ class Viewport extends Component {
  createNodesForDom() {
  const domNodes = [];
  const { depthMap, edges } = this.props;
-
+console.log(this.props);
  const rows = {};
 
  Object.keys(depthMap).forEach(depth => {

src/services/Positioning.js

@@ -0,0 +1,36 @@
+const DEFAULTS = {
+ canvas: {
+ height: 1000,
+ width: 1000
+ },
+ nodes: {
+ width: 100,
+ height: 100,
+ }
+}
+
+class Positioning {
+
+ updateTreePosition(root, levelNodesCount = 1) {
+ let nodes_width = DEFAULTS.nodes.width * levelNodesCount;
+ let in_between = Math.floor((DEFAULTS.canvas.height - nodes_width) / levelNodesCount);
+
+ root.position = {
+ width: DEFAULTS.nodes.width,
+ in_between: in_between
+ }
+
+ if (! root.child_entities) return root;
+
+ levelNodesCount = root.child_entities.length;
+ root.child_entities.forEach(child => this.updateTreePosition(child, levelNodesCount));
+
+ return root;
+ }
+
+ tree(root) {
+ return this.updateTreePosition(root);
+ }
+}
+
+export default new Positioning();