devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use custom hook to rerender workflow instead of reloading full page.

Browse Source
This commit is contained in:
Joao Correia
2025-02-03 12:31:21 +00:00
parent d59b654ac2
commit 19f2193414
3 changed files with 65 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/pages/api/approval-workflows/[id]/index.ts
View File

@@ -2,7 +2,7 @@
import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
import { sessionOptions } from "@/lib/session";
import { requestUser } from "@/utils/api";
import { deleteApprovalWorkflow, updateApprovalWorkflow } from "@/utils/approval.workflows.be";
import { deleteApprovalWorkflow, getApprovalWorkflow, updateApprovalWorkflow } from "@/utils/approval.workflows.be";
import { withIronSessionApiRoute } from "iron-session/next";
import { ObjectId } from "mongodb";
import type { NextApiRequest, NextApiResponse } from "next";
@@ -12,6 +12,7 @@ export default withIronSessionApiRoute(handler, sessionOptions);
async function handler(req: NextApiRequest, res: NextApiResponse) {
if (req.method === "DELETE") return await del(req, res);
if (req.method === "PUT") return await put(req, res);
if (req.method === "GET") return await get(req, res);
}
async function del(req: NextApiRequest, res: NextApiResponse) {
@@ -44,3 +45,18 @@ async function put(req: NextApiRequest, res: NextApiResponse) {
return res.status(204).end();
}
}
async function get(req: NextApiRequest, res: NextApiResponse) {
const user = await requestUser(req, res);
if (!user) return res.status(401).json({ ok: false });
if (!["admin", "developer", "corporate", "mastercorporate"].includes(user.type)) {
return res.status(403).json({ ok: false });
}
const { id } = req.query as { id?: string };
if (id) {
return res.status(200).json(await getApprovalWorkflow("configured-workflows", id));
}
}

106
src/pages/approval-workflows/[id]/index.tsx
View File

@@ -6,6 +6,7 @@ import UserWithProfilePic from "@/components/ApprovalWorkflows/UserWithProfilePi
import WorkflowStepComponent from "@/components/ApprovalWorkflows/WorkflowStepComponent";
import Layout from "@/components/High/Layout";
import Button from "@/components/Low/Button";
import useApprovalWorkflow from "@/hooks/useApprovalWorkflow";
import { ApprovalWorkflow, getUserTypeLabelShort, WorkflowStep } from "@/interfaces/approval.workflow";
import { User } from "@/interfaces/user";
import { sessionOptions } from "@/lib/session";
@@ -19,7 +20,6 @@ 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 { useState } from "react";
import { BsChevronLeft } from "react-icons/bs";
import { FaSpinner, FaWpforms } from "react-icons/fa6";
@@ -57,7 +57,8 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
return {
props: serialize({
user,
workflow,
initialWorkflow: workflow,
id,
workflowAssignees: await getSpecificUsers(allAssigneeIds),
workflowRequester: await getUser(workflow.requester),
}),
@@ -66,25 +67,26 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
interface Props {
user: User,
workflow: ApprovalWorkflow,
initialWorkflow: ApprovalWorkflow,
id: string,
workflowAssignees: User[],
workflowRequester: User,
}
export default function Home({ user, workflow, workflowAssignees, workflowRequester }: Props) {
const steps = workflow.steps;
export default function Home({ user, initialWorkflow, id, workflowAssignees, workflowRequester }: Props) {
let currentStep = steps.findIndex(step => !step.completed || step.rejected);
const { workflow, reload, isLoading } = useApprovalWorkflow(id);
const currentWorkflow = workflow || initialWorkflow;
let currentStep = currentWorkflow.steps.findIndex(step => !step.completed || step.rejected);
if (currentStep === -1)
currentStep = steps.length - 1;
currentStep = currentWorkflow.steps.length - 1;
const [selectedStepIndex, setSelectedStepIndex] = useState<number>(currentStep);
const [selectedStep, setSelectedStep] = useState<WorkflowStep>(steps[selectedStepIndex]);
const [selectedStep, setSelectedStep] = useState<WorkflowStep>(currentWorkflow.steps[selectedStepIndex]);
const [isPanelOpen, setIsPanelOpen] = useState(true);
const [comments, setComments] = useState<string>(selectedStep.comments || "");
const [isLoading, setIsLoading] = useState<boolean>(false);
const [isRedirecting, setIsRedirecting] = useState<boolean>(false);
const router = useRouter();
const handleStepClick = (index: number, stepInfo: WorkflowStep) => {
setSelectedStep(stepInfo);
@@ -94,11 +96,9 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
};
const handleSaveComments = () => {
setIsLoading(true);
const updatedWorkflow: ApprovalWorkflow = {
...workflow,
steps: workflow.steps.map((step, index) =>
...currentWorkflow,
steps: currentWorkflow.steps.map((step, index) =>
index === selectedStepIndex ?
{
...step,
@@ -109,11 +109,10 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
};
axios
.put(`/api/approval-workflows/${workflow._id}`, updatedWorkflow)
.put(`/api/approval-workflows/${id}`, updatedWorkflow)
.then(() => {
toast.success("Comments saved successfully.");
setIsRedirecting(true);
router.reload();
reload();
})
.catch((reason) => {
if (reason.response.status === 401) {
@@ -123,19 +122,16 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
} else {
toast.error("Something went wrong, please try again later.");
}
setIsLoading(false);
console.log("Submitted Values:", updatedWorkflow);
return;
})
};
const handleApproveStep = () => {
setIsLoading(true);
const updatedWorkflow: ApprovalWorkflow = {
...workflow,
status: selectedStepIndex === workflow.steps.length - 1 ? "approved" : "pending",
steps: workflow.steps.map((step, index) =>
...currentWorkflow,
status: selectedStepIndex === currentWorkflow.steps.length - 1 ? "approved" : "pending",
steps: currentWorkflow.steps.map((step, index) =>
index === selectedStepIndex ?
{
...step,
@@ -148,11 +144,10 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
};
axios
.put(`/api/approval-workflows/${workflow._id}`, updatedWorkflow)
.put(`/api/approval-workflows/${id}`, updatedWorkflow)
.then(() => {
toast.success("Step approved successfully.");
setIsRedirecting(true);
router.reload();
reload();
})
.catch((reason) => {
if (reason.response.status === 401) {
@@ -162,20 +157,20 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
} else {
toast.error("Something went wrong, please try again later.");
}
setIsLoading(false);
console.log("Submitted Values:", updatedWorkflow);
return;
})
handleStepClick(selectedStepIndex + 1, currentWorkflow.steps[selectedStepIndex + 1]);
};
const handleRejectStep = () => {
if (!confirm(`Are you sure you want to reject this step?`)) return;
setIsLoading(true);
const updatedWorkflow: ApprovalWorkflow = {
...workflow,
...currentWorkflow,
status: "rejected",
steps: workflow.steps.map((step, index) =>
steps: currentWorkflow.steps.map((step, index) =>
index === selectedStepIndex ?
{
...step,
@@ -189,11 +184,10 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
};
axios
.put(`/api/approval-workflows/${workflow._id}`, updatedWorkflow)
.put(`/api/approval-workflows/${id}`, updatedWorkflow)
.then(() => {
toast.success("Step rejected successfully.");
setIsRedirecting(true);
router.reload();
reload();
})
.catch((reason) => {
if (reason.response.status === 401) {
@@ -203,14 +197,13 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
} else {
toast.error("Something went wrong, please try again later.");
}
setIsLoading(false);
console.log("Submitted Values:", updatedWorkflow);
return;
})
};
const handleViewExam = () => {
}
const handleEditExam = () => {
@@ -220,7 +213,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
return (
<>
<Head>
<title> {workflow.name} | EnCoach</title>
<title> Workflow | EnCoach</title>
<meta
name="description"
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
@@ -238,7 +231,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
className="text-mti-purple hover:text-mti-purple-dark transition ease-in-out duration-300 text-xl">
<BsChevronLeft />
</Link>
<h1 className="text-2xl font-semibold">{workflow.name}</h1>
<h1 className="text-2xl font-semibold">{currentWorkflow.name}</h1>
</section>
<section className="flex flex-col gap-6">
@@ -249,10 +242,10 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
profileImage={workflowRequester.profilePicture}
/>
<StartedOn
date={workflow.startDate}
date={currentWorkflow.startDate}
/>
<Status
status={workflow.status}
status={currentWorkflow.status}
/>
</div>
<div className="flex flex-row gap-3">
@@ -261,7 +254,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
variant="solid"
onClick={handleViewExam}
padding="px-6 py-2"
className="w-[240px] text-lg flex items-center justify-center gap-2 text-left"
className="w-[240px] text-lg flex items-center justify-center gap-2 text-left"
>
<IoDocumentTextOutline />
View Exam
@@ -271,20 +264,20 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
variant="solid"
onClick={handleEditExam}
padding="px-6 py-2"
className="w-[240px] text-lg flex items-center justify-center gap-2 text-left"
className="w-[240px] text-lg flex items-center justify-center gap-2 text-left"
>
<TiEdit size={20} />
Edit Exam
</Button>
</div>
{steps.find((step) => !step.completed) === undefined &&
{currentWorkflow.steps.find((step) => !step.completed) === undefined &&
<Tip text="All steps in this instance have been completed." />
}
</section>
<section className="flex flex-col gap-0">
{steps.map((step, index) => (
{currentWorkflow.steps.map((step, index) => (
<WorkflowStepComponent
workflowAssignees={workflowAssignees}
key={index}
@@ -294,7 +287,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
stepNumber={step.stepNumber}
stepType={step.stepType}
assignees={step.assignees}
finalStep={index === steps.length - 1}
finalStep={index === currentWorkflow.steps.length - 1}
currentStep={index === currentStep}
selected={index === selectedStepIndex}
onClick={() => handleStepClick(index, step)}
@@ -407,12 +400,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
padding="px-6 py-2"
className="mb-3 w-full text-lg flex items-center justify-center gap-2 text-left"
>
{isRedirecting ? (
<>
<FaSpinner className="animate-spin size-5" />
Reloading...
</>
) : isLoading ? (
{isLoading ? (
<>
<FaSpinner className="animate-spin size-5" />
Loading...
@@ -433,12 +421,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
padding="px-6 py-2"
className="mb-3 w-1/2 text-lg flex items-center justify-center gap-2 text-left"
>
{isRedirecting ? (
<>
<FaSpinner className="animate-spin size-5" />
Reloading...
</>
) : isLoading ? (
{isLoading ? (
<>
<FaSpinner className="animate-spin size-5" />
Loading...
@@ -471,12 +454,7 @@ export default function Home({ user, workflow, workflowAssignees, workflowReques
padding="px-6 py-2"
className="mt-6 mb-3 w-full text-lg flex items-center justify-center gap-2 text-left"
>
{isRedirecting ? (
<>
<FaSpinner className="animate-spin size-5" />
Reloading...
</>
) : isLoading ? (
{isLoading ? (
<>
<FaSpinner className="animate-spin size-5" />
Loading...