From 69370f10496d64bb73f0c7b4849492ee5859a406 Mon Sep 17 00:00:00 2001
From: theoleuthardt <theoleuthardt12@gmail.com>
Date: Fri, 21 Feb 2025 15:19:44 +0100
Subject: [PATCH] fix: QRCode variable name + clear button and conditional
 rendering

---
 frontend/src/app/qr-code-generator/page.tsx | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/qr-code-generator/page.tsx b/frontend/src/app/qr-code-generator/page.tsx
index 0b2a82b..c179264 100644
--- a/frontend/src/app/qr-code-generator/page.tsx
+++ b/frontend/src/app/qr-code-generator/page.tsx
@@ -7,7 +7,7 @@ import Image from "next/image";
 
 export default function QrCodeGenerator() {
   const [loading, setLoading] = useState(false);
-  const [qrcode, setQRCode] = useState<string | null>(null);
+  const [QRCodeURL, setQRCodeURL] = useState<string | null>(null);
 
   const downloadImage = (dataUrl: string) => {
     const link = document.createElement("a");
@@ -33,7 +33,7 @@ export default function QrCodeGenerator() {
             "Content-Type": "application/json",
           },
           body: JSON.stringify({
-            data: textInput,
+            qrcodeContent: textInput,
           }),
         },
       );
@@ -43,9 +43,8 @@ export default function QrCodeGenerator() {
       }
 
       const data = await response.json();
-      console.log("Data:", data);
       if (data.qrCode) {
-        setQRCode(data.qrCode);
+        setQRCodeURL(data.qrCode);
         downloadImage(data.qrCode);
       }
     } catch (error) {
@@ -56,6 +55,12 @@ export default function QrCodeGenerator() {
     }
   };
 
+  function clearInputAndQRCode() {
+    setQRCodeURL("");
+    const data = document.getElementById("data") as HTMLInputElement;
+    data.value = "";
+  }
+
   return (
     <div className="w-screen h-auto min-h-screen bg-black text-white font-noto flex flex-col items-center">
       <Navbar renderHomeLink={true} />
@@ -82,14 +87,16 @@ export default function QrCodeGenerator() {
             }
             onClick={generateQRCode}
           />
+          <Button content="clear" onClick={clearInputAndQRCode} />
         </div>
         <div className="p-3 rounded-xl text-center">
-          {qrcode && (
+          {QRCodeURL && (
             <Image
               id="output"
-              src={qrcode}
+              src={QRCodeURL}
               alt="QR Code"
-              className="text-blue-400 text-3xl"
+              width={128}
+              height={128}
             />
           )}
         </div>