react exercise

example.js

class CollectionElement extends React.Component {
  constructor(props) {
    super(props);
    this.count = props.count;
    this.pos = props.pos;
  }
}

class AliasWidget extends CollectionElement {
  constructor(props) {
    super(props);
    this.alias = props.alias;
  }
  
  render() {
    return <li>{this.alias.name}, {this.alias.stack}  {this.pos}/{this.count}</li>;
  }
}

class AliasesWidget extends React.Component {
  constructor(props) {
    super(props);
    var aliases = props.aliases;
    var count = aliases.length;
    this.aliases = aliases.map((alias, idx) =>
    	<AliasWidget alias={alias} count={count} pos={idx}/>);
  }
  
  render() {
    return <div>
		   <p>aliases</p>
  		 <ul>
    			{this.aliases}
    		</ul>
	   </div>;
  }
}

class StackWidget extends CollectionElement {
  constructor(props) {
    super(props);
	 this.stack = props.stack;
  }
  
  render() {
	 return <li>{this.stack.name} {this.pos}/{this.count}</li>;
	}
}

class StacksWidget extends React.Component {
  constructor(props) {
    super(props);
    var stacks = props.stacks;
    var count = stacks.length;
	 this.stacks = stacks.map((stack, idx) =>
      <StackWidget stack={stack} count={count} pos={idx}/>);
  }

  render() {
	 return <div>
		   <p>stacks</p>
  		 <ul>
    			{this.stacks}
    		</ul>
	   </div>;
	}
}

class ServiceWidget extends React.Component {
  constructor(props) {
    super(props);
    this.stacks = props.stacks;
    this.aliases = props.aliases;
  }
  
  render() {
    return <div>
      <AliasesWidget aliases={this.aliases}/>
      <StacksWidget stacks={this.stacks}/>
      </div>;
  }
}

let stacks = [
  {name: "dep1", version: "v1"},
  {name: "dep2", version: "v2"},
];
let aliases = [
  {name: "this", stack: "dep1"},
  {name: "that", stack: "dep1"}
];

React.render(<ServiceWidget stacks={stacks} aliases={aliases}/>, document.getElementById('container'));