From e824b270afaebb4b40b363f161c2228071ba2b8d Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Wed, 4 Feb 2026 20:56:08 +0100
Subject: [PATCH] feat: refactor UtmBuilder to improve site selection logic and
 URL initialization based on initialSiteId; enhance user experience by
 ensuring proper state updates

---
 components/tools/UtmBuilder.tsx | 31 ++++++++++++++++++-------------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/components/tools/UtmBuilder.tsx b/components/tools/UtmBuilder.tsx
index f4b1593..2c7a67c 100644
--- a/components/tools/UtmBuilder.tsx
+++ b/components/tools/UtmBuilder.tsx
@@ -29,24 +29,29 @@ export default function UtmBuilder({ initialSiteId }: UtmBuilderProps) {
       try {
         const data = await listSites()
         setSites(data)
-        
-        // If we have an initialSiteId, try to find it and set the URL
-        if (initialSiteId) {
-          const site = data.find(s => s.id === initialSiteId)
-          if (site) {
-            setValues(v => ({ ...v, url: `https://${site.domain}` }))
-          }
-        } else if (data.length > 0 && !values.url) {
-          // Optional: Default to first site if no initial ID provided
-          setSelectedSiteId(data[0].id)
-          setValues(v => ({ ...v, url: `https://${data[0].domain}` }))
-        }
       } catch (e) {
         console.error('Failed to load sites for UTM builder', e)
       }
     }
     fetchSites()
-  }, [initialSiteId])
+  }, [])
+
+  // 2. Initialize default selection
+  useEffect(() => {
+    if (sites.length === 0) return
+
+    if (initialSiteId) {
+      const site = sites.find(s => s.id === initialSiteId)
+      if (site && selectedSiteId !== site.id) {
+        setSelectedSiteId(site.id)
+        setValues(v => ({ ...v, url: `https://${site.domain}` }))
+      }
+    } else if (!selectedSiteId && !values.url) {
+      const firstSite = sites[0]
+      setSelectedSiteId(firstSite.id)
+      setValues(v => ({ ...v, url: `https://${firstSite.domain}` }))
+    }
+  }, [sites, initialSiteId, selectedSiteId, values.url])
 
   // 2. Handle Site Selection
   const handleSiteChange = (siteId: string) => {