- 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]/edit.tsx

@@ -16,8 +16,10 @@ import Head from "next/head";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { BsChevronLeft } from "react-icons/bs";
-import { ToastContainer } from "react-toastify";
-import approvalWorkflowsData from '../../../demo/approval_workflows.json'; // to test locally
+import { toast, ToastContainer } from "react-toastify";
+import axios from "axios";
+import { getApprovalWorkflow } from "@/utils/approval.workflows.be";
+import { useRouter } from "next/router";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res);
@@ -28,9 +30,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")
@@ -54,6 +54,10 @@ interface Props {
 
 export default function Home({ user, workflow, workflowEntityTeachers, workflowEntityCorporates }: Props) {
     const [updatedWorkflow, setUpdatedWorkflow] = useState<EditableApprovalWorkflow | null>(null);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
+    
+    const router = useRouter();
 
     useEffect(() => {
         const editableSteps: EditableWorkflowStep[] = workflow.steps.map(step => ({
@@ -82,23 +86,52 @@ export default function Home({ user, workflow, workflowEntityTeachers, workflowE
 
     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
-    
-        if (!updatedWorkflow) return;
-    
-        const filteredWorkflow = {
+        setIsLoading(true);
+
+        if (!updatedWorkflow){
+            setIsLoading(false);
+            return;
+        } 
+
+        const filteredWorkflow: ApprovalWorkflow = {
             ...updatedWorkflow,
             steps: updatedWorkflow.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
+            .put(`/api/approval-workflows/${workflow.id}/edit`, filteredWorkflow)
+            .then(() => {
+                toast.success("Approval Workflow edited 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 edit 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) => {
-        setUpdatedWorkflow(wf);
-    }
+    const onWorkflowChange = (updatedWorkflow: EditableApprovalWorkflow) => {
+        setUpdatedWorkflow(updatedWorkflow);
+    };
 
     return (
         <>
@@ -153,6 +186,8 @@ export default function Home({ user, workflow, workflowEntityTeachers, workflowE
                                     onWorkflowChange={onWorkflowChange}
                                     entityTeachers={workflowEntityTeachers}
                                     entityCorporates={workflowEntityCorporates}
+                                    isLoading={isLoading}
+                                    isRedirecting={isRedirecting}
                                 />
                             }
                         </motion.div>