Merge pull request #707 from codeforpdx/691-qr-code-enhancement

Let's a user share their WebID via a QR code

Author: brianscherner

package-lock.json

@@ -46,6 +46,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-paginate": "^8.2.0",
+    "react-qr-code": "^2.0.18",
     "react-router-dom": "^6.10.0",
     "react-router-hash-link": "^2.4.3",
     "react-webcam": "^7.2.0",

package.json

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import QRCode from 'react-qr-code';
+import QrCode2Icon from '@mui/icons-material/QrCode2';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Stack,
+  Typography
+} from '@mui/material';
+
+/**
+ *
+ * @memberof Profile
+ * @name CreateQRCode
+ * @param {object} Props - React props
+ * @param {string} [Props.webId] - The webId of the user's profile
+ * @returns {React.JSX.Element} The CreateQRCode Modal
+ */
+
+const CreateQRCode = ({ webId }) => {
+  const [qrIconClicked, setQrIconClicked] = useState(false);
+  const [docUrl, setDocUrl] = useState(null);
+
+  const createQrCode = () => {
+    setQrIconClicked(!qrIconClicked);
+    const trimmedWebId = webId && webId.includes('#') ? webId.split('#')[0] : webId;
+    setDocUrl(trimmedWebId);
+  };
+
+  const closeModal = () => {
+    setQrIconClicked(false);
+  };
+
+  return (
+    <>
+      <Button
+        variant="outlined"
+        startIcon={<QrCode2Icon />}
+        onClick={() => {
+          createQrCode();
+        }}
+      >
+        Show QR Code
+      </Button>
+      {qrIconClicked ? (
+        <Dialog
+          open={qrIconClicked}
+          onClose={closeModal}
+          aria-labelledby="qr-modal-title"
+          maxWidth="xs"
+          fullWidth
+        >
+          <DialogTitle id="qr-modal-title" sx={{ textAlign: 'center' }}>
+            Share your WebID
+          </DialogTitle>
+          <DialogContent>
+            <Stack spacing={2} alignItems="center" sx={{ py: 1 }}>
+              <div style={{ background: '#fff' }}>
+                <div style={{ width: 256 }}>
+                  <QRCode
+                    value={docUrl || ''}
+                    size={256}
+                    style={{ width: '100%', height: 'auto' }}
+                    viewBox="0 0 256 256"
+                    level="M"
+                  />
+                </div>
+              </div>
+              <Typography variant="body2" sx={{ wordBreak: 'break-all', textAlign: 'center' }}>
+                {docUrl}
+              </Typography>
+            </Stack>
+          </DialogContent>
+          <DialogActions sx={{ justifyContent: 'center' }}>
+            <Button
+              onClick={closeModal}
+              variant="contained"
+              sx={{
+                width: { xs: '90%', sm: '75%' }
+              }}
+            >
+              Close
+            </Button>
+          </DialogActions>
+        </Dialog>
+      ) : (
+        ''
+      )}
+    </>
+  );
+};
+
+export default CreateQRCode;

src/components/Profile/CreateQRCode.jsx

@@ -18,6 +18,7 @@ import { saveToClipboard } from '@utils';
 import ProfileInputField from './ProfileInputField';
 import ProfileEditButtonGroup from './ProfileEditButtonGroup';
 import ProfileImageField from './ProfileImageField';
+import CreateQRCode from './CreateQRCode';
 
 /**
  * UserProfile - Component is a component that renders the user's profile on
@@ -148,26 +149,31 @@ const ProfileComponent = ({ contactProfile, webId }) => {
           />
         </Box>
         {!contactProfile && (
-          <Box sx={{ display: 'flex', flexDirection: 'row', gap: '10px', alignSelf: 'end' }}>
-            <Typography sx={{ marginTop: '8px' }}>
-              <Link to={`${signupLink}?webId=${encodeURIComponent(session.info.webId)}`}>
-                Your Invite Link
-              </Link>
-              <IconButton
-                aria-label="Copy Invite Link"
-                edge="end"
-                onClick={() => {
-                  saveToClipboard(
-                    `${signupLink}?webId=${encodeURIComponent(session.info.webId)}`,
-                    'Invite link copied to clipboard',
-                    addNotification
-                  );
-                }}
-              >
-                <ContentCopyIcon />
-              </IconButton>
-            </Typography>
-          </Box>
+          <>
+            <Box sx={{ display: 'flex', flexDirection: 'row', gap: '10px', alignSelf: 'end' }}>
+              <Typography sx={{ marginTop: '8px' }}>
+                <Link to={`${signupLink}?webId=${encodeURIComponent(session.info.webId)}`}>
+                  Your Invite Link
+                </Link>
+                <IconButton
+                  aria-label="Copy Invite Link"
+                  edge="end"
+                  onClick={() => {
+                    saveToClipboard(
+                      `${signupLink}?webId=${encodeURIComponent(session.info.webId)}`,
+                      'Invite link copied to clipboard',
+                      addNotification
+                    );
+                  }}
+                >
+                  <ContentCopyIcon />
+                </IconButton>
+              </Typography>
+            </Box>
+            <Box sx={{ alignSelf: 'end' }}>
+              <CreateQRCode webId={webId} />
+            </Box>
+          </>
         )}
       </form>
     </Box>