From 24e303eac015efff5002673bbd3a3114e13c0edb Mon Sep 17 00:00:00 2001 From: welvin21 Date: Fri, 1 May 2020 14:21:06 +0800 Subject: [PATCH] Enable event sharing functionality via QR Code --- package-lock.json | 15 +++++ package.json | 1 + .../routes/event-details/EventToolbar.js | 8 +-- .../event-details/share-event/ShareEvent.js | 4 +- .../share-event/ShareEventDetails.js | 4 +- .../share-event/ShareEventLink.js | 6 +- .../share-event/ShareEventQRCode.js | 62 +++++++++++++++++++ 7 files changed, 91 insertions(+), 9 deletions(-) create mode 100644 src/components/routes/event-details/share-event/ShareEventQRCode.js diff --git a/package-lock.json b/package-lock.json index 301f157..22d7dfc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11474,6 +11474,21 @@ "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz", "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=" }, + "qr.js": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz", + "integrity": "sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8=" + }, + "qrcode.react": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-1.0.0.tgz", + "integrity": "sha512-jBXleohRTwvGBe1ngV+62QvEZ/9IZqQivdwzo9pJM4LQMoCM2VnvNBnKdjvGnKyDZ/l0nCDgsPod19RzlPvm/Q==", + "requires": { + "loose-envify": "^1.4.0", + "prop-types": "^15.6.0", + "qr.js": "0.0.0" + } + }, "qs": { "version": "6.5.2", "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz", diff --git a/package.json b/package.json index 12392e0..006a14d 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "date-fns": "^2.11.0", "graphql": "^14.6.0", "moment": "^2.24.0", + "qrcode.react": "^1.0.0", "query-string": "^6.11.1", "react": "^16.13.1", "react-dom": "^16.13.1", diff --git a/src/components/routes/event-details/EventToolbar.js b/src/components/routes/event-details/EventToolbar.js index 23386b6..bb51cb0 100644 --- a/src/components/routes/event-details/EventToolbar.js +++ b/src/components/routes/event-details/EventToolbar.js @@ -28,10 +28,8 @@ const useStyles = makeStyles(theme => ({ } })); -export const EventToolbar = ({ - event: { id, organiser, subscribers }, - me: { username } -}) => { +export const EventToolbar = ({ event, me: { username } }) => { + const { id, organiser, subscribers } = event; const classes = useStyles(); const subcriptionStatus = getSubscriptionStatus(subscribers, username); @@ -74,7 +72,7 @@ export const EventToolbar = ({ > {isSubscribed ? 'Subscribed' : 'Subscribe'} - + ); diff --git a/src/components/routes/event-details/share-event/ShareEvent.js b/src/components/routes/event-details/share-event/ShareEvent.js index 4d51253..9be09c8 100644 --- a/src/components/routes/event-details/share-event/ShareEvent.js +++ b/src/components/routes/event-details/share-event/ShareEvent.js @@ -16,7 +16,7 @@ const useStyles = makeStyles(theme => ({ } })); -export const ShareEvent = () => { +export const ShareEvent = ({ event }) => { const classes = useStyles(); const defaultModalContent = { title: '', childComponent: <> }; @@ -25,7 +25,7 @@ export const ShareEvent = () => { modalContent: defaultModalContent }); - const shareEventModalContent = ; + const shareEventModalContent = ; const modalContent = { title: 'Share event', childComponent: shareEventModalContent diff --git a/src/components/routes/event-details/share-event/ShareEventDetails.js b/src/components/routes/event-details/share-event/ShareEventDetails.js index 74c9af9..e9aec6f 100644 --- a/src/components/routes/event-details/share-event/ShareEventDetails.js +++ b/src/components/routes/event-details/share-event/ShareEventDetails.js @@ -1,6 +1,7 @@ import React from 'react'; import { Container, makeStyles } from '@material-ui/core'; import { ShareEventLink } from './ShareEventLink'; +import { ShareEventQRCode } from './ShareEventQRCode'; const useStyles = makeStyles(theme => ({ root: { @@ -8,12 +9,13 @@ const useStyles = makeStyles(theme => ({ } })); -export const ShareEventDetails = () => { +export const ShareEventDetails = ({ event }) => { const classes = useStyles(); return ( + ); }; diff --git a/src/components/routes/event-details/share-event/ShareEventLink.js b/src/components/routes/event-details/share-event/ShareEventLink.js index b1b391b..511ec2a 100644 --- a/src/components/routes/event-details/share-event/ShareEventLink.js +++ b/src/components/routes/event-details/share-event/ShareEventLink.js @@ -45,7 +45,11 @@ export const ShareEventLink = () => { alertDetails={alert} onClose={() => setAlert(defaultAlertContent)} /> - + ({ + root: { + padding: 0, + display: 'grid', + justifyItems: 'center' + }, + qrCode: { + margin: `${theme.spacing(2)}px 0px`, + borderRadius: 5, + width: 256, + height: 256, + maxWidth: '70vw' + }, + saveButton: { + width: 256, + maxWidth: '70vw' + } +})); + +const downloadQRCode = ({ eventId }) => { + const img = document.createElement('img'); + const canvas = document.createElement('canvas'); + + // Get SVG data and convert it to base64 formst + const svg = document.getElementById('qr-code'); + const xml = new XMLSerializer().serializeToString(svg); + const svg64 = 'data:image/svg+xml;base64,' + btoa(xml); + + img.onload = () => { + canvas.getContext('2d').drawImage(img, 0, 0); + const link = document.createElement('a'); + link.download = `raven_${eventId}.png`; + link.href = canvas.toDataURL(); + link.click(); + }; + img.src = svg64; +}; + +export const ShareEventQRCode = ({ event: { id } }) => { + const classes = useStyles(); + + return ( + + + + + ); +};