- 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/create.tsx

@@ -18,6 +18,7 @@ import { AnimatePresence, LayoutGroup, motion } from "framer-motion";
 import { withIronSessionSsr } from "iron-session/next";
 import Head from "next/head";
 import Link from "next/link";
+import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { BsChevronLeft, BsTrash } from "react-icons/bs";
 import { MdFormatListBulletedAdd } from "react-icons/md";
@@ -56,7 +57,11 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
     const [entityId, setEntityId] = useState<string | null | undefined>(null);
     const [entityTeachers, setEntityTeachers] = useState<TeacherUser[]>([]);
     const [entityCorporates, setEntityCorporates] = useState<CorporateUser[]>([]);
-    const [isAdding, setIsAdding] = useState(false); // used to temporary timeout new workflow button. With animations, clicking too fast might cause state inconsistencies between renders.
+    const [isAdding, setIsAdding] = useState<boolean>(false); // used to temporary timeout new workflow button. With animations, clicking too fast might cause state inconsistencies between renders.
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
+
+    const router = useRouter();
 
     useEffect(() => {
         if (entityId) {
@@ -86,6 +91,11 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
 
     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
+        setIsLoading(true);
+
+        if (workflows.length === 0) {
+            setIsLoading(false);
+        }
 
         const filteredWorkflows: ApprovalWorkflow[] = workflows.map(workflow => ({
             ...workflow,
@@ -99,24 +109,28 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
 
         axios
             .post(`/api/approval-workflows/create`, filteredWorkflows)
-            .then(() => toast.success(`Approval Workflows created successfully.`))
+            .then(() => {
+                toast.success("Approval Workflows created successfully.");
+                setIsRedirecting(true);
+                setTimeout(() => {
+                    router.push("/approval-workflows");
+                }, 2000);
+            })
             .catch((reason) => {
                 if (reason.response.status === 401) {
                     toast.error("Not logged in!");
-                    return redirect("/login");
+                    return router.push("/login");
                 }
                 if (reason.response.status === 403) {
                     toast.error("You do not have permission to create Approval Workflows!");
-                    return;
+                    return router.push("/approval-workflows");
                 }
-
                 toast.error("Something went wrong, please try again later.");
+                setIsLoading(false);
                 return;
             })
-
+        
         console.log("Form submitted! Filtered Values:", filteredWorkflows);
-
-        return redirect("/approval-workflows");
     };
 
     const handleAddNewWorkflow = () => {
@@ -309,6 +323,8 @@ export default function Home({ user, userEntitiesWithLabel, userEntitiesTeachers
                                                 onWorkflowChange={onWorkflowChange}
                                                 entityTeachers={entityTeachers}
                                                 entityCorporates={entityCorporates}
+                                                isLoading={isLoading}
+                                                isRedirecting={isRedirecting}
                                             />
                                         </motion.div>
                                     </LayoutGroup>