issue #433: save validation progress in cookies

docs/label-data-validation/flowchart.md

@@ -22,13 +22,17 @@ flowchart TD
 ```mermaid
 flowchart TD
     Start([Start]) --> LabelDataValidationID["/label-data-validation/id"]
+    
+    %% Parallel branches
     LabelDataValidationID --> ImagesUploaded{Images Uploaded?}
-    ImagesUploaded -->|No| GetInspections[GET /inspections/id]
-    ImagesUploaded -->|Yes| DisplayUploadedImages["Display Uploaded Images"]
-    DisplayUploadedImages --> GetInspections
-    GetInspections --> FetchSuccess{Success?}
-    FetchSuccess -->|No| HomePage["/home"]
-    FetchSuccess -->|Yes| DisplayData["Display Data"]
-    DisplayData --> End([End])
-    HomePage --> End
+    LabelDataValidationID --> FetchInspections[GET /inspections/id]
+    
+    %% Image handling branch
+    ImagesUploaded -->|No| End([End])
+    ImagesUploaded -->|Yes| DisplayUploadedImages["Display Uploaded Images"] --> End
+
+    %% Inspection handling branch
+    FetchInspections --> FetchSuccess{Success?}
+    FetchSuccess -->|No| ErrorPage["Display Error Page"] --> End
+    FetchSuccess -->|Yes| UpdateValidationProgress["Update Validation Progress from Cookies"] --> DisplayData["Display Data"] --> End
 ```

src/app/label-data-confirmation/page.tsx

@@ -7,7 +7,7 @@ import useUploadedFilesStore from "@/stores/fileStore";
 import useLabelDataStore from "@/stores/labelDataStore";
 import { LabelData } from "@/types/types";
 import { processAxiosError } from "@/utils/client/apiErrors";
-import { getAuthHeader } from "@/utils/client/auth";
+import { getAuthHeader } from "@/utils/client/cookies";
 import { isAllVerified } from "@/utils/client/fieldValidation";
 import { updateLabelData } from "@/utils/client/modelTransformation";
 import {

src/app/label-data-validation/[id]/page.tsx

@@ -3,15 +3,15 @@ import LabelDataValidator from "@/components/LabelDataValidator";
 import useAlertStore from "@/stores/alertStore";
 import useUploadedFilesStore from "@/stores/fileStore";
 import { DEFAULT_LABEL_DATA, LabelData } from "@/types/types";
-import { getAuthHeader } from "@/utils/client/auth";
+import { getAuthHeader, getLabelDataFromCookies } from "@/utils/client/cookies";
 import { Box, CircularProgress } from "@mui/material";
 import axios, { AxiosResponse } from "axios";
 import Error from "next/error";
 import { useParams, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-export default function Page() {
+export default function LabelDataValidationPageWithId() {
   const { id } = useParams();
   const inspectionId = Array.isArray(id) ? id[0] : id;
   const uploadedFiles = useUploadedFilesStore((state) => state.uploadedFiles);
@@ -24,7 +24,7 @@ export default function Page() {
 
   useEffect(() => {
     if (!inspectionId) return;
-    
+
     const controller = new AbortController();
     const signal = controller.signal;
 
@@ -39,7 +39,8 @@ export default function Page() {
           showAlert(t("alert.alreadyCompleted"), "warning");
           return router.push("/");
         }
-        setLabelData(labelData);
+        const c_labelData = getLabelDataFromCookies(inspectionId);
+        setLabelData(c_labelData ? c_labelData : labelData);
       })
       .catch((error) => {
         if (axios.isCancel(error)) {

src/app/label-inspections/[id]/page.tsx

@@ -6,7 +6,7 @@ import useAlertStore from "@/stores/alertStore";
 import useUploadedFilesStore from "@/stores/fileStore";
 import { LabelData } from "@/types/types";
 import { processAxiosError } from "@/utils/client/apiErrors";
-import { getAuthHeader } from "@/utils/client/auth";
+import { getAuthHeader } from "@/utils/client/cookies";
 import {
   Box,
   Button,

src/components/LabelDataValidator.tsx

@@ -13,6 +13,10 @@ import {
 } from "@/components/stepper";
 import useLabelDataStore from "@/stores/labelDataStore";
 import { FormComponentProps, LabelData } from "@/types/types";
+import {
+  getLabelDataFromCookies,
+  setLabelDataInCookies,
+} from "@/utils/client/cookies";
 import {
   checkFieldArray,
   checkFieldRecord,
@@ -47,7 +51,7 @@ interface LabelDataValidatorProps {
  * @param {LabelDataValidatorProps} props - The properties passed to the component.
  * @returns {JSX.Element} The rendered LabelDataValidator component.
  */
-const LabelDataValidator=({
+const LabelDataValidator = ({
   loading = false,
   fileUploads,
   labelData,
@@ -203,6 +207,10 @@ const LabelDataValidator=({
     );
   }, [labelData.ingredients, setIngredientsStepStatus]);
 
+  useEffect(() => {
+    setLabelDataInCookies(labelData);
+  }, [labelData]);
+
   return (
     <Container
       className="flex max-w-[1920px] flex-col bg-gray-100 text-black"
@@ -244,6 +252,6 @@ const LabelDataValidator=({
       />
     </Container>
   );
-}
+};
 
 export default LabelDataValidator;

src/utils/client/__tests__/cookies.test.ts

@@ -0,0 +1,91 @@
+import Cookies from "js-cookie";
+import { VERIFIED_LABEL_DATA, VERIFIED_LABEL_DATA_WITH_ID } from "../constants";
+import {
+  getAuthHeader,
+  getLabelDataFromCookies,
+  setLabelDataInCookies,
+} from "../cookies";
+
+jest.mock("js-cookie");
+
+describe("getAuthHeader", () => {
+  it("should return the correct Authorization header", () => {
+    (Cookies.get as jest.Mock).mockReturnValue(btoa("testUser:password"));
+    const authHeader = getAuthHeader();
+    expect(authHeader).toBe("Basic dGVzdFVzZXI6cGFzc3dvcmQ6");
+  });
+
+  it("should return empty Authorization header if token is missing", () => {
+    (Cookies.get as jest.Mock).mockReturnValue(undefined);
+    const authHeader = getAuthHeader();
+    expect(authHeader).toBe("Basic Og==");
+  });
+});
+
+describe("setLabelDataInCookies", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should set label data with an inspectionId", () => {
+    setLabelDataInCookies(VERIFIED_LABEL_DATA_WITH_ID);
+    expect(Cookies.set).toHaveBeenCalledWith(
+      "labelData_1234",
+      JSON.stringify(VERIFIED_LABEL_DATA_WITH_ID),
+      { expires: 1 },
+    );
+  });
+
+  it("should set label data with default name if no inspectionId", () => {
+    setLabelDataInCookies(VERIFIED_LABEL_DATA);
+    expect(Cookies.set).toHaveBeenCalledWith(
+      "labelData_no_id",
+      JSON.stringify(VERIFIED_LABEL_DATA),
+      { expires: 1 },
+    );
+  });
+});
+
+describe("getLabelDataFromCookies", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should retrieve label data if cookie exists", () => {
+    (Cookies.get as jest.Mock).mockReturnValue(
+      JSON.stringify(VERIFIED_LABEL_DATA_WITH_ID),
+    );
+    const result = getLabelDataFromCookies("1234");
+    expect(result).toEqual(VERIFIED_LABEL_DATA_WITH_ID);
+  });
+
+  it("should return null if cookie does not exist", () => {
+    (Cookies.get as jest.Mock).mockReturnValue(undefined);
+    const result = getLabelDataFromCookies("1234");
+    expect(result).toBeNull();
+  });
+
+  it("should retrieve label data with default name if no inspectionId", () => {
+    (Cookies.get as jest.Mock).mockReturnValue(
+      JSON.stringify(VERIFIED_LABEL_DATA),
+    );
+    const result = getLabelDataFromCookies(null);
+    expect(result).toEqual(VERIFIED_LABEL_DATA);
+  });
+
+  it("should retrieve label data with default name if inspectionId is an empty string", () => {
+    (Cookies.get as jest.Mock).mockReturnValue(
+      JSON.stringify(VERIFIED_LABEL_DATA),
+    );
+    const result = getLabelDataFromCookies("");
+    expect(result).toEqual(VERIFIED_LABEL_DATA);
+  });
+
+  it("should retrieve label data with default name if inspectionId is undefined", () => {
+    (Cookies.get as jest.Mock).mockReturnValue(
+      JSON.stringify(VERIFIED_LABEL_DATA),
+    );
+    const result = getLabelDataFromCookies(undefined);
+    expect(result).toEqual(VERIFIED_LABEL_DATA);
+  });
+});

src/utils/client/cookies.ts

@@ -0,0 +1,31 @@
+import { LabelData } from "@/types/types";
+import Cookies from "js-cookie";
+
+const COOKIE_PREFIX = "labelData_";
+
+const getCookieName = (inspectionId?: string | null) =>
+  COOKIE_PREFIX + (inspectionId || "no_id");
+
+export const getAuthHeader = () => {
+  return "Basic " + btoa(`${atob(Cookies.get("token") ?? "")}:`);
+};
+
+export const setLabelDataInCookies = (labelData: LabelData) => {
+  const cookieName = getCookieName(labelData.inspectionId);
+
+  console.debug(`[Cookies] Setting label data for:`, cookieName);
+
+  Cookies.set(cookieName, JSON.stringify(labelData), { expires: 1 });
+};
+
+export const getLabelDataFromCookies = (
+  inspectionId: string | null | undefined,
+): LabelData | null => {
+  const cookieName = getCookieName(inspectionId);
+
+  const data = Cookies.get(cookieName);
+  if (!data) return null;
+
+  console.debug(`[Cookies] Retrieved label data for:`, cookieName);
+  return JSON.parse(data);
+};