add input control

konyavic · Dec 3, 2016 · dd0c760 · dd0c760
1 parent 1fe56e6
commit dd0c760
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 0 deletions.
diff --git a/src/routes/Todo/components/Todo.js b/src/routes/Todo/components/Todo.js
@@ -17,6 +17,10 @@ export class Todo extends React.Component {
       {
         props.isAuth ? <TodoView data={props.todos} onChange={props.handleToggleTodo}/> : <TodoAuth doAuth={props.doAuth}/>
       }
+      <form>
+        <input type="text" value={props.inputTodo} onChange={props.handleInputText} />
+        <input type="button" value="追加" onClick={props.addTodo}/>
+      </form>
     </div>
   }
 }

diff --git a/src/routes/Todo/containers/TodoContainer.js b/src/routes/Todo/containers/TodoContainer.js
@@ -3,6 +3,8 @@ import {
   didMount,
   doAuth,
   handleToggleTodo,
+  handleInputText,
+  addTodo,
 } from '../modules/todo'
 
 import Todo from '../components/Todo'
@@ -11,11 +13,14 @@ const mapDispatchToProps = {
   didMount,
   doAuth,
   handleToggleTodo,
+  handleInputText,
+  addTodo,
 }
 
 const mapStateToProps = (state) => ({
   isAuth: state.todo.isAuth,
   todos: state.todo.todos,
+  inputTodo: state.todo.inputTodo,
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Todo)
diff --git a/src/routes/Todo/modules/todo.js b/src/routes/Todo/modules/todo.js
@@ -53,6 +53,26 @@ export function handleToggleTodo(i) {
   }
 }
 
+export function handleInputText(e) {
+  return (dispatch, getState) => {
+    dispatch({
+      type: "TASK_INPUTED",
+      payload: e.target.value,
+    })
+  }
+}
+
+export function addTodo(e) {
+  e.preventDefault()
+  return (dispatch, getState) => {
+    console.log(getState())
+    firebase.database().ref("todo").push({
+      title: getState().todo.inputTodo,
+      is_done: false,
+    })
+  }
+}
+
 // ------------------------------------
 // Action Handlers
 // ------------------------------------
@@ -87,6 +107,11 @@ const ACTION_HANDLERS = {
       todos: todos
     })
   },
+  ["TASK_INPUTED"]: (state, action) => {
+    return Object.assign({}, state, {
+      inputTodo: action.payload
+    })
+  },
 }
 
 // ------------------------------------
@@ -95,6 +120,7 @@ const ACTION_HANDLERS = {
 const initialState = {
   isAuth: false,
   todos: [],
+  inputTodo: "",
 }
 export default function todoReducer (state = initialState, action) {
   const handler = ACTION_HANDLERS[action.type]