feat: add and remove task in watchlist#113
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Summary by CodeRabbit
WalkthroughThe changes introduce watchlist functionality for tasks, including new API methods and DTO types for adding and toggling a task's watchlist status. UI components are updated to use the new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DashboardTasksTable
participant WatchListButton
participant TasksApi
User->>DashboardTasksTable: View tasks
DashboardTasksTable->>WatchListButton: Render per task
User->>WatchListButton: Click add/remove watchlist
WatchListButton->>TasksApi: addTaskToWatchList / toogleTaskWatchListStatus
TasksApi-->>WatchListButton: API response
WatchListButton->>DashboardTasksTable: Invalidate and refresh tasks
DashboardTasksTable-->>User: Updated task list with watchlist status
Suggested reviewers
Poem
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![korbit-ai[bot]](https://avatars.githubusercontent.com/in/322216?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review by Korbit AI
Korbit automatically attempts to detect when you fix issues in new commits.
| Category | Issue | Status |
|---|---|---|
 |
Misspelled Type Name ▹ view | ✅ Fix detected |
 |
Lost Error Context in Watchlist Addition ▹ view | |
 |
Incorrect Type for Watchlist Status ▹ view | ✅ Fix detected |
|
Misspelled API Method Name ▹ view | ✅ Fix detected |
 |
Missing Memoization for Filtered Tasks ▹ view | |
 |
Table Component with Mixed Data Processing ▹ view | |
|
Ambiguous Success Message ▹ view | ✅ Fix detected |
|
Complex onClick handler logic ▹ view | ✅ Fix detected |
Files scanned
| File Path | Reviewed |
|---|---|
| api/tasks/tasks.types.ts | ✅ |
| api/tasks/tasks.api.ts | ✅ |
| modules/dashboard/components/dashboard-tasks-table.tsx | ✅ |
| components/TodoForm.tsx | ✅ |
Explore our documentation to understand the languages and file types we support and the files we ignore.
Check out our docs on how you can make Korbit work best for you and your team.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (4)
api/tasks/tasks.api.ts(2 hunks)api/tasks/tasks.types.ts(2 hunks)components/TodoForm.tsx(0 hunks)modules/dashboard/components/dashboard-tasks-table.tsx(3 hunks)
💤 Files with no reviewable changes (1)
- components/TodoForm.tsx
🧰 Additional context used
🧠 Learnings (4)
📓 Common learnings
Learnt from: Hariom01010
PR: Real-Dev-Squad/todo-frontend#51
File: __mocks__/types.ts:33-34
Timestamp: 2025-07-09T08:59:13.002Z
Learning: In the todo-frontend project, the PATCH task API endpoint payload uses `dueAt` and `startedAt` field names, but these update the `dueDate` and `startDate` fields respectively in the Task object. This is intentional according to the API contract design.
api/tasks/tasks.api.ts (1)
Learnt from: Hariom01010
PR: Real-Dev-Squad/todo-frontend#51
File: __mocks__/types.ts:33-34
Timestamp: 2025-07-09T08:59:13.002Z
Learning: In the todo-frontend project, the PATCH task API endpoint payload uses `dueAt` and `startedAt` field names, but these update the `dueDate` and `startDate` fields respectively in the Task object. This is intentional according to the API contract design.
api/tasks/tasks.types.ts (1)
Learnt from: Hariom01010
PR: Real-Dev-Squad/todo-frontend#51
File: __mocks__/types.ts:33-34
Timestamp: 2025-07-09T08:59:13.002Z
Learning: In the todo-frontend project, the PATCH task API endpoint payload uses `dueAt` and `startedAt` field names, but these update the `dueDate` and `startDate` fields respectively in the Task object. This is intentional according to the API contract design.
modules/dashboard/components/dashboard-tasks-table.tsx (1)
Learnt from: Hariom01010
PR: Real-Dev-Squad/todo-frontend#51
File: __mocks__/types.ts:33-34
Timestamp: 2025-07-09T08:59:13.002Z
Learning: In the todo-frontend project, the PATCH task API endpoint payload uses `dueAt` and `startedAt` field names, but these update the `dueDate` and `startDate` fields respectively in the Task object. This is intentional according to the API contract design.
🧬 Code Graph Analysis (1)
api/tasks/tasks.api.ts (2)
api/tasks/tasks.types.ts (3)
AddTaskToWatchListDto(43-45)TWatchListTask(52-60)ToogleWatchListStatusDto(47-50)lib/api-client.ts (1)
apiClient(6-10)
🔇 Additional comments (7)
api/tasks/tasks.api.ts (2)
3-11: LGTM: Import statements properly updatedThe imports correctly include all necessary types for the new watchlist functionality.
37-42: LGTM: Add to watchlist API method implementationThe implementation correctly sends a POST request to add a task to the watchlist. The endpoint pattern and payload structure look appropriate.
api/tasks/tasks.types.ts (1)
16-16: Verify watchlist property namingConfirm whether the backend API response actually uses snake_case
in_watchlistor camelCaseinWatchlist. Right now the TTask type mixesin_watchlistwith other camelCase fields (e.g.dueAt). Align this with the API contract:
- File: api/tasks/tasks.types.ts
•TTask.in_watchlist?: boolean | nullIf the API returns
inWatchlist, change it to match; if it truly returnsin_watchlist, please document this as a deliberate exception.modules/dashboard/components/dashboard-tasks-table.tsx (4)
19-19: LGTM: Icon imports addedThe Eye and EyeOff icons are appropriate for watchlist functionality.
23-23: LGTM: Tooltip imports addedTooltip components enhance the user experience by providing context for the watchlist actions.
144-144: LGTM: Filter logic updated correctlyThe filter correctly uses the updated
in_watchlistproperty instead of the oldisInWatchlist.
190-200: LGTM: Watchlist button integrationThe integration of the WatchListButton with tooltip provides good user experience. The conditional tooltip text based on watchlist status is helpful.
There was a problem hiding this comment.
Review by Korbit AI
Korbit automatically attempts to detect when you fix issues in new commits.
| Category | Issue | Status |
|---|---|---|
|
Inconsistent Watchlist Addition Logic ▹ view | |
|
Missing Return Value from Watchlist Creation ▹ view | |
|
Missing Response Type in Toggle Status ▹ view | |
|
Missing Return Type and Error Context in Watch List API ▹ view | |
|
Inconsistent Watchlist Property Design ▹ view | |
 |
Missing watchlist removal confirmation ▹ view |
Files scanned
| File Path | Reviewed |
|---|---|
| api/tasks/tasks.types.ts | ✅ |
| api/tasks/tasks.api.ts | ✅ |
| modules/dashboard/components/dashboard-tasks-table.tsx | ✅ |
| components/TodoForm.tsx | ✅ |
Explore our documentation to understand the languages and file types we support and the files we ignore.
Check out our docs on how you can make Korbit work best for you and your team.
3 participants
Date: 15-07-25
Developer Name: @MayankBansal12
Issue Ticket Number
Description
Documentation Updated?
Under Feature Flag
Database Changes
Breaking Changes
Development Tested?
Screenshots
ScreenCast
Screencast.from.2025-07-15.13-10-27.mp4
Additional Notes
Description by Korbit AI
What change is being made?
Add functionality to add and remove tasks from a watchlist in the task management API, update the data types to accommodate watchlist properties, and integrate watchlist controls in the Dashboard Tasks Table UI.
Why are these changes being made?
These changes are introduced to allow users to manage tasks more effectively by letting them mark tasks as part of a watchlist, enhancing task tracking and prioritization. The changes ensure that backend API operations reflect the modified task management logic and update the UI to provide users with intuitive controls for watchlist management. This feature improves user experience by sorting tasks based on watchlist status and providing direct interaction with task status via the UI.