Refactor todo buttons: redo, delete, complete

src/App.js

@@ -1,6 +1,6 @@
 import {useState, useEffect, useRef} from 'react';
 import { addTask, addAll, completeBenchmarkTask, benchmarkItem, 
-  emptyList, isActionableList, cancelItem, cloneItem } from './core/tasksManager';
+  emptyList, isActionableList, cancelItem, cloneItem, deleteItem, redoItem} from './core/tasksManager';
 import { startReview, handleReviewDecision, isPrioritizableList, 
   genCurrentQuestion, getInitialCursor } from './core/reviewManager';
 import { getFromLocalStorage, saveToLocalStorage } from './core/localStorageAdapter';
@@ -354,39 +354,41 @@ function App() {
   // lists in localStorage and query params.
   // Note: the lists rendered in the conflict modal are not interactive
   const renderList = (inputList, idOffset, interactive) => <div className="ph3">
-    <ul className="ph0 todo-list list ma0 tl measure-narrow ml-auto mr-auto">
+    <ul className="ph0 todo-list list ma0 tl measure ml-auto mr-auto">
     {interactive ?
       <> {inputList.map(task => (
         <TodoItem 
           key={task.id + idOffset} 
           task={task}  
           cancelFunc={() => handleListChange(cancelItem(inputList, task.id))}
           cloneFunc={() => handleListChange(cloneItem(inputList, task.id))}
+          redoFunc={() => handleListChange(redoItem(inputList, task.id))}
           isBenchmark={benchmarkItem(inputList) !== null && benchmarkItem(inputList).id === task.id}
           theme={theme}
-        />))} </> :
-      <> {inputList.map(task => (
-        <TodoItem 
-          key={task.id + idOffset} 
-          task={task}
-          isBenchmark={benchmarkItem(inputList) !== null && benchmarkItem(inputList).id === task.id}
-          theme={theme}
-        />
-      ))}</>}
-    </ul>
-  </div>;
-
-  return (
-    <main className={`app h-100 flex flex-column f5 montserrat ${theme === 'light' ? 'black' : 'white'}`}>
-      <header className="app-header pa3 flex justify-center items-center">
-        <h1 className="ma0 f2 fw8 tracked-custom dib">{appName}</h1>
-
-        <div className="pl3 inline-flex items-center">
-          <button 
-            type="button" 
-            /* TODO: set tab-index of menu items to be after other elements when modals are being shown */
-            disabled={isPrioritizing || showingDeleteModal || showingConflictModal }
-            className={`button-reset pa1 w2 h2 pointer f5 fw6 grow bg-transparent bn ${theme === 'light' ? 'moon-gray' : 'mid-gray'}`}
+          deleteFunc={() => handleListChange(deleteItem(inputList, task.id))}
+          />))} </> :
+          <> {inputList.map(task => (
+          <TodoItem 
+            key={task.id + idOffset} 
+            task={task}
+            isBenchmark={benchmarkItem(inputList) !== null && benchmarkItem(inputList).id === task.id}
+            theme={theme}
+          />
+          ))}</>}
+          </ul>
+          </div>;
+
+          return (
+          <main className={`app h-100 flex flex-column f5 montserrat ${theme === 'light' ? 'black' : 'white'}`}>
+          <header className="app-header pa3 flex justify-center items-center">
+            <h1 className="ma0 f2 fw8 tracked-custom dib">{appName}</h1>
+
+            <div className="pl3 inline-flex items-center">
+              <button 
+                type="button" 
+                /* TODO: set tab-index of menu items to be after other elements when modals are being shown */
+                disabled={isPrioritizing || showingDeleteModal || showingConflictModal }
+                className={`button-reset pa1 w2 h2 pointer f5 fw6 grow bg-transparent bn ${theme === 'light' ? 'moon-gray' : 'mid-gray'}`}
             onClick={handleToggleSaveModal}>
               {saveDisk}</button>
         </div>

src/TodoItem.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import {dotCircle, emptyCircle, filledCircle, 
-  cancelX, repeatArrow} from './core/icons'
+import {dotCircle, emptyCircle, filledCircle, checkmark, duplicateCube,
+  deleteX, repeatArrow} from './core/icons'
 
 // converts the all possible statuses *except* for 
 // 'cancelled' to a renderable symbol
@@ -11,31 +11,45 @@ const statusToSymbol = status => {
   return null;
 }
 
-function TodoItem({ task, isBenchmark, cancelFunc, cloneFunc, theme }) {
+function TodoItem({ task, isBenchmark, cancelFunc, cloneFunc, deleteFunc, redoFunc, theme }) {
   return (
-    <li className={`flex lh-135 align-start mb1 ${
+    <li className={`flex justify-center lh-135 align-start mb1 ${
       (task.status === "done" || task.status === "cancelled") && "o-50"} ${
         isBenchmark ? "fw6" : "fw4"}`}>
       <span title={task.status} className="mr1 dib h-15">
         {(statusToSymbol(task.status) !== null) ?
           statusToSymbol(task.status) :
           statusToSymbol(task.was)}</span>
-      <span className={`${task.status === "cancelled" && "strike"}`}>{task.text}</span>
-      <div className="relative ml1 h-15 w3">
+      <span className={`measure-narrow ${task.status === "cancelled" && "strike"}`} style={{width: '20em'}}>{task.text}</span>
+      <div className="relative h-15 w3 flex">
         {cancelFunc && cloneFunc &&
         <>
-      {task.status === "new" || task.status === "ready" ?
+          {task.status === "new" || task.status === "ready" ?
+            <button 
+              title="Complete Task" 
+              onClick={cancelFunc} 
+              className={`button-reset pa1 hover-button w2 h-15 pointer bg-transparent bn ${theme === 'light' ? 'moon-gray' : 'mid-gray'}`}>
+                {checkmark}</button> : 
+            <>
+            <button 
+            title="Redo Task" 
+            onClick={redoFunc} 
+            className={`button-reset pa1 hover-button w2 h-15 pointer bg-transparent bn ${theme === 'light' ? 'moon-gray' : 'mid-gray'}`}>
+              {repeatArrow}</button>
+            </>}
+
+            <button 
+            title="Clone Task" 
+            onClick={cloneFunc} 
+            className={`button-reset pa1 hover-button w2 h-15 pointer bg-transparent bn ${theme === 'light' ? 'moon-gray' : 'mid-gray'}`}>
+              {duplicateCube}</button>
+        </>}
         <button 
-          title="Cancel Task" 
-          onClick={cancelFunc} 
+          title="Delete Task" 
+          onClick={deleteFunc} 
           className={`button-reset pa1 hover-button w2 h-15 pointer bg-transparent bn ${theme === 'light' ? 'moon-gray' : 'mid-gray'}`}>
-            {cancelX}</button> : 
-        <button 
-          title="Clone Task" 
-          onClick={cloneFunc} 
-          className={`button-reset pa1 hover-button w2 h-15 pointer bg-transparent bn ${theme === 'light' ? 'moon-gray' : 'mid-gray'}`}>
-            {repeatArrow}</button>}</>}
-        </div>
+            {deleteX}</button>
+      </div>
     </li>
   );
 }

src/core/tasksManager.js

@@ -82,4 +82,18 @@ export const cloneItem = (tasks, id) => {
   const itemText = tasks.filter(x => x.id === id).at(0).text;
   const updatedTasks = addTask(tasks, itemText);
   return updatedTasks;
+}
+
+// takes item of a given id and removes it from the list
+export const deleteItem = (tasks, id) => {
+  const updatedTasks = tasks.filter(task => task.id !== id);
+  return updatedTasks;
+}
+
+// takes item of a given id and marks it as ready
+export const redoItem = (tasks, id) => {
+  const updatedTasks = tasks.map(task => 
+    task.id === id ? { ...task, status: "ready" } : task
+  );
+  return updatedTasks;
 }