diff --git a/src/actions/api.js b/src/actions/api.js index a46ab0c..5c851de 100644 --- a/src/actions/api.js +++ b/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}) => ({ diff --git a/src/actions/tasks.js b/src/actions/tasks.js index c23a327..8e9dd7d 100644 --- a/src/actions/tasks.js +++ b/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 diff --git a/src/middlewares/tasks.js b/src/middlewares/tasks.js index 0aaaeae..06fbf49 100644 --- a/src/middlewares/tasks.js +++ b/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})); diff --git a/src/pages/TaskListPage/TodoListContainer/index.jsx b/src/pages/TaskListPage/TodoListContainer/index.jsx index 097c7fc..532b87f 100644 --- a/src/pages/TaskListPage/TodoListContainer/index.jsx +++ b/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 { { const mapDispacthToProps = dispatch => { return { - fetchTasks: () => dispatch(fetchTasks({query: {}})) + fetchTasks: () => dispatch(fetchTasks({query: {}})), + addTasks: (task) => dispatch(addTasks({task: task})) } } diff --git a/src/reducers/tasks.js b/src/reducers/tasks.js index 2e00af6..11033a9 100644 --- a/src/reducers/tasks.js +++ b/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; }