Originally for demo, adds a link from frontend to backend and a simple way to render the results

src/App.tsx

@@ -1,5 +1,6 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import HomePage from "./Pages/HomePage/HomePage";
+import JsonPage from "./Pages/JsonPage/Json"
 import NoPage from "./Pages/NoPage/NoPage";
 import "./App.css";
 import Header from "./Components/Header/Header";
@@ -11,6 +12,7 @@ function App() {
       <Routes>
         <Route path="/">
           <Route index element={<HomePage />} />
+          <Route path="Json" element={<JsonPage/>}/>
           <Route path="*" element={<NoPage />} />
         </Route>
       </Routes>

src/Pages/HomePage/HomePage.css

@@ -1,7 +1,15 @@
 .container{
     display: grid;
-    grid-template: "x a b";
+    grid-template-rows: auto;
+    grid-template-columns: auto;
+    grid-template-areas: ". a b";
     gap:10px;
     justify-content: space-evenly;
     padding: 0% 3%;
 }
+
+.submit-btn{
+    margin-top:50px;
+    position:relative;
+    width: 30%;
+}

src/Pages/HomePage/HomePage.tsx

@@ -2,6 +2,7 @@ import React, { useState, ChangeEvent } from "react";
 import "./HomePage.css";
 import DragDropFileInput from "../../Components/DragDropFileInput/DragDropFileInput";
 import FileList from "../../Components/FileList/FileList";
+import { useNavigate } from "react-router-dom";
 
 function HomePage() {
   const [files, setFiles] = useState<File[]>([]);
@@ -61,13 +62,18 @@ function HomePage() {
     }
   };
 
+  const navigate = useNavigate();
+  const Submit = ()=>{
+    navigate('/Json',{state:{data:files}})
+  }
 
   return (
     <div className="App">
       <div className="container">
         <DragDropFileInput sendChange={handlePhotoChange} />
-        <FileList files={files} />     
+        {/*<FileList files={files} />*/}
       </div>
+      <button className="submit-btn" type="submit" onClick={Submit}>Submit</button>
     </div>
   );
 }

src/Pages/JsonPage/Json.css

@@ -0,0 +1,24 @@
+.loader-container.active{
+    display: block;
+    width: 100%;
+    height: 100vh;
+    position: fixed;
+    background: rgba(0, 0, 0, 0.834)
+        url("../../assets/6.svg") center
+        no-repeat;
+    z-index: 1;
+}
+.loader-container p{
+    position: absolute;
+    top: 55%;
+    right:35%;
+    left:35%;
+}
+
+.loader-container{
+    display: none;
+}
+
+pre{
+    text-align: left;
+}

src/Pages/JsonPage/Json.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
+import "./Json.css"
+
+
+function JsonPage(){
+    const [loading, setLoading] = useState(true)
+    const [form, setForm]=useState({})
+    const [fetchError, setError]=useState<Error|null>(null)
+    const location = useLocation();
+    const file:File = location.state.data[0];
+
+    console.log(file)
+
+    const api_url = "http://localhost:5000"
+    useEffect(()=>{
+        const formData = new FormData()
+        formData.append("file",file)
+        fetch(api_url+"/upload",{
+            method:'POST',
+            headers:{
+
+            }, 
+            body:formData
+        }).then((res:Response)=>{
+            fetch(api_url+"/analyze",{
+                method:'GET',
+                headers:{
+
+                }
+            }).then((response:Response)=>{
+                response.json().then((data)=>{
+                    console.log(data)
+                    setForm(data)
+                    setLoading(false)
+                }).catch(e=>{
+                    setLoading(false)
+                    setError(e)
+                    console.log(e)
+                })
+            })
+        })
+    },[])
+    return (
+        <div>
+            <div className={`loader-container ${loading?'active':''}`}>
+                <div className="spinner"></div>
+                <p>
+                    Votre fichier est en cours d'analyse
+                    Your file is being analyzed
+                </p>
+            </div>
+            <pre>{(fetchError ? <p>{fetchError.message}</p> : JSON.stringify(form, null, 2))}</pre>
+        </div>
+    );
+}
+
+export default JsonPage