Make data dynamic in workflow view. Add requester and startDate to workflows.

src/pages/approval-workflows/[id].tsx

@@ -1,8 +1,8 @@
 import Layout from "@/components/High/Layout";
 import useUser from "@/hooks/useUser";
-import { ApprovalWorkflow } from "@/interfaces/approval.workflow";
+import { ApprovalWorkflow, getUserTypeLabelShort } from "@/interfaces/approval.workflow";
 import { sessionOptions } from "@/lib/session";
-import { redirect } from "@/utils";
+import { redirect, serialize } from "@/utils";
 import { requestUser } from "@/utils/api";
 import { shouldRedirectHome } from "@/utils/navigation.disabled";
 import { withIronSessionSsr } from "iron-session/next";
@@ -11,7 +11,6 @@ import Link from "next/link";
 import { BsChevronLeft } from "react-icons/bs";
 import { ToastContainer } from "react-toastify";
 
-
 import approvalWorkflowsData from '../../demo/approval_workflows.json'; // to test locally
 
 import RequestedBy from "@/components/ApprovalWorkflows/RequestedBy";
@@ -19,6 +18,9 @@ import StartedOn from "@/components/ApprovalWorkflows/StartedOn";
 import Status from "@/components/ApprovalWorkflows/Status";
 import WorkflowStepComponent from "@/components/ApprovalWorkflows/WorkflowStepComponent";
 import { useState } from "react";
+import useApprovalWorkflows from "@/hooks/useApprovalWorkflows";
+import { User } from "@/interfaces/user";
+import { getSpecificUsers, getUser, getUsers } from "@/utils/users.be";
 
 export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }) => {
     const user = await requestUser(req, res);
@@ -29,19 +31,40 @@ export const getServerSideProps = withIronSessionSsr(async ({ req, res, params }
 
     const { id } = params as { id: string };
 
-    const workflow = approvalWorkflowsData.find(workflow => workflow.id === id);       // await getApprovalWorkflow(id);
+    // replace later with await getApprovalWorkflow(id). Don't think a hook is needed here;
+
+    const approvalWorkflowsDataAsWorkflows = approvalWorkflowsData as ApprovalWorkflow[];
+    const workflow: ApprovalWorkflow | undefined = approvalWorkflowsDataAsWorkflows.find(workflow => workflow.id === id);
 
     if (!workflow)
         return redirect("/approval-workflows")
 
+    const allAssigneeIds: string[] = [
+        ...new Set(
+            workflow.steps
+                .map(step => step.assignees) 
+                .flat() as string[] // we are sure assignees coming from a db workflow are all valid strings.
+        )
+    ];
+
     return {
-        props: { user, workflow },
+        props: serialize({
+            user,
+            workflow,
+            workflowAssignees: await getSpecificUsers(allAssigneeIds),
+            workflowRequester: await getUser(workflow.requester),
+        }),
     };
 }, sessionOptions);
 
-export default function Home({ workflow }: { workflow: ApprovalWorkflow }) {
-    const { user } = useUser({ redirectTo: "/login" });
+interface Props {
+    user: User,
+    workflow: ApprovalWorkflow,
+    workflowAssignees: User[],
+    workflowRequester: User,
+}
 
+export default function Home({ user, workflow, workflowAssignees, workflowRequester }: Props) {
     const steps = workflow.steps;
 
     const [selectedIndex, setSelectedIndex] = useState(steps.length - 1);
@@ -77,20 +100,22 @@ export default function Home({ workflow }: { workflow: ApprovalWorkflow }) {
                     <section className="flex flex-col gap-6">
                         <div className="flex flex-row gap-6">
                             <RequestedBy
-                                name="Prof. Álvaro Dória"
-                                profileImage="/blue-stock-photo.png"
+                                prefix={getUserTypeLabelShort(workflowRequester.type)}
+                                name={workflowRequester.name}
+                                profileImage="/blue-stock-photo.png" //{workflowRequester.profilePicture}
                             />
                             <StartedOn
-                                date="15/12/2024"
+                                date={workflow.startDate}
                             />
                             <Status
-                                status="pending"
+                                status={workflow.status}
                             />
                         </div>
                     </section>
                     <section className="flex flex-col gap-0">
                         {steps.map((step, index) => (
                             <WorkflowStepComponent
+                                workflowAssignees={workflowAssignees}
                                 key={index}
                                 completed={step.completed}
                                 completedBy={step.completedBy}
@@ -100,8 +125,8 @@ export default function Home({ workflow }: { workflow: ApprovalWorkflow }) {
                                 assigneesType={step.assigneesType}
                                 finalStep={index === steps.length - 1}
                                 currentStep={steps.findIndex(step => !step.completed) === index}
-                                selected={index === selectedIndex} 
-                                onClick={() => handleStepClick(index)} 
+                                selected={index === selectedIndex}
+                                onClick={() => handleStepClick(index)}
                             />
                         ))}
                     </section>