issue #360: extract data api route

.env.template

@@ -3,3 +3,4 @@ NEXT_PUBLIC_DEBUG=true
 # if link change dont forget to chage the test for sideNav to check if the link is correct
 NEXT_PUBLIC_REPORT_ISSUE_URL="https://forms.office.com/Pages/ResponsePage.aspx?id=7aW1GIYd00GUoLwn2uMqsn9SKTgKSYtCg4t0B9x4uyJURE5HSkFCTkZHUEQyWkxJVElMODdFQ09HUCQlQCN0PWcu&r5a19e9d47d9f4ac497fb974c192da4b3=%22Fertiscan%22"
 NEXT_PUBLIC_ALERT_BANNER_AUTO_DISMISS_TIME=5000
+BACKEND_URL=http://localhost:5000

package.json

@@ -25,6 +25,7 @@
     "@mui/icons-material": "^6.1.4",
     "@mui/material": "^6.1.8",
     "@mui/material-nextjs": "^6.1.4",
+    "axios": "^1.7.9",
     "dotenv": "^16.4.5",
     "i18next": "^23.16.5",
     "i18next-browser-languagedetector": "^8.0.0",

src/app/api/extract-label-data/route.ts

@@ -0,0 +1,46 @@
+import { BACKEND_URL } from "@/utils/server/constants";
+import axios from "axios";
+
+export async function POST(request: Request) {
+  const formData = await request.formData();
+
+  const authHeader = request.headers.get("Authorization");
+  if (!authHeader) {
+    return new Response(
+      JSON.stringify({ error: "Missing Authorization header" }),
+      {
+        status: 401,
+      },
+    );
+  }
+
+  return axios
+    .post(`${BACKEND_URL}/analyze`, formData, {
+      headers: { Authorization: authHeader },
+    })
+    .then((analyzeResponse) => {
+      formData.set("label_data", JSON.stringify(analyzeResponse.data));
+
+      return axios.post(`${BACKEND_URL}/inspections`, formData, {
+        headers: { Authorization: authHeader },
+      });
+    })
+    .then((inspectionsResponse) => {
+      return Response.json(inspectionsResponse.data);
+    })
+    .catch((error) => {
+      if (error.response) {
+        console.error(
+          "Error response:",
+          JSON.stringify(error.response.data, null, 2),
+        );
+      } else if (error.request) {
+        console.error("Error request:", error.request);
+      } else {
+        console.error("Error message:", error.message);
+      }
+      return new Response(JSON.stringify({ error: error.message }), {
+        status: 500,
+      });
+    });
+}

src/app/page.tsx

@@ -2,14 +2,16 @@
 import FileUploaded from "@/classe/File";
 import Dropzone from "@/components/Dropzone";
 import FileList from "@/components/FileList";
+import useAlertStore from "@/stores/alertStore";
 import type { DropzoneState } from "@/types/types";
 import { Box, Button, Grid2, Tooltip } from "@mui/material";
-import { useState } from "react";
-import React, { Suspense } from "react";
+import axios from "axios";
+import { Suspense, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 function HomePage() {
   const { t } = useTranslation("homePage");
+  const { showAlert } = useAlertStore();
 
   const [dropzoneState, setDropzoneState] = useState<DropzoneState>({
     visible: false,
@@ -18,6 +20,39 @@ function HomePage() {
   });
   const [uploadedFiles, setUploadedFiles] = useState<FileUploaded[]>([]);
 
+  const sendFiles = async () => {
+    const formData = new FormData();
+
+    uploadedFiles.forEach((fileUploaded) => {
+      const file = fileUploaded.getFile();
+      formData.append("files", file);
+    });
+
+    const username = "";
+    const password = "";
+    const authHeader = "Basic " + btoa(`${username}:${password}`);
+
+    axios
+      .post("/api/extract-label-data", formData, {
+        headers: { Authorization: authHeader },
+      })
+      .then((response) => {
+        console.log("Server Response:", response.data);
+      })
+      .catch((error) => {
+        if (error.response) {
+          console.error("Error response:", error.response.data);
+          showAlert(error.response.data.error, "error");
+        } else if (error.request) {
+          console.error("Error request:", error.request);
+          showAlert(error.request, "error");
+        } else {
+          console.error("Error message:", error.message);
+          showAlert(error.message, "error");
+        }
+      });
+  };
+
   return (
     <Suspense fallback="loading">
       <Box className="pt-[10vh]">
@@ -73,6 +108,7 @@ function HomePage() {
                   color="secondary"
                   disabled={uploadedFiles.length === 0}
                   fullWidth
+                  onClick={sendFiles}
                 >
                   {t("submit_button")}
                 </Button>

src/utils/server/constants.ts

@@ -0,0 +1 @@
+export const BACKEND_URL = process.env.BACKEND_URL || "http://localhost:5000";