import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ServerComponent, { server_component, consumer } from 'server_component';

@server_component('counter')
class CounterContainer extends Component { }

@consumer('counter')
class CounterBody extends Component {
  render() {
    const { increment, decrement, state: { count } } = this.props.counter;
    return (
      <div>
        <h1>Counter</h1>
        <button onClick={() => increment()}>increment</button>
        <button onClick={() => decrement()}>decrement</button>
        <hr />
        <div>Count: {count}</div>
      </div>
    );
  }
}

class Main extends Component {
  render() {
    return (
      <ServerComponent.Use at="/react" name="api">
        <CounterContainer>
          <CounterBody />
        </CounterContainer>
      </ServerComponent.Use>
    );
  }
}

ReactDOM.render(<Main />, document.getElementById('root'));