More data on click

bobalazek · Dec 29, 2023 · 2e27634 · 2e27634
1 parent 8fd96f7
commit 2e27634
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 103 deletions.
diff --git a/apps/web-e2e/src/e2e/features/tasks/tasks-tasks.cy.ts b/apps/web-e2e/src/e2e/features/tasks/tasks-tasks.cy.ts
@@ -97,15 +97,7 @@ describe('tasks-tasks.cy.ts', () => {
 
     cy.getBySel('tasks--tasks-form').find('input').type('My new task{enter}');
 
-    cy.getBySel('tasks--task')
-      .first()
-      .find('[data-test="tasks--task--actions-dropdown-menu--trigger-button"]')
-      .click();
-
-    cy.getBySel('tasks--task--actions-dropdown-menu')
-      .find('div[role="menuitem"]')
-      .contains('More')
-      .click();
+    cy.getBySel('tasks--task').first().click();
 
     cy.getBySel('tasks--task-edit-dialog').should('exist');
   });
@@ -115,15 +107,7 @@ describe('tasks-tasks.cy.ts', () => {
 
     cy.getBySel('tasks--tasks-form').find('input').type('My new task{enter}');
 
-    cy.getBySel('tasks--task')
-      .first()
-      .find('[data-test="tasks--task--actions-dropdown-menu--trigger-button"]')
-      .click();
-
-    cy.getBySel('tasks--task--actions-dropdown-menu')
-      .find('div[role="menuitem"]')
-      .contains('More')
-      .click();
+    cy.getBySel('tasks--task').first().click();
 
     cy.get('#task-name').clear();
 
@@ -144,29 +128,13 @@ describe('tasks-tasks.cy.ts', () => {
 
     cy.getBySel('tasks--tasks-form').find('input').type('My new task{enter}');
 
-    cy.getBySel('tasks--task')
-      .first()
-      .find('[data-test="tasks--task--actions-dropdown-menu--trigger-button"]')
-      .click();
-
-    cy.getBySel('tasks--task--actions-dropdown-menu')
-      .find('div[role="menuitem"]')
-      .contains('More')
-      .click();
+    cy.getBySel('tasks--task').first().click();
 
     cy.get('#task-description').type('Task description.');
 
     cy.get('button').contains('Save').click();
 
-    cy.getBySel('tasks--task')
-      .first()
-      .find('[data-test="tasks--task--actions-dropdown-menu--trigger-button"]')
-      .click();
-
-    cy.getBySel('tasks--task--actions-dropdown-menu')
-      .find('div[role="menuitem"]')
-      .contains('More')
-      .click();
+    cy.getBySel('tasks--task').first().click();
 
     cy.get('#task-description').contains('Task description.');
   });
@@ -176,15 +144,7 @@ describe('tasks-tasks.cy.ts', () => {
 
     cy.getBySel('tasks--tasks-form').find('input').type('My new task{enter}');
 
-    cy.getBySel('tasks--task')
-      .first()
-      .find('[data-test="tasks--task--actions-dropdown-menu--trigger-button"]')
-      .click();
-
-    cy.getBySel('tasks--task--actions-dropdown-menu')
-      .find('div[role="menuitem"]')
-      .contains('More')
-      .click();
+    cy.getBySel('tasks--task').first().click();
 
     cy.getBySel('list-selector--trigger-button').click();
 
@@ -198,75 +158,43 @@ describe('tasks-tasks.cy.ts', () => {
 
     cy.getBySel('tasks--tasks-form').find('input').type('My new task{enter}');
 
-    cy.getBySel('tasks--task')
-      .first()
-      .find('[data-test="tasks--task--actions-dropdown-menu--trigger-button"]')
-      .click();
-
-    cy.getBySel('tasks--task--actions-dropdown-menu')
-      .find('div[role="menuitem"]')
-      .contains('More')
-      .click();
+    cy.getBySel('tasks--task').first().click();
 
     cy.get('button').contains('Save').click();
 
     cy.contains('You have successfully saved the task').should('exist');
   });
 
-  it('should close More dialog when clicking on Cancel', () => {
+  it('should close task dialog when clicking on Cancel', () => {
     openTasksPopover();
 
     cy.getBySel('tasks--tasks-form').find('input').type('My new task{enter}');
 
-    cy.getBySel('tasks--task')
-      .first()
-      .find('[data-test="tasks--task--actions-dropdown-menu--trigger-button"]')
-      .click();
-
-    cy.getBySel('tasks--task--actions-dropdown-menu')
-      .find('div[role="menuitem"]')
-      .contains('More')
-      .click();
+    cy.getBySel('tasks--task').first().click();
 
     cy.get('button').contains('Cancel').click();
 
     cy.getBySel('tasks--task-edit-dialog').should('not.exist');
   });
 
-  it('should close More dialog when clicking on the x (close) button in the right top corner in expanded edit options', () => {
+  it('should close task dialog when clicking on the x (close) button in the right top corner in expanded edit options', () => {
     openTasksPopover();
 
     cy.getBySel('tasks--tasks-form').find('input').type('My new task{enter}');
 
-    cy.getBySel('tasks--task')
-      .first()
-      .find('[data-test="tasks--task--actions-dropdown-menu--trigger-button"]')
-      .click();
-
-    cy.getBySel('tasks--task--actions-dropdown-menu')
-      .find('div[role="menuitem"]')
-      .contains('More')
-      .click();
+    cy.getBySel('tasks--task').first().click();
 
     cy.get('[data-test="dialog--close"]').click();
 
     cy.getBySel('tasks--task-edit-dialog').should('not.exist');
   });
 
-  it('should close More dialog when clicking outside the dialog', () => {
+  it('should close task dialog when clicking outside the dialog', () => {
     openTasksPopover();
 
     cy.getBySel('tasks--tasks-form').find('input').type('My new task{enter}');
 
-    cy.getBySel('tasks--task')
-      .first()
-      .find('[data-test="tasks--task--actions-dropdown-menu--trigger-button"]')
-      .click();
-
-    cy.getBySel('tasks--task--actions-dropdown-menu')
-      .find('div[role="menuitem"]')
-      .contains('More')
-      .click();
+    cy.getBySel('tasks--task').first().click();
 
     cy.clickOutside();
 

diff --git a/packages/web-core/src/features/tasks/components/tasks/TaskItem.tsx b/packages/web-core/src/features/tasks/components/tasks/TaskItem.tsx
@@ -49,10 +49,14 @@ const TaskItemDueDate = ({ task }: { task: TaskType }) => {
 };
 
 const TaskItem = memo(({ task }: { task: TaskType }) => {
-  const { editTask, completeTask, uncompleteTask } = useTasksStore();
+  const { setSelectedTaskDialogOpen, editTask, completeTask, uncompleteTask } = useTasksStore();
   const [showConfetti, setShowConfetti] = useState(false);
   const textElementRef = useRef<HTMLDivElement | null>(null);
 
+  const onClick = async () => {
+    setSelectedTaskDialogOpen(true, task);
+  };
+
   const onDoubleClick = useCallback(
     (event?: React.MouseEvent<HTMLDivElement, MouseEvent>, cursorAtEnd?: boolean) => {
       event?.stopPropagation();
@@ -123,6 +127,7 @@ const TaskItem = memo(({ task }: { task: TaskType }) => {
   return (
     <div
       className="rounded-lg p-1 outline-none hover:bg-gray-50 dark:hover:bg-gray-800"
+      onClick={onClick}
       data-test="tasks--task"
     >
       <div className="relative w-full">

diff --git a/packages/web-core/src/features/tasks/components/tasks/TaskItemActions.tsx b/packages/web-core/src/features/tasks/components/tasks/TaskItemActions.tsx
@@ -1,11 +1,4 @@
-import {
-  HistoryIcon,
-  InfoIcon,
-  ListIcon,
-  MoreVerticalIcon,
-  PencilIcon,
-  TrashIcon,
-} from 'lucide-react';
+import { HistoryIcon, ListIcon, MoreVerticalIcon, PencilIcon, TrashIcon } from 'lucide-react';
 import { memo, useState } from 'react';
 
 import { Task } from '@moaitime/shared-common';
@@ -26,7 +19,7 @@ import ListsSelectedListDropdownMenuContent from '../lists/ListsSelectedListDrop
 
 const TaskItemActions = memo(
   ({ task, onEditAndFocus }: { task: Task; onEditAndFocus: () => void }) => {
-    const { deleteTask, undeleteTask, moveTask, setSelectedTaskDialogOpen } = useTasksStore();
+    const { deleteTask, undeleteTask, moveTask } = useTasksStore();
     const { toast } = useToast();
     const [dropdownMenuOpen, setDropdownMenuOpen] = useState(false);
 
@@ -119,15 +112,6 @@ const TaskItemActions = memo(
                   }}
                 />
               </DropdownMenuSub>
-              <DropdownMenuItem
-                className="cursor-pointer"
-                onClick={() => {
-                  setSelectedTaskDialogOpen(true, task);
-                }}
-              >
-                <InfoIcon className="mr-2 h-4 w-4" />
-                <span>More</span>
-              </DropdownMenuItem>
               {!task.deletedAt && (
                 <DropdownMenuItem
                   variant="destructive"