import React, { Component } from 'react';
import Rx from 'rxjs/Rx';
import './App.css';

import Observable from './components/Observable';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <h2>React & Observables</h2>
        </div>
        <Observable observable={
          Rx.Observable.interval(1000).startWith(-1).map((i) => i + 2)
          .map((i) =>
            <div> {i}
              <Observable observable={
              Rx.Observable
              .interval(1000 / (i + 1)).startWith(-1)
              .map((j) => '-'.repeat(j + 1))
              } />
            </div>
          )}
        />
      </div>
    );
  }
}

export default App;