Add context menu when clicking on card

client/src/components/Card/Card.jsx

@@ -1,10 +1,11 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Button, Icon } from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
 import { Draggable } from 'react-beautiful-dnd';
 
+import { ControlledMenu, MenuItem, useMenuState } from '@szhsin/react-menu';
 import { startTimer, stopTimer } from '../../utils/timer';
 import Paths from '../../constants/Paths';
 import Tasks from './Tasks';
@@ -17,6 +18,8 @@ import Timer from '../Timer';
 
 import styles from './Card.module.scss';
 
+import '@szhsin/react-menu/dist/index.css';
+
 const Card = React.memo(
   ({
     id,
@@ -52,11 +55,22 @@ const Card = React.memo(
   }) => {
     const nameEdit = useRef(null);
 
-    const handleClick = useCallback(() => {
-      if (document.activeElement) {
-        document.activeElement.blur();
-      }
-    }, []);
+    const [menuProps, toggleMenu] = useMenuState();
+    const [anchorPoint, setAnchorPoint] = useState({ x: 0, y: 0 });
+
+    const handleClick = useCallback(
+      (e) => {
+        if (menuProps.state === 'open') {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+
+        if (document.activeElement) {
+          document.activeElement.blur();
+        }
+      },
+      [menuProps.state],
+    );
 
     const handleToggleTimerClick = useCallback(
       (event) => {
@@ -85,7 +99,15 @@ const Card = React.memo(
     const contentNode = (
       <>
         {coverUrl && <img src={coverUrl} alt="" className={styles.cover} />}
-        <div className={styles.details}>
+
+        <div
+          className={styles.details}
+          onContextMenu={(e) => {
+            e.preventDefault();
+            setAnchorPoint({ x: e.clientX, y: e.clientY });
+            toggleMenu(true);
+          }}
+        >
           {labels.length > 0 && (
             <span className={styles.labels}>
               {labels.map((label) => (
@@ -98,8 +120,11 @@ const Card = React.memo(
               ))}
             </span>
           )}
+
           <div className={styles.name}>{name}</div>
+
           {tasks.length > 0 && <Tasks items={tasks} />}
+
           {(dueDate || timer || notificationsTotal > 0) && (
             <span className={styles.attachments}>
               {notificationsTotal > 0 && (
@@ -131,6 +156,7 @@ const Card = React.memo(
               )}
             </span>
           )}
+
           {users.length > 0 && (
             <span className={classNames(styles.attachments, styles.attachmentsRight)}>
               {users.map((user) => (
@@ -143,6 +169,16 @@ const Card = React.memo(
               ))}
             </span>
           )}
+
+          <ControlledMenu
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...menuProps}
+            anchorPoint={anchorPoint}
+            direction="right"
+            onClose={() => toggleMenu(false)}
+          >
+            <MenuItem onClick={onDelete}>Delete Card</MenuItem>
+          </ControlledMenu>
         </div>
       </>
     );
@@ -163,6 +199,7 @@ const Card = React.memo(
                     >
                       {contentNode}
                     </Link>
+
                     {canEdit && (
                       <ActionsPopup
                         card={{