Add checkbox to include done task#155
Conversation
…enabled When the Include Done checkbox is checked, all tasks including Done status are shown otherwise tasks with status not equal to Done are shown
|
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 checkbox UI component was added and integrated into the dashboard to allow toggling the inclusion of "Done" tasks. Supporting this, the task API and types were updated to handle a new status filter. The dashboard and tab components were refactored to manage and propagate this filter state, and a new dependency was introduced. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Dashboard
participant DashboardTabs
participant TasksApi
participant Backend
User->>DashboardTabs: Toggle "Include Done" checkbox
DashboardTabs->>Dashboard: onIncludeDoneChange(checked)
Dashboard->>Dashboard: Update includeDoneTasks state
Dashboard->>TasksApi: getTasks({ status: checked ? "DONE" : undefined })
TasksApi->>Backend: Fetch tasks with status filter
Backend-->>TasksApi: Return filtered tasks
TasksApi-->>Dashboard: Return tasks
Dashboard->>DashboardTabs: Pass updated tasks and includeDone state
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15 minutes Poem
✨ Finishing Touches🧪 Generate unit tests
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 |
|---|---|---|
 |
Incorrect Task Filtering Logic ▹ view | |
 |
Complex TailwindCSS Class String ▹ view | |
 |
Redundant Boolean Coercion ▹ view | |
|
Unstable Cache Key Generation ▹ view | |
 |
Missing status parameter documentation ▹ view | |
|
Task Status Type Mismatch ▹ view |
Files scanned
| File Path | Reviewed |
|---|---|
| api/tasks/tasks.types.ts | ✅ |
| api/tasks/tasks.api.ts | ✅ |
| components/ui/checkbox.tsx | ✅ |
| modules/dashboard/index.tsx | ✅ |
| modules/dashboard/components/dashboard-tabs.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: 6
🔭 Outside diff range comments (1)
api/tasks/tasks.api.ts (1)
18-22: Good implementation, consider stable cache key generation.The updated parameter handling and cache key generation look correct. The use of
JSON.stringify(params)is functional but could be unstable if object property order varies.Consider a more stable cache key approach:
- key: (params?: GetTaskReqDto) => ['TasksApi.getTasks', JSON.stringify(params)], + key: (params?: GetTaskReqDto) => ['TasksApi.getTasks', params?.teamId, params?.status],This approach is more explicit and doesn't depend on object serialization order.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (6)
api/tasks/tasks.api.ts(1 hunks)api/tasks/tasks.types.ts(1 hunks)components/ui/checkbox.tsx(1 hunks)modules/dashboard/components/dashboard-tabs.tsx(3 hunks)modules/dashboard/index.tsx(2 hunks)package.json(1 hunks)
🧰 Additional context used
🧠 Learnings (5)
📓 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: #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-tabs.tsx (1)
Learnt from: yesyash
PR: #109
File: app/(internal-routes)/teams/[teamId]/layout.tsx:8-15
Timestamp: 2025-07-16T13:18:36.847Z
Learning: In Next.js layout components, error handling and validation for params extraction (like const { teamId } = await params) is not required in this codebase. The framework handles routing validation adequately.
api/tasks/tasks.api.ts (1)
Learnt from: Hariom01010
PR: #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/index.tsx (1)
Learnt from: Hariom01010
PR: #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 (2)
components/ui/checkbox.tsx (1)
lib/utils.ts (1)
cn(4-6)
api/tasks/tasks.api.ts (1)
api/tasks/tasks.types.ts (1)
GetTaskReqDto(37-40)
🔇 Additional comments (5)
package.json (1)
26-26: @radix-ui/react-checkbox@1.3.2 verified as latest stable with no known security issues
- Confirmed that version 1.3.2 is the current release as of July 2025.
- No direct security vulnerabilities reported in reputable databases (e.g. Snyk) or the Radix Primitives issue tracker.
- General React security practices (e.g. CSP, XSS) still apply, so continue to monitor overall app security and Radix release notes for any future advisories.
No further changes required.
modules/dashboard/components/dashboard-tabs.tsx (1)
16-17: Well-implemented props and component structure.The new props are properly typed and integrated into the component signature.
Also applies to: 23-25
modules/dashboard/index.tsx (3)
15-15: State initialization looks good.The
includeDoneTasksstate is properly initialized tofalse, which makes sense as the default behavior.
20-22: Query integration needs adjustment.The query key and function correctly use the
queryParams, but the logic error in line 17 affects this implementation.
41-45: Props passing to DashboardTabs is correct.The props are correctly passed to the
DashboardTabscomponent, maintaining proper data flow and state management.
3 participants
Date: 24 Jul 2025
Developer Name: @Hariom01010
Issue Ticket Number
Closes #156
Description
A checkbox is added to the dashboard page such that when it is checked all tasks including done status are shown and when it is unchecked only tasks whose status is not equal to done are shown.
Documentation Updated?
Under Feature Flag
Database Changes
Breaking Changes
Development Tested?
Screenshots
Screenshot 1
Test Coverage
Screenshot 1
Additional Notes
Description by Korbit AI
What change is being made?
Add a checkbox to filter tasks by status, specifically to include or exclude completed tasks, and update relevant query parameters and UI components accordingly.
Why are these changes being made?
The update provides users with more control over their task views by allowing them to filter tasks based on their completion status, improving the usability and customization of the dashboard interface. The integration of the checkbox is implemented using
@radix-ui/react-checkbox, ensuring a consistent and accessible UI across the application.