feat(ui): implement commit edit on return/enter

src/main/webapp/package.json

@@ -26,6 +26,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
+    "keycode-js": "^3.1.0",
     "todomvc-common": "^1.0.5",
     "todomvc-app-css": "^2.3.0"
   },

src/main/webapp/src/components/todo.js

@@ -1,10 +1,12 @@
 import React, { useState, useEffect, useRef, useContext } from 'react';
 import { TodosContext } from "../context/todos_context";
+import { KEY_RETURN } from 'keycode-js';
 
 const Todo = function (props) {
   const { getTodo, updateTodo, deleteTodo }  = useContext(TodosContext);
   const [todo, setTodo] = useState(getTodo(props.id));
   const [editing, setEditing] = useState(false);
+  const [title, setTitle] = useState(todo.title);
 
   const toggleTodo = () => {
     todo.completed = !todo.completed;
@@ -15,6 +17,18 @@ const Todo = function (props) {
     deleteTodo(props.id);
   }
 
+  const changeTitle = (e) => {
+    setTitle(e.target.value);
+  }
+
+  const handleKeyDown = (e) => {
+    if (editing && e.which === KEY_RETURN) {
+      todo.title = title;
+      updateTodo(todo);
+      setEditing(false);
+    }
+  }
+
   return (
     <li
       onDoubleClick={() => setEditing(val => !val)}
@@ -34,7 +48,9 @@ const Todo = function (props) {
       </div>
       <input
         className="edit"
-        defaultValue={todo.title} />
+        onChange={changeTitle}
+        onKeyDown={handleKeyDown}
+        value={title} />
     </li>
   );
 }