Strict mode moved to Component root and not App root (#62)

ai-cfia · Jun 6, 2024 · 9246511 · 9246511
1 parent 6a697ac
commit 9246511
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 36 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,17 +5,24 @@ import NoPage from "./Pages/NoPage/NoPage";
 import "./App.css";
 import Header from "./Components/Header/Header";
 import FormPage from "./Pages/FormPage/FormPage";
+import { StrictMode } from "react";
 
 function App() {
   return (
     <BrowserRouter>
-      <Header />
+      <StrictMode>
+        <Header />
+      </StrictMode>
       <Routes>
         <Route path="/">
+
           <Route index element={<HomePage />} />
+
           <Route path="Json" element={<JsonPage />} />
           <Route path="Form" element={<FormPage/>}/>
+
           <Route path="*" element={<NoPage />} />
+
         </Route>
       </Routes>
     </BrowserRouter>

diff --git a/src/Pages/FormPage/FormPage.tsx b/src/Pages/FormPage/FormPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, StrictMode } from "react";
 import "./FormPage.css";
 import Modal from "../../Components/Modal/Modal";
 import openIcon from "../../assets/dot-menu.svg";
@@ -377,25 +377,27 @@ const FormPage = () => {
 
 
   return (
-    <div className="formPage-container">
-      <div className="pic-container">
-        <Carousel imgs={urls}></Carousel>
-      </div>
-      <div className="data-container">
-        {
-          loading 
-        ? 
-          (<div className={`loader-container-form ${loading ? "active" : ""}`}>
-            <div className="spinner"></div>
-            <p>Votre fichier est en cours d'analyse Your file is being analyzed</p>
-          </div>)
-        : 
-          [...data.sections].map((sectionInfo: section) => {
-            return sectionFactory(sectionInfo);
-          })
-        }
+    <StrictMode>
+      <div className="formPage-container">
+        <div className="pic-container">
+          <Carousel imgs={urls}></Carousel>
+        </div>
+        <div className="data-container">
+          {
+            loading 
+          ? 
+            (<div className={`loader-container-form ${loading ? "active" : ""}`}>
+              <div className="spinner"></div>
+              <p>Votre fichier est en cours d'analyse Your file is being analyzed</p>
+            </div>)
+          : 
+            [...data.sections].map((sectionInfo: section) => {
+              return sectionFactory(sectionInfo);
+            })
+          }
+        </div>
       </div>
-    </div>
+    </StrictMode>
   );
 };
 

diff --git a/src/Pages/HomePage/HomePage.tsx b/src/Pages/HomePage/HomePage.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { StrictMode, useState } from "react";
 import "./HomePage.css";
 import DragDropFileInput from "../../Components/DragDropFileInput/DragDropFileInput";
 import FileList from "../../Components/FileList/FileList";
@@ -52,19 +52,21 @@ function HomePage() {
   };
 
   return (
-    <div className="App">
-      <div className="homePage-container">
-        <DragDropFileInput sendChange={handlePhotoChange} file={toShow} />
-        <button className="submit-btn" type="submit" onClick={Submit}>
-          Submit
-        </button>
-        <FileList
-          files={files}
-          onSelectedChange={handleSelectedChange}
-          propagateDelete={handleDeletion}
-        />
+    <StrictMode>
+      <div className="App">
+        <div className="homePage-container">
+          <DragDropFileInput sendChange={handlePhotoChange} file={toShow} />
+          <button className="submit-btn" type="submit" onClick={Submit}>
+            Submit
+          </button>
+          <FileList
+            files={files}
+            onSelectedChange={handleSelectedChange}
+            propagateDelete={handleDeletion}
+          />
+        </div>
       </div>
-    </div>
+      </StrictMode>
   );
 }
 

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,10 +1,9 @@
-import React from "react";
+//import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
     <App />
-  </React.StrictMode>,
+
 );