import React from 'react';

import Button from 'react-toolbox/lib/button';

import { StateTreeComponent } from './StateTree.js';

export class App extends StateTreeComponent
{
    initialState = {
        text: 'Not loaded',
        loaded: false,
    };

    componentWillMount()
    {
        if (!this.state.loaded)
        {
            this.ctx.doQuery((d) => this.setState({ text: d.text, loaded: true }));
        }
    }

    render()
    {
        return <div>
            {this.state.text}
            <Button raised primary label="Добавить плюсик" onClick={() => this.setState({ text: this.state.text+' +' })} />
            <SubComponent
                state={this.props.state.sub('sub')}
            />
        </div>
    }
}

class SubComponent extends StateTreeComponent
{
    initialState = {
        text: 'Not loaded',
        loaded: false,
    }

    componentWillMount()
    {
        if (!this.state.loaded)
        {
            this.ctx.doQuery((d) => this.setState({ text: d.text, loaded: true }));
        }
    }

    render()
    {
        return <div>
            SUB: {this.state.text}
        </div>
    }
}