feat: add nested team routes with dynamic tab navigation#109
feat: add nested team routes with dynamic tab navigation#109yesyash merged 5 commits intoRealDevSquad:developfrom
Conversation
- Added layout support under [teamId] to wrap child routes - Implemented TeamTabsNavigation to render and highlight active tabs (tasks, members, activities) - Passed teamId as param and handled routing with usePathname
|
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
WalkthroughThis change introduces dynamic nested routes under Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Router
participant Layout
participant TeamTabsNavigation
participant PageComponent
User->>Router: Navigate to /teams/[teamId]/(tasks|activities|members)
Router->>Layout: Render with teamId param
Layout->>TeamTabsNavigation: Render navigation with teamId
Layout->>PageComponent: Render nested page (Tasks, Activities, or Members)
Assessment against linked issues
Possibly related PRs
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 |
|---|---|---|
 |
Remove redundant file path comment ▹ view | ✅ Fix detected |
 |
Nested Await in Template Literal ▹ view | ✅ Fix detected |
 |
Hardcoded Navigation Routes ▹ view | ✅ Fix detected |
|
Non-standard Component Naming ▹ view | ✅ Fix detected |
 |
Unnecessary Runtime String Manipulation ▹ view | ✅ Fix detected |
 |
Imprecise Tab Route Matching ▹ view | ✅ Fix detected |
|
Missing Tasks Implementation ▹ view | |
|
Misplaced team creation button ▹ view | |
|
Incorrect params typing in layout component ▹ view |
Files scanned
| File Path | Reviewed |
|---|---|
| app/(internal-routes)/teams/[teamId]/tasks/page.tsx | ✅ |
| app/(internal-routes)/teams/[teamId]/members/page.tsx | ✅ |
| app/(internal-routes)/teams/[teamId]/activities/page.tsx | ✅ |
| app/(internal-routes)/teams/[teamId]/page.tsx | ✅ |
| app/(internal-routes)/teams/[teamId]/layout.tsx | ✅ |
| components/teams/TeamsNavigation.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: 7
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (6)
app/(internal-routes)/teams/[teamId]/activities/page.tsx(1 hunks)app/(internal-routes)/teams/[teamId]/layout.tsx(1 hunks)app/(internal-routes)/teams/[teamId]/members/page.tsx(1 hunks)app/(internal-routes)/teams/[teamId]/page.tsx(1 hunks)app/(internal-routes)/teams/[teamId]/tasks/page.tsx(1 hunks)components/teams/TeamsNavigation.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (3)
app/(internal-routes)/teams/[teamId]/activities/page.tsx (1)
components/teams/TeamActivity.tsx (1)
TeamActivity(51-58)
app/(internal-routes)/teams/[teamId]/members/page.tsx (1)
components/teams/TeamMember.tsx (1)
TeamMembers(53-101)
components/teams/TeamsNavigation.tsx (2)
components/teams/TeamDashboardHeader.tsx (2)
TeamTab(5-5)TeamDashboardHeader(10-35)lib/utils.ts (1)
cn(4-6)
🔇 Additional comments (8)
app/(internal-routes)/teams/[teamId]/members/page.tsx (1)
4-8: Clean and focused page component structure.The component correctly imports and renders the TeamMembers component with minimal wrapper structure, which is appropriate for a page component.
app/(internal-routes)/teams/[teamId]/tasks/page.tsx (1)
2-2: Replace placeholder text with actual component.Unlike the members and activities pages which render actual components (TeamMembers, TeamActivity), this page only displays placeholder text. This seems incomplete compared to the other tabs.
Consider implementing a proper TasksComponent or similar to maintain consistency with other tabs:
- return <div>Tasks Render Here</div> + return ( + <div> + <TasksComponent /> + </div> + )Should this page render a proper component instead of placeholder text?
app/(internal-routes)/teams/[teamId]/activities/page.tsx (1)
4-8: Consistent and correct page component structure.The component follows the same pattern as the members page, correctly importing and rendering the TeamActivity component. This maintains consistency across the tab pages.
components/teams/TeamsNavigation.tsx (1)
14-35: Well-structured navigation component.The component correctly implements tab navigation with proper styling, active state detection, and integration with the TeamDashboardHeader. The Link components and conditional styling work well together.
app/(internal-routes)/teams/[teamId]/page.tsx (1)
1-5: Clean redirect implementation.The redirect logic is correctly implemented, properly awaiting the params and redirecting to the tasks tab as the default view. This aligns well with the new layout structure where the UI is handled by the layout component.
app/(internal-routes)/teams/[teamId]/layout.tsx (3)
1-6: LGTM: Clean import structureThe imports are well-organized and all necessary for the component functionality.
28-30: LGTM: Clean layout structureThe navigation and children rendering is well-structured. The
TeamTabsNavigationcomponent integration and children spacing look good.
19-20: Fix potential XSS vulnerability and improve UXThe direct rendering of
teamIdin the JSX poses a potential XSS risk and poor UX:
- Security: The
teamIdparameter should be sanitized before rendering- UX: Consider fetching and displaying the actual team name instead of the raw ID
- <h1 className="text-xl font-bold">Team: {teamId}</h1> + <h1 className="text-xl font-bold">Team: {encodeURIComponent(teamId)}</h1>For better UX, consider fetching team data to display the actual team name.
Likely an incorrect or invalid review comment.
…into feature/team-tabs-navigation
- exported default component in each page - removed page.tsx
3 participants
Date: 14 Jul 2024
Developer Name: @Hariom01010
Issue Ticket Number
Closes #108
Description
This PR aims at adding routes for team members, tasks and activities under teamId which is dynamic and passed as path parameter.
[teamId]/tasks,[teamId]/membersand[teamId]/activitiesDocumentation Updated?
Under Feature Flag
Database Changes
Breaking Changes
Development Tested?
Screenshots
Screenshot 1
teamid.views.mp4
Test Coverage
Screenshot 1
Additional Notes
Description by Korbit AI
What change is being made?
Introduce nested team routes with dynamic tab navigation for the "teams" pages.
Why are these changes being made?
These changes enable a structured and dynamic user interface for accessing different sections (tasks, activities, members) of a team, enhancing navigation and user experience. This approach leverages component-based architecture with dynamic routing to organize team-specific data effectively.