reactdemo.jsx

/*
* Denne appen bruker mobX for tilstandshåndtering
*/
import React, {Component, createElement} from 'react';
import {render} from 'react-dom';
import {observer} from "mobx-react";
import {autorunAsync, observable, action} from 'mobx'
import times from 'lodash.times';

/*
* Dette er en action vi skal bruke for 
* å simulere en asynkron fetch
*/
function fetchHeadlineAsync() {
  return new Promise(resolve => {
    setTimeout(() => {
      const values = [
        'React Boilerplate',
        'Frameworks are cool',
        'JavaScript all the things'
      ];
      resolve([{value: values[~~(Math.random() * values.length)]}])
    }, 2500);
  });
}

/*
* Vi setter opp to stores for å håndtere tittel
* og tifleldig nummerering
*/
class TitleStore {
  @observable title;
  @observable fetchDisabled;

  constructor(title = '') {
    this.title = title;
    this.fetchDisabled = false;
  }

  @action setTitle = (title) => {
    this.title = title;
  };

  @action fetchData = () => {
    this.fetchDisabled = true;
    fetchHeadlineAsync().then(res => {
      this.title = res[0].value;
      this.fetchDisabled = false;
    });
  }
}
const titleStore = new TitleStore('React');

class NumberStore {
  @observable number;

  constructor() {
    this.number = 1;
  }

  @action update = () => {
    this.number = ~~(Math.random() * 100);
  };
}
const numberStore = new NumberStore();

/*
* Vi setter opp to kontainere slik at vi kan
* sende inn store actions som props
*/
const AppContainer = observer(() => {
  return <App fetchData={titleStore.fetchData} />
});

const RowContainer = observer(() => {
  return <Row update={numberStore.update} />
});

/*
* Vi lager to komponenter og dekorerer de
* med observer
*/
@observer
class Row extends Component {
  render() {
    return (<div className="row center-xs">
      {times(6, String).map(i => {
        return (
          <div key={`col${i}`} className="col-xs-2">
            <div className="box" 
              style={{backgroundColor: `#${(Math.random() * numberStore.number ).toString(16).slice(2, 8)}`}}>
              {numberStore.number * ~~(Math.random() * (100))}
            </div>
          </div>
        )
      })}
    </div>)
  }
}

const Rows = times(60, String).map((i) => {
  return <RowContainer key={`row${i}`}  />
});

@observer
class App extends Component {
  constructor(props) {
    super(props);
    this.fetchData = props.fetchData.bind(this);
  }

  render() {
    return <div>
          <div className="row center-xs navbar">
            <div className="col-xs-12">
              <div className="box">
                <h1>{titleStore.title}</h1>
              </div>
            </div>
          </div>

          <div className="row center-xs">
            <div className="col-xs-12">
              <div className="box pat pab">
                <button type="button" className="btn-default"
                        disabled={titleStore.fetchDisabled}
                        onClick={this.fetchData}>Fetch Title Async
                </button>
              </div>
            </div>
          </div>

            {Rows}

    </div>
  }
}

//////////////////////////////////////////////////
// RUN & RENDER CODE
render(
  createElement(AppContainer),
  document.getElementById('app')
);

const interval = setInterval(()=>{
  numberStore.update();
},1);