upload

frontend/src/hooks/usePageElementConfig.ts

@@ -0,0 +1,157 @@
+import { useState, useEffect } from 'react';
+import { PageElementConfig, getPageElementConfigs } from '../services/pageElements';
+
+export const usePageElementConfig = (pageType: string, elementName: string, defaultVariant: string = 'unified') => {
+  const [variant, setVariant] = useState<string>(defaultVariant);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let active = true;
+
+    const loadConfig = async () => {
+      try {
+        const configs = await getPageElementConfigs(pageType);
+        if (active) {
+          const config = configs.find(c => c.element_name === elementName);
+          if (config) {
+            setVariant(config.variant);
+          }
+        }
+      } catch (error) {
+        console.error(`Failed to load config for ${elementName}:`, error);
+      } finally {
+        if (active) {
+          setLoading(false);
+        }
+      }
+    };
+
+    loadConfig();
+
+    return () => {
+      active = false;
+    };
+  }, [pageType, elementName, defaultVariant]);
+
+  return { variant, loading };
+};
+
+export const useAllPageElementConfigs = (pageType: string) => {
+  const [configs, setConfigs] = useState<Record<string, string>>({});
+  const [visibility, setVisibility] = useState<Record<string, boolean>>({});
+  const [styles, setStyles] = useState<Record<string, Record<string, any>>>({});
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let active = true;
+
+    const loadConfigs = async () => {
+      try {
+        const data = await getPageElementConfigs(pageType);
+        if (active) {
+          const configMap: Record<string, string> = {};
+          const visMap: Record<string, boolean> = {};
+          
+          data.forEach(config => {
+            configMap[config.element_name] = config.variant;
+            visMap[config.element_name] = config.visible !== false;
+          });
+          
+          setConfigs(configMap);
+          setVisibility(visMap);
+        }
+      } catch (error) {
+        console.error('Failed to load page element configs:', error);
+      } finally {
+        if (active) {
+          setLoading(false);
+        }
+      }
+    };
+
+    loadConfigs();
+
+    // Listen for live updates from MyUIbrix editor (ONLY in preview mode)
+    const handleMyUIbrixChange = ((event: CustomEvent) => {
+      const { elementName, variant, visible, previewMode } = event.detail;
+      
+      // Only apply changes if in preview mode (editing)
+      // This prevents production users from seeing draft changes
+      if (previewMode) {
+        setConfigs(prev => ({
+          ...prev,
+          [elementName]: variant
+        }));
+        
+        setVisibility(prev => ({
+          ...prev,
+          [elementName]: visible
+        }));
+      }
+    }) as EventListener;
+
+    // Listen for reorder events
+    const handleMyUIbrixReorder = ((event: CustomEvent) => {
+      const { order } = event.detail;
+      // Trigger re-render with new order
+      // The actual reordering happens in the parent component
+      window.dispatchEvent(new CustomEvent('myuibrix-order-changed', {
+        detail: { order }
+      }));
+    }) as EventListener;
+
+    // Listen for style changes from VisualStylePanel
+    const handleMyUIbrixStyleChange = ((event: CustomEvent) => {
+      const { elementName, styles: newStyles, previewMode } = event.detail;
+      
+      if (previewMode) {
+        setStyles(prev => ({
+          ...prev,
+          [elementName]: newStyles
+        }));
+        
+        // Apply styles to DOM element immediately
+        const element = document.querySelector(`[data-element="${elementName}"]`) as HTMLElement;
+        if (element) {
+          // Convert style object to CSS
+          Object.keys(newStyles).forEach(key => {
+            const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+            let value = newStyles[key];
+            
+            // Handle numeric values that need units
+            if (typeof value === 'number' && !['fontWeight', 'lineHeight', 'opacity', 'zIndex'].includes(key)) {
+              value = `${value}px`;
+            }
+            
+            element.style.setProperty(cssKey, String(value));
+          });
+        }
+      }
+    }) as EventListener;
+
+    window.addEventListener('myuibrix-change', handleMyUIbrixChange);
+    window.addEventListener('myuibrix-reorder', handleMyUIbrixReorder);
+    window.addEventListener('myuibrix-style-change', handleMyUIbrixStyleChange);
+
+    return () => {
+      active = false;
+      window.removeEventListener('myuibrix-change', handleMyUIbrixChange);
+      window.removeEventListener('myuibrix-reorder', handleMyUIbrixReorder);
+      window.removeEventListener('myuibrix-style-change', handleMyUIbrixStyleChange);
+    };
+  }, [pageType]);
+
+  const getVariant = (elementName: string, defaultVariant: string = 'unified'): string => {
+    return configs[elementName] || defaultVariant;
+  };
+
+  const isVisible = (elementName: string, defaultVisible: boolean = true): boolean => {
+    return visibility[elementName] !== undefined ? visibility[elementName] : defaultVisible;
+  };
+
+  const getStyles = (elementName: string): Record<string, any> | undefined => {
+    return styles[elementName];
+  };
+
+  return { configs, visibility, styles, getVariant, isVisible, getStyles, loading };
+};