issue #259: fix label display

src/Components/Label/Label.tsx

@@ -38,7 +38,7 @@ const Label = ({ sections }: LabelProps) => {
   const renderObjectInput = (inputInfo: Input) => {
     const keys = Object.keys(
       (inputInfo.value as { [key: string]: string }[])[0],
-    );
+    ).filter((key) => !inputInfo.fieldsToAvoidDisplaying.includes(key));
 
     return (
       <div id={inputInfo.id} className="object-input">

src/Pages/LabelPage/LabelPage.tsx

@@ -1,14 +1,20 @@
+import axios from "axios";
+import merge from "deepmerge";
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import Label from "../../Components/Label/Label";
+import { createDefaultInspection } from "../../interfaces/Inspection";
 import Data from "../../Model/Data-Model";
+import { useAlert } from "../../Utils/AlertContext";
+import { combineMerge } from "../../Utils/deepMerge";
 import { FertiliserForm, populateFromJSON } from "../../Utils/FormCreator";
 import "./LabelPage.css";
 
 function LabelPage() {
   const params = useParams();
   const labelId = params.labelId;
   const [label, setLabel] = useState<Data>(FertiliserForm());
+  const { showAlert } = useAlert();
   useEffect(() => {
     if (process.env.REACT_APP_ACTIVATE_USING_JSON == "true") {
       fetch("/debug/" + labelId + ".json")
@@ -17,16 +23,31 @@ function LabelPage() {
           setLabel(populateFromJSON(label, data));
         });
     } else {
-      fetch(process.env.VITE_API_URL + "/inspections/" + labelId, {
-        headers: {
-          Authorization:
-            "Basic " + document.cookie.split("auth=")[1].split(";")[0],
-        },
-      })
-        .then((r) => r.json())
-        .then((data) => {
-          data = JSON.parse(data);
-          setLabel(populateFromJSON(label, data));
+      axios
+        .get(process.env.VITE_API_URL + "/inspections/" + labelId, {
+          headers: {
+            Authorization:
+              "Basic " + document.cookie.split("auth=")[1].split(";")[0],
+          },
+        })
+        .then((response) => {
+          let data = response.data;
+
+          if (typeof data === "string") {
+            try {
+              data = JSON.parse(data);
+            } catch (e) {
+              console.error("Error parsing JSON string:", e);
+            }
+          }
+          const inspection = merge(createDefaultInspection(), data, {
+            arrayMerge: combineMerge,
+          });
+          setLabel(populateFromJSON(label, inspection));
+        })
+        .catch((error) => {
+          console.error("Error fetching the inspection:", error);
+          showAlert(String(error), "error");
         });
     }
     // eslint-disable-next-line

src/interfaces/Inspection.ts

@@ -20,16 +20,16 @@ export interface LocalizedSubLabel {
 
 export interface Metrics {
   weight: Value[];
-  volume: Value;
-  density: Value;
+  volume: Value | null;
+  density: Value | null;
 }
 
 export interface ProductInformation {
   name: string | null;
   label_id: string | null;
   registration_number: string | null;
   lot_number: string | null;
-  metrics: Metrics;
+  metrics: Metrics | null;
   npk: string | null;
   warranty: string | null;
   n: number | null;
@@ -51,22 +51,22 @@ export interface Title {
 }
 
 export interface GuaranteedAnalysis {
-  title: Title;
+  title: Title | null;
   en: NamedValue[];
   fr: NamedValue[];
 }
 
 export default interface Inspection {
   inspection_id: string | null;
   verified: boolean;
-  company: OrganizationInformation;
-  manufacturer: OrganizationInformation;
-  product: ProductInformation;
-  cautions: LocalizedSubLabel;
-  instructions: LocalizedSubLabel;
-  ingredients: LocalizedValues;
+  company: OrganizationInformation | null;
+  manufacturer: OrganizationInformation | null;
+  product: ProductInformation | null;
+  cautions: LocalizedSubLabel | null;
+  instructions: LocalizedSubLabel | null;
+  ingredients: LocalizedValues | null;
   inspection_comment: string | null;
-  guaranteed_analysis: GuaranteedAnalysis;
+  guaranteed_analysis: GuaranteedAnalysis | null;
 }
 
 export const createDefaultValue = (): Value => ({