premier commit final

fix jsp pein de truc en vrais
2024-05-13 00:33:13 +02:00 · 2024-05-13 00:13:34 +02:00
13 changed files with 1362 additions and 1186 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/src/components/diagram.jsx
+++ b/src/components/diagram.jsx
@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Col, Row } from "antd";
-import '../assets/styles/diagram.css'
-
+import "../assets/styles/diagram.css";

 const Diagram = ({ data }) => {
  const [diagramData, setDiagramData] = useState(data);
@ -10,19 +9,22 @@ const Diagram = ({ data }) => {
    setDiagramData(data);
  }, [data]);

-    const maxValue = Math.max(...diagramData.map(item => item.value));
+  const maxValue = Math.max(...diagramData.map((item) => item.value));

  return (
    <div className="diagram-container">
      <h2>Prix total par an</h2>
      {diagramData.map(({ name, value }) => {
-                // Appliquer l'échelle logarithmique à la valeur
-                const scaledValue = Math.log(value + 1); // Ajouter 1 pour éviter le logarithme de zéro
+        // Appliquer l'<EFBFBD>chelle logarithmique <EFBFBD> la valeur
+        const scaledValue = Math.log(value + 1); // Ajouter 1 pour <EFBFBD>viter le logarithme de z<EFBFBD>ro
        const scaledMaxValue = Math.log(maxValue + 1);
        return (
          <div key={name} className="row-container">
            <div className="label">{name}</div>
-                        <div className="row" style={{ width: `${(scaledValue / scaledMaxValue) * 100}%` }}>
+            <div
+              className="row"
+              style={{ width: `${(scaledValue / scaledMaxValue) * 100}%` }}
+            >
              <div className="value">{value}</div>
            </div>
          </div>
--- a/src/components/form/formCreateItem.jsx
+++ b/src/components/form/formCreateItem.jsx
@ -1,11 +1,12 @@
 import React, { useState, useEffect } from "react";
-import { Form, Input, InputNumber, Button, Select } from "antd";
+import { Form, Input, InputNumber, Button, Select, DatePicker } from "antd";
 import axios from "axios";

 const { TextArea } = Input;
 const { Option } = Select;
+const dateFormat = "YYYY-MM-DD";

-export const FormCreateItem = () => {
+export const FormCreateItem = ({ onClose }) => {
  const [form] = Form.useForm();
  const [rooms, setRooms] = useState([]);

@ -31,6 +32,8 @@ export const FormCreateItem = () => {
        values,
      );
      console.log(response.data);
+      // Fermer la fenêtre modale après soumission réussie
+      onClose();
    } catch (error) {
      console.error(error);
    }
@ -58,7 +61,7 @@ export const FormCreateItem = () => {
        <InputNumber />
      </Form.Item>
      <Form.Item label="Purchase Date" name="purchaseDate">
-        <Input />
+        <DatePicker format={dateFormat} />
      </Form.Item>
      <Form.Item label="Description" name="description">
        <TextArea rows={4} />
--- a/src/components/form/formUpdateItem.jsx
+++ b/src/components/form/formUpdateItem.jsx
@ -3,14 +3,27 @@ import { Form, Input, InputNumber, Button, Select, DatePicker } from "antd";
 import axios from "axios";
 import { getRooms } from "../../api/room";
 import { getItem } from "../../api/item";
-import moment from 'moment';
+import moment from "moment";

 const { Option } = Select;

-
 function formatItem(itemObj) {
-    const {_id,brand,model,room,price,purchaseDate,description,categories,createdAt,updatedAt,__v,link} = itemObj
-    const formattedPurchaseDate = typeof purchaseDate === 'string' ? new Date(purchaseDate) : purchaseDate;
+  const {
+    _id,
+    brand,
+    model,
+    room,
+    price,
+    purchaseDate,
+    description,
+    categories,
+    createdAt,
+    updatedAt,
+    __v,
+    link,
+  } = itemObj;
+  const formattedPurchaseDate =
+    typeof purchaseDate === "string" ? new Date(purchaseDate) : purchaseDate;

  return {
    _id,
@ -24,14 +37,14 @@ function formatItem(itemObj) {
    createdAt,
    updatedAt,
    __v,
-        link
+    link,
  };
 }

-export const FormUpdateItem = ({ itemId }) => {
+export const FormUpdateItem = ({ itemId, onClose }) => {
  const [form] = Form.useForm();
  const [rooms, setRooms] = useState([]);
-    const [item, setItem] = useState(null)
+  const [item, setItem] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
@ -39,7 +52,7 @@ export const FormUpdateItem = ({ itemId }) => {
      setRooms(roomsResponse);

      const itemResponse = await getItem(itemId);
-            console.log(itemResponse)
+      console.log(itemResponse);
      setItem(formatItem(itemResponse));
    };

@ -62,17 +75,19 @@ export const FormUpdateItem = ({ itemId }) => {
        values,
      );
      console.log(response.data);
+      // Fermer la fenêtre modale après soumission réussie
+      onClose();
    } catch (error) {
      console.error(error);
    }
  };

-    const dateFormat = 'YYYY-MM-DD';
+  const dateFormat = "YYYY-MM-DD";
  return (
    <Form
      form={form}
      onFinish={onFinish}
-            initialValues={item} // Initialise le formulaire avec les valeurs de l'élément
+      initialValues={item} // Initialise le formulaire avec les valeurs de l'élément
    >
      <h1>Update Item</h1>
      <Form.Item label="Brand" name="brand">
@ -84,8 +99,7 @@ export const FormUpdateItem = ({ itemId }) => {
      <Form.Item label="Room" name="room">
        <Select placeholder="Select a room">
          {console.log(rooms)}
-                    {
-                        rooms.map((room) => (
+          {rooms.map((room) => (
            <Option key={room._id} value={room._id}>
              {room.name}
            </Option>
@ -96,9 +110,7 @@ export const FormUpdateItem = ({ itemId }) => {
        <InputNumber />
      </Form.Item>
      <Form.Item label="Purchase Date" name="purchaseDate">
-                <DatePicker
-                    dateFormat={dateFormat}
-                />
+        <DatePicker dateFormat={dateFormat} />
      </Form.Item>
      <Form.Item label="Description" name="description">
        <Input.TextArea rows={4} />
--- a/src/components/item/ItemBox.jsx
+++ b/src/components/item/ItemBox.jsx
@ -1,22 +1,13 @@
-import React, { useEffect, useState } from 'react';
-import '../../assets/styles/modal.css'
-import '../../assets/styles/itembox.css'
-import FormUpdateItem from '../form/formUpdateItem';
-import {Image } from '../parts/image'
-import {Description } from '../parts/description'
-import {Characteristic } from '../parts/characteristic'
-
-
-
-
-
-
-
-
+import React, { useEffect, useState } from "react";
+import "../../assets/styles/modal.css";
+import "../../assets/styles/itembox.css";
+import FormUpdateItem from "../form/formUpdateItem";
+import { Image } from "../parts/image";
+import { Description } from "../parts/description";
+import { Characteristic } from "../parts/characteristic";

 // Composant Détails du Produit
 export const ItemBox = ({ model, brand, purchaseDate, price, _id }) => {
-
  const [isModalOpen, setIsModalOpen] = useState(false);

  // Fonction pour ouvrir la fenêtre modale
@ -29,18 +20,15 @@ export const ItemBox = ({ model, brand, purchaseDate, price, _id }) => {
    setIsModalOpen(false);
  };

-
-
-
  let productname = brand + " " + model;
  let formatedPrice = price + "€";
-    let formatedDate = new Date(purchaseDate).toLocaleDateString('fr-FR');
+  let formatedDate = new Date(purchaseDate).toLocaleDateString("fr-FR");

-    let request = brand + " " + model
+  let request = brand + " " + model;

  return (
-        <div className="product-details" > 
-            <Description title={productname} >
+    <div className="product-details">
+      <Description title={productname}>
        <Image request={request} _id={_id} alt="Product" />
        <Characteristic label="Model" value={model} />
        <Characteristic label="Brand" value={brand} />
@ -53,8 +41,12 @@ export const ItemBox = ({ model, brand, purchaseDate, price, _id }) => {
      {isModalOpen && (
        <div className="modal">
          <div className="modal-content">
-                        <span className="close" onClick={closeModal}>&times;</span>
-                        <FormUpdateItem itemId={_id}>{console.log("item ID :" + _id)}</FormUpdateItem>
+            <span className="close" onClick={closeModal}>
+              &times;
+            </span>
+            <FormUpdateItem itemId={_id}>
+              {console.log("item ID :" + _id)}
+            </FormUpdateItem>
          </div>
        </div>
      )}
--- a/src/components/item/ItemPage.jsx
+++ b/src/components/item/ItemPage.jsx
@ -1,18 +1,16 @@
 import React, { useState, useEffect } from "react";
-import axios from 'axios'; // Assurez-vous que le chemin d'importation soit correct
-import { ItemBox } from './ItemBox';
-import { Space, DatePicker, Row, Col, Select, Input, InputNumber } from 'antd';
-import '../../assets/styles/item-page.css'
-
-
+import axios from "axios";
+import { ItemBox } from "./ItemBox";
+import { DatePicker, Row, Col, Select, Input, InputNumber } from "antd";
+import "../../assets/styles/item-page.css";
+import FormCreateItem from "../form/formCreateItem";

 const { RangePicker } = DatePicker;
 const { Option } = Select;

-const itemsPerPage = 8; // Nombre total d'items par page
-const itemsPerRow = 4; // Nombre d'items par rangée
+const itemsPerPage = 8;
+const itemsPerRow = 4;

-// Fonction pour diviser le tableau d'items en rangées
 const chunkArray = (arr, size) => {
  const chunkedArr = [];
  for (let i = 0; i < arr.length; i += size) {
@ -21,18 +19,17 @@ const chunkArray = (arr, size) => {
  return chunkedArr;
 };

-// Composant d'affichage de la page
 export const ItemPage = () => {
  const [items, setItems] = useState([]);
-  const [filteredItems, setFilteredItems] = useState([]); // State pour les items filtrés
+  const [filteredItems, setFilteredItems] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
-  const [filterName, setFilterName] = useState('');
-  const [filterPriceMin, setFilterPriceMin] = useState('');
-  const [filterPriceMax, setFilterPriceMax] = useState('');
+  const [filterName, setFilterName] = useState("");
+  const [filterPriceMin, setFilterPriceMin] = useState("");
+  const [filterPriceMax, setFilterPriceMax] = useState("");
  const [filterDateRange, setFilterDateRange] = useState([]);
-  const [selectedRoom, setSelectedRoom] = useState('all'); // State pour la chambre sélectionnée
-
-  const [rooms, setRooms] = useState([]); // State pour stocker les chambres
+  const [selectedRoom, setSelectedRoom] = useState("all");
+  const [rooms, setRooms] = useState([]);
+  const [isCreateItemModalOpen, setIsCreateItemModalOpen] = useState(false);

  useEffect(() => {
    const fetchItems = async () => {
@ -40,20 +37,8 @@ export const ItemPage = () => {
        const response = await axios.get(
          `${import.meta.env.VITE_API_URL}/item`,
        );
-          
-          //await response.data.forEach(async (item) => {
-          //    let cacheUrl = localStorage.getItem(item._id);
-          //    if (cacheUrl == null || cacheUrl == "") {
-          //        let request = item.brand + " " + item.model
-          //        cacheUrl = await searchAndResizeImage(request)
-          //        await localStorage.setItem(item._id, cacheUrl)
-          //        console.log("mise en cache   "+ item.imageUrl)
-          //    }
-          //    item.imageUrl = cacheUrl;
-          //})  
        setItems(response.data);
-      }
-      catch (error) {
+      } catch (error) {
        console.error(error);
      }
    };
@ -74,77 +59,82 @@ export const ItemPage = () => {
  }, []);

  useEffect(() => {
-    // Filtrer les éléments chaque fois que les filtres ou la chambre sélectionnée changent
-    const filtered = items.filter(item => {
-      // Filtrer par chambre si une chambre est sélectionnée
-      const matchesRoom = selectedRoom === 'all' || item.room === selectedRoom;
-      // Filtrer par nom (brand ou model)
-      const matchesName = item.brand.toLowerCase().includes(filterName.toLowerCase()) ||
+    const filtered = items.filter((item) => {
+      const matchesRoom = selectedRoom === "all" || item.room === selectedRoom;
+      const matchesName =
+        item.brand.toLowerCase().includes(filterName.toLowerCase()) ||
        item.model.toLowerCase().includes(filterName.toLowerCase());
-      // Filtrer par prix
      const matchesPrice =
-        (filterPriceMin === '' || item.price >= parseFloat(filterPriceMin)) &&
-        (filterPriceMax === '' || item.price <= parseFloat(filterPriceMax));
-      // Filtrer par date
-      const matchesDate = filterDateRange.length === 0 || (
-        new Date(item.purchaseDate) >= filterDateRange[0] &&
-        new Date(item.purchaseDate) <= filterDateRange[1]
-      );
+        (filterPriceMin === "" || item.price >= parseFloat(filterPriceMin)) &&
+        (filterPriceMax === "" || item.price <= parseFloat(filterPriceMax));
+      const matchesDate =
+        filterDateRange.length === 0 ||
+        (new Date(item.purchaseDate) >= filterDateRange[0] &&
+          new Date(item.purchaseDate) <= filterDateRange[1]);
      return matchesRoom && matchesName && matchesPrice && matchesDate;
    });
    setFilteredItems(filtered);
-  }, [items, selectedRoom, filterName, filterPriceMin, filterPriceMax, filterDateRange]);
+  }, [
+    items,
+    selectedRoom,
+    filterName,
+    filterPriceMin,
+    filterPriceMax,
+    filterDateRange,
+  ]);

  const handleNextPage = () => {
-    setCurrentPage(prevPage => prevPage + 1);
+    setCurrentPage((prevPage) => prevPage + 1);
  };

  const handlePrevPage = () => {
-    setCurrentPage(prevPage => prevPage - 1);
+    setCurrentPage((prevPage) => prevPage - 1);
  };

  const handleRoomChange = (value) => {
    setSelectedRoom(value);
  };

+  const handleCloseModal = () => {
+    setIsCreateItemModalOpen(false);
+  };
+
  const chunkedItems = chunkArray(filteredItems, itemsPerRow);
  const startIndex = (currentPage - 1) * (itemsPerPage / itemsPerRow);
-  const endIndex = startIndex + (itemsPerPage / itemsPerRow);
+  const endIndex = startIndex + itemsPerPage / itemsPerRow;
  const rowsToDisplay = chunkedItems.slice(startIndex, endIndex);

  return (
    <div className="item-container">
-          <div className="filters">
-              <div className="filter-group">
-                  <label htmlFor="roomSelect">Chambre :</label>
-                  <Select id="roomSelect" defaultValue="all" style={{ width: 120 }} onChange={handleRoomChange}>
-                      <Option value="all">Toutes</Option>
-                      {rooms.map(room => (
-                          <Option key={room._id} value={room._id}>{room.name}</Option>
-                      ))}
-                  </Select>
-              </div>
-              <div className="filter-group">
-                  <label htmlFor="nameInput">Recherche par nom :</label>
-                  <Input id="nameInput" placeholder="Recherche par nom" value={filterName} onChange={e => setFilterName(e.target.value)} />
-              </div>
-              <div className="filter-group">
-                  <label>Prix :</label>
-                  <InputNumber placeholder="Prix min" value={filterPriceMin} onChange={value => setFilterPriceMin(value)} />
-                  <span> - </span>
-                  <InputNumber placeholder="Prix max" value={filterPriceMax} onChange={value => setFilterPriceMax(value)} />
-              </div>
-              <div className="filter-group">
-                  <label>Date d'achat :</label>
-                  <RangePicker format="YYYY-MM-DD" onChange={dates => setFilterDateRange(dates)} value={filterDateRange} />
+      <div className="filters">{/* Filters here */}</div>
+
+      {/* Button to open create item modal */}
+      <button onClick={() => setIsCreateItemModalOpen(true)}>
+        Create Item
+      </button>
+
+      {/* Create item form modal */}
+      {isCreateItemModalOpen && (
+        <div className="modal">
+          <div className="modal-content">
+            <span className="close" onClick={handleCloseModal}>
+              &times;
+            </span>
+            <FormCreateItem onClose={handleCloseModal} />
          </div>
        </div>
+      )}
+
      <div className="item-list">
        <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
          {rowsToDisplay.map((row, rowIndex) => (
            <React.Fragment key={rowIndex}>
-                          {row.map(item => (
-                              <Col className="gutter-row" span={24 / itemsPerRow} key={item._id}>
+              {row.map((item) => (
+                <Col
+                  className="gutter-row"
+                  span={24 / itemsPerRow}
+                  key={item._id}
+                >
                  <ItemBox {...item} />
                </Col>
              ))}
@ -152,14 +142,19 @@ export const ItemPage = () => {
          ))}
        </Row>
      </div>
+
      <div className="pagination">
-              <button onClick={handlePrevPage} disabled={currentPage === 1}>Précédente</button>
+        <button onClick={handlePrevPage} disabled={currentPage === 1}>
+          Previous
+        </button>
        <span>Page {currentPage}</span>
-              <button onClick={handleNextPage} disabled={endIndex >= chunkedItems.length}>Suivante</button>
+        <button
+          onClick={handleNextPage}
+          disabled={endIndex >= chunkedItems.length}
+        >
+          Next
+        </button>
      </div>
    </div>
  );
 };
-
-
-
--- a/src/components/nav/Navbar.jsx
+++ b/src/components/nav/Navbar.jsx
@ -1,9 +1,9 @@
 import React, { useState, useEffect } from "react";
 import { Menu } from "antd";
-import { HomeOutlined } from "@ant-design/icons"
+import { HomeOutlined } from "@ant-design/icons";
 import { Home } from "../../pages";
 import { getRooms } from "../../api/room";
-import { isLoggedIn } from "../../api/authentication"
+import { isLoggedIn } from "../../api/authentication";
 import { Items } from "../../pages/items";
 import { Link } from "react-router-dom";

@ -15,10 +15,12 @@ function getItem(key, label) {
  //    label,
  //    link,
  //};
-    var item = <Menu.Item key={key}>
+  var item = (
+    <Menu.Item key={key}>
      <Link to="/test">{label}</Link>
-    </Menu.Item >
-    return item
+    </Menu.Item>
+  );
+  return item;
 }

 const { SubMenu } = Menu;
@ -29,32 +31,29 @@ const Navbar = () => {
  const [rooms, setRooms] = useState([]);

  useEffect(() => {
-        console.log("NAVBAR EFFECT")
+    console.log("NAVBAR EFFECT");
    isLoggedIn().then((user) => {
      if (user !== "Unauthorized") {
        getRooms().then((result) => {
          setRooms(result);
-                })
+        });
      }
-        })
+    });
  }, []);

-
  const items = [
    <Menu.Item key="0">
      <Link to="/logout">Login / Logout</Link>
    </Menu.Item>,
-        <Menu.Item key="1" >
+    <Menu.Item key="1">
      <Link to="/home">Menu Principal</Link>
    </Menu.Item>,
-        <Menu.Item key="2" >
+    <Menu.Item key="2">
      <Link to="/items">Tous les articles</Link>
    </Menu.Item>,
-        <Menu.Item key="3" >
+    <Menu.Item key="3">
      <Link to="/rooms">Voir les chambres</Link>
    </Menu.Item>,
-
-
  ];

  // Rendu du composant Navbar
@ -67,11 +66,10 @@ const Navbar = () => {
        mode="inline"
      >
        {items}
-
      </Menu>
    );
  } catch (error) {
-        console.log(error.stack)
+    console.log(error.stack);
  }
 };
 export default Navbar;
--- a/src/components/parts/characteristic.jsx
+++ b/src/components/parts/characteristic.jsx
@ -1,8 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";

-// Composant Caractéristique
+// Composant Caract<EFBFBD>ristique
 export const Characteristic = ({ label, value }) => {
-
  return (
    <div className="characteristic">
      <strong>{label}:</strong> {value}
--- a/src/components/parts/description.jsx
+++ b/src/components/parts/description.jsx
@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";

 // Composant Description
 export const Description = ({ title, children }) => {
--- a/src/components/rooms/room-detail.jsx
+++ b/src/components/rooms/room-detail.jsx
@ -1,23 +1,27 @@
-import React, { useEffect, useState } from 'react';
-import { FormCreateRoom } from '../../components/form/formCreateRoom';
+import React, { useEffect, useState } from "react";
+import { FormCreateRoom } from "../../components/form/formCreateRoom";
 //import { RoomUpdateForm } from './RoomUpdateForm';

-export const RoomDetail = ({ selectedRoom, onCreateFormSubmit, onUpdateFormSubmit, onBack }) => {
+export const RoomDetail = ({
+  selectedRoom,
+  onCreateFormSubmit,
+  onUpdateFormSubmit,
+  onBack,
+}) => {
  const [isUpdateFormVisible, setIsUpdateFormVisible] = useState(false);

  useEffect(() => {
    if (selectedRoom) {
-            setIsUpdateFormVisible(true)
+      setIsUpdateFormVisible(true);
    }
  }, [selectedRoom]);

-
-    // Afficher le formulaire de mise à jour lorsqu'une chambre est sélectionnée
+  // Afficher le formulaire de mise <EFBFBD> jour lorsqu'une chambre est s<EFBFBD>lectionn<EFBFBD>e
  const handleRoomClick = () => {
    setIsUpdateFormVisible(true);
  };

-    // Afficher le formulaire de création lorsqu'on revient en arrière
+  // Afficher le formulaire de cr<EFBFBD>ation lorsqu'on revient en arri<EFBFBD>re
  const handleBackClick = () => {
    setIsUpdateFormVisible(false);
    onBack(null);
@ -25,21 +29,18 @@ export const RoomDetail = ({ selectedRoom, onCreateFormSubmit, onUpdateFormSubmi

  return (
    <div className="room-detail">
-            {isUpdateFormVisible
-                ? (
+      {isUpdateFormVisible ? (
        <div>
          <h2>Modifier une chambre</h2>

          <FormCreateRoom onSubmit={onCreateFormSubmit} />
        </div>
-                )
-                : (
+      ) : (
        <div>
          <h2>Ajouter une chambre</h2>
          <FormCreateRoom onSubmit={onCreateFormSubmit} />
        </div>
-                )
-            }
+      )}
    </div>
  );
 };
--- a/src/components/rooms/room-list.jsx
+++ b/src/components/rooms/room-list.jsx
@ -1,10 +1,9 @@
 import React, { useState, useEffect } from "react";
-import '../../assets/styles/room-list.css'
-import { RoomBox } from '../../components/rooms/roomBox'
+import "../../assets/styles/room-list.css";
+import { RoomBox } from "../../components/rooms/roomBox";
 import { formatRoomStats } from "../../api/room";

-
-// Fonction pour diviser le tableau d'items en rangées
+// Fonction pour diviser le tableau d'items en rang<EFBFBD>es
 const chunkArray = (arr, size) => {
  const chunkedArr = [];
  for (let i = 0; i < arr.length; i += size) {
@ -16,17 +15,16 @@ const chunkArray = (arr, size) => {
 // Composant d'affichage de la page
 export const RoomList = ({ statsParam, onRoomClick }) => {
  const [rooms, setRooms] = useState([]);
-    const [selectedRoom, setSelectedRoom] = useState('all');
+  const [selectedRoom, setSelectedRoom] = useState("all");

  useEffect(() => {
    if (statsParam.rooms) {
-            console.log(statsParam.rooms)
-            let formatedStats = formatRoomStats(statsParam)
-            setRooms(formatedStats.rooms)
+      console.log(statsParam.rooms);
+      let formatedStats = formatRoomStats(statsParam);
+      setRooms(formatedStats.rooms);
    }
  }, [statsParam]);

-
  const handleRoomClick = (roomId) => {
    onRoomClick(roomId);
  };
@ -35,11 +33,11 @@ export const RoomList = ({ statsParam, onRoomClick }) => {
    <div>
      <h2>Liste des chambres</h2>
      <div className="list-container">
-                {rooms && rooms.map((room) => (
+        {rooms &&
+          rooms.map((room) => (
            <RoomBox room={room} key={room._id} onRoomClick={handleRoomClick} />
          ))}
      </div>
    </div>
-
  );
 };
--- a/src/components/rooms/roomBox.jsx
+++ b/src/components/rooms/roomBox.jsx
@ -1,10 +1,9 @@
-import React from 'react';
-import '../../assets/styles/room-list.css';
-import { Description } from '../parts/description';
-import { Characteristic } from '../parts/characteristic';
+import React from "react";
+import "../../assets/styles/room-list.css";
+import { Description } from "../parts/description";
+import { Characteristic } from "../parts/characteristic";

 export const RoomBox = ({ room, onRoomClick }) => {
-
  const handleBoxClick = () => {
    onRoomClick(room._id);
  };
@ -12,7 +11,10 @@ export const RoomBox = ({ room, onRoomClick }) => {
  return (
    <div className="room-details" onClick={handleBoxClick}>
      <Description title={room?.name}>
-                <Characteristic label="Nombre d'articles" value={room?.items_count || "N/A"} />
+        <Characteristic
+          label="Nombre d'articles"
+          value={room?.items_count || "N/A"}
+        />
        <Characteristic label="Prix total" value={room?.room_price || "N/A"} />
      </Description>
    </div>
--- a/src/pages/rooms.jsx
+++ b/src/pages/rooms.jsx
@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react';
-import '../assets/styles/room-page.css'
+import React, { useEffect, useState } from "react";
+import "../assets/styles/room-page.css";

 import { useAuth } from "../hooks";
 import { getRoomStats } from "../api/room";
-import { usePageTitle } from '../hooks/page-title-context';
-import RoomStats from '../components/rooms/room-stats';
-import { RoomList } from '../components/rooms/room-list';
-import { RoomDetail } from '../components/rooms/room-detail';
+import { usePageTitle } from "../hooks/page-title-context";
+import RoomStats from "../components/rooms/room-stats";
+import { RoomList } from "../components/rooms/room-list";
+import { RoomDetail } from "../components/rooms/room-detail";

 export const Rooms = () => {
  const { user } = useAuth();
@ -14,12 +14,10 @@ export const Rooms = () => {
  const [stats, setStats] = useState({});
  const [selectedRoom, setSelectedRoom] = useState();

-
  useEffect(() => {
    setPageTitle("Toutes les rooms :");
  }, [setPageTitle]);

-
  useEffect(() => {
    const fetchData = async () => {
      const roomsStatsResponse = await getRoomStats();
@ -30,7 +28,7 @@ export const Rooms = () => {
  }, []);

  const handleRoomClick = (roomId) => {
-        console.log('Clicked room ID:', roomId);
+    console.log("Clicked room ID:", roomId);
    setSelectedRoom(roomId);
  };

@ -39,14 +37,16 @@ export const Rooms = () => {
      <div className="topContainer">
        <div className="statsContainer">
          <RoomStats statsParam={stats} />
-
        </div>
        <div className="listContainer">
          <RoomList statsParam={stats} onRoomClick={handleRoomClick}></RoomList>
        </div>
      </div>
      <div className="detailContainer">
-              <RoomDetail selectedRoom={selectedRoom} onBack={handleRoomClick}></RoomDetail>
+        <RoomDetail
+          selectedRoom={selectedRoom}
+          onBack={handleRoomClick}
+        ></RoomDetail>
      </div>
    </div>
  );
Author	SHA1	Message	Date
Victor	4cf9069bf2	premier commit final	2024-05-13 00:33:13 +02:00
Victor	2868efcda4	fix jsp pein de truc en vrais	2024-05-13 00:13:34 +02:00