Mobx + React Object Relation

by amindunited

HTML

<script src="https://npmcdn.com/[email protected]/lib/mobx.umd.js"></script>
<script src="https://npmcdn.com/[email protected]/index.js"></script>
<body>
  <div id="mount">
  
  </div>
</body>

Babel + JSX

const {observable, computed} = mobx;
const {observer} = mobxReact;
const {Component} = React;

class User {
	id = Math.random();
  @observable userName;
	@observable title;
  @observable firstName;
  @observable lastName;
  @observable middleName;
  @observable nickName;
  @observable decks;
  @observable cards;
  @observable email;
  @observable phone;
}

class Deck {
	id = Math.random();
  @observable owner;
  @observable name;
  @observable colours;
  @observable cards;
  @observable format;
}

class Card {
	id = Math.random();
	@observable name;
	//@observable name;
}

class Todo {
    id = Math.random();
    @observable title;
    @observable finished = false;
    constructor(title) {
        this.title = title;
    }
}

//@observer
class TodoList {
		@observable user;
    @observable todos = [];
    @computed get unfinishedTodoCount() {
        return this.todos.filter(todo => !todo.finished).length;
    }
    
    constructor() {
    	//super();
      console.log(this);
      //this.user = this.props.user;
    }
}

@observer
class TodoListView extends Component {
		/*
    constructor () {
    	this.user = this.props.user;
    }
    */
    render() {
        return <div>
          
            <ul>
                {this.props.todoList.todos.map(todo => 
                    <TodoView todo={todo} key={todo.id} />
                )}
            </ul>
            Tasks left: {this.props.todoList.unfinishedTodoCount}
        </div>
    }
}

const TodoView = observer(({todo}) => 
    <li>
        <input
            type="checkbox"
            checked={todo.finished}
            onClick={() => todo.finished = !todo.finished}
        />{todo.title}
    </li>
);

class ApplicationStore {
    user;
    decks;
    todos;
    constructor () {
    	this.user = new User();
      this.todos = new TodoList();
    }
}

//const store = new TodoList();
const store = new ApplicationStore();
console.log('my store ', store);
React.render(<TodoListView todoList={store.todos} />,...