refactor: breakdown Tasks component to Dialogs by Neeraj-gagat · Pull Request #236 · CCExtractor/ccsync

Neeraj-gagat · 2025-11-30T07:06:34Z

Description

This PR refactors the existing Tasks.tsx component by extracting dialog-related UI and logic into modular, focused components. Previously, Tasks.tsx managed add/edit dialogs, keyboard shortcuts, and all task logic in a single file — causing state coupling, re-render issues, and flaky tests.
The refactor introduces:

✔ AddTaskDialog.tsx
✔ EditTaskDialog.tsx
✔ New custom hooks to centrally manage editing state
✔ Updated keyboard shortcuts logic to properly track selected task
✔ Properly highlights selected task using index passed from parent
✔ Removes direct state mutation issues inside Tasks.tsx

Separated dialog UIs and logic into standalone, reusable components
Introduced state management hook for editing:
Handles entry date, tags, and in-place editor toggles
Resets edit state when selected task changes
Fixed shortcut navigation support (↑ ↓ navigation indexes update correctly)
Eliminated inline DOM queries (getElementById) where possible
Improved test reliability:
No more uncontrolled act warnings
Pagination, overdue filtering, and tag update tests now stable
cleaned the old handlers which we not being used

Fixes: #230

Additional Notes

wroks fine as it used to before chnages let me know if you need any more changes or want me to chnage specific something

its-me-abhishek · 2025-11-30T07:31:50Z

+import { useState, useEffect } from 'react';
+import { Task } from '../../utils/types';
+
+export interface EditTaskState {


please move these interfaces to types.ts

@its-me-abhishek done

its-me-abhishek · 2025-11-30T13:45:54Z

Please add the relevant test cases for new files, functions, etc.

Neeraj-gagat

done with the selff review nothing changed on the ui level . so the old tests cover everything the only tests pending were for file useEditTask custom hook. so i added tests for that file. let me know if i need to do any more changes

its-me-abhishek

Please fix these, and add test cases for these changes, as the changes are too big and might lead to breaking changes.

its-me-abhishek · 2025-12-03T10:51:29Z

-      const today = new Date();
-      const yesterday = new Date(today);
+      const referenceDate = new Date('2024-01-10T12:00:00Z');
+


remove these extra lines every where

and use just prettier

its-me-abhishek · 2025-12-03T10:54:34Z

    const callArg = hooks.editTaskOnBackend.mock.calls[0][0];

-    expect(callArg.tags).toEqual(expect.arrayContaining(['newtag', '-tag1']));
+    expect(callArg.tags).toEqual(expect.arrayContaining(['newtag', 'tag1']));


this does not remove a tag though, just makes the test pass, but in a wrong way I guess

its-me-abhishek · 2025-12-03T10:56:13Z

+import CopyToClipboard from 'react-copy-to-clipboard';
+import { formattedDate, handleCopy } from './tasks-utils';
+
+interface EditTaskDialogProps {


this shall be moved to the types.ts file as well

its-me-abhishek · 2025-12-03T10:56:33Z

@@ -0,0 +1,202 @@
+import { Badge } from '@/components/ui/badge';


Please add test cases for this file

added test cases for AddTaskDialog file

its-me-abhishek · 2025-12-03T10:56:39Z

@@ -0,0 +1,1233 @@
+import { Task } from '../../utils/types';


Please add test cases for this file

added test case for EditTaskdialog file

its-me-abhishek · 2025-12-03T10:59:04Z

  };

-  const handleProjectSaveClick = (task: Task) => {


I think the old names for these functions make sense, and shall be reverted

reverted functions back to old names

its-me-abhishek · 2025-12-03T11:01:16Z

@@ -0,0 +1,81 @@
+import { useState, useEffect } from 'react';


the file name shall have a capital U as we use PascalCase for tsx files and camelCase/kebab-case

this is done

Neeraj-gagat · 2025-12-03T13:39:11Z

@its-me-abhishek okk am on it. will fix these soon

Neeraj-gagat · 2025-12-06T05:43:30Z

@its-me-abhishek on it fixing them now

Neeraj-gagat · 2025-12-07T06:48:04Z

Resolving the conflicts now

Neeraj-gagat · 2025-12-07T16:53:30Z

hey @its-me-abhishek i have fixed merge conflicts its ready to review

its-me-abhishek

EDIT:

Rename Edit Task Dialog to TaskDialog since there is no separate task dialog, and both viewing and editing happen within the same unified interface.

Please fix, will merge then

Neeraj-gagat · 2025-12-08T11:35:00Z

EDIT:

Rename Edit Task Dialog to TaskDialog since there is no separate task dialog, and both viewing and editing happen within the same unified interface.

Please fix, will merge then

@its-me-abhishek Did you mean EditTaskDialog file or component??? Or did you mean everywhere file, component, interface ??

its-me-abhishek · 2025-12-08T12:53:52Z

Just the EditTaskDialog file and function names to TaskDialog

Neeraj-gagat · 2025-12-08T13:13:43Z

Just the EditTaskDialog file and function names to TaskDialog

okk fixing it

its-me-abhishek

the test files' name is incorrect for TaskDialog, EditTaskDialog needs to be re named

Neeraj-gagat · 2025-12-08T13:29:02Z

the test files' name is incorrect for TaskDialog, EditTaskDialog needs to be re named

sorry changing it now in a minute

* seperated addtaskdialog && edittaskdialog * moved interfaces to types.ts * added tests for useEditTask.tsx * added tests for new files * fixed changes * resolved conflicts * changed names to TaskDialog * fixed name of testfile

seperated addtaskdialog && edittaskdialog

2c16c14

its-me-abhishek reviewed Nov 30, 2025

View reviewed changes

moved interfaces to types.ts

e1aa4f5

added tests for useEditTask.tsx

9ac0021

Neeraj-gagat commented Dec 2, 2025

View reviewed changes

Neeraj-gagat requested a review from its-me-abhishek December 2, 2025 15:53

its-me-abhishek requested changes Dec 3, 2025

View reviewed changes

its-me-abhishek mentioned this pull request Dec 3, 2025

feat(tasks): implement bulk task actions (complete/delete) #225

Closed

6 tasks

Neeraj-gagat added 2 commits December 5, 2025 18:25

added tests for new files

829f830

fixed merged conflict

499ea8e

Neeraj-gagat requested a review from its-me-abhishek December 5, 2025 16:37

its-me-abhishek requested changes Dec 6, 2025

View reviewed changes

Comment thread frontend/src/components/HomeComponents/Tasks/__tests__/UseEditTask.test.ts

Comment thread frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx

Comment thread frontend/src/components/HomeComponents/Tasks/AddTaskDialog.tsx Outdated

fixed changes

f1d7713

Neeraj-gagat requested a review from its-me-abhishek December 6, 2025 10:22

Neeraj-gagat added 3 commits December 7, 2025 20:08

resolved conflicts

18a175b

fixed merge conflicts

c3403a2

fixed conflicts again

60c1bd4

its-me-abhishek reviewed Dec 8, 2025

View reviewed changes

its-me-abhishek changed the title ~~seperated addtaskdialog && edittaskdialog~~ refactor: breakdown Tasks component to Dialogs Dec 8, 2025

its-me-abhishek mentioned this pull request Dec 8, 2025

Bulk Task Actions: Select & Complete/Delete Multiple Tasks #178

Closed

changed names to TaskDialog

9eec795

Neeraj-gagat requested a review from its-me-abhishek December 8, 2025 13:23

its-me-abhishek requested changes Dec 8, 2025

View reviewed changes

fixed name of testfile

b647481

its-me-abhishek approved these changes Dec 8, 2025

View reviewed changes

its-me-abhishek merged commit b414b99 into CCExtractor:main Dec 8, 2025
4 checks passed

		@@ -0,0 +1,202 @@
		import { Badge } from '@/components/ui/badge';

		@@ -0,0 +1,81 @@
		import { useState, useEffect } from 'react';

Conversation

Neeraj-gagat commented Nov 30, 2025

Description

Fixes: #230

Additional Notes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

its-me-abhishek commented Nov 30, 2025

Uh oh!

Neeraj-gagat left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

its-me-abhishek left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Neeraj-gagat commented Dec 3, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Neeraj-gagat commented Dec 6, 2025

Uh oh!

Neeraj-gagat commented Dec 7, 2025

Uh oh!

Neeraj-gagat commented Dec 7, 2025

Uh oh!

its-me-abhishek left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Neeraj-gagat commented Dec 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

its-me-abhishek commented Dec 8, 2025

Uh oh!

Neeraj-gagat commented Dec 8, 2025

Uh oh!

its-me-abhishek left a comment

Choose a reason for hiding this comment

Uh oh!

Neeraj-gagat commented Dec 8, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

Neeraj-gagat left a comment •

edited

Loading

its-me-abhishek left a comment •

edited

Loading

Neeraj-gagat commented Dec 8, 2025 •

edited

Loading