- 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/pages/approval-workflows/[id]/clone.tsx

@@ -21,8 +21,11 @@ import Link from "next/link";
 import { useEffect, useState } from "react";
 import { BsChevronLeft } from "react-icons/bs";
 import { GrClearOption } from "react-icons/gr";
-import { ToastContainer } from "react-toastify";
+import { toast, ToastContainer } from "react-toastify";
 import approvalWorkflowsData from '../../../demo/approval_workflows.json'; // to test locally
+import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
+import { useRouter } from "next/router";
+import axios from "axios";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res);
@@ -33,9 +36,7 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
 
     const { id } = params as { id: string };
 
-    // replace later with await getApprovalWorkflow(id).
-    const approvalWorkflowsDataAsWorkflows = approvalWorkflowsData as ApprovalWorkflow[];
-    const workflow: ApprovalWorkflow | undefined = approvalWorkflowsDataAsWorkflows.find(workflow => workflow.id === id);
+    const workflow: ApprovalWorkflow | null = await getApprovalWorkflow(id);
 
     if (!workflow)
         return redirect("/approval-workflows")
@@ -66,6 +67,10 @@ export default function Home({ user, workflow, userEntitiesWithLabel, userEntiti
     const [entityId, setEntityId] = useState<string | null | undefined>(workflow.entityId);
     const [entityTeachers, setEntityTeachers] = useState<TeacherUser[]>([]);
     const [entityCorporates, setEntityCorporates] = useState<CorporateUser[]>([]);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
+
+    const router = useRouter();
 
     useEffect(() => {
         if (entityId) {
@@ -118,18 +123,47 @@ export default function Home({ user, workflow, userEntitiesWithLabel, userEntiti
 
     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
-    
-        if (!cloneWorkflow) return;
-    
-        const filteredWorkflow = {
+        setIsLoading(true);
+
+        if (!cloneWorkflow) {
+            setIsLoading(false);
+            return;
+        }
+
+        const filteredWorkflow: ApprovalWorkflow = {
             ...cloneWorkflow,
             steps: cloneWorkflow.steps.map(step => ({
                 ...step,
-                assignees: step.assignees.filter(assignee => assignee !== null && assignee !== undefined)
+                currentStep: step.stepNumber === 1 ? true : false,
+                completed: false,
+                assignees: step.assignees.filter((assignee): assignee is string => assignee !== null && assignee !== undefined)
             }))
         };
-    
-        console.log("Form submitted! Filtered Workflow:", filteredWorkflow);
+
+        axios
+            .post(`/api/approval-workflows/${workflow.id}/clone`, filteredWorkflow)
+            .then(() => {
+                toast.success("Approval Workflow cloned successfully.");
+                setIsRedirecting(true);
+                setTimeout(() => {
+                    router.push("/approval-workflows");
+                }, 2000);
+            })
+            .catch((reason) => {
+                if (reason.response.status === 401) {
+                    toast.error("Not logged in!");
+                    return router.push("/login");
+                }
+                if (reason.response.status === 403) {
+                    toast.error("You do not have permission to clone Approval Workflows!");
+                    return router.push("/approval-workflows");
+                }
+                toast.error("Something went wrong, please try again later.");
+                setIsLoading(false);
+                return;
+            })
+
+        console.log("Form submitted! Filtered Values:", filteredWorkflow);
     };
 
     const onWorkflowChange = (wf: EditableApprovalWorkflow) => {
@@ -257,6 +291,8 @@ export default function Home({ user, workflow, userEntitiesWithLabel, userEntiti
                                                 onWorkflowChange={onWorkflowChange}
                                                 entityTeachers={entityTeachers}
                                                 entityCorporates={entityCorporates}
+                                                isLoading={isLoading}
+                                                isRedirecting={isRedirecting}
                                             />
                                         </motion.div>
                                     </LayoutGroup>