Using the Elsa Babel plugin

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "babel-plugin-elsa": "^2.3.0",
     "classnames": "^2.2.5",
     "immutability-helper": "^2.2.0",
     "lodash": "^4.17.4",
@@ -83,6 +84,9 @@
   "babel": {
     "presets": [
       "react-app"
+    ],
+    "plugins": [
+      "babel-plugin-elsa"
     ]
   },
   "eslintConfig": {

src/components/TodoContainer.js

@@ -2,7 +2,6 @@ import React from 'react';
 import TodoList from './TodoList';
 import AddTodo from './AddTodo';
 import uuidV4 from 'uuid/v4';
-import update from 'immutability-helper';
 import vex from 'vex-js/src/vex.combined';
 import 'vex-js/dist/css/vex.css';
 import 'vex-js/dist/css/vex-theme-os.css';
@@ -37,12 +36,10 @@ export default class TodoContainer extends React.Component {
     const todoIndex = this.state.todos.indexOf(todo);
     const message = target.value;
 
-    const updatedTodo = update(todo, { $merge: { message } });
+    const updatedTodo = todo.update({ $merge: { message } });
 
     this.setState(prevState => ({
-      todos: update(prevState.todos, {
-        $splice: [[todoIndex, 1, updatedTodo]]
-      })
+      todos: prevState.todos.splice(todoIndex, 1, updatedTodo)
     }));
   }
 
@@ -55,9 +52,7 @@ export default class TodoContainer extends React.Component {
         if (!confirmed) return;
 
         this.setState(prevState => ({
-          todos: update(prevState.todos, {
-            $splice: [[todoIndex, 1]]
-          })
+          todos: prevState.todos.splice(todoIndex, 1)
         }));
       }
     });
@@ -67,15 +62,13 @@ export default class TodoContainer extends React.Component {
     this.setState(prevState => {
       let { todos } = prevState;
       const todoIndex = todos.indexOf(todo);
-      todo = update(todo, {
+      todo = todo.update({
         $merge: { done: target.checked }
       });
-      todos = update(todos, { $splice: [[todoIndex, 1, todo]] });
+      todos = todos.splice(todoIndex, 1, todo);
       // Place done todo items at the end of the list
-      todos = todos.slice().sort((a,b) => a.done && !b.done)
-      return {
-        todos: update(todos, { $set: todos })
-      };
+      todos = todos.sort((a,b) => a.done && !b.done);
+      return { todos };
     });
   }
 

yarn.lock

@@ -448,6 +448,13 @@ babel-plugin-check-es2015-constants@^6.3.13:
   dependencies:
     babel-runtime "^6.22.0"
 
+babel-plugin-elsa@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-elsa/-/babel-plugin-elsa-2.3.0.tgz#810459064b345135257409f34167f7cf6823ca24"
+  dependencies:
+    immutability-helper "^2.1.2"
+    lodash "^4.17.4"
+
 babel-plugin-istanbul@^3.0.0:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-3.1.2.tgz#11d5abde18425ec24b5d648c7e0b5d25cd354a22"
@@ -2483,7 +2490,7 @@ ignore@^3.2.0:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.7.tgz#4810ca5f1d8eca5595213a34b94f2eb4ed926bbd"
 
-immutability-helper@^2.2.0:
+immutability-helper@^2.1.2, immutability-helper@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/immutability-helper/-/immutability-helper-2.2.0.tgz#c4385ad4f68315843efaf0cff3575ee82ffa405f"
   dependencies: