abstracting is not always needed

jpsierens · Sep 23, 2016 · e5cd6d4 · e5cd6d4
1 parent 939b200
commit e5cd6d4
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 18 deletions.
diff --git a/app/components/CreateTodo.js b/app/components/CreateTodo.js
@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
 import * as rules from '../rules';
 
-const handleSubmit = (nameInput, noteInput, onCreate) => {
+const handleFormSubmit = (nameInput, noteInput, onCreate) => {
     const name = nameInput.value;
     const note = noteInput.value;
 
@@ -40,7 +40,7 @@ const CreateTodo = ({ onCreate }) => {
                 type="submit"
                 onClick={(e) => {
                     e.preventDefault();
-                    handleSubmit(nameInput, noteInput, onCreate);
+                    handleFormSubmit(nameInput, noteInput, onCreate);
                 }}>
 
                 SUBMIT

diff --git a/app/components/TodoDetail.js b/app/components/TodoDetail.js
@@ -4,6 +4,20 @@ import handleUpdateTodo from '../helpers/handleUpdateTodo';
 import withExit from '../helpers/withExit';
 import * as rules from '../rules';
 
+const handleSave = (router, nameInput, noteInput, params) => {
+    const newName = nameInput.value;
+    const newNote = noteInput.value;
+
+    if (!newName || !newNote) return;
+
+    params.push({
+        name: newName,
+        note: newNote
+    });
+
+    withExit(handleUpdateTodo)(router, '/', params);
+};
+
 const TodoDetail = ({ todo, updateTodo, onRemove, router }) => {
     const { name, note, _id, completed, updatedAt } = todo;
     const time = new Date(updatedAt);
@@ -13,19 +27,21 @@ const TodoDetail = ({ todo, updateTodo, onRemove, router }) => {
 
     return (
         <div className={`todo todo-detail ${ completed ? 'done' : ''}`}>
-            <input
-                type="text"
-                value={name}
-                maxLength={`${rules.NAME_LENGTH}`}
-                ref={(ref) => { nameInput = ref; }}/>
+            <form>
+                <input
+                    type="text"
+                    defaultValue={name}
+                    maxLength={`${rules.NAME_LENGTH}`}
+                    ref={(ref) => { nameInput = ref; }}/>
+
+                <textarea
+                    rows="10"
+                    cols="50"
+                    defaultValue={note}
+                    maxLength={`${rules.NOTE_LENGTH}`}
+                    ref={(ref) => { noteInput = ref; }}/>
+            </form>
 
-            <textarea
-                rows="10"
-                cols="50"
-                maxLength={`${rules.NOTE_LENGTH}`}
-                ref={(ref) => { noteInput = ref; }}>
-                { note }
-            </textarea>
             <div>
                 <button
                     className="btn-status"
@@ -41,10 +57,7 @@ const TodoDetail = ({ todo, updateTodo, onRemove, router }) => {
             </div>
             <button
                 className="btn-save"
-                onClick={(e) => withExit(handleUpdateTodo)(router, '/', [e, updateTodo, _id, {
-                    name: nameInput.value,
-                    note: noteInput.value
-                }])}>
+                onClick={(e) => handleSave(router, nameInput, noteInput, [e, updateTodo, _id])}>
 
                 SAVE
             </button>