From 2c16f8999d365ef0a09af9694796ca37abaf0edc Mon Sep 17 00:00:00 2001
From: Mohan Ki <mohanki@digifox.live>
Date: Mon, 27 Jul 2026 16:01:45 +0530
Subject: [PATCH] fix: qr generator preview now shows dynamically generated
 shortlink instead of destination URL

---
 client/src/app/dashboard/create/page.tsx | 29 ++++++++++++++++--------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/client/src/app/dashboard/create/page.tsx b/client/src/app/dashboard/create/page.tsx
index 47f3686..7f983db 100644
--- a/client/src/app/dashboard/create/page.tsx
+++ b/client/src/app/dashboard/create/page.tsx
@@ -12,13 +12,15 @@ export default function CreateQRPage() {
   const [destinationUrl, setDestinationUrl] = useState('https://ck-qr.com');
   const [qrName, setQrName] = useState('');
   const [customSlug, setCustomSlug] = useState('');
+  const [randomSlug, setRandomSlug] = useState('');
   const [isGenerating, setIsGenerating] = useState(false);
+  const baseUrl = typeof window !== 'undefined' ? (process.env.NEXT_PUBLIC_APP_URL || 'https://qr.houseofwebsites.ai') : 'https://qr.houseofwebsites.ai';
   
   const [qrOptions, setQrOptions] = useState<Options>({
     width: 300,
     height: 300,
     type: 'svg',
-    data: 'https://ck-qr.com',
+    data: `${baseUrl}/l/preview`, // Will be updated in useEffect
     margin: 10,
     qrOptions: {
       typeNumber: 0,
@@ -43,11 +45,18 @@ export default function CreateQRPage() {
     }
   });
 
-  // Keep QR data in sync with URL input
-  const handleUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newUrl = e.target.value;
-    setDestinationUrl(newUrl);
-    setQrOptions(prev => ({ ...prev, data: newUrl || 'https://ck-qr.com' }));
+  // Generate random slug on mount to prevent SSR hydration errors
+  React.useEffect(() => {
+    const generated = Math.random().toString(36).substring(2, 8);
+    setRandomSlug(generated);
+    setQrOptions(prev => ({ ...prev, data: `${baseUrl}/l/${generated}` }));
+  }, [baseUrl]);
+
+  // Keep QR data in sync with custom slug
+  const handleSlugChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value.replace(/[^a-zA-Z0-9-_]/g, '');
+    setCustomSlug(val);
+    setQrOptions(prev => ({ ...prev, data: `${baseUrl}/l/${val || randomSlug}` }));
   };
 
   const handleGenerate = async () => {
@@ -56,7 +65,7 @@ export default function CreateQRPage() {
       // Generate Dynamic QR via API
       const response = await api.post('/qr/generate', {
         name: qrName,
-        customSlug: customSlug,
+        customSlug: customSlug || randomSlug, // Pass the previewed slug so the backend uses it!
         type: 'dynamic',
         dataType: 'URL',
         destinationUrl: destinationUrl,
@@ -114,7 +123,7 @@ export default function CreateQRPage() {
                 <input 
                   type="url" 
                   value={destinationUrl}
-                  onChange={handleUrlChange}
+                  onChange={e => setDestinationUrl(e.target.value)}
                   placeholder="https://your-website.com"
                   className="w-full border-gray-300 rounded-lg shadow-sm p-3 border focus:ring-indigo-500 focus:border-indigo-500 text-gray-900 bg-white"
                 />
@@ -130,8 +139,8 @@ export default function CreateQRPage() {
                     <input 
                       type="text" 
                       value={customSlug}
-                      onChange={e => setCustomSlug(e.target.value.replace(/[^a-zA-Z0-9-_]/g, ''))}
-                      placeholder="my-promo"
+                      onChange={handleSlugChange}
+                      placeholder={randomSlug || "my-promo"}
                       className="flex-1 w-full p-3 focus:outline-none text-gray-900 bg-white"
                     />
                 </div>