feat: integrate GET API for watchlist tasks#115
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
WalkthroughA new API method and related types were added to support fetching watchlisted tasks. A dedicated React component was introduced to display watchlisted tasks, and dashboard components were refactored to use this new component. Task type definitions were expanded, and mapping utilities for task priority were added. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DashboardTabs
participant DashboardWatchlistTasksTable
participant TasksApi
participant Backend
User->>DashboardTabs: Selects "WatchList" tab
DashboardTabs->>DashboardWatchlistTasksTable: Render component
DashboardWatchlistTasksTable->>TasksApi: getWatchListTasks()
TasksApi->>Backend: GET /v1/watchlist/tasks
Backend-->>TasksApi: Responds with watchlisted tasks
TasksApi-->>DashboardWatchlistTasksTable: Returns tasks data
DashboardWatchlistTasksTable->>DashboardTasksTable: Render with formatted watchlist tasks
Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes found. Possibly related issues
Possibly related PRs
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 |
|---|---|---|
 |
Inefficient Data Passing to Watchlist Component ▹ view | |
 |
Missing Query Response Type ▹ view | |
 |
Missing Error Context in Error Handling ▹ view | |
|
Missing Pagination Parameters ▹ view | |
 |
Inconsistent Priority Type in TWatchListTask ▹ view | |
|
Unnecessary Nullable Boolean ▹ view |
Files scanned
| File Path | Reviewed |
|---|---|
| api/tasks/tasks.enum.ts | ✅ |
| api/tasks/tasks.api.ts | ✅ |
| api/tasks/tasks.types.ts | ✅ |
| modules/dashboard/components/dashboard-watchlist-tasks-table.tsx | ✅ |
| modules/dashboard/components/dashboard-tabs.tsx | ✅ |
| modules/dashboard/components/dashboard-tasks-table.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: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (6)
api/tasks/tasks.api.ts(2 hunks)api/tasks/tasks.enum.ts(1 hunks)api/tasks/tasks.types.ts(3 hunks)modules/dashboard/components/dashboard-tabs.tsx(2 hunks)modules/dashboard/components/dashboard-tasks-table.tsx(4 hunks)modules/dashboard/components/dashboard-watchlist-tasks-table.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 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.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.
🔇 Additional comments (17)
api/tasks/tasks.enum.ts (1)
25-29: Good addition for priority mapping.The numeric-to-enum mapping is correctly implemented and follows a logical progression. The constant will help convert API response data to internal enum format.
api/tasks/tasks.api.ts (2)
11-11: Import added for new watchlist API method.The import is correctly added to support the new getWatchListTasks method.
38-44: Well-implemented API method following established patterns.The new getWatchListTasks method correctly follows the same structure as other API methods in the file, with proper typing and endpoint configuration.
modules/dashboard/components/dashboard-tabs.tsx (4)
3-3: Good cleanup of unused imports.Removing unused imports improves code maintainability and reduces bundle size.
9-9: Appropriate import for the new watchlist component.The dedicated watchlist component import is correctly added.
44-44: Simplified DashboardTasksTable usage.Removing the type prop aligns with the refactoring to separate watchlist and general task handling.
47-47: Proper separation of concerns with dedicated watchlist component.Using DashboardWatchlistTasksTable for the watchlist tab is a good architectural decision that separates concerns and improves maintainability.
modules/dashboard/components/dashboard-tasks-table.tsx (4)
101-101: Good addition of query invalidation for data consistency.Adding invalidation for the getWatchListTasks query ensures that watchlist data stays synchronized after mutations.
113-113: Consistent query invalidation pattern.Properly invalidating both queries maintains data consistency across the application.
145-145: Simplified component interface.Removing the type prop simplifies the component interface and aligns with the separation of concerns achieved by introducing the dedicated watchlist component.
162-162: Simplified rendering logic.Removing filtering logic makes the component more focused and easier to understand, as watchlist-specific rendering is now handled by the dedicated component.
modules/dashboard/components/dashboard-watchlist-tasks-table.tsx (3)
1-9: Well-structured imports and component setup.The imports are appropriate and the component is well-structured for handling watchlist tasks.
11-16: Proper API integration with React Query.The useQuery implementation correctly uses the new API method and follows React Query best practices.
17-31: Comprehensive state handling.The component properly handles loading, error, and empty states with appropriate UI feedback.
api/tasks/tasks.types.ts (3)
10-10: LGTM: Making assignee optional is appropriate.This change aligns with the typical scenario where tasks may not always have an assignee at creation time or in certain contexts like watchlisted tasks.
43-48: LGTM: Well-structured paginated response type.The
GetWatchListTaskDtofollows the same pagination pattern asGetTasksDto, maintaining consistency across the API response types.
59-74: No changes required: Priority mapping is in place
- The numeric
priority?: numberinTWatchListTaskis correctly converted toTASK_PRIORITY_ENUMin
modules/dashboard/components/dashboard-watchlist-tasks-table.tsxvia
NUM_TASK_PRIORITY_TO_TASK_ENUM[task.priority ?? 0].- Field naming (
dueAt) and nullable booleans (isAcknowledged,isDeleted) are already aligned with API responses.Everything looks consistent and comprehensive.
modules/dashboard/components/dashboard-watchlist-tasks-table.tsx
Outdated
Show resolved
Hide resolved
modules/dashboard/components/dashboard-watchlist-tasks-table.tsx
Outdated
Show resolved
Hide resolved
2 participants
Date: 17-07-25
Developer Name: @MayankBansal12
Issue Ticket Number
Description
Documentation Updated?
Under Feature Flag
Database Changes
Breaking Changes
Development Tested?
Screenshots
screencast
watchlist-task.mp4
Description by Korbit AI
What change is being made?
Integrate a GET API for fetching watchlist tasks and update associated components and types.
Why are these changes being made?
The change allows the fetching and display of tasks from a watchlist, addressing the need for users to view and manage their watchlist within the application's dashboard. This integration enhances user experience by organizing view-based data flow and updating component rendering.