EOSLime shape TodoApplication [ Connector ]

todo-application.js

// ./index.js

import React from 'react';
import { TodoFormHtml } from './renders/todo-form';
import TodoManager from './services/todo-manager';

class TodoApplication extends Component {

    constructor() {
        this.state = {
            // Blockchain service
            todoManager: null,

            // New Todo description
            newTodoDescription: ''
        }
    }

    // React method comming from Component class
    async componentDidMount () {

        // Make sure methods will be visible in todo-form render
        this.addTodo = this.addTodo.bind(this);
        this.onNewTodoDescription = this.onNewTodoDescription.bind(this);

        // Instantiate Blockchain service
        const todoManager = await TodoManager.build();
        this.setState({ todoManager });
    }

    // Visualise our "Add Todo" button 
    render () {
        return (
            <div>
                {TodoFormHtml(this)}
            </div>
        );
    }
	
    // Update Todo description on input box entering
    onNewTodoDescription (event) {
        this.setState({ newTodoDescription: event.target.value });
    }

    /* 
        Once "Add Todo" button is clicked we are trigerring 
        a transaction to be broadcated in the blockchain 
        (Create Todo in the blockchain)
    */
    async addTodo () {
        /*
            Create a new Todo on chain by providing its description
			
            By successfully broadcating a transaction you will get its 
            status and id in return
        */ 
        const txReceipt = await this.state.todoManager.addTodo(this.state.newTodoDescription);
    }
}