La til direkteurl

Author: eilifjohansen

src/components/WebsitePicker.tsx

@@ -61,13 +61,74 @@ const WebsitePicker = ({
   const websitesLoaded = useRef<boolean>(false);
   const prevExternalDateRange = useRef<number>(externalDateRange || 3);
   const prevShouldReload = useRef<boolean>(shouldReload);
+  const initialUrlChecked = useRef<boolean>(false);
 
   // @ts-ignore
   const [isInitialLoading, setIsInitialLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
   const [showLoading, setShowLoading] = useState<boolean>(false);
   const loadingTimerRef = useRef<number | null>(null);
 
+  // Function to update URL with website ID
+  const updateUrlWithWebsiteId = useCallback((website: Website | null) => {
+    const url = new URL(window.location.href);
+    
+    if (website && website.id) {
+      url.searchParams.set('websiteId', website.id);
+    } else {
+      url.searchParams.delete('websiteId');
+    }
+    
+    // Update URL without full page reload
+    window.history.pushState({}, '', url.toString());
+  }, []);
+
+  // Handle website selection and update URL
+  const handleWebsiteChange = useCallback((website: Website | null) => {
+    onWebsiteChange(website);
+    updateUrlWithWebsiteId(website);
+  }, [onWebsiteChange, updateUrlWithWebsiteId]);
+
+  // Check for website ID in URL on initial load
+  useEffect(() => {
+    if (websitesLoaded.current && !initialUrlChecked.current && websites.length > 0) {
+      const urlParams = new URLSearchParams(window.location.search);
+      const websiteIdFromUrl = urlParams.get('websiteId');
+      
+      if (websiteIdFromUrl) {
+        const website = websites.find(w => w.id === websiteIdFromUrl);
+        if (website && !selectedWebsite) {
+          onWebsiteChange(website);
+        }
+      }
+      
+      initialUrlChecked.current = true;
+    }
+  }, [websites, selectedWebsite, onWebsiteChange]);
+
+  // Handle browser back/forward navigation
+  useEffect(() => {
+    const handlePopState = () => {
+      if (websitesLoaded.current) {
+        const urlParams = new URLSearchParams(window.location.search);
+        const websiteIdFromUrl = urlParams.get('websiteId');
+        
+        if (websiteIdFromUrl) {
+          const website = websites.find(w => w.id === websiteIdFromUrl);
+          if (website && (!selectedWebsite || website.id !== selectedWebsite.id)) {
+            onWebsiteChange(website);
+          }
+        } else if (selectedWebsite) {
+          // No website ID in URL, but we have a selected website, clear it
+          onWebsiteChange(null);
+        }
+      }
+    };
+    
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, [websites, selectedWebsite, onWebsiteChange]);
+
   const handleLoadingState = useCallback((loading: boolean) => {
     if (loading) {
       loadingTimerRef.current = window.setTimeout(() => {
@@ -287,9 +348,9 @@ const WebsitePicker = ({
             onToggleSelected={(option: string, isSelected: boolean) => {
               if (isSelected) {
                 const website = websites.find(w => w.name === option);
-                onWebsiteChange(website || null);
+                handleWebsiteChange(website || null); // Use the new handler
               } else {
-                onWebsiteChange(null);
+                handleWebsiteChange(null); // Use the new handler
               }
             }}
             clearButton

src/pages/Chartbuilder.tsx

@@ -14,7 +14,8 @@ import {
   MetricOption,
   ColumnOption,
   ChartConfig,
-  Filter
+  Filter,
+  Website // Add the missing Website type
 } from '../types/chart';
 import CopyButton from '../components/theme/CopyButton/CopyButton';
 
@@ -1086,6 +1087,43 @@ const ChartsPage = () => {
     }
   }, [tempDateRangeInDays, maxDaysAvailable, config.website]);
 
+  // Modify website change handler to handle URL sharing
+  const handleWebsiteChange = useCallback((website: Website | null) => {
+    setConfig(prev => ({ 
+      ...prev, 
+      website 
+    }));
+    
+    // Reset filters and selections when the website changes
+    if (website && website.id !== config.website?.id) {
+      setFilters([]);
+      setConfig(prev => ({
+        ...prev,
+        website,
+        metrics: [],
+        groupByFields: [],
+        orderBy: null
+      }));
+    }
+  }, [config.website?.id]);
+
+  // Check if the page is loaded via a shared URL with preset website
+  useEffect(() => {
+    // This will only handle URL parameters not related to website ID
+    // Website ID is handled directly in WebsitePicker component
+    const urlParams = new URLSearchParams(window.location.search);
+    
+    // You could add more URL parameters here like date range
+    const dateRange = urlParams.get('dateRange');
+    if (dateRange && !isNaN(Number(dateRange))) {
+      const days = Number(dateRange);
+      if (days > 0 && days <= 90) { // Add reasonable limits
+        setDateRangeInDays(days);
+        setTempDateRangeInDays(days);
+      }
+    }
+  }, []);
+
   // Modify handleEventsLoad to update loading state
   const handleEventsLoad = (events: string[], autoParameters?: { key: string; type: 'string' }[], maxDays?: number) => {
     setAvailableEvents(events);
@@ -1135,7 +1173,7 @@ const ChartsPage = () => {
               {/* @ts-ignore Data section - Website picker */}
               <WebsitePicker 
                 selectedWebsite={config.website}
-                onWebsiteChange={(website) => setConfig(prev => ({ ...prev, website }))}
+                onWebsiteChange={handleWebsiteChange}
                 onEventsLoad={handleEventsLoad}
                 dateRangeInDays={dateRangeInDays} // Pass dateRangeInDays to WebsitePicker
                 shouldReload={forceReload}        // Pass the reload flag