connected contact page correctly in footer#415
Conversation
|
CodeAnt AI is reviewing your PR. |
|
@ArshiBansal is attempting to deploy a commit to the Karan Mani Tripathi 's projects Team on Vercel. A member of the Team first needs to authorize it. |
github-actions
Bot
added
gssoc'26
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Technical Review
Hi @ArshiBansal! Thank you for your contribution to DoubtDesk.
The code changes look good. Before we can complete the technical review, approve, and merge this pull request, we have one final requirement for all contributors: Please star the DoubtDesk repository.
Once you have starred the repository, please drop a comment here saying "done" (or we will automatically detect it) and we will proceed with approving and merging your PR. Thank you.
WalkthroughThe Footer component is updated to route contact navigation to an internal ChangesFooter Navigation and Routing
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add 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 review |
There was a problem hiding this comment.
Hello there! 🎉 Thank you so much for your first pull request to DoubtDesk!
We really appreciate your contribution. A maintainer will review your code soon. If you are participating in GSSoC, ensure your PR is linked to an open issue. Please make sure you have followed all rules in our Contributing Guidelines. Happy coding!
codeant-ai
Bot
added
the
size:L
![codeant-ai[bot]](https://avatars.githubusercontent.com/in/646884?s=60&v=4){kind=small}
| @@ -1,4 +1,4 @@ | |||
| "use client" | |||
| "use client"; | |||
There was a problem hiding this comment.
Suggestion: The new client directive forces this footer to be hydrated on the browser even though it only renders static JSX and links. Since this component is mounted from the root layout, this adds unnecessary JavaScript to every page load and hurts performance. Remove the client directive unless you actually need client-only APIs (state/effects/browser APIs or interactive Clerk components) in this file. [performance]
Severity Level: Major ⚠️
- ⚠️ Root layout footer adds unnecessary client bundle overhead.
- ⚠️ Every route pays extra hydration cost for footer.Steps of Reproduction ✅
1. Start the app with `npm run dev` so that the root layout at
`src/app/layout.tsx:108-132` is used, which imports `Footer` at line 7 and renders
`<Footer />` at line 125 for every page.
2. Open `src/components/Footer.tsx` and observe that it is marked as a Client Component
via the `"use client";` directive at line 1, while its implementation (lines 3-103,
114-77) only uses static JSX, `next/link`, `next/image`, simple data like `const
currentYear = new Date().getFullYear();` at line 82, and does not use React state,
effects, browser APIs, or the imported Clerk components (`SignedIn`, `SignedOut` at line 5
are unused).
3. Load the home page implemented in `src/app/page.tsx` in the browser and inspect the
React tree or network panel; you will see that a client bundle for `Footer` is downloaded
and hydrated because of the `"use client";` directive in `Footer.tsx`, even though all
footer content could be rendered purely on the server.
4. Navigate between routes (e.g., `/`, `/rooms`, `/dashboard`) and observe that this
unnecessary client hydration of `Footer` repeats on every page load since `Footer` is part
of `RootLayout`, adding avoidable JavaScript and runtime cost across the app.Fix in Cursor | Fix in VSCode Claude
(Use Cmd/Ctrl + Click for best experience)
Prompt for AI Agent 🤖
This is a comment left during a code review.
**Path:** src/components/Footer.tsx
**Line:** 1:1
**Comment:**
*Performance: The new client directive forces this footer to be hydrated on the browser even though it only renders static JSX and links. Since this component is mounted from the root layout, this adds unnecessary JavaScript to every page load and hurts performance. Remove the client directive unless you actually need client-only APIs (state/effects/browser APIs or interactive Clerk components) in this file.
Validate the correctness of the flagged issue. If correct, How can I resolve this? If you propose a fix, implement it and please make it concise.
Once fix is implemented, also check other comments on the same PR, and ask user if the user wants to fix the rest of the comments as well. if said yes, then fetch all the comments validate the correctness and implement a minimal fix
|
CodeAnt AI finished reviewing your PR. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/Footer.tsx (1)
57-79:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winRemove duplicate and unused socialLinks definition.
This module-level
socialLinksdefinition is shadowed by the identical definition inside theFootercomponent at lines 84-103. The module-level definition is never used and creates unnecessary duplication.🧹 Proposed fix
Remove lines 57-79 entirely, as the component uses the local definition at lines 84-103.
-const socialLinks = [ - { - icon: Linkedin, - href: "https://www.linkedin.com/", - label: "LinkedIn", - ariaLabel: "Visit DoubtDesk on LinkedIn", - hoverColor: "hover:text-blue-500 dark:hover:text-blue-400", - }, - { - icon: Github, - href: "https://github.com/knoxiboy/DoubtDesk", - label: "GitHub", - ariaLabel: "Visit the DoubtDesk GitHub repository", - hoverColor: "hover:text-slate-900 dark:hover:text-slate-300", - }, - { - icon: Mail, - href: "/contact", - label: "Email", - ariaLabel: "Email the DoubtDesk team", - hoverColor: "hover:text-purple-500 dark:hover:text-purple-400", - }, -];🤖 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 `@src/components/Footer.tsx` around lines 57 - 79, Remove the unused module-level socialLinks array that duplicates the one inside the Footer component: delete the top-level constant named socialLinks (the definition with icon: Linkedin/Github/Mail, href, label, ariaLabel, hoverColor) so the Footer component uses only its internal socialLinks; ensure no other code references the removed module-level symbol and keep the Footer component's local socialLinks at its current definition.
🧹 Nitpick comments (2)
src/components/Footer.tsx (2)
41-55: ⚡ Quick winHardcoded strings violate coding guidelines.
The labels "Report Issue" and "Contact" (and others in this data structure) are hardcoded strings. Per coding guidelines for
**/*.tsx, strings should be extracted to constants for maintainability and potential i18n support.♻️ Refactor to use constants
Consider extracting footer labels to a constants object:
const FOOTER_LABELS = { REPORT_ISSUE: "Report Issue", CONTACT: "Contact", // ... other labels } as const;Then reference them in the data structures:
{ - label: "Report Issue", + label: FOOTER_LABELS.REPORT_ISSUE, href: "https://github.com/knoxiboy/DoubtDesk/issues", }, - { label: "Contact", href: "/contact" }, + { label: FOOTER_LABELS.CONTACT, href: "/contact" },As per coding guidelines: "No hardcoded strings (use constants)" for files matching
**/*.tsx.🤖 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 `@src/components/Footer.tsx` around lines 41 - 55, The footer data currently uses hardcoded label strings (e.g., "Report Issue", "Contact") which violates the no-hardcoded-strings rule; create a constants object (e.g., FOOTER_LABELS with keys REPORT_ISSUE, CONTACT, etc.) and replace all literal label usages in the Footer component data structures and the communityIcons mapping (refer to communityIcons and wherever the footer links/labels array is defined in Footer.tsx) to reference FOOTER_LABELS.X constants instead, ensuring the mapping keys and any lookups use the constant values consistently for maintainability and i18n readiness.
135-136: ⚖️ Poor tradeoffExtract hardcoded strings to constants.
The footer description and copyright text (and many other strings throughout the component) are hardcoded. Per coding guidelines for
**/*.tsx, strings should be extracted to constants to improve maintainability and enable potential internationalization.♻️ Example refactor
const FOOTER_TEXT = { DESCRIPTION: "Simplifying classroom doubt solving with AI-powered collaboration, smart discussions, and interactive virtual learning spaces.", COPYRIGHT: (year: number) => `© ${year} DoubtDesk. Built for collaborative AI-powered learning.`, } as const;Then use in JSX:
- Simplifying classroom doubt solving with AI-powered collaboration, - smart discussions, and interactive virtual learning spaces. + {FOOTER_TEXT.DESCRIPTION} - © {currentYear} DoubtDesk. Built for collaborative AI-powered - learning. + {FOOTER_TEXT.COPYRIGHT(currentYear)}As per coding guidelines: "No hardcoded strings (use constants)" for files matching
**/*.tsx.Also applies to: 326-327
🤖 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 `@src/components/Footer.tsx` around lines 135 - 136, Extract the hardcoded footer strings in Footer.tsx into constants and replace JSX usages with those constants; specifically create a constant object (e.g., FOOTER_TEXT) containing DESCRIPTION and a COPYRIGHT factory (e.g., COPYRIGHT(year): string) and swap the inline paragraph "Simplifying classroom doubt solving with AI-powered collaboration, smart discussions, and interactive virtual learning spaces." and the copyright text usages (the other hardcoded string around lines 326-327) to use FOOTER_TEXT.DESCRIPTION and FOOTER_TEXT.COPYRIGHT(new Date().getFullYear()) respectively so the component no longer contains hardcoded strings.
🤖 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 `@src/components/Footer.tsx`:
- Around line 227-233: The Footer component now renders a Contact Link with
href="/contact", so update the test in src/__tests__/components/Footer.test.tsx
to stop asserting the old mailto href: search for assertions referencing
"mailto:karankmt.tripathi@gmail.com" or any getByRole/getByText that expects the
mailto and replace it with expect(screen.getByRole('link', { name: 'Contact'
})).toHaveAttribute('href', '/contact'); ensure the test imports/uses screen and
getByRole as in the existing test suite and run the test to confirm it passes
against the Footer component.
---
Outside diff comments:
In `@src/components/Footer.tsx`:
- Around line 57-79: Remove the unused module-level socialLinks array that
duplicates the one inside the Footer component: delete the top-level constant
named socialLinks (the definition with icon: Linkedin/Github/Mail, href, label,
ariaLabel, hoverColor) so the Footer component uses only its internal
socialLinks; ensure no other code references the removed module-level symbol and
keep the Footer component's local socialLinks at its current definition.
---
Nitpick comments:
In `@src/components/Footer.tsx`:
- Around line 41-55: The footer data currently uses hardcoded label strings
(e.g., "Report Issue", "Contact") which violates the no-hardcoded-strings rule;
create a constants object (e.g., FOOTER_LABELS with keys REPORT_ISSUE, CONTACT,
etc.) and replace all literal label usages in the Footer component data
structures and the communityIcons mapping (refer to communityIcons and wherever
the footer links/labels array is defined in Footer.tsx) to reference
FOOTER_LABELS.X constants instead, ensuring the mapping keys and any lookups use
the constant values consistently for maintainability and i18n readiness.
- Around line 135-136: Extract the hardcoded footer strings in Footer.tsx into
constants and replace JSX usages with those constants; specifically create a
constant object (e.g., FOOTER_TEXT) containing DESCRIPTION and a COPYRIGHT
factory (e.g., COPYRIGHT(year): string) and swap the inline paragraph
"Simplifying classroom doubt solving with AI-powered collaboration, smart
discussions, and interactive virtual learning spaces." and the copyright text
usages (the other hardcoded string around lines 326-327) to use
FOOTER_TEXT.DESCRIPTION and FOOTER_TEXT.COPYRIGHT(new Date().getFullYear())
respectively so the component no longer contains hardcoded strings.
🪄 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: CHILL
Plan: Pro
Run ID: 92e51d59-9ecc-4420-91ea-57fb66b88f2b
📒 Files selected for processing (1)
src/components/Footer.tsx
| <Link | ||
| href="/contact" | ||
| className="group flex items-center gap-1.5 transition-transform duration-200 hover:translate-x-0.5 hover:text-blue-500 dark:hover:text-blue-400" | ||
| > | ||
| <ChevronRight className="w-3.5 h-3.5 text-blue-500 shrink-0" /> | ||
| <span>Contact</span> | ||
| </a> | ||
| </Link> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Check the Footer test expectations for Contact link
rg -n "mailto:karankmt.tripathi@gmail.com" --type=ts --type=tsx -g "*Footer.test*"Repository: knoxiboy/DoubtDesk
Length of output: 90
Update Footer test expectation for Contact link (/contact)
The component src/components/Footer.tsx now renders the Contact link as <Link href="/contact"> (link text: “Contact”), so any Footer test still asserting the old mailto:karankmt.tripathi@gmail.com href will fail.
Run a targeted search in src/__tests__/components/Footer.test.tsx to confirm what the test currently expects, and update it to:
expect(screen.getByRole('link', { name: 'Contact' })).toHaveAttribute('href', '/contact');🤖 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 `@src/components/Footer.tsx` around lines 227 - 233, The Footer component now
renders a Contact Link with href="/contact", so update the test in
src/__tests__/components/Footer.test.tsx to stop asserting the old mailto href:
search for assertions referencing "mailto:karankmt.tripathi@gmail.com" or any
getByRole/getByText that expects the mailto and replace it with
expect(screen.getByRole('link', { name: 'Contact' })).toHaveAttribute('href',
'/contact'); ensure the test imports/uses screen and getByRole as in the
existing test suite and run the test to confirm it passes against the Footer
component.
knoxiboy
removed
level:critical
2 participants
User description
Description
Updated the footer contact links to route users to the internal /contact page instead of using a direct mailto: link.
Changes include:
Replaced footer "Contact" resource link with /contact
Updated email social icon to navigate to the contact page
Added conditional rendering for internal social links using next/link
Related Issue
Closes #388
Type of Change
Screenshots (if UI change)
How Has This Been Tested?
npm run devChecklist
npm run dev)anytypes)mainCodeAnt-AI Description
Send footer contact links to the in-app contact page
What Changed
Impact
✅ Fewer dead-end contact clicks✅ Easier access to the contact page✅ More consistent footer navigation💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.
Summary by CodeRabbit
New Features
Refactor