react.js

import React, {Component} from 'react';
import {render} from 'react-dom';

// Parent Component
class TimelineContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentSupplier:'A',
      currentYear:'2010',
      calendars: [
        {
          year:2009,
          rows:[
            {
              name: 'Product doc type A',
              boxes: [
                {id: 1, state:false},
                {id: 2, state:false},
                {id: 3, state:true},
                {id: 4, state:false}
              ]
            }
          ]
        },
        {
          year:2010,
          rows:[
            {
              name: 'Product doc type B',
              boxes: [
                {id: 1, state:false},
                {id: 2, state:false},
                {id: 3, state:true},
                {id: 4, state:false}
              ]
            }
          ]
        },
        {
          year:2011,
          rows:[
            {
              name: 'Product doc type C',
              boxes: [
                {id: 1, state:false},
                {id: 2, state:false},
                {id: 3, state:true},
                {id: 4, state:false}
              ]
            }
          ]
        }
      ]
    }
  }

  componentWillMount() {
    this.updateCurrentSupplier('A');
  }

  fetchCalendars(supplierName) {
    return new Promise(function (resolve, reject) {
      setTimeout(function() {
        if(supplierName === 'A' || supplierName === 'B') {
          resolve(supplierName)
        } else {
          reject('NO');
        }
      }, 1000);
    });
  }
  
  changingCurrentSupplierAsync(supplierName) {
    this.fetchCalendars(supplierName)
      .then((resultSupplierName) => {
        console.info('Supplier loaded YAY');
        this.setState({currentSupplier:resultSupplierName});
      })
      .catch((error) => {
        console.error(error);
        this.setState({currentSupplier:'A'});
      });
  }

  updateCurrentSupplier(supplierName) {
    this.changingCurrentSupplierAsync(supplierName);
  }

  render() {
    return (<div>
      <p>Current supplier {this.state.currentSupplier}</p>
      <SupplierList updateSupplierCb={this.updateCurrentSupplier.bind(this)} />
      {this.state.calendars.map(function(calendar) {
        return <Calendar key={calendar.year}
                         calendar={calendar} />
      })}
    </div>);
  }
}

class Calendar extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <p>{this.props.calendar.year}</p>
        {this.props.calendar.rows.map(function(row) {
          return <Row key={row.name} row={row} />
        })}
      </div>
    )
  }
}
class Row extends Component {
  render() {
    return <div>
      {this.props.row.boxes.map(function(box) {
        return <Box key={box.id} box={box} />
      })}
    </div>
  }
}
class Box extends Component {
  render() {
    return <p>{this.props.box.state ? 'Green' : 'Pending'}</p>
  }
}


class SupplierList extends Component {
  render() {
    return (
      <ul>
        <li onClick={this.props.updateSupplierCb.bind(this, 'A')}>A</li>
        <li onClick={this.props.updateSupplierCb.bind(this, 'B')}>B</li>
        <li onClick={this.props.updateSupplierCb.bind(this, 'C')}>C</li>
      </ul>
    )
  }
}

render(<TimelineContainer />, document.getElementById('root'));