fix: [LC-1481] - better QRCode download support #886
Conversation
🦋 Changeset detectedLatest commit: ae382bd The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Improved QRCode download support for the learn-card-app.
gerardopar
requested review from
Custard7,
TaylorBeeston,
goblincore,
rhen92 and
smurflo2
✅ Deploy Preview for staging-learncardapp ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![gitstream-cm[bot]](https://avatars.githubusercontent.com/in/230441?s=60&v=4){kind=small}
There was a problem hiding this comment.
✨ PR Review
The PR successfully refactors QR code download functionality from SVG-based to HTML screenshot-based approach using html2canvas. The implementation includes proper loading states and platform-specific handling, but has some error handling gaps.
1 issues detected:
🐞 Bug - Unhandled async operations can cause unexpected crashes and poor user experience
Details: The ensureAlbumExists function makes multiple async Media API calls without proper error handling. If Media.getAlbums() or Media.createAlbum() fails, it could crash the entire save process and leave the user in an unclear state.
File:apps/learn-card-app/src/components/qrcode-user-card/QrCodeUserCardShareOptions/QrCodeDownloadOptions.tsx
Generated by LinearB AI and added by gitStream.
AI-generated content may contain inaccuracies. Please verify before using.
💡 Tip: You can customize your AI Review using Guidelines Learn how
✅ Deploy Preview for learncarddocs canceled.
|
|
🥷 Code experts: TaylorBeeston, Custard7 TaylorBeeston has most 👩💻 activity in the files. See details
Activity based on git-commit:
Knowledge based on git-blame:
Activity based on git-commit:
Knowledge based on git-blame:
Activity based on git-commit:
Knowledge based on git-blame:
Activity based on git-commit:
Knowledge based on git-blame:
Activity based on git-commit:
Knowledge based on git-blame:
Activity based on git-commit:
Knowledge based on git-blame:
Activity based on git-commit:
Knowledge based on git-blame: ✨ Comment |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
There was a problem hiding this comment.
✨ PR Review
The PR successfully refactors QR code download functionality with improved visual fidelity using html2canvas. The implementation includes proper loading states and platform-specific behavior, though some error handling concerns remain.
2 issues detected:
🐞 Bug - Concurrent execution of album creation logic without synchronization
Details: The ensureAlbumExists function could create race conditions if multiple users trigger simultaneous PNG saves. Both calls might attempt to create the same album, potentially causing one to fail or creating duplicate operations on the Media API.
File:apps/learn-card-app/src/components/qrcode-user-card/QrCodeUserCardShareOptions/QrCodeDownloadOptions.tsx🐞 Bug - Array access without bounds checking on string split operation
Details: The code assumes data URL format when splitting on comma to extract base64 data. If html2canvas returns an unexpected format or the toDataURL call fails, this could throw an error.
File:apps/learn-card-app/src/components/qrcode-user-card/QrCodeUserCardShareOptions/QrCodeDownloadOptions.tsx
Generated by LinearB AI and added by gitStream.
AI-generated content may contain inaccuracies. Please verify before using.
💡 Tip: You can customize your AI Review using Guidelines Learn how
Overview
🎟 Relevant Jira Issues
📚 What is the context and goal of this PR?
Summary
This PR fixes an issue with saving QR codes to Photos on Android and improves the visual fidelity of the downloaded QR code so it more closely matches the user’s QR Code Profile card.
Issues Addressed
What Changed
• Added html2canvas to capture a snapshot of the full QR Code UI instead of exporting only the raw SVG.
• The snapshot approach allows us to include:
• QR code
• User name / username
• Supporting UI elements
• The snapshot is converted into PNG or PDF, which users can then download or save.
Fixed Android “Save to Photos” Behavior
• Resolved an issue where the QR code image was not being saved on Android devices.
• The root cause was a missing target album.
• The save flow now:
• Ensures the target album exists (creates it if needed)
🥴 TL; RL:
💡 Feature Breakdown (screenshots & videos encouraged!)
ANDROID
https://www.loom.com/share/c878cc2415d841bfb35ed1ad9ffa0d64
IOS
https://www.loom.com/share/f8b1eb020e92489a8e67eb22ef118aeb
🛠 Important tradeoffs made:
🔍 Types of Changes
💳 Does This Create Any New Technical Debt? ( If yes, please describe and add JIRA TODOs )
Testing
🔬 How Can Someone QA This?
Testing Instructions
• Click “Save as Photo” → verify PNG downloads correctly
• Click “Save as File” → verify PDF downloads correctly
• Click “Save to Photos” → verify QR code is saved to photos as a png
• Click “Save to Files” → verify QR code is saved to files as a pdf
📱 🖥 Which devices would you like help testing on?
🧪 Code Coverage
Documentation
📜 Gitbook
📊 Storybook
✅ PR Checklist
🚀 Ready to squash-and-merge?:
✨ PR Description
Purpose: Fix QR code download functionality to support full card screenshots with improved cross-platform compatibility for web and native mobile apps.
Main changes:
Generated by LinearB AI and added by gitStream.
AI-generated content may contain inaccuracies. Please verify before using.
💡 Tip: You can customize your AI Description using Guidelines Learn how