refactor: ahora con click derecho puedo editar el nombre de la lista

Author: joncodeofficial

client/src/features/lists/components/ListItem.tsx

@@ -25,7 +25,6 @@ const ListItem = ({ list }: ListItemProps) => {
   const [countTasks, setCountTasks] = useState(0);
   const [isFocused, setIsFocused] = useState(false);
   const { setOpen, setHandleDelete, setListTitle } = useAlertDialogStore();
-  const [clickTimeout, setClickTimeout] = useState<NodeJS.Timeout | null>(null);
   const [listName, setListName] = useState(list.name);
   const [previousName, setPreviousName] = useState(list.name);
   const listNameDebounced = useDebounce(listName, 200);
@@ -84,28 +83,14 @@ const ListItem = ({ list }: ListItemProps) => {
     navigate(`/b/` + list.listId);
   };
 
-  const handleDoubleClick = () => {
+  const handleContextMenu = (e: React.MouseEvent) => {
+    e.preventDefault();
     if (isFocused) return;
     inputRef.current?.focus();
     inputRef.current?.setSelectionRange(-1, -1);
     setIsFocused(true);
   };
 
-  const handleClicks = () => {
-    if (clickTimeout) {
-      clearTimeout(clickTimeout);
-      setClickTimeout(null);
-      handleDoubleClick();
-    } else {
-      handleClick();
-      setClickTimeout(
-        setTimeout(() => {
-          setClickTimeout(null);
-        }, 200)
-      );
-    }
-  };
-
   useEffect(() => {
     setCountTasks(getTaskCount(list, tasks, listId));
   }, [list, listId, tasks]);
@@ -118,8 +103,9 @@ const ListItem = ({ list }: ListItemProps) => {
   return (
     <li
       tabIndex={0}
-      onClick={handleClicks}
-      onKeyDown={(e) => e.key === 'Enter' && handleClicks()}
+      onClick={handleClick}
+      onContextMenu={handleContextMenu}
+      onKeyDown={(e) => e.key === 'Enter' && handleClick()}
       className={`relative w-full h-12 mx-auto mt-1 flex items-center justify-between text-neutral-500 dark:text-neutral-100
         bg-neutral-50 dark:bg-neutral-900 rounded-md hover:bg-black/10 dark:hover:bg-white/20 
         transition-colors duration-200 select-none group

client/src/features/lists/tests/ListItem.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useTaskStore } from '@/features/tasks/store/taskStore';
 import ListItem from '@/features/lists/components/ListItem';
@@ -122,17 +122,16 @@ describe('ListItem', () => {
   it('renders list item with correct name', () => {
     expect(screen.getByText('Test List')).toBeInTheDocument();
   });
-  it('shows input field on double click', async () => {
-    const user = userEvent.setup();
+  it('shows input field on right click', () => {
     const listItem = screen.getByText('Test List');
-    await user.dblClick(listItem);
+    fireEvent.contextMenu(listItem);
     const input = screen.getByDisplayValue('Test List');
     expect(input).toBeVisible();
   });
   it('updates list name on input change and blur', async () => {
     const user = userEvent.setup();
     const listItem = screen.getByText('Test List');
-    await user.dblClick(listItem);
+    fireEvent.contextMenu(listItem);
     const input = screen.getByDisplayValue('Test List');
     await user.clear(input);
     await user.type(input, 'Updated List Name');