code refactoring

src/components/ApprovalWorkflows/WorkflowForm.tsx

@@ -23,18 +23,8 @@ interface Props {
 }
 
 export default function WorkflowForm({ workflow, onWorkflowChange, entityTeachers, entityCorporates }: Props) {
-    const [steps, setSteps] = useState<WorkflowStep[]>(workflow.steps);
     const [stepCounter, setStepCounter] = useState<number>(3); // to guarantee unique keys used for animations
-    const lastStep = steps[steps.length - 1];
-
-    useEffect(() => {
-        setSteps(workflow.steps);
-    }, [workflow]);
-
-    useEffect(() => {
-        const updatedWorkflow = { ...workflow, steps };
-        onWorkflowChange(updatedWorkflow);
-    }, [steps]);
+    const lastStep = workflow.steps[workflow.steps.length - 1];
 
     const renumberSteps = (steps: WorkflowStep[]): WorkflowStep[] => {
         return steps.map((step, index) => ({
@@ -44,49 +34,49 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
     };
 
     const addStep = () => {
-        setSteps((prev) => {
-            const newStep: WorkflowStep = {
-                key: stepCounter,
-                stepType: "approval-by",
-                stepNumber: steps.length,
-                completed: false,
-                assignees: [null],
-            };
-            setStepCounter((count) => count + 1);
+        const newStep: WorkflowStep = {
+            key: stepCounter,
+            stepType: "approval-by",
+            stepNumber: workflow.steps.length,
+            completed: false,
+            assignees: [null],
+        };
+        setStepCounter((count) => count + 1);
 
-            const updatedSteps = [...prev.slice(0, -1), newStep, lastStep];
-            return renumberSteps(updatedSteps);
-        });
+        const updatedSteps = [
+            ...workflow.steps.slice(0, -1), 
+            newStep,
+            lastStep
+        ];
+        onWorkflowChange({ ...workflow, steps: renumberSteps(updatedSteps) });
     };
 
     const handleDelete = (key: number | undefined) => {
-        if (key) {
-            setSteps((prev) => {
-                const updatedSteps = prev.filter((step) => step.key !== key);
-                return renumberSteps(updatedSteps);
-            });
-        }
+        if (!key) return;
+
+        const updatedSteps = workflow.steps.filter((step) => step.key !== key);
+        onWorkflowChange({ ...workflow, steps: renumberSteps(updatedSteps) });
     };
 
     const handleSelectChange = (key: number | undefined, numberOfSelects: number, index: number, selectedOption: Option | null) => {
-        if (key === undefined) return;
+        if (!key) return;
 
-        setSteps((prevSteps) =>
-            prevSteps.map((step) => {
-                if (step.key !== key) return step;
+        const updatedSteps = workflow.steps.map((step) => {
+            if (step.key !== key) return step;
 
-                const assignees = step.assignees ?? [];
-                let newAssignees = [...assignees];
+            const assignees = step.assignees ?? [];
+            let newAssignees = [...assignees];
 
-                if (numberOfSelects === assignees.length) { // means no new select was added and instead one was changed
-                    newAssignees[index] = selectedOption?.value;
-                } else if (numberOfSelects === assignees.length + 1) { // means a new select was added
-                    newAssignees.push(selectedOption?.value || null);
-                } 
+            if (numberOfSelects === assignees.length) { // means no new select was added and instead one was changed
+                newAssignees[index] = selectedOption?.value;
+            } else if (numberOfSelects === assignees.length + 1) { // means a new select was added
+                newAssignees.push(selectedOption?.value || null);
+            }
 
-                return { ...step, assignees: newAssignees };
-            })
-        );
+            return { ...step, assignees: newAssignees };
+        });
+
+        onWorkflowChange({ ...workflow, steps: updatedSteps });
     };
 
     const handleReorder = (newOrder: WorkflowStep[]) => {
@@ -101,7 +91,8 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
             const [final] = newOrder.splice(finalIndex, 1);
             newOrder.push(final);
         }
-        setSteps(renumberSteps(newOrder));
+
+        onWorkflowChange({ ...workflow, steps: renumberSteps(newOrder) });
     };
 
     return (
@@ -119,13 +110,13 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
 
             <Reorder.Group
                 axis="y"
-                values={steps}
+                values={workflow.steps}
                 onReorder={handleReorder}
                 className="flex flex-col gap-0"
             >
 
                 <AnimatePresence>
-                    {steps.map((step, index) => (
+                    {workflow.steps.map((step, index) => (
                         <Reorder.Item
                             key={step.key}
                             value={step}