- edit workflow back-end implementation

- clone workflow back-end implementation
- added loading and redirecting to form submissions
- fixed form intake in progress bug
- fixed rendering bug

src/components/ApprovalWorkflows/WorkflowEditableStepComponent.tsx

@@ -26,6 +26,7 @@ export default function WorkflowEditableStepComponent({
 }: Props) {
 
     const [selects, setSelects] = useState<(Option | null | undefined)[]>([null]);
+    const [isAdding, setIsAdding] = useState(false);
 
     const teacherOptions: Option[] = useMemo(() => 
         entityTeachers
@@ -85,13 +86,17 @@ export default function WorkflowEditableStepComponent({
     );
 
     const handleAddSelectComponent = () => {
-        setSelects((prev) => {
-            const updated = [...prev, null];
-            onSelectChange(updated.length, updated.length - 1, null);
-            return updated;
-        });
+        setIsAdding(true); // I hate to use flags... but it was the only way i was able to prevent onSelectChange to cause parent component from re-rendering in the midle of EditableWorkflowStep rerender.
+        setSelects(prev => [...prev, null]);
     };
 
+    useEffect(() => {
+        if (isAdding) {
+            onSelectChange(selects.length, selects.length - 1, null);
+            setIsAdding(false); 
+        }
+    }, [selects.length, isAdding, onSelectChange]);
+
     const handleSelectChangeAt = (numberOfSelects: number, index: number, option: Option | null) => {
         const updated = [...selects];
         updated[index] = option;

src/components/ApprovalWorkflows/WorkflowForm.tsx

@@ -3,7 +3,7 @@ import Option from "@/interfaces/option";
 import { CorporateUser, TeacherUser } from "@/interfaces/user";
 import { AnimatePresence, Reorder, motion } from "framer-motion";
 import { useState } from "react";
-import { FaRegCheckCircle } from "react-icons/fa";
+import { FaRegCheckCircle, FaSpinner } from "react-icons/fa";
 import { IoIosAddCircleOutline } from "react-icons/io";
 import Button from "../Low/Button";
 import Tip from "./Tip";
@@ -14,9 +14,11 @@ interface Props {
     onWorkflowChange: (workflow: EditableApprovalWorkflow) => void;
     entityTeachers: TeacherUser[];
     entityCorporates: CorporateUser[];
+    isLoading: boolean;
+    isRedirecting: boolean;
 }
 
-export default function WorkflowForm({ workflow, onWorkflowChange, entityTeachers, entityCorporates }: Props) {
+export default function WorkflowForm({ workflow, onWorkflowChange, entityTeachers, entityCorporates, isLoading, isRedirecting }: Props) {
     const [stepCounter, setStepCounter] = useState<number>(3); // to guarantee unique keys used for animations
     const lastStep = workflow.steps[workflow.steps.length - 1];
 
@@ -145,10 +147,25 @@ export default function WorkflowForm({ workflow, onWorkflowChange, entityTeacher
                                             type="submit"
                                             color="purple"
                                             variant="solid"
+                                            disabled={isLoading}
                                             className="max-w-fit text-lg font-medium flex items-center gap-2 text-left -mt-4"
                                         >
-                                            <FaRegCheckCircle className="size-5" />
-                                            Confirm Exam Workflow Pipeline
+                                            {isRedirecting ? (
+                                                <>
+                                                    <FaSpinner className="animate-spin size-5" />
+                                                    Redirecting...
+                                                </>
+                                            ) : isLoading ? (
+                                                <>
+                                                    <FaSpinner className="animate-spin size-5" />
+                                                    Loading...
+                                                </>
+                                            ) : (
+                                                <>
+                                                    <FaRegCheckCircle className="size-5" />
+                                                    Confirm Exam Workflow Pipeline
+                                                </>
+                                            )}
                                         </Button>
                                     }
                                 </Reorder.Item>

src/components/ApprovalWorkflows/WorkflowStepComponent.tsx

@@ -64,7 +64,7 @@ export default function WorkflowStepComponent({
                                 />
                             </div>
                         )}
-                        {!completed && completedBy && (
+                        {!completed && currentStep && (
                             <div className={clsx("text-xs font-medium", { "text-mti-purple-ultradark": selected, "text-gray-800": !selected })}>
                                 In Progress... Assignees:
                                 <div className="flex flex-row flex-wrap gap-3 items-center">