Add task

src/actions/api.js

@@ -7,7 +7,7 @@ export const API_FAILURE = 'API_FAILURE';
 export const apiStart = ({body, method, url}) =>  ({
   type: API_START,
   payload: body,
-  meta: {method, url}
+  meta: {method, body, url}
 });
 
 export const apiSuccess = ({response}) =>  ({

src/actions/tasks.js

@@ -6,6 +6,7 @@ export const TASKS = '[TASKS]';
 // action types
 // command actions
 export const FETCH_TASKS = `${TASKS} FETCH`;
+export const ADD_TASKS = `${TASKS} ADD `;
 // document actions
 export const SET_TASKS = `${TASKS} SET`;
 
@@ -19,6 +20,11 @@ export const setTasks = ({list}) => ({
   payload: list
 });
 
+export const addTasks = ({task}) => ({
+  type: ADD_TASKS,
+  payload: task
+});
+
 /*
 FETCH_TASKS -> API_START  -> API_SUCCESS -> SET_TASKS
                SET_LOADER                   SET_LOADER

src/middlewares/tasks.js

@@ -1,5 +1,5 @@
 import { apiStart, API_FAILURE, API_SUCCESS } from "../actions/api";
-import { FETCH_TASKS, setTasks } from "../actions/tasks";
+import { FETCH_TASKS, setTasks, addTasks, ADD_TASKS, SET_TASKS } from "../actions/tasks";
 import { setLoader, setNotification } from "../actions/ui";
 
 const TASKS_API_GET = "http://localhost:3000/data/tasks.json";
@@ -11,9 +11,16 @@ export const tasksMiddleware = () => (next) => (action) => {
       next(apiStart({body: null, method: 'GET', url: TASKS_API_GET}));
       next(setLoader(true));
       break;
+    case ADD_TASKS:
+      next(apiStart({body: action.payload, method: 'POST', url: TASKS_API_GET}));
     case API_SUCCESS:
-      next(setTasks({list: action.payload}));
-      next(setLoader(false));
+      if(SET_TASKS){
+        next(setTasks({list: action.payload}));
+        next(setLoader(false));
+      }
+      if(ADD_TASKS){
+        next(addTasks({task: action.payload}))
+      }
       break;
     case API_FAILURE:
       next(setNotification({error: action.payload}));

src/pages/TaskListPage/TodoListContainer/index.jsx

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import TodoList from "../TodoList";
 import { connect } from "react-redux";
 import { setLoader } from "../../../actions/ui";
-import { fetchTasks } from "../../../actions/tasks";
+import { fetchTasks, addTasks } from "../../../actions/tasks";
 
 class TodoListContainer extends Component {
   constructor(props) {
@@ -34,21 +34,15 @@ class TodoListContainer extends Component {
   }
 
   performAddTask(newTask) {
-    /*Challenge
-    * Create a new command action and the necessary actions and middlewares to manage this process
-    */
-    // this.setState(state => {
-    //   const newTaskElement = {
-    //     ...newTask,
-    //     id: this.propsstate.list.length,
-    //     completed: false
-    //   }
-    //   let newList = [...state.list];
-    //   newList.push(newTaskElement);
-    //   return {
-    //     list: newList
-    //   }
-    // });
+    const newTaskElement = {
+      ...newTask,
+      id: this.props.list.length,
+      completed: false
+    }
+    let newList = [...this.props.list];
+    newList.push(newTaskElement);
+
+    return this.props.addTasks(newList)
   }
 
   render() {
@@ -58,7 +52,7 @@ class TodoListContainer extends Component {
       <TodoList
         list={list}
         showLoader={loading}
-        filterApplied={filterApplied}
+        filterApplied={filterApplied}                                                                                                                           
         toggleTimer={this.toggleTimer}
         toggleListItem={this.toggleListItem}
         performAddTask={this.performAddTask}
@@ -76,7 +70,8 @@ const mapStateToProps = state => {
 
 const mapDispacthToProps = dispatch => {
   return {
-    fetchTasks: () => dispatch(fetchTasks({query: {}}))
+    fetchTasks: () => dispatch(fetchTasks({query: {}})),
+    addTasks: (task) => dispatch(addTasks({task: task}))
   }
 }
 

src/reducers/tasks.js

@@ -1,6 +1,6 @@
 // reducer for UI
 
-import { SET_TASKS } from '../actions/tasks';
+import { ADD_TASKS, SET_TASKS } from '../actions/tasks';
 import initialState from './initialState';
 
 const tasksReducer = (state=initialState.tasks, action) => {
@@ -10,6 +10,11 @@ const tasksReducer = (state=initialState.tasks, action) => {
         ...state,
         data: action.payload
       };
+    case ADD_TASKS:
+      return {
+        ...state,
+        data: action.payload
+      };
     default:
       return state;
   }