From 6e5104b09ef75c9cb46b395930a969e08afe35db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Kruli=C5=A1?= <krulis@d3s.mff.cuni.cz>
Date: Tue, 21 Jan 2025 15:37:43 +0100
Subject: [PATCH] Adding QR code with link to current page in the header
 drop-down.

---
 package.json                                  |  1 +
 src/components/layout/Header/Header.js        |  2 ++
 .../HeaderQRCodeDropdown.js                   | 35 +++++++++++++++++++
 .../layout/HeaderQRCodeDropdown/index.js      |  2 ++
 yarn.lock                                     | 20 +++++++++++
 5 files changed, 60 insertions(+)
 create mode 100644 src/components/layout/HeaderQRCodeDropdown/HeaderQRCodeDropdown.js
 create mode 100644 src/components/layout/HeaderQRCodeDropdown/index.js

diff --git a/package.json b/package.json
index 542f5e01f..a78ad166e 100644
--- a/package.json
+++ b/package.json
@@ -79,6 +79,7 @@
     "react-immutable-proptypes": "^2.2.0",
     "react-intl": "6.8.9",
     "react-motion": "^0.5.2",
+    "react-qr-code": "^2.0.15",
     "react-redux": "^9.2.0",
     "react-router": "^6.28.0",
     "react-router-dom": "^6.28.0",
diff --git a/src/components/layout/Header/Header.js b/src/components/layout/Header/Header.js
index e21c1e6cd..2822bc5f0 100644
--- a/src/components/layout/Header/Header.js
+++ b/src/components/layout/Header/Header.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import HeaderNotificationsContainer from '../../../containers/HeaderNotificationsContainer';
 import HeaderSystemMessagesContainer from '../../../containers/HeaderSystemMessagesContainer';
 import HeaderLanguageSwitching from '../HeaderLanguageSwitching';
+import HeaderQRCodeDropdown from '../HeaderQRCodeDropdown';
 import MemberGroupsDropdown from '../../Groups/MemberGroupsDropdown';
 import ClientOnly from '../../helpers/ClientOnly';
 import FetchManyResourceRenderer from '../../helpers/FetchManyResourceRenderer';
@@ -65,6 +66,7 @@ class Header extends Component {
           </ClientOnly>
 
           <ul className="navbar-nav ms-auto">
+            <HeaderQRCodeDropdown />
             {isLoggedIn && <HeaderSystemMessagesContainer locale={currentLang} />}
             <HeaderNotificationsContainer />
             <HeaderLanguageSwitching availableLangs={availableLangs} currentLang={currentLang} setLang={setLang} />
diff --git a/src/components/layout/HeaderQRCodeDropdown/HeaderQRCodeDropdown.js b/src/components/layout/HeaderQRCodeDropdown/HeaderQRCodeDropdown.js
new file mode 100644
index 000000000..408d2e8bb
--- /dev/null
+++ b/src/components/layout/HeaderQRCodeDropdown/HeaderQRCodeDropdown.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Dropdown } from 'react-bootstrap';
+import QRCode from 'react-qr-code';
+
+import Icon from '../../icons';
+
+const preventClickPropagation = ev => ev.stopPropagation();
+
+const HeaderQRCodeDropdown = () => (
+  <Dropdown as="li" align="end" navbar className="nav-item" data-bs-theme="light">
+    <Dropdown.Toggle as="a" id="dropdown-qr-code-link" bsPrefix="nav-link">
+      <Icon icon="qrcode" />
+    </Dropdown.Toggle>
+
+    <Dropdown.Menu rootCloseEvent="mousedown" onMouseDown={preventClickPropagation}>
+      <Dropdown.Header>
+        <FormattedMessage id="app.QRCodeDropdown.title" defaultMessage="QR code link to current page" />
+      </Dropdown.Header>
+
+      <Dropdown.Divider className="mb-0" />
+
+      <div className="mx-5 my-4 text-center">
+        <QRCode size={256} value={window.location.href} />
+      </div>
+      <p className="mx-3 small">
+        <code className="small">{window.location.href}</code>
+      </p>
+    </Dropdown.Menu>
+  </Dropdown>
+);
+
+HeaderQRCodeDropdown.propTypes = {};
+
+export default HeaderQRCodeDropdown;
diff --git a/src/components/layout/HeaderQRCodeDropdown/index.js b/src/components/layout/HeaderQRCodeDropdown/index.js
new file mode 100644
index 000000000..58683de28
--- /dev/null
+++ b/src/components/layout/HeaderQRCodeDropdown/index.js
@@ -0,0 +1,2 @@
+import HeaderQRCodeDropdown from './HeaderQRCodeDropdown.js';
+export default HeaderQRCodeDropdown;
diff --git a/yarn.lock b/yarn.lock
index e82089780..daf117f5f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11887,6 +11887,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"qr.js@npm:0.0.0":
+  version: 0.0.0
+  resolution: "qr.js@npm:0.0.0"
+  checksum: 5ac6c393967bdeaa660e7fd3a501a25eb538c1f6008a4d30ab2b97bbe520e5c236530090773f1578aa0a523cdaa6923c866615e21143f9e7cd22abd41c789b69
+  languageName: node
+  linkType: hard
+
 "qs@npm:6.13.0":
   version: 6.13.0
   resolution: "qs@npm:6.13.0"
@@ -12191,6 +12198,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-qr-code@npm:^2.0.15":
+  version: 2.0.15
+  resolution: "react-qr-code@npm:2.0.15"
+  dependencies:
+    prop-types: ^15.8.1
+    qr.js: 0.0.0
+  peerDependencies:
+    react: "*"
+  checksum: 4124b7c2ce71bfe94279d85322175c881ba87dcc9b67f3c6d6e2806854a8792cf5f9ed8e10ea04c22e39aa060ef12fb39e679e780cba14f168d3cd6cffb7086d
+  languageName: node
+  linkType: hard
+
 "react-redux@npm:^9.2.0":
   version: 9.2.0
   resolution: "react-redux@npm:9.2.0"
@@ -12454,6 +12473,7 @@ __metadata:
     react-intl: 6.8.9
     react-intl-translations-manager: ^5.0.3
     react-motion: ^0.5.2
+    react-qr-code: ^2.0.15
     react-redux: ^9.2.0
     react-router: ^6.28.0
     react-router-dom: ^6.28.0