feat: implement qr generation for classroom invite link#602
Conversation
|
@mayannkkk19 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. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (2)
💤 Files with no reviewable changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
WalkthroughThis PR adds QR code generation and download capabilities to classroom invite links. Two new dependencies ( ChangesQR Code Classroom Invite
Sequence DiagramsequenceDiagram
participant Teacher as Teacher (UI)
participant QRCanvas as QR Canvas Element
participant HtmlToImage as html-to-image
participant Browser as Browser Download
Teacher->>QRCanvas: Click "Download QR" (triggers downloadQr)
QRCanvas->>HtmlToImage: provide canvas element
HtmlToImage->>Browser: return PNG data URL
Browser->>Browser: start download classroom-invite-qr.png
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 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 review |
|
Hey @knoxiboy, could you please review the changes? I noticed there was already a Before proceeding further, I'd appreciate your guidance on whether this is the preferred approach, or if you'd like the QR-related logic to be integrated differently with the existing Thanks! |
|
@mayannkkk19 solve the ci test failure |
![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
🧹 Nitpick comments (1)
src/app/rooms/[id]/page.tsx (1)
299-304: ⚡ Quick winMove new UI/action strings to constants.
This change introduces new hardcoded strings in
.tsx("Invite link","Copy","Download QR","classroom-invite-qr.png"). Please centralize them as constants.💡 Suggested patch
const CLASSROOM_ANALYTICS_UNAVAILABLE_MESSAGE = "Classroom analytics are unavailable right now."; +const INVITE_LINK_LABEL = "Invite link"; +const COPY_INVITE_LINK_LABEL = "Copy"; +const DOWNLOAD_QR_LABEL = "Download QR"; +const INVITE_QR_FILENAME = "classroom-invite-qr.png";- link.download = "classroom-invite-qr.png"; + link.download = INVITE_QR_FILENAME;- Invite link + {INVITE_LINK_LABEL} ... - Copy + {COPY_INVITE_LINK_LABEL} ... - Download QR + {DOWNLOAD_QR_LABEL}As per coding guidelines:
**/*.tsx: Review for No hardcoded strings (use constants).Also applies to: 1040-1042, 1056-1057, 1082-1083
🤖 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/app/rooms/`[id]/page.tsx around lines 299 - 304, Several UI/action strings are hardcoded in this module (e.g., "Invite link", "Copy", "Download QR", and the filename "classroom-invite-qr.png")—define constants (e.g., INVITE_LABEL, COPY_LABEL, DOWNLOAD_QR_LABEL, INVITE_QR_FILENAME) at the top of the page.tsx module and replace all literal occurrences (including the canvas download block using link.download and the UI button/tooltip labels found around lines referenced) with those constants so the strings are centralized and reusable.Source: Coding guidelines
🤖 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 `@package.json`:
- Around line 62-63: Remove the unused dependency "html-to-image" from
package.json and package-lock.json: delete the "html-to-image": "^1.11.13" entry
in package.json and run the package manager's install/lockfile update (e.g., npm
install or npm prune && npm install) to update package-lock.json and
node_modules so the dependency is fully removed from the project and supply
chain.
In `@src/app/rooms/`[id]/page.tsx:
- Around line 1040-1049: The invite URL input using value={inviteUrl} is missing
an accessible label and the QR block lacks an alternative description; add a
proper <label> tied via htmlFor to the input's id (or add
aria-label/aria-labelledby) for the input element and ensure the QR container
has an accessible name (e.g., aria-label or a <figcaption>/aria-describedby)
describing its purpose (invite link QR code) so screen readers can announce it;
update the input element and the QR block (the inviteUrl input and the QR
component/container) accordingly to include ids and matching labels/aria
attributes.
- Around line 292-305: The downloadQr function silently returns when the canvas
element ("invite-qr") is missing or canvas.toDataURL fails; update downloadQr to
surface an error toast to the user instead of exiting silently: when
document.getElementById("invite-qr") is null or canvas.toDataURL throws/returns
falsy, call the app's toast/error utility (e.g., toast.error or showToast) with
a clear message like "Unable to download QR code" and abort; keep the existing
download logic (creating the link, setting href/download, click) intact and wrap
canvas.toDataURL in a try/catch to log and show the toast on exceptions.
---
Nitpick comments:
In `@src/app/rooms/`[id]/page.tsx:
- Around line 299-304: Several UI/action strings are hardcoded in this module
(e.g., "Invite link", "Copy", "Download QR", and the filename
"classroom-invite-qr.png")—define constants (e.g., INVITE_LABEL, COPY_LABEL,
DOWNLOAD_QR_LABEL, INVITE_QR_FILENAME) at the top of the page.tsx module and
replace all literal occurrences (including the canvas download block using
link.download and the UI button/tooltip labels found around lines referenced)
with those constants so the strings are centralized and reusable.
🪄 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: 71af30a4-18b5-45b5-8125-132b2c07107b
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
package.jsonsrc/app/rooms/[id]/page.tsx
|
Automated Detailed Review
Please address the above items and request a review again. |
knoxiboy
added
gssoc'26
|
Sure @knoxiboy , I am looking into it... |
|
Hi! This PR currently has merge conflicts with the main branch. Please rebase/merge main and resolve conflicts so we can review and merge it. Thank you! |
|
Got it |
1a52e15 to
f61ef39
Compare
|
CodeAnt AI is reviewing your PR. |
|
CodeAnt AI finished reviewing your PR. |
github-actions
Bot
added
gssoc:approved
2 participants
User description
Description
Adds QR code generation for classroom invitation links.
When a teacher generates a secure invite link, a corresponding QR code is displayed in a dedicated QR section.
The QR code can be downloaded as a PNG image
Related Issue
Closes #184
Type of Change
Screenshots (if UI change)
How Has This Been Tested?
npm run devChecklist
npm run dev)anytypes)mainSummary by CodeRabbit
CodeAnt-AI Description
Add QR-based sharing for classroom invites
What Changed
Impact
✅ Faster classroom joining✅ Easier in-person invite sharing✅ Fewer copy-and-paste invite mistakes💡 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.