feat : added QR code (#66)

* feat : added QR code

* Delete package-lock.json

* Delete package-lock.json

* renamed .env to .env.example

* Rename .env.example to .env

* added .env.example

Co-authored-by: Jyotirmoy Bandyopadhyaya [Bravo68] <jbandyopadhayaya@gmail.com>

backend/.env.example

@@ -1,3 +1,3 @@
-MONGO_DB=mongo-uri
-SECRET=secret
+MONGO_DB=mongo-uri
+SECRET=secret
 AUTH_SECRET=secret

frontend/components/HomeSection/homeSection.jsx

@@ -1,11 +1,16 @@
 import React, {useState} from "react";
 import HomeSectionStyle from "./HomeSection.style";
 import Link from "next/link";
+import Image from 'next/image'
 import Axios from "helpers/Axios";
 import {Alert, Button, Collapse, IconButton} from "@mui/material";
 import CloseIcon from '@mui/icons-material/Close';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import QRCode from 'qrcode'
 
+const QR = {
+    marginTop: '1.8em'
+}
 const head = {
   fontSize: "5.5rem",
   fontWeight: "bold",
@@ -37,10 +42,13 @@ const btn = {
 const searchBox = {
   position: "relative",
 };
+
+
 function HomeSection(props) {
+  var qrCode;
+  var minifiedUrl;
   const [disabled,setDisabled] = useState(false)
   const [open, setOpen] = React.useState(false);
-
   const setMinfy = async () => {
     setOpen(false)
     setDisabled(true);
@@ -56,12 +64,30 @@ function HomeSection(props) {
 
     const data = await res.data;
     props.setShortUrl(data.minifiedUrl);
+    minifiedUrl = data.minifiedUrl;
+    navigator.clipboard.writeText(props.shortUrl);
+    if(minifiedUrl){
+        generateQR();
+    }
     await navigator.clipboard.writeText(data.minifiedUrl);
     setOpen(true)
     setDisabled(false)
   };
 
+
+  // Generate QRCODE for the generated link
+  const generateQR = async () => {
+    try {
+        qrCode = await QRCode.toDataURL(minifiedUrl);
+        props.setQrData(qrCode);
+        props.setShowQrCode(true);
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
   return (
+      
     <HomeSectionStyle>
       <div className="content">
         <h1 style={head} className="title">
@@ -87,6 +113,13 @@ function HomeSection(props) {
             <Link href="/signup"><span style={{textDecoration:"underline"}}>Create an account</span></Link>
           </h3>
         </div>
+        {   // show QR code if a url is generated 
+            props.showQrCode ? 
+            <div style={QR}>
+                <Image src={props.qrData} placeholder="blur" blurDataURL width={150} height={150}/> 
+            </div> 
+            : ""
+        }
       </div>
       <Collapse in={open}>
         <Alert

frontend/package.json

@@ -21,6 +21,7 @@
     "axios": "^0.26.0",
     "nanoid": "^3.2.0",
     "next": "12.0.9",
+    "qrcode": "^1.5.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "styled-components": "^5.3.3"

frontend/pages/index.js

@@ -5,6 +5,11 @@ import NavBar from 'components/NavBar'
 import Features from 'components/Features'
 
 export default function Home() {
+
+  const [shortUrl, setShortUrl] = useState(null);
+  const [longUrl, setLongUrl] = useState("");
+  const [qrData, setQrData] = useState("");
+  const [showQrCode , setShowQrCode] = useState(false);
   const [shortUrl, setShortUrl] = useState(null)
   const [longUrl, setLongUrl] = useState('')
 
@@ -22,6 +27,10 @@ export default function Home() {
           setShortUrl={setShortUrl}
           longUrl={longUrl}
           setLongUrl={setLongUrl}
+          qrData = {qrData}
+          setQrData = {setQrData}
+          showQrCode = {showQrCode}
+          setShowQrCode = {setShowQrCode}
         />
         <Features />
       </main>