Task_4 : Added action to set task :(

src/actions/tasks.js

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

src/middlewares/tasks.js

@@ -1,8 +1,9 @@
 import { apiStart, API_FAILURE, API_SUCCESS } from "../actions/api";
-import { FETCH_TASKS, setTasks } from "../actions/tasks";
+import { FETCH_TASKS, POST_TASK, setTasks } from "../actions/tasks";
 import { setLoader, setNotification } from "../actions/ui";
 
 const TASKS_API_GET = "http://localhost:3000/data/tasks.json";
+const TASKS_API_POST = "http://localhost:3000/data/";
 
 export const tasksMiddleware = () => (next) => (action) => {
   next(action);
@@ -18,5 +19,10 @@ export const tasksMiddleware = () => (next) => (action) => {
     case API_FAILURE:
       next(setNotification({error: action.payload}));
       next(setLoader(false));
+      break;
+    case POST_TASK:
+      next(apiStart({body: action.payload, method: 'POST', url: TASKS_API_POST}));
+      next(setLoader(false));
+      break;
   }
 };

src/pages/TaskListPage/TodoList/index.jsx

@@ -30,7 +30,7 @@ class TodoList extends React.Component {
         </div> */}
         <FormAddTask onSubmitCallback={performAddTask} />
         <LoadingIndicator show={showLoader} />
-        { list.length > 0 && (
+        { list && list.length > 0 && (
           <>
             <Toggle active={filterApplied} label="Hide completed" onToggle={toggleListItem} />
 

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 { POST_TASK, setTasks, fetchTasks } from "../../../actions/tasks";
 
 class TodoListContainer extends Component {
   constructor(props) {
@@ -49,6 +49,21 @@ class TodoListContainer extends Component {
     //     list: newList
     //   }
     // });
+    console.info(this.props);
+    this.setState(state => {
+      debugger;
+      const newTaskElement = {
+        ...newTask,
+        id: this.props.list.length,
+        completed: false
+      };
+      let newList = [...this.props.list];
+      newList.push(newTaskElement);
+      this.props.setTasks(newTaskElement);
+      return {
+        list: newList
+      }
+    });
   }
 
   render() {
@@ -76,7 +91,8 @@ const mapStateToProps = state => {
 
 const mapDispacthToProps = dispatch => {
   return {
-    fetchTasks: () => dispatch(fetchTasks({query: {}}))
+    fetchTasks: () => dispatch(fetchTasks({query: {}})),
+    setTasks: (data) => dispatch(setTasks(data))
   }
 }
 

src/reducers/tasks.js

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