From b11f822e3182c172a6cccc0517b486804f8eca79 Mon Sep 17 00:00:00 2001
From: firdaous elhalafi <firdaous1elhalafi@gmail.com>
Date: Sun, 14 May 2023 02:18:18 +0200
Subject: [PATCH 1/2] ajout des loaders

---
 src/main.jsx          | 17 ++++++++++++++---
 src/routes/rout.jsx   | 10 +++++++---
 src/routes/sensor.jsx | 22 ++++++++++++----------
 3 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/main.jsx b/src/main.jsx
index e75a2bb..dee5f6e 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,21 +1,32 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import Sensor from "./routes/sensor";
-import Root from "./routes/rout";
+import Sensor, { sensorLoader, loaderLastValueSensor} from "./routes/sensor";
+import Root, { loader as rootLoader } from "./routes/rout";
 import {
   createBrowserRouter,
   RouterProvider,
 } from "react-router-dom";
 
-
+function combineLoaders(loaders) {
+  return async function combinedLoader(params) {
+    const data = {};
+    for (const loader of loaders) {
+      const result = await loader(params);
+      Object.assign(data, result);
+    }
+    return data;
+  }
+}
 const router = createBrowserRouter([
   {
     path: "/",
     element: <Root/>,
+    loader: rootLoader,
     children: [
       {
         path: "/:sensorName",
         element: <Sensor />,
+        loader: combineLoaders([sensorLoader, loaderLastValueSensor]),
       },
     ],
   },
diff --git a/src/routes/rout.jsx b/src/routes/rout.jsx
index 6973314..32b5e52 100644
--- a/src/routes/rout.jsx
+++ b/src/routes/rout.jsx
@@ -1,13 +1,18 @@
 import styles from "../index.module.css";
 import React, { useState} from 'react';
-import { Outlet, Link} from "react-router-dom";
+import { Outlet, Link, useLoaderData} from "react-router-dom";
 import mqtt from 'precompiled-mqtt';
-import {creerSensor, existSensor, updateSensor} from '../sensor.js';
+import {creerSensor, existSensor, updateSensor, Sensors} from '../sensor.js';
 
+export async function loader() {
+  const contacts = Sensors;
+  return { contacts };
+}
 export default function Root() {
   const [sensors, setSensors] = useState([]);
   const [brokerUrl, setBrokerUrl] = useState('');
 
+  const { contacts } = useLoaderData();
 
   const topic = 'value/#';
   const [client, setClient] = useState(null);
@@ -45,7 +50,6 @@ export default function Root() {
         const sensorData = JSON.parse(message.toString());
         const name = sensorData.name;
         const data = sensorData.value;
-        console.log(sensorData);
         if(existSensor(name)){
           updateSensor(name, data);
         }else {
diff --git a/src/routes/sensor.jsx b/src/routes/sensor.jsx
index eb2ef6b..38ad748 100644
--- a/src/routes/sensor.jsx
+++ b/src/routes/sensor.jsx
@@ -1,27 +1,29 @@
 import styles from "../index.module.css";
-import Root from "./rout.jsx";
-import {useEffect} from "react";
-import { useParams } from 'react-router-dom';
+import { useParams, useLoaderData } from 'react-router-dom';
 import {getSensor, getLastValue} from '../sensor.js';
 
+export function sensorLoader({params}) {
+    const sensor = getSensor(params.sensorName);
+    return {sensor};
+}
+export function loaderLastValueSensor({params}) {
+    const last_value = getLastValue(params.sensorName);
+    return {last_value};
+}
 export default function Sensor(){
     const { sensorName } = useParams();
-    const sensor = {
-        name: "Exemple sensor name",
-        type: "PERCENT",
-        value: 0.2,
-      };
+    const sensor = useLoaderData();
 
     return(
       <div>
         <h2>{sensorName}</h2>
         <h2>Valeur actuelle</h2>
         <div className={styles.sensorValue}>
-            {getLastValue(sensorName)}
+            {sensor.last_value}
         </div>
         <h2>Historique</h2>
         <div className={styles.historique}>
-            {getSensor(sensorName).map((value, index) => (
+            {sensor.sensor.map((value, index) => (
                 <div key={index}>{value}</div>
             ))}
         </div>
-- 
GitLab


From bc6a53cc102a82aa94aa9ee677fe1ff57b2e6ce0 Mon Sep 17 00:00:00 2001
From: Hajar RAHMOUNI <hajar.rahmouni@etu.univ-lehavre.fr>
Date: Tue, 16 May 2023 17:53:24 +0200
Subject: [PATCH 2/2] Feat : error page

---
 src/error-page.jsx   | 17 +++++++++++++++++
 src/index.module.css | 40 ++++++++++++++++++++++++++++++++++++++++
 src/main.jsx         |  2 ++
 3 files changed, 59 insertions(+)
 create mode 100644 src/error-page.jsx

diff --git a/src/error-page.jsx b/src/error-page.jsx
new file mode 100644
index 0000000..9d0a930
--- /dev/null
+++ b/src/error-page.jsx
@@ -0,0 +1,17 @@
+import { useRouteError } from "react-router-dom";
+import styles from "./index.module.css";
+import {Link} from "react-router-dom";
+
+export default function ErrorPage() {
+  const error = useRouteError();
+  console.error(error);
+
+  return (
+    <div className={styles.errorPage}>
+      <h1>Oops!</h1>
+      <h2>Erreur 404 - Page non trouvée</h2>
+      <p>La donnée que vous recherchez n'existe pas.</p>
+      <Link to={`/`}>Retour à la page d'accueil</Link>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/index.module.css b/src/index.module.css
index 7870459..266f5a3 100644
--- a/src/index.module.css
+++ b/src/index.module.css
@@ -118,4 +118,44 @@ nav li a:hover {
 }
 .mqtt {
   font-weight: normal;
+}
+
+.errorPage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  font-family: Arial, sans-serif;
+  text-align: center;
+}
+
+.errorPage>h1 {
+  font-size: 3em;
+  margin-bottom: 0.5em;
+}
+
+.errorPage>h2 {
+  font-size: 2em;
+  margin-bottom: 1em;
+}
+
+.errorPage>p {
+  font-size: 1.2em;
+  margin-bottom: 1.5em;
+}
+
+.errorPage>a {
+  display: inline-block;
+  padding: 0.8em 1.5em;
+  background-color: #6c6e71;
+  color: #fff;
+  font-size: 1.2em;
+  text-decoration: none;
+  border-radius: 4px;
+  transition: background-color 0.3s ease;
+}
+
+.errorPage>a:hover {
+  background-color: #302f31;
 }
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
index dee5f6e..f6e1603 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import Sensor, { sensorLoader, loaderLastValueSensor} from "./routes/sensor";
 import Root, { loader as rootLoader } from "./routes/rout";
+import ErrorPage from "./error-page";
 import {
   createBrowserRouter,
   RouterProvider,
@@ -21,6 +22,7 @@ const router = createBrowserRouter([
   {
     path: "/",
     element: <Root/>,
+    errorElement: <ErrorPage />,
     loader: rootLoader,
     children: [
       {
-- 
GitLab