diff --git a/client/actions/index.js b/client/actions/index.js index 0ab5757..ade1cbf 100644 --- a/client/actions/index.js +++ b/client/actions/index.js @@ -1,6 +1,7 @@ -export const closeTask = (id) => ({ +export const closeTask = (id, text) => ({ type: 'CLOSE', - id + id, + text }); export const deleteTask = (id) => ({ @@ -8,12 +9,6 @@ export const deleteTask = (id) => ({ id }); -export const editTask = (id, text) => ({ - type: 'EDIT', - id, - text -}); - export const get = () => ({ type: 'GET' }); diff --git a/client/components/TaskList/Task.js b/client/components/TaskList/Task.js index cc16d3f..3dbb133 100644 --- a/client/components/TaskList/Task.js +++ b/client/components/TaskList/Task.js @@ -27,7 +27,7 @@ const TrashButton = styled(Button)` padding: 0; `; -const handleInputChange = (handler) => { +const handleBlur = (handler) => { return (event) => { handler(event.target.value); }; @@ -38,7 +38,7 @@ const handleKeyDown = (handler) => { // pressed enter, escape, or tab if (event.key === 'Enter' || event.keyCode === 27 || event.keyCode === 9) { event.preventDefault(); - handler(); + handler(event.target.value); } }; } @@ -46,7 +46,6 @@ const handleKeyDown = (handler) => { const Task = ({ closeTask, deleteTask, - editTask, openTask, isOpened, text @@ -55,8 +54,7 @@ const Task = ({ {isOpened ? ( @@ -34,9 +33,8 @@ const TaskList = ({ ? tasks.map((task) => ( { closeTask(task.id); }} + closeTask={(text) => { closeTask(task.id, text); }} deleteTask={() => { deleteTask(task.id); }} - editTask={(text) => { editTask(task.id, text); }} openTask={() => { openTask(task.id); }} isOpened={task.isOpened} text={task.text} diff --git a/client/containers/TaskListContainer.js b/client/containers/TaskListContainer.js index 732d1bd..417badf 100644 --- a/client/containers/TaskListContainer.js +++ b/client/containers/TaskListContainer.js @@ -4,7 +4,6 @@ import { connect } from 'react-redux'; import { closeTask, deleteTask, - editTask, openTask } from '../actions'; import TaskList from '../components/TaskList'; @@ -16,7 +15,6 @@ const mapStateToProps = (state) => ({ const mapDispatchToProps = { closeTask, deleteTask, - editTask, openTask } diff --git a/client/reducers/tasks.js b/client/reducers/tasks.js index 4086a83..addf2e1 100644 --- a/client/reducers/tasks.js +++ b/client/reducers/tasks.js @@ -1,39 +1,29 @@ const DEFAULT_TODO = 'New task'; -const getNextId = () => Math.random(); // TODO: how to generate more stably? - -// inserts element without modification -const insert = (array, index, item) => { - return [ - ...array.slice(0, index), - item, - ...array.slice(index+1) - ]; -} +// TODO: how to generate more stably? +const getNextId = () => { + return Math.random(); +}; const tasks = (state = [], action) => { switch (action.type) { case 'CLOSE': { const i = state.findIndex((task) => task.id === action.id); - const closeTask = { + const closedTask = { ...state[i], - isOpened: false + isOpened: false, + text: action.text || DEFAULT_TODO }; - return insert(state, i, closeTask); + return [ + ...state.slice(0, i), + closedTask, + ...state.slice(i+1) + ]; } case 'DELETE': return state.filter((task) => task.id !== action.id); - case 'EDIT': { - const i = state.findIndex((task) => task.id === action.id); - const editedTask = { - ...state[i], - text: action.text - }; - return insert(state, i, editedTask); - } - case 'GET': { // TODO: use thunk to make API request console.log('get'); @@ -42,9 +32,13 @@ const tasks = (state = [], action) => { case 'NEW': { const newTask = { id: getNextId(), + isOpened: true, text: DEFAULT_TODO }; - return insert(state, 0, newTask); + return [ + newTask, + ...state.slice(0) + ]; } case 'OPEN': { @@ -53,7 +47,11 @@ const tasks = (state = [], action) => { ...state[i], isOpened: true }; - return insert(state, i, openedTask); + return [ + ...state.slice(0, i), + openedTask, + ...state.slice(i+1) + ]; } case 'SAVE': {