Ajout d'un système de chargement

package-lock.json

@@ -32,6 +32,7 @@
         "react-big-calendar": "^1.5.0",
         "react-datepicker": "^4.8.0",
         "react-dom": "^18.2.0",
+        "react-loading": "^2.0.3",
         "react-router-dom": "^6.4.2",
         "react-scripts": "^5.0.1",
         "sass": "^1.55.0",
@@ -14941,6 +14942,15 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "node_modules/react-loading": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/react-loading/-/react-loading-2.0.3.tgz",
+      "integrity": "sha512-Vdqy79zq+bpeWJqC+xjltUjuGApyoItPgL0vgVfcJHhqwU7bAMKzysfGW/ADu6i0z0JiOCRJjo+IkFNkRNbA3A==",
+      "peerDependencies": {
+        "prop-types": "^15.6.0",
+        "react": ">=0.14.0"
+      }
+    },
     "node_modules/react-onclickoutside": {
       "version": "6.12.2",
       "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.2.tgz",
@@ -28394,6 +28404,12 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-loading": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/react-loading/-/react-loading-2.0.3.tgz",
+      "integrity": "sha512-Vdqy79zq+bpeWJqC+xjltUjuGApyoItPgL0vgVfcJHhqwU7bAMKzysfGW/ADu6i0z0JiOCRJjo+IkFNkRNbA3A==",
+      "requires": {}
+    },
     "react-onclickoutside": {
       "version": "6.12.2",
       "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.2.tgz",

package.json

@@ -27,6 +27,7 @@
     "react-big-calendar": "^1.5.0",
     "react-datepicker": "^4.8.0",
     "react-dom": "^18.2.0",
+    "react-loading": "^2.0.3",
     "react-router-dom": "^6.4.2",
     "react-scripts": "^5.0.1",
     "sass": "^1.55.0",

src/App.js

@@ -11,28 +11,31 @@ import Admin_create from './pages/Admin_create';
 import Calendrier from './pages/Calendrier';
 import Repertoire from './pages/Repertoire';
 import Parametres from './pages/Parametres';
+import Chargement from './pages/Chargement';
+import { Component } from 'fullcalendar';
 
 
 
 const App = () => {
 
-  return (
+    return (
-    <BrowserRouter>
+      <BrowserRouter>
-      <Routes>
+        <Routes>
-      <Route path="/" element={<Connexion />} />
+        <Route path="/" element={<Connexion />} />
-      <Route path="/Admin_create" element={<Admin_create />} />
+        <Route path="/Admin_create" element={<Admin_create />} />
-      <Route path="/Account" element={<Compte />} />
+        <Route path="/Account" element={<Compte />} />
-      <Route path="/Admin_list" element={<Admin_list />} />
+        <Route path="/Admin_list" element={<Admin_list />} />
-      <Route path="/Admin_modif" element={<Admin_modif />} />
+        <Route path="/Admin_modif" element={<Admin_modif />} />
-      <Route path="/Admin_supp" element={<Admin_supp />} />
+        <Route path="/Admin_supp" element={<Admin_supp />} />
-      <Route path="/Dashboard" element={<Dashboard />} />
+        <Route path="/Dashboard" element={<Dashboard />} />
-      <Route path="/Analyse" element={<Analyse />} />
+        <Route path="/Analyse" element={<Analyse />} />
-      <Route path="/Calendrier" element={<Calendrier />} />
+        <Route path="/Calendrier" element={<Calendrier />} />
-      <Route path="/Repertoire" element={<Repertoire />} />
+        <Route path="/Repertoire" element={<Repertoire />} />
-      <Route path="/Parametres" element={<Parametres />} />
+        <Route path="/Parametres" element={<Parametres />} />
-      </Routes>
+        <Route path="/Chargement" element={<Chargement />} />
-    </BrowserRouter>
+        </Routes>
-  );
+      </BrowserRouter>
+    );
 }
 
 

src/pages/Chargement.js

@@ -0,0 +1,13 @@
+import React, {Component} from 'react';
+import ReactLoading from 'react-loading';
+
+const Chargement = () => {
+
+    return (
+        <div className="chargement">
+            <ReactLoading type="bars" color="#a9a9a9"/>
+        </div>
+    );
+}
+
+export default Chargement;

src/pages/Compte.js

@@ -18,6 +18,14 @@ function Compte() {
         setFile(URL.createObjectURL(e.target.files[0]));
     }
 
+    const [modification, setModification] = useState(false);
+
+    const modificationHandler = () => {
+        setModification((modification) => !modification)
+        console.log("modificationHandler")
+        console.log(modification)
+    }
+
 
     return (
         <body className={theme}>
@@ -61,7 +69,7 @@ function Compte() {
                                     <p id="texte" className="nom">Mateo Centeno</p>
                                 </div>
                                 <div className='bouton_submit'>
-                                    <button id="bouton" className="bouton_modifierNom" type="submit">Modifier</button>
+                                    <button id="bouton" className="bouton_modifierNom" type="submit" onClick={modificationHandler}>{!modification ? "Modifier" : "Envoyer"}</button>
                                 </div>
                             </div>
                         </div>

src/styles/components/_chargement.scss

@@ -0,0 +1,6 @@
+.chargement {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}

src/styles/index.scss

@@ -6,4 +6,5 @@
 @import "./components/analyse";
 @import "./components/calendrier";
 @import "./components/parametre";
-@import "./components/repertoire"
+@import "./components/repertoire";
+@import "./components/chargement"