feat: handle un-doing a todo

adekbadek · May 18, 2020 · ab52f67 · ab52f67
1 parent 5bd59eb
commit ab52f67
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/client/src/components/Todos.jsx b/client/src/components/Todos.jsx
@@ -21,16 +21,20 @@ const translateAction = action =>
     prepare_notes: 'Prepare notes from',
   }[action])
 
-export const SingleTodo = ({ todo, withRemoveButtons }) => {
+export const SingleTodo = ({ todo, withRemoveButtons, shouldUpdateAll }) => {
   const dispatch = useDispatch()
   const dueMoment = moment(todo.due_date)
   const isDisabled = todo.isBeingUpdated
 
-  const handleComplete = () =>
+  const toggleComplete = isCompleted => () =>
     dispatch(
       todosActions.updateTodo({
         id: todo.id,
-        updateData: { is_completed: true },
+        updateData: {
+          is_completed: isCompleted,
+          ...(!isCompleted && { completed_on: null }),
+        },
+        shouldUpdateAll,
       })
     )
 
@@ -61,8 +65,11 @@ export const SingleTodo = ({ todo, withRemoveButtons }) => {
             ? `Completed on ${moment(todo.completed_on).format(DATE_FORMAT)}`
             : dueMoment.fromNow()}
         </div>
-        <Button disabled={isDisabled} onClick={handleComplete}>
-          done
+        <Button
+          disabled={isDisabled}
+          onClick={toggleComplete(!todo.is_completed)}
+        >
+          {todo.is_completed ? 'undo' : 'done'}
         </Button>
         {withRemoveButtons && (
           <Button disabled={isDisabled} className='ml2' onClick={handleDelete}>

diff --git a/client/src/utils/sagas.js b/client/src/utils/sagas.js
@@ -75,7 +75,7 @@ function* deleteTodo(id: $PropertyType<Todo, 'id'>) {
   yield put(todosActions.setTodos({ todos: todos.filter(v => v.id !== id) }))
 }
 
-function* updateTodo({ id, updateData }) {
+function* updateTodo({ id, updateData, shouldUpdateAll }) {
   const todo = yield call(request, {
     url: getTodosURL(id),
     method: 'PATCH',
@@ -90,7 +90,11 @@ function* updateTodo({ id, updateData }) {
         : update(updatedItemIndex, todo, todos),
     })
   )
-  yield put(todosActions.fetchTodos())
+  // An update to a Todo might create Todos, so let's fetch all
+  const updateAction = shouldUpdateAll
+    ? todosActions.fetchAllTodos()
+    : todosActions.fetchTodos()
+  yield put(updateAction)
 }
 
 function* getUserData(_) {

diff --git a/client/src/views/AllTodos.jsx b/client/src/views/AllTodos.jsx
@@ -25,7 +25,7 @@ const AllTodos = ({ bookId }) => {
   const renderSingle = todo => (
     <tr key={todo.id}>
       <td>
-        <SingleTodo todo={todo} withRemoveButtons />
+        <SingleTodo todo={todo} withRemoveButtons shouldUpdateAll />
       </td>
     </tr>
   )