import React from 'react';

export default class TestPage extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        nodes: [
            {id: 1, content: "qwerty"},
            {id: 2, content: "abcdef"}
        ],
        selected_node: {}
    };
}
cancelEdit() {
    this.setState({selected_node: {}});
}
selectNode(node) {
    this.setState({selected_node: node});
}
handleContent(event) {
    let selected_node = this.state.selected_node;
    selected_node.content = event.target.value;
    this.setState({selected_node: selected_node});
}
render() {
    let self = this;

    return (
        <div>
            <table>
                <thead>
                    <th>id</th>
                    <th>content</th>
                    <th>edit</th>
                </thead>
                <tbody>
                {this.state.nodes.map(function(node, i) {
                    if(node.id == self.state.selected_node.id) {
                        return <tr key={i}>
                            <td>{node.id}</td>
                            <td><input
                                value={self.state.selected_node.content}
                                onChange={self.handleContent.bind(self)}
                            />
                            </td>
                            <td>
                                <button>save</button>
                                <button onClick={self.cancelEdit.bind(self)}>cancel</button>
                            </td>
                        </tr>
                    } else {
                        return <tr key={i}>
                            <td>{node.id}</td>
                            <td>{node.content}</td>
                            <td><button onClick={self.selectNode.bind(self, node)}>edit</button></td>
                        </tr>;
                    }
                })}
                </tbody>
            </table>
        </div>
    );
}