import { observable, observer } from "mota";

const model = observable({ count: 0 });
const add = ()=>model.count++;

const View1 = observer(() => {
  return <div>{model.count}</div>;
});

const View2 = observer(() => {
  return <div>
    <span>{model.count}</span>
    <button onClick={add}>click<button>
  </div>;
});

import { observer, useObservable } from "mota";

const View = observer(() => {
  const model = useObservable({ count: 0 });
  return <div>
    <span>{model.count}</span>
    <button onClick={()=>model.count++}>click<button>
  </div>;
});

import { observer, observable, useComputed } from "mota";

const user = observable({ 
  firstName: 'Feng',
  lastName: 'Hou'
});

const View = observer(() => {
  // The fullName will be cached and responsive
  const fullName = useComputed(()=>{
    return `${user.firstName} ${user.lastName}`;
  });
  return <div>{fullName}</div>;
});

import { observer, observable, useAutoRun } from "mota";

const model = observable({ count: 0 });

const View = observer(() => {
  // When the count changes, 
  // it will be automatically re executed and printed 'count: n'
  useAutoRun(()=>{
    console.log('count:', model.count);
  });
  return <div>{model.count}</div>;
});

import { observer, observable, useWatch } from "mota";

const model = observable({ count: 0 });

const View = observer(() => {
  // When the result of the evaluation function changes,
  // the processing function is re executed.
  useWatch(()=>model.count%10, (oldValue, newValue)=>{
    console.log(`old: ${oldValue}, new: ${newValue}`);
  });
  return <div>{model.count}</div>;
});

import { observer, observable, autorun, watch } from "mota";

const model = observable({ count: 0 });

@observer
class View extends React.Component {
  add = ()=> model.count++;

  componentDidMount(){
    this.destroyAutoRun = autorun(()=>{
      console.log('autorun count: ', model.count);
    });
    this.destroyWatch = watch(()=> model.count%10, ()=>{
      console.log('autorun count: ', model.count);
    });
  }

  componentWillUnmount(){
    this.destroyAutoRun();
    this.destroyWatch();
  }

  @computed get message(){
    return `count: ${model.count}`;
  }

  render() {
    return <div>
      <span>{this.message}</span>
      <button onClick={this.add}>click<button>
    </div>;
  }
}

import { observer, observable, autorun, watch } from "mota";

@observable
class Model {
  count = 0;
  add () {
    this.count++;
  }
  @computed get message(){
    return `count: ${model.count}`;
  }
}

@observer
class View extends React.Component {
  model = new Model();
  render() {
    return <div>
      <span>{this.model.message}</span>
      <button onClick={()=>this.model.add()}>click<button>
    </div>;
  }
}