[TaskNode] Popconfirm

Author: Yadro

.vscode/settings.json

@@ -32,5 +32,7 @@
     "test/**/__snapshots__": true,
     "yarn.lock": true,
     "*.{css,sass,scss}.d.ts": true
-  }
+  },
+
+  "cSpell.words": ["Popconfirm"]
 }

src/helpers/StopPropagation.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const stopPropagation = (e: React.SyntheticEvent | undefined) => {
+  e?.stopPropagation();
+};
+
+export const stopPropagationAndRun = (fn: () => void) => {
+  return (e: React.SyntheticEvent | undefined) => {
+    e?.stopPropagation();
+    fn();
+  };
+};

src/screens/projects/components/TaskNode/TaskNode.tsx

@@ -1,10 +1,12 @@
-import React, { SyntheticEvent, useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import {
   CaretRightFilled,
   DeleteOutlined,
   EnterOutlined,
   PauseOutlined,
+  QuestionCircleOutlined,
 } from '@ant-design/icons';
+import { Popconfirm } from 'antd';
 import { observer } from 'mobx-react';
 import { createUseStyles } from 'react-jss';
 
@@ -14,13 +16,19 @@ import * as TaskHooks from '../../../../hooks/TaskHooks';
 import { Features } from '../../../../config';
 import { last } from '../../../../helpers/ArrayHelper';
 import { taskLastActiveDateFormat } from '../../../../helpers/DateTime';
+import {
+  stopPropagation,
+  stopPropagationAndRun,
+} from '../../../../helpers/StopPropagation';
 
 const { tasksStore } = rootStore;
 
 interface TaskNodeProps {
   task: TaskModel;
 }
 
+const QUESTION = <QuestionCircleOutlined style={{ color: 'red' }} />;
+
 export default observer(function TaskNode({ task }: TaskNodeProps) {
   const classes = useStyle();
 
@@ -39,35 +47,38 @@ export default observer(function TaskNode({ task }: TaskNodeProps) {
     [lastDateInProgress, duration]
   );
 
-  const preventDefault = useCallback((fn: () => void) => {
-    return (e: SyntheticEvent) => {
-      e.stopPropagation();
-      fn();
-    };
-  }, []);
-
   return (
     <div className={classes.taskNode}>
       <span className={classes.taskTitle}>{task.title}</span>
       <span>{timeData}</span>
       <span className={classes.taskNodeActions}>
         {Features.myDay && (
           <EnterOutlined
-            onClick={preventDefault(() => tasksStore.addToMyDay(task))}
+            onClick={stopPropagationAndRun(() => tasksStore.addToMyDay(task))}
           />
         )}
         {!task.active ? (
           <CaretRightFilled
-            onClick={preventDefault(() => tasksStore.startTimer(task))}
+            onClick={stopPropagationAndRun(() => tasksStore.startTimer(task))}
           />
         ) : (
           <PauseOutlined
-            onClick={preventDefault(() => tasksStore.stopTimer())}
+            onClick={stopPropagationAndRun(() => tasksStore.stopTimer())}
           />
         )}
-        <DeleteOutlined
-          onClick={preventDefault(() => tasksStore.delete(task))}
-        />
+        <Popconfirm
+          title="Are you sure to delete this task?"
+          onConfirm={stopPropagationAndRun(() => tasksStore.delete(task))}
+          onCancel={stopPropagation}
+          okText="Yes"
+          cancelText="No"
+          placement="topRight"
+          icon={QUESTION}
+        >
+          <span onClick={stopPropagation}>
+            <DeleteOutlined />
+          </span>
+        </Popconfirm>
       </span>
     </div>
   );