feat: realtime progress

server/src/modules/server/mailingList.routes.ts

@@ -6,6 +6,7 @@ import { oleoduc } from "oleoduc";
 import { IUser } from "shared/models/user.model";
 import {
   SReqGetMailingList,
+  SResGetMailingList,
   SResGetMailingLists,
 } from "shared/routes/mailingList.routes";
 import { Readable } from "stream";
@@ -79,6 +80,40 @@ export const mailingListRoutes = ({ server }: { server: Server }) => {
     }
   );
 
+  server.get(
+    "/mailing-lists/:id",
+    {
+      schema: {
+        params: {
+          type: "object",
+          properties: { id: { type: "string" } },
+          required: ["id"],
+        },
+        response: {
+          200: SResGetMailingList,
+        },
+      } as const,
+      preHandler: server.auth([
+        server.validateSession,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ]) as any,
+    },
+    async (request, response) => {
+      const { user } = request;
+      const { id } = request.params;
+
+      const mailingList = await findMailingList({
+        _id: new ObjectId(id),
+      });
+
+      if (mailingList?.payload?.user_id !== user?._id.toString()) {
+        throw Boom.forbidden("Forbidden");
+      }
+
+      return response.status(200).send(mailingList as any);
+    }
+  );
+
   server.get(
     "/mailing-lists/:id/download",
     {

shared/routes/mailingList.routes.ts

@@ -19,3 +19,7 @@ export const SResGetMailingLists = {
 } as const;
 
 export type IResGetMailingLists = FromSchema<typeof SResGetMailingLists>;
+
+export const SResGetMailingList = SJob;
+
+export type IResGetMailingList = FromSchema<typeof SResGetMailingList>;

ui/app/liste-diffusion/components/GeneratingMailingList.tsx

@@ -1,16 +1,45 @@
 import { Box, Center, Heading, Text } from "@chakra-ui/react";
 import Image from "next/image";
-import { FC } from "react";
-import { IJob } from "shared/models/job.model";
+import { FC, useEffect, useState } from "react";
+import { IJob, JOB_STATUS_LIST } from "shared/models/job.model";
+
+import { api } from "../../../utils/api.utils";
 
 interface Props {
   mailingList: IJob;
+  onDone: () => void;
 }
 
-const GeneratingMailingList: FC<Props> = ({ mailingList }) => {
+const GeneratingMailingList: FC<Props> = ({
+  mailingList: initialMailingList,
+  onDone,
+}) => {
+  const [mailingList, setMailingList] = useState<IJob>(initialMailingList);
   const progression = Math.ceil(
     (mailingList.payload?.processed as number) ?? 0
   );
+
+  const fetchMailingList = async () => {
+    const { data } = await api.get(`/mailing-lists/${mailingList._id}`);
+    setMailingList(data);
+
+    if (
+      [
+        JOB_STATUS_LIST.FINISHED,
+        JOB_STATUS_LIST.ERRORED,
+        JOB_STATUS_LIST.BLOCKED,
+      ].includes(data.status)
+    ) {
+      onDone();
+    }
+  };
+
+  useEffect(() => {
+    const id = setInterval(fetchMailingList, 3000);
+
+    return () => clearInterval(id);
+  }, []);
+
   return (
     <Box textAlign="center" pt="4" pb="6">
       <Center>

ui/app/liste-diffusion/page.tsx

@@ -19,10 +19,6 @@ const ListeDiffusionPage = () => {
     },
   });
 
-  const handleGenerate = async () => {
-    await refetch();
-  };
-
   const generatingMailingList = mailingLists?.find((mailingList) =>
     [
       JOB_STATUS_LIST.RUNNING,
@@ -39,9 +35,12 @@ const ListeDiffusionPage = () => {
       </Heading>
 
       {generatingMailingList ? (
-        <GeneratingMailingList mailingList={generatingMailingList} />
+        <GeneratingMailingList
+          mailingList={generatingMailingList}
+          onDone={refetch}
+        />
       ) : (
-        <Form onSuccess={handleGenerate} />
+        <Form onSuccess={refetch} />
       )}
 
       <ListMailingList mailingLists={mailingLists} onDelete={refetch} />