const {observable, computed} = mobx;

const {observer} = mobxReact;

​

class MsiTaskList {

  @observable tasks = [];

  constructor(tasks) {

    this.tasks.replace(tasks);

  }

}

​

class MsiProject {

  id = '';

  @observable name = '';

  @observable taskLists = [];

​

  constructor(id, name, taskLists) {

    this.id = id;

    this.name = name;

    const lists = taskLists.map(list => new MsiTaskList(list));

    this.taskLists.replace(lists);

  }

  @computed get allTasks() {

    return this.taskLists.reduce((result, list) => {

      list.tasks.forEach(task => result.push(task));

      return result;

    }, []);

  }

}

​

const msiProject = new MsiProject('id', 'project', [

  [

    { name: 'write report'},

    { name: 'set grade' }

  ], [

    { name: 'build stuff'},

    { name: 'rate thing' }

  ]

]);

​

function App() {

  return <div> 

    {msiProject.allTasks.map(task => <div> {task.name} </div>)}

  </div>;

}

​

ReactDOM.render(

  <App />,

  document.getElementById('app')

);