feat: Implement assignee filter for team todos #229
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 WalkthroughThis PR implements an assignee filter feature for team to-do lists. It extends the task request DTO to accept multiple assignee IDs, adds custom query parameter serialization for arrays, introduces a new TeamFilters component for selecting team members, integrates the filter into the TeamTasks view, and normalizes route search parameters to maintain filter state. Changes
Sequence DiagramsequenceDiagram
participant User
participant TeamFilters
participant Router
participant TasksAPI
participant Backend
User->>TeamFilters: Click Filter > Assignee
TeamFilters->>TeamFilters: Display team members list
User->>TeamFilters: Select assignees
TeamFilters->>Router: Update search params (assigneeId)
Router->>Router: Normalize assigneeId to string[]
Router->>TasksAPI: Trigger task query with assigneeId
TasksAPI->>TasksAPI: Serialize assigneeId as repeated keys
TasksAPI->>Backend: GET /tasks?assigneeId=id1&assigneeId=id2
Backend-->>TasksAPI: Return filtered tasks
TasksAPI-->>TeamFilters: Update task list
TeamFilters-->>User: Display filtered tasks
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related issues
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
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. Comment |
![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 (5)
src/api/tasks/tasks.types.ts(1 hunks)src/lib/api-client.ts(1 hunks)src/modules/teams/components/team-filters.tsx(1 hunks)src/modules/teams/team-tasks.tsx(5 hunks)src/routes/_internal.teams.$teamId.todos.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (3)
📚 Learning: 2025-08-26T08:14:08.375Z
Learnt from: Hariom01010
Repo: Real-Dev-Squad/todo-frontend PR: 189
File: modules/teams/team-members.tsx:63-63
Timestamp: 2025-08-26T08:14:08.375Z
Learning: In modules/teams/team-members.tsx, the LeaveTeamDialog components use a shared boolean state (showLeaveTeamDialog) which causes all dialog instances across all rows to open simultaneously when any "Remove from team" option is clicked. This requires per-row state management using selectedMemberId to track which specific member's dialog should be open.
Applied to files:
src/modules/teams/components/team-filters.tsx
📚 Learning: 2025-08-26T07:14:25.788Z
Learnt from: Hariom01010
Repo: Real-Dev-Squad/todo-frontend PR: 189
File: modules/teams/components/teams-layout-header.tsx:44-51
Timestamp: 2025-08-26T07:14:25.788Z
Learning: In the todo-frontend application, teams are only visible to people who are part of the team. Non-members cannot access team pages, so membership checks in components like teams-layout-header are unnecessary since access control is handled at a higher level.
Applied to files:
src/modules/teams/components/team-filters.tsx
📚 Learning: 2025-08-29T11:21:22.274Z
Learnt from: Hariom01010
Repo: Real-Dev-Squad/todo-frontend PR: 192
File: api/teams/teams.type.ts:56-58
Timestamp: 2025-08-29T11:21:22.274Z
Learning: In the todo-frontend repository, UI mappings for TeamActivityActions are handled in lib/team-utils.ts in the getActivityUIData function using a switch statement that maps each action to an icon, title, and description for rendering audit logs.
Applied to files:
src/modules/teams/components/team-filters.tsxsrc/modules/teams/team-tasks.tsx
🧬 Code graph analysis (2)
src/modules/teams/components/team-filters.tsx (3)
src/hooks/useSearch.ts (1)
useSearch(24-71)src/api/teams/teams.api.ts (1)
TeamsApi(16-116)src/lib/utils.ts (1)
cn(5-7)
src/modules/teams/team-tasks.tsx (1)
src/modules/teams/components/team-filters.tsx (1)
TeamFilters(31-140)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (7)
src/lib/api-client.ts (1)
10-22: LGTM! Array serialization correctly implemented.The custom
paramsSerializerproperly handles array query parameters by repeating keys (e.g.,?assigneeId=1&assigneeId=2), which is the expected format for array parameters. The logic correctly skipsundefinedandnullvalues while stringifying other primitives.src/api/tasks/tasks.types.ts (1)
42-42: LGTM! Type definition correctly supports multi-assignee filtering.The addition of
assigneeId?: string[]toGetTaskReqDtoproperly enables filtering by multiple assignees, aligning with the PR objectives.src/routes/_internal.teams.$teamId.todos.tsx (1)
10-14: LGTM! Route validation correctly normalizes assigneeId.The route-level normalization ensures
assigneeIdis consistently typed asstring[] | undefinedthroughout the component tree, which is the appropriate place for this transformation.src/modules/teams/team-tasks.tsx (3)
140-150: LGTM! Search handler correctly preserves assignee filter.The
handleSearchfunction properly maintains the assigneeId filter state when updating the search query, ensuring users don't lose their filter selections.
152-162: LGTM! Status handler correctly preserves assignee filter.The
handleIncludeDoneChangefunction properly maintains the assigneeId filter state when toggling the "Include Done" switch.
177-177: LGTM! TeamFilters component properly integrated.The TeamFilters component is correctly placed in the layout alongside the search bar and "Include Done" switch, providing a cohesive filtering experience.
src/modules/teams/components/team-filters.tsx (1)
34-40: Code duplication: assigneeId normalization logic repeated across files.The same assigneeId normalization pattern appears in three locations:
- Here in
TeamFilters(lines 34-40)- Route validation in
_internal.teams.$teamId.todos.tsx(lines 10-14)TeamTaskscomponent (lines 120-124)Since the route already normalizes this value, the normalization in this component is redundant.
Apply this diff to simplify:
- const assigneeIds = ( - Array.isArray(searchParams.assigneeId) - ? searchParams.assigneeId - : searchParams.assigneeId - ? [searchParams.assigneeId] - : [] - ) as string[] + const assigneeIds = searchParams.assigneeId ?? []⛔ Skipped due to learnings
Learnt from: yesyash Repo: Real-Dev-Squad/todo-frontend 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.Learnt from: Hariom01010 Repo: Real-Dev-Squad/todo-frontend PR: 189 File: modules/teams/team-members.tsx:63-63 Timestamp: 2025-08-26T08:14:08.375Z Learning: In modules/teams/team-members.tsx, the LeaveTeamDialog components use a shared boolean state (showLeaveTeamDialog) which causes all dialog instances across all rows to open simultaneously when any "Remove from team" option is clicked. This requires per-row state management using selectedMemberId to track which specific member's dialog should be open.
- Remove duplicate team query in TeamFilters component - Pass team data as prop from parent TeamTasks component - Update TeamTasks query to include member=true for users list - Remove unused imports and error handling from TeamFilters - Eliminate redundant network request and improve data consistency
Deploying todo-frontend with
|
| Latest commit: |
bfc9d0c
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://1b3e8359.todo-frontend-76p.pages.dev |
| Branch Preview URL: | https://feat-assignee-filter-for-tea.todo-frontend-76p.pages.dev |
Achintya-Chatterjee
requested review from
AnujChhikara,
Hariom01010,
MayankBansal12,
Suvidh-kaushik,
iamitprakash,
prakashchoudhary07,
vinit717 and
yesyash
|
Overall I don't like the select dropdown approach here going ahead one team can have 500 member or more and the member api we might have to paginate so this implementation would not work and we have to change this. |
I think this is not needed yet; will revisit if the product asks for it. Also, the API already limits results to team members, and we can add a limit when there’s a real need. |
- Remove unnecessary type assertions for improved type safety - Implement debounced filter application (applies on dropdown close) - Adjust button styling to match search bar height (border: 1px) - Optimize spacing with -ml-3 for visual balance - Maintain red button color per original design requirements Addresses feedback from PR review regarding code quality, UX improvements, and styling consistency.
Date:
10th December, 2025Developer Name: @Achintya-Chatterjee
Issue Ticket Number
AssigneeFilter to Team Todo List #228Description
assigneeIdfiltering support toGetTaskReqDto.TeamTaskspage to include the newTeamFilterscomponent.TeamFilterscomponent:DropdownMenuandCommandfor a searchable assignee list.border-red-500,text-red-500) and prominent border (border-2) to match design.-ml-2) for better visual alignment with the "Include Done" switch.paramsSerializerinapiClientto correctly serialize array query parameters (e.g.,key=val1&key=val2) for backend compatibility.TasksApi.getTasksto use standard parameter passing._internal.teams.$teamId.todosto handleassigneeIdas an array.Documentation Updated?
Under Feature Flag
Database Changes
Breaking Changes
Development Tested?
Screenshots
Screenshot 1
Screen.Recording.2025-12-10.at.03.00.51.mov
Test Coverage
Screenshot 1
Additional Notes