feat: Implement dynamic /[username] public profile route#100
feat: Implement dynamic /[username] public profile route#100khushal1512 wants to merge 3 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughPublic profile page is converted from server-rendered to client-side dashboard layout. A new ChangesDashboard User Profile Page
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/`[username]/page.tsx:
- Line 7: The import of TokenData in page.tsx is a type-only import — replace
the current value import with a type-only import for TokenData (from
"`@/components/dashboard/TokenList`") so it reads as a type import; update the
import statement that references TokenData and ensure no runtime usage of
TokenData remains so the compiler/tree-shaker treats it as type-only.
In `@components/dashboard/UserTokenList.tsx`:
- Line 5: Replace the value import of TokenData with a type-only import since
TokenData is used purely as a type annotation; update the import statement that
currently references TokenData in UserTokenList (the line importing from
"./TokenList") to use `import type` so the module loader/tree-shaker treats it
as a type-only dependency.
In `@components/layout/DashboardNavBar.tsx`:
- Around line 23-28: The route-detection logic misuses knownRoutes (full path
strings) against pathname, so nested routes like "/dashboard/settings" are
flagged as profiles; update the logic to compare the first path segment
(firstSegment) against a list of known route segments instead of the full
pathname: change knownRoutes to a list of segment names (e.g.,
"","home","dashboard","discover","settings" or without empty string and handle
"/" separately) and then compute isUserProfile by checking pathname !== "/" &&
!knownRouteSegments.includes(firstSegment) && firstSegment.length > 0, keeping
the existing variables (knownRoutes / firstSegment / isUserProfile / pathname)
for easy location.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 8cc977be-693d-49bb-a736-c8070f705b69
📒 Files selected for processing (4)
app/[username]/layout.tsxapp/[username]/page.tsxcomponents/dashboard/UserTokenList.tsxcomponents/layout/DashboardNavBar.tsx
| import { useParams } from "next/navigation"; | ||
| import DashboardMetrics from "@/components/dashboard/DashboardMetrics"; | ||
| import { UserTokenList } from "@/components/dashboard/UserTokenList"; | ||
| import { TokenData } from "@/components/dashboard/TokenList"; |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial | ⚡ Quick win
Prefer import type for type-only imports.
TokenData is used only as a type annotation and should be imported with import type for better clarity and tree-shaking.
♻️ Suggested fix
-import { TokenData } from "`@/components/dashboard/TokenList`";
+import type { TokenData } from "`@/components/dashboard/TokenList`";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { TokenData } from "@/components/dashboard/TokenList"; | |
| import type { TokenData } from "`@/components/dashboard/TokenList`"; |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/`[username]/page.tsx at line 7, The import of TokenData in page.tsx is a
type-only import — replace the current value import with a type-only import for
TokenData (from "`@/components/dashboard/TokenList`") so it reads as a type
import; update the import statement that references TokenData and ensure no
runtime usage of TokenData remains so the compiler/tree-shaker treats it as
type-only.
Source: Coding guidelines
|
|
||
| import React from "react"; | ||
| import { TokenCard } from "../cards/TokenCard"; | ||
| import { TokenData } from "./TokenList"; |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial | ⚡ Quick win
Prefer import type for type-only imports.
TokenData is used only as a type annotation and should be imported with import type to improve clarity and enable better tree-shaking.
♻️ Suggested fix
-import { TokenData } from "./TokenList";
+import type { TokenData } from "./TokenList";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { TokenData } from "./TokenList"; | |
| import type { TokenData } from "./TokenList"; |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@components/dashboard/UserTokenList.tsx` at line 5, Replace the value import
of TokenData with a type-only import since TokenData is used purely as a type
annotation; update the import statement that currently references TokenData in
UserTokenList (the line importing from "./TokenList") to use `import type` so
the module loader/tree-shaker treats it as a type-only dependency.
Source: Coding guidelines
| const knownRoutes = ["/", "/home", "/dashboard", "/discover", "/settings"]; | ||
| const firstSegment = pathname?.split("/").filter(Boolean)[0] ?? ""; | ||
| const isUserProfile = | ||
| pathname !== "/" && | ||
| !knownRoutes.includes(pathname) && | ||
| firstSegment.length > 0; |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial | ⚡ Quick win
Refactor route detection to use path segments for robustness.
The current logic checks the full pathname against knownRoutes, which works for the current flat route structure but would misidentify nested routes (e.g., /dashboard/settings) as user profiles. Checking the first path segment against known route segments would be more maintainable and future-proof.
♻️ Suggested refactor
- const knownRoutes = ["/", "/home", "/dashboard", "/discover", "/settings"];
+ const knownRouteSegments = ["home", "dashboard", "discover", "settings"];
const firstSegment = pathname?.split("/").filter(Boolean)[0] ?? "";
const isUserProfile =
pathname !== "/" &&
- !knownRoutes.includes(pathname) &&
- firstSegment.length > 0;
+ firstSegment !== "" &&
+ !knownRouteSegments.includes(firstSegment);This approach correctly handles both /dashboard and potential future routes like /dashboard/settings.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@components/layout/DashboardNavBar.tsx` around lines 23 - 28, The
route-detection logic misuses knownRoutes (full path strings) against pathname,
so nested routes like "/dashboard/settings" are flagged as profiles; update the
logic to compare the first path segment (firstSegment) against a list of known
route segments instead of the full pathname: change knownRoutes to a list of
segment names (e.g., "","home","dashboard","discover","settings" or without
empty string and handle "/" separately) and then compute isUserProfile by
checking pathname !== "/" && !knownRouteSegments.includes(firstSegment) &&
firstSegment.length > 0, keeping the existing variables (knownRoutes /
firstSegment / isUserProfile / pathname) for easy location.
1 participant
Addressed Issues:
#94
Screenshots/Recordings:
The deployed changes can be seen here: https://identity-tokens-evm-frontend-nzbz.vercel.app/khushalagarwal
TODO: If applicable, add screenshots or recordings that demonstrate the interface before and after the changes.
Additional Notes:
AI Usage Disclosure:
We encourage contributors to use AI tools responsibly when creating Pull Requests. While AI can be a valuable aid, it is essential to ensure that your contributions meet the task requirements, build successfully, include relevant tests, and pass all linters. Submissions that do not meet these standards may be closed without warning to maintain the quality and integrity of the project. Please take the time to understand the changes you are proposing and their impact. AI slop is strongly discouraged and may lead to banning and blocking. Do not spam our repos with AI slop.
Check one of the checkboxes below:
I have used the following AI models and tools: TODO
Checklist
Summary by CodeRabbit
New Features
Style