feat: add erasing operation

Author: DCsunset

package-lock.json

@@ -26,7 +26,7 @@
     "react-redux": "^7.2.3",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
-    "task.json": "^2.2.0",
+    "task.json": "^2.2.1",
     "task.json-client": "^0.1.4",
     "typeface-roboto": "^1.1.13",
     "typescript": "^4.2.3",

package.json

@@ -6,7 +6,8 @@ import {
 	Delete as DeleteIcon,
 	Pencil as PencilIcon,
 	Restore as RestoreIcon,
-	Check as CheckIcon
+	Check as CheckIcon,
+	Close as CloseIcon
 } from "mdi-material-ui";
 import { TaskType, Task, taskUrgency } from "task.json";
 import { DateTime } from "luxon";
@@ -83,6 +84,7 @@ interface CustomToolbarSelectProps {
 	selectedIds: string[];
 	taskType: TaskType;
 	onRemove: (ids: string[]) => void;
+	onErase: (ids: string[]) => void;
 	onUndo: (ids: string[]) => void;
 	onDo: (ids: string[]) => void;
 };
@@ -122,6 +124,16 @@ const CustomToolbarSelect = (props: CustomToolbarSelectProps) => {
 					</IconButton>
 				</Tooltip>
 			}
+			{props.taskType === "removed" &&
+				<Tooltip title="Erase Tasks">
+					<IconButton
+						className={classes.del}
+						onClick={() => props.onErase(props.selectedIds)}
+					>
+						<CloseIcon />
+					</IconButton>
+				</Tooltip>
+			}
 		</div>
 	);
 };
@@ -130,6 +142,7 @@ interface ActionsProps {
 	taskType: TaskType;
 	task: Task;
 	onRemove: (ids: string[]) => void;
+	onErase: (ids: string[]) => void;
 	onUndo: (ids: string[]) => void;
 	onDo: (ids: string[]) => void;
 	onEdit: (task: Task) => void;
@@ -182,6 +195,17 @@ const Actions = (props: ActionsProps) => {
 					</IconButton>
 				</Tooltip>
 			}
+			{props.taskType === "removed" &&
+				<Tooltip title="Erase">
+					<IconButton
+						className={`${classes.del} ${classes.actionButton}`}
+						size="small"
+						onClick={() => props.onErase([props.task.id])}
+					>
+						<CloseIcon />
+					</IconButton>
+				</Tooltip>
+			}
 		</>
 	);
 };
@@ -224,6 +248,10 @@ function TaskList(props: Props) {
 		}
 	};
 
+	const eraseTasks = (ids: string[]) => {
+		dispatch(rootActions.eraseTasks(ids));
+	};
+
 	const undoTasks = (ids: string[]) => {
 		if (props.taskType !== "todo") {
 			dispatch(rootActions.undoTasks({
@@ -268,6 +296,7 @@ function TaskList(props: Props) {
 							taskType={props.taskType}
 							selectedIds={ids}
 							onRemove={removeTasks}
+							onErase={eraseTasks}
 							onUndo={undoTasks}
 							onDo={doTasks}
 						/>
@@ -366,6 +395,7 @@ function TaskList(props: Props) {
 								task={tasks[index]}
 								onEdit={props.onEdit}
 								onRemove={removeTasks}
+								onErase={eraseTasks}
 								onUndo={undoTasks}
 								onDo={doTasks}
 							/>

src/components/TaskList.tsx

@@ -1,7 +1,7 @@
 import { configureStore } from '@reduxjs/toolkit';
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { Notification, Settings } from "../types";
-import { initTaskJson, removeTasks, doTasks, undoTasks, Task, TaskJson, TaskType, idToIndex } from "task.json";
+import { initTaskJson, removeTasks, eraseTasks, doTasks, undoTasks, Task, TaskJson, TaskType, idToIndex } from "task.json";
 import { login, syncTasks, uploadTasks, downloadTasks } from "./async-actions";
 import _ from "lodash";
 import { HttpError } from 'task.json-client';
@@ -60,6 +60,11 @@ const rootSlice = createSlice({
 			const indexes = idToIndex(state.taskJson, type, ids);
 			removeTasks(state.taskJson, type, indexes);
 		},
+		eraseTasks(state, action: PayloadAction<string[]>) {
+			const ids = action.payload;
+			const indexes = idToIndex(state.taskJson, "removed", ids);
+			eraseTasks(state.taskJson, indexes);
+		},
 		doTasks(state, action: PayloadAction<string[]>) {
 			const ids = action.payload;
 			const indexes = idToIndex(state.taskJson, "todo", ids);