From 53c299da9f3e0e157fa950e5ee65a3c3c9ccc0ff Mon Sep 17 00:00:00 2001
From: Nobert Patrick <73602565+Trikcode@users.noreply.github.com>
Date: Thu, 4 Jan 2024 08:13:03 +0300
Subject: [PATCH 1/2] feat: Add QR code generation for chat link

---
 client/package-lock.json                      | 11 +++++-
 client/package.json                           |  3 +-
 .../components/LinkDisplay/Style.module.css   | 27 +++++++++++++++
 client/src/components/LinkDisplay/index.tsx   | 34 +++++++++++++------
 4 files changed, 63 insertions(+), 12 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index bca134ee..25823a37 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -13,12 +13,13 @@
         "@types/node": "^20.2.5",
         "@types/react": "^18.2.9",
         "@types/react-dom": "^18.2.4",
+        "qrcode.react": "^3.1.0",
         "react": "^16.13.1",
         "react-bootstrap": "^1.5.2",
         "react-dom": "^16.13.1",
         "react-icons": "^3.10.0",
         "react-router-dom": "^5.2.0",
-        "react-scripts": "5.0.1",
+        "react-scripts": "^5.0.1",
         "typescript-plugin-css-modules": "^5.0.1"
       },
       "devDependencies": {
@@ -17161,6 +17162,14 @@
         "teleport": ">=0.2.0"
       }
     },
+    "node_modules/qrcode.react": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-3.1.0.tgz",
+      "integrity": "sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/qs": {
       "version": "6.11.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
diff --git a/client/package.json b/client/package.json
index b2bec1ce..b38191d8 100644
--- a/client/package.json
+++ b/client/package.json
@@ -8,12 +8,13 @@
     "@types/node": "^20.2.5",
     "@types/react": "^18.2.9",
     "@types/react-dom": "^18.2.4",
+    "qrcode.react": "^3.1.0",
     "react": "^16.13.1",
     "react-bootstrap": "^1.5.2",
     "react-dom": "^16.13.1",
     "react-icons": "^3.10.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "typescript-plugin-css-modules": "^5.0.1"
   },
   "devDependencies": {
diff --git a/client/src/components/LinkDisplay/Style.module.css b/client/src/components/LinkDisplay/Style.module.css
index 3f45647a..6cf98ac3 100644
--- a/client/src/components/LinkDisplay/Style.module.css
+++ b/client/src/components/LinkDisplay/Style.module.css
@@ -149,3 +149,30 @@
     width: 100%;
   }
 }
+
+.qrCodeContainer {
+  margin-top: 20px;
+}
+
+.qrButton {
+  background-color: #007bff;
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  margin-top: 10px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.qrButton:hover {
+  background-color: #0056b3; 
+}
+
+.lightModeButton {
+  background-color: #f0f0f0; 
+  color: #333; 
+}
+
+.lightModeButton:hover {
+  background-color: #ccc; 
+}
diff --git a/client/src/components/LinkDisplay/index.tsx b/client/src/components/LinkDisplay/index.tsx
index 737c3ea6..64780d57 100644
--- a/client/src/components/LinkDisplay/index.tsx
+++ b/client/src/components/LinkDisplay/index.tsx
@@ -1,13 +1,17 @@
-import React, { useRef, useState, useContext } from 'react';
-import { FiLink, FiCopy, FiExternalLink } from 'react-icons/fi';
-import styles from './Style.module.css';
-import { ThemeContext } from '../../ThemeContext';
-import { LinkObjType } from '@chat-e2ee/service';
+import React, { useRef, useState, useContext } from "react";
+import { FiLink, FiCopy, FiExternalLink } from "react-icons/fi";
+import styles from "./Style.module.css";
+import { ThemeContext } from "../../ThemeContext";
+import { LinkObjType } from "@chat-e2ee/service";
+import QRCode from "qrcode.react";
 
-const LinkDisplay: React.FC<{ content: LinkObjType}> = ( { content } ) => {
-  const chatLink = content.absoluteLink || `${window.location.protocol}//${window.location.host}/chat/${content.hash}`;
+const LinkDisplay: React.FC<{ content: LinkObjType }> = ({ content }) => {
+  const chatLink =
+    content.absoluteLink ||
+    `${window.location.protocol}//${window.location.host}/chat/${content.hash}`;
   const textAreaRef = useRef<HTMLInputElement | null>(null);
   const [buttonText, setButtonText] = useState("Copy");
+  const [showQR, setShowQR] = useState(false);
   const [darkMode] = useContext(ThemeContext);
 
   const copyCodeToClipboard = () => {
@@ -23,9 +27,7 @@ const LinkDisplay: React.FC<{ content: LinkObjType}> = ( { content } ) => {
   return (
     <div className={styles.fullWidth}>
       <div className={styles.divider} />
-      <span className={styles.pinDisplayMsg}>
-        Anyone with the Link can join your chat
-      </span>
+      <span className={styles.pinDisplayMsg}>Anyone with the Link can join your chat</span>
       <div
         className={`${styles.copyToClipboardContainer}
         ${!darkMode && styles.lightModeContainer}`}
@@ -61,6 +63,18 @@ const LinkDisplay: React.FC<{ content: LinkObjType}> = ( { content } ) => {
           Open chat <FiExternalLink />
         </a>
       </div>
+      {showQR && (
+        <div className={styles.qrCodeContainer}>
+          <QRCode value={chatLink} size={128} />
+        </div>
+      )}
+      <button
+        type="button"
+        className={`${styles.qrButton} ${!darkMode && styles.lightModeButton}`}
+        onClick={() => setShowQR(!showQR)}
+      >
+        {showQR ? "Hide QR Code" : "Show QR Code"}
+      </button>
     </div>
   );
 };

From 87e07b49c143d2c1891dc9ce6ec2a6eabb37395a Mon Sep 17 00:00:00 2001
From: Nobert Patrick <73602565+Trikcode@users.noreply.github.com>
Date: Sun, 7 Jan 2024 19:51:18 +0300
Subject: [PATCH 2/2] refactor: Improve QR code display toggle and button
 styling

---
 .../components/LinkDisplay/Style.module.css   | 30 +++++++++++--------
 client/src/components/LinkDisplay/index.tsx   | 24 ++++++++++-----
 2 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/client/src/components/LinkDisplay/Style.module.css b/client/src/components/LinkDisplay/Style.module.css
index 6cf98ac3..73ad4d6d 100644
--- a/client/src/components/LinkDisplay/Style.module.css
+++ b/client/src/components/LinkDisplay/Style.module.css
@@ -152,27 +152,33 @@
 
 .qrCodeContainer {
   margin-top: 20px;
+  display: flex;
+  justify-content: center;
 }
 
+
 .qrButton {
-  background-color: #007bff;
-  color: white;
-  border: none;
-  padding: 8px 16px;
-  margin-top: 10px;
+  border-width: 1px;
+  font-family: inherit;
+  font-size: 18px;
+  width: 110px;
+  height: 40px;
+  border-radius: 5px;
   cursor: pointer;
-  transition: background-color 0.3s ease;
+  outline: none;
+  border-color: #434343;
+  background: #4bb2f9;
+  color: white;
+  margin-left: 5px;
 }
 
 .qrButton:hover {
   background-color: #0056b3; 
 }
 
-.lightModeButton {
-  background-color: #f0f0f0; 
-  color: #333; 
+.QrCodeContent{
+  display: flex;
+  align-items: center;
 }
 
-.lightModeButton:hover {
-  background-color: #ccc; 
-}
+
diff --git a/client/src/components/LinkDisplay/index.tsx b/client/src/components/LinkDisplay/index.tsx
index 64780d57..33fee4de 100644
--- a/client/src/components/LinkDisplay/index.tsx
+++ b/client/src/components/LinkDisplay/index.tsx
@@ -1,5 +1,5 @@
 import React, { useRef, useState, useContext } from "react";
-import { FiLink, FiCopy, FiExternalLink } from "react-icons/fi";
+import { FiLink, FiCopy, FiExternalLink, FiArrowDown, FiArrowUp } from "react-icons/fi";
 import styles from "./Style.module.css";
 import { ThemeContext } from "../../ThemeContext";
 import { LinkObjType } from "@chat-e2ee/service";
@@ -52,6 +52,21 @@ const LinkDisplay: React.FC<{ content: LinkObjType }> = ({ content }) => {
           >
             <FiCopy className={styles.copyIcon} /> {buttonText}
           </button>
+          <button
+            type="button"
+            className={`${styles.qrButton} ${!darkMode && styles.lightModeButton}`}
+            onClick={() => setShowQR(!showQR)}
+          >
+            {showQR ? (
+              <div className={styles.QrCodeContent}>
+                QR Code <FiArrowUp className={styles.qrIcon} />
+              </div>
+            ) : (
+              <div className={styles.QrCodeContent}>
+                QR Code <FiArrowDown className={styles.qrIcon} />
+              </div>
+            )}
+          </button>
         </div>
       </div>
       <div className={styles.divider} />
@@ -68,13 +83,6 @@ const LinkDisplay: React.FC<{ content: LinkObjType }> = ({ content }) => {
           <QRCode value={chatLink} size={128} />
         </div>
       )}
-      <button
-        type="button"
-        className={`${styles.qrButton} ${!darkMode && styles.lightModeButton}`}
-        onClick={() => setShowQR(!showQR)}
-      >
-        {showQR ? "Hide QR Code" : "Show QR Code"}
-      </button>
     </div>
   );
 };