Fix: Stack overflow error in dynamic group condition builder

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 705f2157-ef97-4fbd-89e4-8c7f2ecaea90
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7ed01c5f-a82d-405a-b728-b2e3d127c60c/c079f97d-6543-4bd5-b2fe-8e902342ee42.jpg
This commit is contained in:
alphaeusmote
2025-04-10 12:32:40 +00:00
@@ -244,101 +244,7 @@ const ConditionBuilder: React.FC<ConditionBuilderProps> = ({
);
};
// Render a condition group
const renderConditionGroup = (condition: Condition, index: number, level = 0) => {
const isExpanded = condition.id ? expandedGroups.has(condition.id) : false;
const childConditions = condition.id ? getConditionsForParent(condition.id) : [];
return (
<div
key={`group-${index}`}
className="border border-border rounded-md p-3 mb-3"
style={{ marginLeft: level > 0 ? `${level * 20}px` : '0' }}
>
<div className="flex items-center justify-between mb-2">
<div className="flex items-center space-x-2">
<button
type="button"
onClick={() => condition.id && toggleGroupExpand(condition.id)}
className="p-1 hover:bg-accent rounded-sm"
>
{isExpanded ? (
<ChevronDown className="h-4 w-4" />
) : (
<ChevronRight className="h-4 w-4" />
)}
</button>
<span className="text-sm font-medium">
Condition Group ({condition.logicalOperator})
</span>
</div>
<div className="flex items-center space-x-2">
<Select
value={condition.logicalOperator || 'AND'}
onValueChange={(value) => updateCondition(index, 'logicalOperator', value)}
>
<SelectTrigger className="w-20 h-8">
<SelectValue placeholder="Operator" />
</SelectTrigger>
<SelectContent>
{logicalOperators.map((op) => (
<SelectItem key={op.value} value={op.value}>
{op.label}
</SelectItem>
))}
</SelectContent>
</Select>
<Button
variant="ghost"
size="icon"
onClick={() => addCondition(condition.id)}
title="Add Condition"
>
<Plus className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => addConditionGroup(condition.id)}
title="Add Group"
>
<FolderPlus className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => removeCondition(index)}
title="Remove Group"
>
<Trash className="h-4 w-4" />
</Button>
</div>
</div>
{isExpanded && (
<div className="pl-2">
{childConditions.length === 0 ? (
<div className="text-sm text-muted-foreground p-2">
No conditions in this group. Add one using the buttons above.
</div>
) : (
childConditions.map((child, childIndex) => {
const originalIndex = conditions.findIndex(c => c === child);
return child.isGroup
? renderConditionGroup(child, originalIndex, level + 1)
: <SortableItem condition={child} index={originalIndex} level={level + 1} />;
})
)}
</div>
)}
</div>
);
};
// Removed unused renderConditionGroup function
// Sortable Item wrapper component
const SortableItem = ({
@@ -466,9 +372,12 @@ const ConditionBuilder: React.FC<ConditionBuilderProps> = ({
) : (
childConditions.map((child, childIndex) => {
const originalIndex = conditions.findIndex(c => c === child);
return child.isGroup
? <SortableItem key={`child-${originalIndex}`} condition={child} index={originalIndex} level={level + 1} />
: <SortableItem key={`child-${originalIndex}`} condition={child} index={originalIndex} level={level + 1} />;
return <SortableItem
key={`child-${originalIndex}`}
condition={child}
index={originalIndex}
level={level + 1}
/>;
})
);
})()