Enable event sharing functionality via QR Code

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",

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'}
         </Button>
-        <ShareEvent />
+        <ShareEvent event={event} />
       </Container>
     </Container>
   );

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 = <ShareEventDetails />;
+  const shareEventModalContent = <ShareEventDetails event={event} />;
   const modalContent = {
     title: 'Share event',
     childComponent: shareEventModalContent

src/components/routes/event-details/share-event/ShareEventDetails.js

@@ -1,19 +1,21 @@
 import React from 'react';
 import { Container, makeStyles } from '@material-ui/core';
 import { ShareEventLink } from './ShareEventLink';
+import { ShareEventQRCode } from './ShareEventQRCode';
 
 const useStyles = makeStyles(theme => ({
   root: {
     padding: theme.spacing(1)
   }
 }));
 
-export const ShareEventDetails = () => {
+export const ShareEventDetails = ({ event }) => {
   const classes = useStyles();
 
   return (
     <Container className={classes.root}>
       <ShareEventLink />
+      <ShareEventQRCode event={event} />
     </Container>
   );
 };

src/components/routes/event-details/share-event/ShareEventLink.js

@@ -45,7 +45,11 @@ export const ShareEventLink = () => {
         alertDetails={alert}
         onClose={() => setAlert(defaultAlertContent)}
       />
-      <OutlinedInput value={`${window.location}`} fullWidth id="event-link" />
+      <OutlinedInput
+        value={`${window.location.href}`}
+        fullWidth
+        id="event-link"
+      />
       <Tooltip title="Copy to clipboard" aria-label="copy">
         <ClipboardIcon
           className={classes.clipboardIcon}

src/components/routes/event-details/share-event/ShareEventQRCode.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import QRCode from 'qrcode.react';
+import { Container, makeStyles, Button } from '@material-ui/core';
+
+const useStyles = makeStyles(theme => ({
+  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 (
+    <Container className={classes.root}>
+      <QRCode
+        value={window.location.href}
+        renderAs="svg"
+        id="qr-code"
+        className={classes.qrCode}
+      />
+      <Button
+        className={classes.saveButton}
+        onClick={() => downloadQRCode({ eventId: id })}
+      >
+        Download QR Code
+      </Button>
+    </Container>
+  );
+};