mobx sample

BotsModel.js

import { observable, computed, action, asMap } from 'mobx';
// import slug from 'slug';


let instance = null;
export class BotsModel {
    @observable bots = [];
    @observable selected = {};

    addBots (bots){
        this.bots = bots;
    }

    addBot (bots){
        this.bots.push(bots);
    }

    addSelected (bot){
        this.selected = bot;
    }

    constructor(props) {        
        // this.addWord("");

        if(!instance){
            instance = this;
        }
        return instance;
    }
}

MyBotsPage.jsx

import React from 'react';
import Auth from '../modules/Auth';
import { Link, IndexLink } from 'react-router';
import { observer } from 'mobx-react';
import MyBots from '../components/MyBots.jsx';
import { BotsModel } from '../models/BotsModel';
import { observable, computed, action, asMap } from 'mobx';


const mybots = new BotsModel();

@observer
class MyBotsPage extends React.Component {
  /**
   * Class constructor.
   */
  constructor(props) {
    super(props);
  }

  @action editBot(bot) {
     mybots.selected = bot;
  }
  /**
   * This method will be executed after initial rendering.
   */
  componentDidMount() {
    const xhr = new XMLHttpRequest();
    xhr.open('get', '/api/bots/list');
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    // set the authorization HTTP header
    xhr.setRequestHeader('Authorization', `bearer ${Auth.getToken()}`);
    xhr.responseType = 'json';
    xhr.addEventListener('load', () => {
      if (xhr.status === 200) {
        mybots.bots =  xhr.response.bots
      }
    });
    xhr.send();
  }

  /**
   * Render the component.
   */
  render() {
    return (
        <div>
          <Link to="/bots/edit">Create New Bot</Link>

            <ul>
              {mybots.bots && mybots.bots.map ( 
                  (bot, idx) => (
                    
                    <li key={ idx }  >
                        <MyBots entity={bot} clickBot={() => this.editBot(bot)} />
                    </li>
                  ) 
                )}
            </ul>
        </div>
      );
  }
 
}

export default MyBotsPage;