Todo list app using ethereum Blockchain-Part-3

In part-1, part-2 we have setup project ,created smart contract and deployed on ethereum blockchain using metamask and performed test. You may refer code on github.

In part-2 we’ve migrated this smart contract to the blockchain and performed test for blockchain tasks, In this part we will create tasks for the client side application to interact with the todo list smart contract. You’ll need to create the following files for your project:

Let’s create tasks: We’ve already created a function for creating tasks, but it is not complete . That’s because I want to trigger an event any time that new task is created. 

So add below TaskCreated event and call from creattask function.

pragma solidity >0.5.2;
contract TodoList {
  uint public taskCount = 0;
  struct Task {
    uint id;
    string content;
    bool completed;
  }
  mapping(uint => Task) public tasks;
  event TaskCreated(
    uint id,
    string content,
    bool completed
  );
 constructor() public {
        createTask("initialise create task todo list");
  }
  function createTask(string memory _content) public {
    taskCount ++;
    tasks[taskCount] = Task(taskCount, _content, false);
    emit TaskCreated(taskCount, _content, false);
  }
}

Let’s create a test to ensure that this event is triggered any time a new task is created. We will inspect the transaction receipt when the new task is created. This will contain all of the log information that will contain the event data.

it('creates tasks', async () => {
   const result = await this.todoList.createTask('A new task')
   const taskCount = await this.todoList.taskCount()
   assert.equal(taskCount, 2)
   const event = result.logs[0].args
   assert.equal(event.id.toNumber(), 2)
   assert.equal(event.content, 'A new task')
   assert.equal(event.completed, false)
 })

Run test

$ truffle test

Now let’s deploy a new copy of the smart contract to the blockchain since the code has changed.

$ truffle migrate –reset

For enabling input box for creating task ,un-comment the form code in the index.html file .

<form onSubmit="App.createTask(); return false;">
  <input id="newTask" type="text" class="form-control" placeholder="Add task..." required>
  <input type="submit" hidden="">
</form>

Now we’ll add a createTask() function in the app.js file like this

createTask: async () => {
  App.setLoading(true)
  const content = $('#newTask').val()
  await App.todoList.createTask(content)
  window.location.reload()
},

Now enter some task name in input box and enter .task will be added . To perform transaction it will ask confirmation of metamask .

Let’s Implement Complete Tasks : They will appear in the “completed” list, striked though.We’ll add a TaskComplted() event, and trigger it inside a new toggleCompleted() function like this:

pragma solidity >0.5.2;

contract TodoList {
  uint public taskCount = 0;
  
  struct Task {
    uint id;
    string content;
    bool completed;
  }
  mapping(uint => Task) public tasks;
  event TaskCreated(
    uint id,
    string content,
    bool completed
  );
  event TaskCompleted(
    uint id,
    bool completed
  );
 constructor() public {
        createTask("initialise create task todo list");
  }
  function createTask(string memory _content) public {
    taskCount ++;
    tasks[taskCount] = Task(taskCount, _content, false);
    emit TaskCreated(taskCount, _content, false);
  }
  function toggleCompleted(uint _id) public {
    Task memory _task = tasks[_id];
    _task.completed = !_task.completed;
    tasks[_id] = _task;
    emit TaskCompleted(_id, _task.completed);
  }
}

Now we’ll add a test like this:

it('toggles task completion', async () => {
  const result = await this.todoList.toggleCompleted(1)
  const task = await this.todoList.tasks(1)
  assert.equal(task.completed, true)
  const event = result.logs[0].args
  assert.equal(event.id.toNumber(), 1)
  assert.equal(event.completed, true)
})

run the test:

$ truffle test

let’s deploy a new copy of the smart contract to the blockchain since the code has changed:

$ truffle migrate --reset

Now let’s update the the client side code. First we’ll add the event listener inside the renderTasks() function:

$newTaskTemplate.find('input')
  .prop('name', taskId)
  .prop('checked', taskCompleted)
  .on('click', App.toggleCompleted)

Now we’ll add a toggleCompleted() function in the app.js file like this:

toggleCompleted: async (e) => {
  App.setLoading(true)
  const taskId = e.target.name
  await App.todoList.toggleCompleted(taskId)
  window.location.reload()
},

Now, find a task in the client side application and click the checkbox. Once you sign this transaction, it will check off the task from the todo list!

Please refer part-1, part-2 and code github .