Function DynamicComponents

frontend/src/components/DynamicComponents.jsx:388–453

({ components, onComponentUpdate })

);

const DynamicComponents = ({ components, onComponentUpdate }) => {
  useEffect(() => {
    extractKeyProps.reset();
  }, []);

  console.log('[DynamicComponents] Rendering with components:', components);

  if (!components?.rows) {
    console.warn('[DynamicComponents] No components or invalid structure received');
    return null;
  }

  const handleUpdate = (componentId, value) => {
    console.log(`[DynamicComponents] Component update triggered:`, {
      componentId,
      value,
      timestamp: new Date().toISOString(),
    });
    onComponentUpdate(componentId, value);
  };

  const renderRow = (row, rowIndex) => {
    if (!Array.isArray(row)) {
      console.warn(`[DynamicComponents] Invalid row at index ${rowIndex}`);
      return null;
    }

    return (
      <div key={`row-${rowIndex}`} className="dynamiccomponent-row">
        {row.map((component, index) => {
          if (!component) return null;

          const componentKey = component.id || `component-${index}`;
          const isSeparator = component.type === 'separator';

          return (
            <React.Fragment key={componentKey}>
              <div
                className={cn(isSeparator ? 'w-full' : 'dynamiccomponent-component')}
                style={!isSeparator ? { flex: component.flex || 1 } : undefined}
              >
                <ErrorBoundary>
                  <MemoizedComponent
                    component={component}
                    index={index}
                    handleUpdate={handleUpdate}
                    extractKeyProps={extractKeyProps}
                  />
                </ErrorBoundary>
              </div>
              {index < row.length - 1 && !isSeparator && (
                <div className="dynamiccomponent-separator" />
              )}
            </React.Fragment>
          );
        })}
      </div>
    );